ed<template>
  <div>
    <el-button :disabled="data.status !=='新建'" type="primary" size="mini" @click="onShow(drawer = true)">编 辑</el-button>
    <el-drawer
    title="编辑物流单"
    :visible.sync="drawer"
    direction="rtl"
    size="80%"
    append-to-body
    @close="onClose">
    <div class="drawer__panel">
      <p class="normal-title normal-margin">基础信息</p>
      <el-form :inline="true" :model="form" class="demo-form-inline" size="small" v-if="drawer">
        <el-form-item label="企业名称">
          <enterprise ref="ent" @rowClick="entRowClick"></enterprise>
        </el-form-item>
        <el-form-item label="物流公司">
          <!-- <el-input v-model="form.logic" placeholder="物流公司"></el-input> -->
          <logisticcom :ID="true" ref="logis" @logisticRowClick="logisticRowClick"></logisticcom>
        </el-form-item>
        <el-form-item label="物流单号">
          <el-input v-model="form.logisticno" placeholder="物流单号"></el-input>
        </el-form-item>
        <el-form-item label="寄付方式">
          <el-select v-model="form.paytype" placeholder="请选择">
            <el-option
              label="到付"
              value="到付">
            </el-option>
            <el-option
              label="寄付"
              value="寄付">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model.number="form.carnum" placeholder="车牌号"></el-input>
        </el-form-item>
        <el-form-item label="物流联系人">
          <el-input v-model.number="form.logiscontact" placeholder="物流联系人"></el-input>
        </el-form-item>
        <el-form-item label="物流电话">
          <el-input v-model.number="form.logisphone" placeholder="物流电话"></el-input>
        </el-form-item>
        <el-form-item label="运费">
          <el-input v-model.number="form.freightamount" placeholder="运费"></el-input>
        </el-form-item>
        <el-form-item label="单据日期">
          <el-date-picker
            v-model="form.billdate"
            type="date"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            placeholder="单据日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model.number="form.remarks" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <div class="mt-10">
        <div class="normal-margin">
          <p class="normal-title inline-16">添加发货单</p>
          <el-button type="text" size="mini" @click="addMoreBill">{{setcol === 12?'关闭选择':'添加发货单'}}</el-button>
        </div>
        <el-row :gutter="10">
          <el-col :span="setcol">
            <dispatch-table type="edit" :needQuery="true" ref="dislist"></dispatch-table>
          </el-col>
          <el-col :span="24 - setcol">
            <add-disbill ref="addbill" :data="enterpriseInfo" @onConfirm="onConfirm"></add-disbill>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="fixed__btn__panel">
      <el-button size="small" @click="drawer = false" class="normal-btn-width">取 消</el-button>
      <el-button size="small" type="primary" @click="onSubmit" class="normal-btn-width">确定</el-button>
    </div>
    </el-drawer>
    <!-- <el-dialog append-to-body title="选择收货地址" :visible.sync="dialogAddress">
      <p style="color:red" class="mt-10">存在多个收货地址，请选择正确收货地址！</p>
      <el-table :data="rec_address">
        <el-table-column property="name" label="收货人" width="150"></el-table-column>
        <el-table-column property="phonenumber" label="联系电话" width="200"></el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            {{scope.row.province}}{{scope.row.city}}{{scope.row.county}}{{scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="text" @click="selectAddress(scope.row)" size="small">选 择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog> -->
  </div>
</template>
<script>
import dispatchTable from './dispatchTable.vue'
import enterprise from './enterprise'
import logisticcom from '@/template/selectLogisticcom/index.vue'
import addDisbill from '@/template/logisyticCanUseDisBill/index.vue'
export default {
  props:['data'],
  components:{
    dispatchTable,
    enterprise,
    addDisbill,
    logisticcom
  },
  data () {
    return {
      drawer:false,
      visible:false,
      setcol:24,
      form:{
       "freightamount": "",
        "logisticno": "",
        "paytype": "",
        "remarks": "",
        "sa_dispatchids": [],
        "sa_logiscompid": 0,
        "sa_logisticsid": 0,
        "sys_enterpriseid": '',
        "carnum":"",
        "logisphone":"",
        "logiscontact":"",
        "rec_contactsid":'',
        billdate:''
      },
      enterpriseInfo:null,
       pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 3600 * 1000;
        }
      }
    }
  },
  methods:{
    onShow () {
      this.form = Object.assign({},this.form,this.data)
      this.enterpriseInfo = this.data
      this.$nextTick(()=>{
        this.$refs['ent'].form.enterprisename = this.data.enterprisename
        this.$refs['logis'].form.abbreviation = this.data.logiscomp_enterprisename
      })
     
    },
    addMoreBill () {
      if (this.enterpriseInfo === null) return this.$message({
        message:'请先选择企业信息',
        type:'error'
      })
      this.setcol === 12?this.setcol = 24 : this.setcol = 12
      this.$refs['addbill'].listData()
    },
    entRowClick (row) {
      this.enterpriseInfo = row
      this.form.sys_enterpriseid = row.sys_enterpriseid
    },
    logisticRowClick (row) {
      console.log(row)
      this.form.sa_logiscompid = row.sa_logiscompid
    },
    onConfirm (data) {
       function unique(arr, uniId){
        const res = new Map();
        return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
      }
      this.$refs['dislist'].tableData = unique([...this.$refs['dislist'].tableData,...data],'billno')
      this.form.remarks = this.$refs['dislist'].tableData[0].remarks

    },
    async onSubmit () {
      this.form.sa_dispatchids = this.$refs['dislist'].tableData.map(e=>{
        return e.sa_dispatchid
      })
      const res = await this.$api.requested({
        "id": "202212004124804",
        "content": this.form
      })
      this.tool.showMessage(res,()=>{
        this.drawer = false
        this.$emit('onSuccess')
        this.form = {}
      })
    },
    onClose () {
      this.$refs['ent'].form = this.$refs['logis'].form = {}
      this.$emit('onSuccess')
    }
  }
}
</script>