<template>
  <div class="EditDetail">
    <a-spin style="width:100%;min-height:200px;" :spinning="!isReady">
      <!-- <div class="btngroup"></div> -->
      <!-- 
      <a-card title="选择货主和仓库" style="width: 100%;margin-bottom:20px">
        <p-grid-form ref="CargoownerWH" :items="custom" />
      </a-card> -->

      <div style="background:#fff">
        <a-card style="width: 100%">
          <div slot="title">
            <div class="heads">
              <p-button style="float:left" type="link" @click="toBack"><p-icon type="arrow-left" /> </p-button>
              <!-- <p-button  @click="toBack">返回</p-button> -->
              <span style="margin-left:10px">新增仓客户关系</span>
            </div>
          </div>
          <div slot="extra">
            <p-button style="float:right" type="primary" @click="submitbtn">保存</p-button>
          </div>
          <!-- <div slot="extra">
                  <p-button @click="createrowHealthScope">新增</p-button>
                  <p-button @click="delHealthScope">删除</p-button>
                </div> -->
          <p-grid-form ref="CargoownerWH" :items="custom" />
          <!-- <a-divider /> -->
          <a-divider orientation="left">关联客户</a-divider>
          <p-grid-form ref="ConditionCustomForm" :items="ConditionCustom" />
          <a-divider />
          <p-table
            rowKey="customerId"
            :autoLoad="false"
            :columns="HealthScopecolumns"
            :selectedRowKeys.sync="HealthScopelList"
            :data-source.sync="HealthScopedata"
            :bordered="true"
            :filterDropdownColum="false"
            :colorTransformRow="false"
            :remoteUrl="tableRemoteUrl"
            :remoteData="remoteParams"
            ref="unpage"
          >
            <!-- <div slot="operator">
              aaaa
            </div> -->
          </p-table>
        </a-card>
      </div>
    </a-spin>
  </div>
</template>

<script>
import pick from 'lodash.pick'
import custom from './config/custom'
import ConditionCustom from './config/ConditionCustom'
// ConditionCustom
import TableEdit from './tableedit'
// import API from './api/cargoowner'
import API from './api/api'

export default {
  name: 'edit-detail',
  props: {
    data: {
      type: Array,
      default: null,
      active: ''
    },
    detailItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      cargoOwner: {},
      warehouse: {},
      isShowModal: false,
      tableRemoteUrl: API.unpage,
      remoteParams: {},
      isReady: true,
      required: false,
      HealthScopelList: [],
      HealthLicenseList: [],
      ConditionCustom: ConditionCustom(this),
      custom: custom.custom(this), //货主资料gridform配置
      // Healthcustom: custom.Healthcustom, //Health 业务范围 三证合一配置
      HealthScopecolumns: custom.HealthScopecolumns, //经营范围字段
      HealthLicensecolumns: custom.HealthLicensecolumns, //证件资料字段
      HealthScopedata: [], //经营范围数据
      HealthLicensedata: [], //证件资料
      tabs: ['医药', '制造', '商贸', '拓展'],
      cargoownerinfo: {}, //货主详细信息
      info: {},
      list: [],
      type: '',
      key: 'tab1',
      noTitleKey: 'app'
    }
  },

  components: {
    TableEdit
  },
  mounted() {
    // this.setvalue()
    this.setgridform()
  },

  methods: {
    setgridform() {
      console.log(this.detailItem)
      const { cargoOwner, warehouse } = this.detailItem
      this.cargoOwner = cargoOwner
      this.warehouse = warehouse
      console.log(cargoOwner, warehouse)
      this.$refs.CargoownerWH.form.setFieldsValue({
        cargoOwnerName: cargoOwner.cargoOwnerName,
        warehouseName: warehouse.warehouseName
      })
      if (Object.keys(cargoOwner).length > 0 && Object.keys(warehouse).length > 0) {
        console.log('货主和仓库有值')
        this.remoteParams = {
          cargoOwnerId: cargoOwner.cargoOwnerId,
          warehouseId: warehouse.warehouseId
        }
      } else {
        console.log('货主和仓库无值')
      }
    },
    toBack() {
      this.$emit('changeStep', { step: 1, item: null })
    },
    //获取仓库和货主数据
    getCargoownerWH() {
      this.$refs.CargoownerWH.form.validateFields((err, value) => {
        if (!err) {
          // this.required = true
          console.log(value)
          return value
        }
      })
    },
    //获取未关联客户数据
    unpage() {
      console.log(this.HealthScopelList)
    },
    async submitbtn() {
      let that = this
      let aaa = this.getCargoownerWH()
      // console.log(this.HealthScopelList)
      let list = this.HealthScopelList
      let data = this.HealthScopedata
      // console.log(data)
      if (list.length > 0) {
        this.$confirm({
          content: this.$lang('是否保存'),
          onOk: async () => {
            let a = []
            // console.log(data)
            let s = data.filter(item => {
              return list.some(item1 => item1 === item.customerId)
            })
            console.log(s)
            // let p = []
            // console.log(aaa)
            // that.warehouse
            console.log(that.warehouse, that.cargoOwner)
            s.forEach(item => {
              item.customerAssistantCode = item.customerKeywords
              item.warehouseId = that.warehouse.warehouseId
              item.cargoOwnerId = that.cargoOwner.cargoOwnerId
            })
            console.log(s)
            let res = await API.batchAdd(s)
            console.log(res)
            if (res.success) {
              this.$message.success('保存客户关系成功')
              this.toBack()
            } else {
              this.$message.error(res.message)
            }
          }
        })
      }
      // let content
      // if (this.type === '新增') {
      //   this.getaddinfo()
      //   content = '是否提交新增?'
      // } else {
      //   this.getupdateinfo()
      //   content = '是否提交修改?'
      // }
      // if (this.required) {
      //   this.$confirm({
      //     content: this.$lang(content),
      //     onOk: () => {
      //       return this.submit()
      //     }
      //   })
      // }
    }
  }
}
</script>

<style lang="less">
.EditDetail {
  .heads {
    // padding: 12px 20px 12px 10px;
    background: #fff;
    // border-bottom: 1px solid #e9e9e9;
  }
  .btngroup {
    width: 100%;
    height: 40px;
  }
  .tabs {
    min-height: 300px;
  }
  .table-operator {
    color: #2b80ff;
    cursor: pointer;
  }
  .table-operator:hover {
    text-decoration: underline;
  }
}
</style>
