<template>
  <ele-modal custom-class="ele-dialog-form long-dialog-form"
             :centered="true" v-if="visible" :visible.sync="visible" :title="title"
             :close-on-click-modal="false" width="70%" @close="cancel">

    <el-tabs v-model="activeName" type="card" @tab-click="handleActive">
      <el-tab-pane label="基本信息" name="base">
        <headerTitle title="基本信息" style="margin-top: 30px"></headerTitle>
        <el-form label-width="120px" ref="form" :model="form" :rules="rules" class="el-form-box">
          <el-row>
            <el-col :span="8">
              <el-form-item label="供应商分类" prop="categoryId">
                <ele-tree-select multiple
                                 filterable
                                 :checkStrictly="true" :data="categoryTreeList" v-model="categoryIdList" valueKey="id"
                                 labelKey="name"
                                 placeholder="请选择" default-expand-all/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商名称" prop="name">
                <el-input placeholder="请输入" v-model="form.name" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商代号" prop="serialNo">
                <el-input placeholder="请输入" v-model="form.serialNo" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="供应商简称" prop="simpleName">
                <el-input placeholder="请输入" v-model="form.simpleName" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法定代表人" prop="legalPerson">
                <el-input
                  placeholder="请输入"
                  v-model="form.legalPerson"
                  maxlength="50"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册资金" prop="registeredCapital">
                <el-input
                  placeholder="请输入"
                  v-model="form.registeredCapital"
                  maxlength="50"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="授信额度" prop="authorizationLimit">
                <el-input placeholder="请输入" v-model="form.authorizationLimit" maxlength="17"
                          oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="单位电话" prop="phone">
                <el-input placeholder="请输入" v-model="form.phone" maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地址" prop="addressId">
                <el-cascader clearable v-model="form.addressId" filterable :options="options.cityData" ref="address"
                             style="width: 100%"></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="详细地址" prop="address">
                <el-input placeholder="请输入" v-model="form.address" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="统一社会信用代码	" prop="unifiedSocialCreditCode" class="form_item_label">
                <el-input placeholder="请输入" v-model="form.unifiedSocialCreditCode" maxlength="18"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行业" prop="industry">
                <el-cascader :options="options.categoryData" v-model="form.industry" style="width: 100%" ref="industry">
                </el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="营业类型" prop="companyCategoryId">
                <DictSelection dictName="营业类型" clearable v-model="form.companyCategoryId">
                </DictSelection>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="登记日期" prop="registerDate">
                <el-date-picker style="width: 100%" clearable v-model="form.registerDate" type="date"
                                value-format="yyyy-MM-dd" placeholder="请选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经营范围" prop="businessScope">
                <el-input placeholder="请输入" v-model="form.businessScope" maxlength="100"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="主营产品" prop="mainProduct">
                <el-input placeholder="请输入" v-model="form.mainProduct" maxlength="100"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="关联上级单位" prop="parentId">
                <el-input placeholder="请选择关联上级单位" v-model="form.parentName" readonly
                          @click.native="handParent"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="级别">
                <DictSelection dictName="供应商级别" clearable v-model="form.level">
                </DictSelection>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" resize="none" v-model="form.remark" :rows="2" placeholder="请输入"
                          size="small"
                          maxlength="200"></el-input>
              </el-form-item>
              <el-col :span="8">
                <el-form-item prop="businessLicenseFiles" label="营业执照附件">
                  <fileUpload v-model="form.businessLicenseFiles" module="main" :showLib="false" :limit="1"/>
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="银行信息" name="bank">
        <headerTitle title="银行信息" style="margin-top: 30px"></headerTitle>
        <ele-pro-table ref="table" :columns="bankColumns" :datasource="tableBankData" height="350px" :toolkit="[]"
                       :need-page="false">
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="addBank">添加</el-button>
          </template>
          <template v-slot:action="{ row, $index }">
            <el-link type="primary" @click="handleBankDel(row, $index)">删除</el-link>
          </template>
          <template v-slot:accountNameHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>

          <template v-slot:accountName="{ row }">
            <el-input v-model="row.accountName" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:accountNo="{ row }">
            <el-input v-model="row.accountNo" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:bankName="{ row }">
            <el-input v-model="row.bankName" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:interbankNo="{ row }">
            <el-input v-model="row.interbankNo" placeholder="请输入" maxlength="50"></el-input>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="联系人信息" name="link">
        <headerTitle title="联系人信息" style="margin-top: 30px"></headerTitle>
        <ele-pro-table ref="linkTable" :columns="linkColumns" :datasource="tableLinkData" :toolkit="[]" height="350px"
                       :need-page="false">
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="addLink">添加</el-button>
          </template>
          <template v-slot:action="{ row, $index }">
            <el-link type="primary" @click="handleLinkDel(row, $index)">删除</el-link>
          </template>
          <template v-slot:linkNameHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>
          <template v-slot:mobilePhoneHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>
          <template v-slot:statusHeader="{ column }">
            <span>{{ column.label }}</span><span style="color:red">*</span>
          </template>

          <template v-slot:linkName="{ row }">
            <el-input v-model="row.linkName" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:mobilePhone="{ row }">
            <el-input v-model="row.mobilePhone" placeholder="请输入" maxlength="20"></el-input>
          </template>


          <template v-slot:phone="{ row }">
            <el-input v-model="row.phone" placeholder="请输入" maxlength="20"></el-input>
          </template>


          <template v-slot:wechat="{ row }">
            <el-input v-model="row.wechat" placeholder="请输入" maxlength="5cls0"></el-input>
          </template>
          <template v-slot:email="{ row }">
            <el-input v-model="row.email" placeholder="请输入" maxlength="50"></el-input>
          </template>
          <template v-slot:post="{ row }">
            <el-input v-model="row.post" placeholder="请输入" maxlength="20"></el-input>
          </template>
          <template v-slot:ifChief="{ row, $index }">
            <el-select v-model="row.ifChief" placeholder="请选择" class="w100"
                       @change="((value) => { ifChiefChange(value, $index) })">
              <el-option v-for="item in ifChiefList" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </template>
          <template v-slot:status="{ row }">
            <DictSelection dictName="客户联系人状态" v-model="row.status"></DictSelection>
          </template>
          <template v-slot:remark="{ row }">
            <el-input v-model="row.remark" placeholder="请输入" maxlength="50"></el-input>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="其他信息" name="other">
        <headerTitle title="其他信息" style="margin-top: 30px"></headerTitle>
        <el-form label-width="100px" ref="otherForm" :model="otherForm" :rules="otherRules" class="el-form-box">
          <el-row>
            <el-col :span="8">
              <el-form-item label="结算方式" prop="settlementMode">
                <DictSelection dictName="结算方式" clearable @itemChange="settlementModeChange"
                               v-model="otherForm.settlementMode">
                </DictSelection>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="税率" prop="taxRate">
                <el-input v-model="otherForm.taxRate" maxlength="5" oninput="value=value.replace(/[^0-9.]/g,'')">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="折扣率" prop="discount">
                <el-input v-model="otherForm.discount" maxlength="5" oninput="value=value.replace(/[^0-9.]/g,'')">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="分管部门" prop="deptId" style="margin-bottom: 22px">
                <ele-tree-select clearable :data="groupTreeData" v-model="otherForm.deptId" valueKey="id" labelKey="name"
                  placeholder="请选择" @change="change_principalDep" default-expand-all />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="业务员" prop="salesmanId">
                <personSelect ref="directorRef" v-model="otherForm.salesmanId" @selfChange="salesmanChange"
                  :init="false" />
              </el-form-item>
            </el-col> -->

            <el-col :span="8">
              <el-form-item label="寄件人">
                <el-input placeholder="请输入" v-model="otherForm.sender" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人电话">
                <el-input placeholder="请输入" v-model="otherForm.senderPhone" maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人地址">
                <el-cascader clearable v-model="otherForm.addressId" :options="options.cityData" ref="sendAddress"
                             style="width: 100%"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="寄件人详细地址" class="form_item_label">
                <el-input placeholder="请输入" v-model="otherForm.address" maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="供货列表" name="supply">
        <headerTitle title="供货列表" style="margin-top: 30px"></headerTitle>
        <ele-pro-table ref="supplyRef" :columns="supplyColumns" :need-page="false"
                       :datasource="supplyList"
                       :toolkit="[]" height="350px">
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" @click="handSelectSupply">新增</el-button>
          </template>
          <!-- 操作栏 -->
          <template v-slot:action="scope">
            <el-popconfirm
              class="ele-action"
              title="确定要删除此产品吗？"
              @confirm="handleRemoveSupply(scope.$index)"
            >
              <template v-slot:reference>
                <el-link
                  type="danger"
                  :underline="false"
                  icon="el-icon-delete"
                >
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-tab-pane>
      <el-tab-pane label="证书资质" name="certificate">
        <headerTitle title="证书资质" style="margin-top: 30px"></headerTitle>
        <ele-pro-table ref="certificateTable" :columns="certificateColumns" :need-page="false"
                       :datasource="tableCertificateData"
                       :toolkit="[]" height="350px">
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button type="primary" v-if="form.id" @click="addCertificate('add','')">新增</el-button>
          </template>
          <!-- 操作栏 -->
          <template v-slot:action="scope">
            <el-link
              v-if="[1,2].includes(scope.row.processStatus)"
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="addCertificate('view',scope.row)">
              详情
            </el-link>
            <el-link
              v-if="[0,3].includes(scope.row.processStatus)"
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="addCertificate('update',scope.row)">
              修改
            </el-link>

            <el-link
              v-if="[0,3].includes(scope.row.processStatus)"
              type="primary"
              :underline="false"
              icon="el-icon-plus"
              @click="submit(scope.row)">
              提交
            </el-link>

            <el-popconfirm
              class="ele-action"
              title="确定要删除此资质包吗？"
              @confirm="handleRemove(scope.row)"
            >
              <template v-slot:reference>
                <el-link
                  v-if="[0,3].includes(scope.row.processStatus)"
                  type="danger"
                  :underline="false"
                  icon="el-icon-delete"
                >
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-tab-pane>

    </el-tabs>

    <div slot="footer" class="footer">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>

    <parentList ref="parentRef" :classType="2" @changeParent="changeParent"></parentList>
    <!-- 资质证书弹窗   -->
    <certificate-qualifications-dialog
      :certificate-qualifications-dialog-flag.sync="certificateQualificationsDialogFlag"
      v-if="certificateQualificationsDialogFlag"
      typeInfo="2"
      ref="certificateQualificationsDialogRef"
      :contactInfo="form"
      @reload="reload">

    </certificate-qualifications-dialog>
    <product-list
      ref="productListRef"
      :data="supplyList"
      @changeParent="getSupplyList"
    ></product-list>
  </ele-modal>
</template>

<script>
import {
  contactDetail,
  contactQcPackPageAPI,
  contactSave,
  contactUpdate,
  contactQcPackDeleteAPI, contactQcSubmit
} from '@/api/saleManage/contact';
import {categoryData} from 'element-china-category-data';
import fileUpload from '@/components/upload/fileUpload';
import {cityData} from 'ele-admin/packages/utils/regions';
import dictMixins from '@/mixins/dictMixins';
import deptSelect from '@/components/CommomSelect/dept-select.vue';
import personSelect from '@/components/CommomSelect/person-select.vue';
import {listOrganizations} from '@/api/system/organization';
import {copyObj} from '@/utils/util';
import certificateQualificationsDialog
  from "@/views/purchasingManage/supplierManage/components/certificateQualificationsDialog.vue";
import parentList from './parentList.vue'
import {reviewStatus} from "@/enum/dict";
import productList from "@/BIZComponents/product-list.vue";


export default {
  props: {
    categoryTreeList: Array,
  },
  mixins: [dictMixins],
  components: {
    productList,
    fileUpload,
    deptSelect,
    personSelect,
    parentList,
    certificateQualificationsDialog
  },
  data() {
    let formDef = {
      address: '',
      addressId: 0,
      addressName: '',
      authorizationLimit: 0,
      businessLicenseFiles: [],
      businessLicenseFile: {},
      businessScope: '',
      categoryId: '',
      level: '',
      companyCategoryId: '',
      companyCategoryName: '',
      parentId: null,
      industry: '',
      industryCode: '',
      industryFullName: '',
      mainProduct: '',
      name: '',
      officialIndustry: '',
      phone: '',
      registerDate: '',
      legalPerson: '',
      registeredCapital: '',
      remark: '',
      serialNo: '',
      simpleName: '',
      type: 2,
      unifiedSocialCreditCode: ''
    };
    let otherFormDef = {
      settlementMode: '',
      settlementModeName: '',
      taxRate: 0,
      address: '',
      addressId: '',
      deptId: '',
      deptName: '',
      discount: 0,
      salesmanId: '',
      salesmanName: '',
      sender: '',
      senderPhone: ''
    };
    return {
      visible: false,
      certificateQualificationsDialogFlag: false,
      title: '',
      row: {},
      activeName: 'base',
      formDef,
      otherFormDef,
      form: copyObj(formDef),
      otherForm: copyObj(otherFormDef),
      // removeBankList: [],
      // removeLinkList: [],
      tableBankData: [],
      tableLinkData: [],
      categoryIdList: [],
      supplyList: [],
      ifChiefList: [
        {
          value: 0,
          label: '否'
        },
        {
          value: 1,
          label: '是'
        }
      ],
      bankColumns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '单位名称',
          prop: 'accountName',
          slot: 'accountName',
          action: 'accountName',
          headerSlot: 'accountNameHeader',
          align: 'center'
        },
        {
          label: '银行账号',
          prop: 'accountNo',
          slot: 'accountNo',
          action: 'accountNo',
          align: 'center'
        },
        {
          label: '开户行',
          prop: 'bankName',
          slot: 'bankName',
          action: 'bankName',
          align: 'center'
        },
        {
          label: '银行银联号',
          prop: 'interbankNo',
          slot: 'interbankNo',
          action: 'interbankNo',
          align: 'center'
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作',
          align: 'center'
        }
      ],
      linkColumns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '姓名',
          prop: 'linkName',
          slot: 'linkName',
          action: 'linkName',
          headerSlot: 'linkNameHeader',
          align: 'center'
        },
        {
          label: '手机',
          prop: 'mobilePhone',
          slot: 'mobilePhone',
          action: 'mobilePhone',
          headerSlot: 'mobilePhoneHeader',
          align: 'center'
        },


        {
          label: '电话',
          prop: 'phone',
          slot: 'phone',
          action: 'phone',
          align: 'center'
        },

        {
          label: '微信号',
          prop: 'wechat',
          slot: 'wechat',
          action: 'wechat',
          align: 'center',
        },

        {
          label: '邮箱',
          prop: 'email',
          slot: 'email',
          action: 'email',
          align: 'center'
        },
        {
          label: '职务',
          prop: 'post',
          slot: 'post',
          action: 'post',
          align: 'center'
        },
        {
          label: '状态',
          prop: 'status',
          slot: 'status',
          action: 'status',
          headerSlot: 'statusHeader',
          align: 'center'
        },
        {
          label: '是否首要',
          prop: 'ifChief',
          slot: 'ifChief',
          action: 'ifChief',
          align: 'center'
        },
        {
          label: '备注',
          prop: 'remark',
          slot: 'remark',
          action: 'remark',
          align: 'center'
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作',
          align: 'center'
        }
      ],
      certificateColumns: [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '编码',
          prop: 'code',
          slot: 'code',
          align: "center",
          minWidth: 120
        },
        {
          label: '名称',
          prop: 'name',
          slot: 'name',
          align: "center",
          minWidth: 120
        },
        // {
        //   label: '创建人',
        //   prop: 'createUserName',
        //   slot: 'createUserName',
        //   align: "center",
        //   width: 120
        // },
        {
          label: '创建时间',
          prop: 'createTime',
          slot: 'createTime',
          align: "center",
          minWidth: 120
        },
        {
          label: '备注',
          prop: 'remark',
          slot: 'remark',
          align: "center",
          minWidth: 120
        },
        {
          label: '状态',
          prop: 'processStatus',
          slot: 'processStatus',
          align: "center",
          width: 120,
          formatter: (_row, _column, cellValue) => {
            return reviewStatus[_row.processStatus];
          }
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作',
          align: "center",
          width: 200
        }
      ],
      supplyColumns: [
        {
          columnKey: 'index',
          type: 'index',
          width: 50,
          align: 'center',
          showOverflowTooltip: true,
          label: '序号'
        },
        {
          prop: 'productCode',
          label: '编码',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'productName',
          label: '名称',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'imgCode',
          align: 'center',
          label: '图号/件号',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'produceType',
          align: 'center',
          label: '生产类型',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'approvalNumber',
          align: 'center',
          label: '批准文号',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'packingSpecification',
          align: 'center',
          label: '包装规格',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'brandNum',
          align: 'center',
          label: '牌号',
          showOverflowTooltip: true
        },
        {
          prop: 'modelType',
          label: '型号',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'specification',
          label: '规格',
          align: 'center',
          showOverflowTooltip: true
        },
        {
          prop: 'measuringUnit',
          label: '计量单位',
          showOverflowTooltip: true,
          align: 'center',
          minWidth: 90
        },

        // {
        //   prop: 'weightUnit',
        //   label: '重量单位',
        //   showOverflowTooltip: true,
        //   align: 'center',
        //   minWidth: 90
        // },
        //
        // {
        //   prop: 'roughWeight',
        //   label: '毛重',
        //   showOverflowTooltip: true,
        //   align: 'center',
        //   minWidth: 90
        // },
        //
        // {
        //   prop: 'netWeight',
        //   label: '净重',
        //   showOverflowTooltip: true,
        //   align: 'center',
        //   minWidth: 90
        // },
        //
        // {
        //   prop: 'packingUnit',
        //   align: 'center',
        //   label: '包装单位',
        //   showOverflowTooltip: true
        // },
        // {
        //   prop: 'categoryLevelPath',
        //   label: '分类',
        //   align: 'center',
        //   showOverflowTooltip: true
        // },
        {
          slot: 'action',
          align: 'center',
          minWidth: 90,
          fixed: 'right',
          label: '操作',
        }
      ],
      rules: {
        categoryId: [
          {required: true, message: '请选择供应商分类', trigger: 'change'}
        ],
        name: [
          {required: true, message: '请输入供应商名称', trigger: 'blur'}
        ],
        authorizationLimit: [
          {required: true, message: '请输入授信额度', trigger: 'blur'}
        ],

        addressId: [
          {required: true, message: '请选择地址', trigger: 'change'}
        ]
      },
      otherRules: {
        // settlementMode: [
        //   { required: true, message: '请输入结算方式', trigger: 'blur' }
        // ],
        taxRate: [
          {required: true, message: '请输入税率', trigger: 'change'}
        ],


        sender: [
          {required: true, message: '请输入收件人', trigger: 'change'}
        ],

        senderPhone: [
          {required: true, message: '请输入收件人电话', trigger: 'change'}
        ],

        addressId: [
          {required: true, message: '请选择收件人地址', trigger: 'change'}
        ],

        address: [
          {required: true, message: '请输入收件人详细地址', trigger: 'blur'}
        ]

      },
      options: {
        cityData,
        categoryData,
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,

      // 组织机构树形结构数据
      groupTreeData: [],
      // 组织机构平铺数据
      groupData: [],
    };
  },
  watch: {
    categoryIdList(val) {
      if (val.length > 0) {
        this.$refs.form.clearValidate('categoryId')
        this.form.categoryId = this.categoryIdList.join(',')
      } else {
        this.form.categoryId = ''
        this.$refs.form.validateField('categoryId')
      }
    }
  },
  created() {
    this.getGroupAll();
  },
  methods: {
    async open(type, row, contactCategoryId) {
      this.title = type;
      this.row = row;
      this.visible = true;
      if (type == '新建供应商') {
        this.isUpdate = false;
        // 默认带出列表页面选中的分类
        this.form.categoryId = contactCategoryId;
      } else {
        this.isUpdate = true;
        await this._getById(row.id);
      }
    },


    // 获取公司数据
    getGroupAll() {
      listOrganizations().then((list) => {
        this.groupData = list;
        this.groupTreeData = this.$util.toTreeData({
          data: list,
          idField: 'id',
          parentIdField: 'parentId'
        });
      });
    },

    handleActive(val) {
      if (val.name == 'certificate') {
        this.reload()
      }
    },
    // 选择负责人部门
    change_principalDep(id) {
      const info = this.groupData.find(e => e.id == id);
      this.otherForm.deptName = info.name;
      this.otherForm.salesmanId = '';
      this.otherForm.salesmanName = '';
      // 根据部门获取人员
      const params = {groupId: id};
      this.$nextTick(() => {
        this.$refs.directorRef.getList(params);
      });
    },
    salesmanChange(val, info) {
      this.otherForm.salesmanName = info.name;
    },
    settlementModeChange(info) {
      this.otherForm.settlementModeName = info.dictValue;
    },
    ifChiefChange(value, idx) {
      if (value === 1) {
        this.tableLinkData.forEach(e => e.ifChief = 0);
        this.tableLinkData[idx].ifChief = 1;
      }
    },
    addBank() {
      this.tableBankData.push({
        accountName: '',
        accountNo: '',
        bankName: '',
        interbankNo: ''
      });
    },
    addLink() {
      this.tableLinkData.push({
        linkName: '',
        mobilePhone: '',
        phone: '',
        email: '',
        post: '',
        status: '',
        ifChief: 0,
        remark: ''
      });
    },
    handleBankDel(row, index) {
      this.tableBankData.splice(index, 1);
      if (row?.id) {
        //   this.removeBankList.push(row.id);
      }
    },
    handleLinkDel(row, index) {
      this.tableLinkData.splice(index, 1);
      if (row?.id) {
        //   this.removeLinkList.push(row.id);
      }
    },
    //新增/查看/修改资质
    addCertificate(type, row) {
      this.certificateQualificationsDialogFlag = true
      this.$nextTick(() => {
        this.$refs.certificateQualificationsDialogRef.init(type, row)
      })
    },
    /* 证书资质表格数据源 */
    tableCertificateData({page, limit, where}) {
      if (!this.form.id) return []
      return contactQcPackPageAPI({
        certificationType: '2',
        relationId: this.form.id
      });
    },
    /* 刷新表格 */
    reload(where) {
      where = {
        certificationType: '2',
        relationId: this.form.id
      }
      this.$refs.certificateTable.reload({...where});
    },
    //删除资质包
    handleRemove(row) {
      contactQcPackDeleteAPI([row.id]).then((res) => {
        this.$message.success('删除成功！');
        this.reload();
      });
    },

    getValidate() {
      return Promise.all([
        new Promise((resolve, reject) => {
          this.$refs.form.validate((valid) => {
            if (!valid) {
              this.activeName = 'base';
              reject(false);
            } else {
              resolve(true);
            }
          });
        }),
        new Promise((resolve, reject) => {
          this.$refs.otherForm.validate((valid) => {
            if (!valid) {
              this.activeName = 'other';
              reject(false);
            } else {
              resolve(true);
            }
          });
        }),
        new Promise((resolve, reject) => {
          if (this.tableLinkData.length === 0) {
            this.$message.error("联系人信息至少有1条");
            this.activeName = 'link';
            reject(false);
          } else {
            resolve(true);
          }
        })
      ]);
    },
    //开启资质提交流程
    async submit(row) {
      await contactQcSubmit({businessId: row.id, certificationType: '2'})
      this.reload()
    },
    async save() {
      try {
        await this.getValidate();
        // 表单验证通过，执行保存操作
        this.loading = true;
        // 基本信息处理
        if (this.$refs.address.getCheckedNodes()) {
          let node = this.$refs.address.getCheckedNodes()[0];
          if (node) {
            this.form.addressId = node.path.join();
            this.form.addressName = node.pathLabels.join();
          } else {
            this.form.addressId = '';
            this.form.addressName = '';
          }
        }

        if (this.$refs.industry.getCheckedNodes()) {
          let node = this.$refs.industry.getCheckedNodes()[0];
          if (node) {
            this.form.industryCode = node.path.join();
            this.form.industryFullName = node.pathLabels.join();
          } else {
            this.form.industryCode = '';
            this.form.industryFullName = '';
          }
        }
        if (this.form.companyCategoryId) {
          this.form.companyCategoryName = this.getDictValue(
            '营业类型',
            this.form.companyCategoryId
          );
        }
        if (this.form.businessLicenseFiles && this.form.businessLicenseFiles.length > 0) {
          this.form.businessLicenseFile = this.form.businessLicenseFiles[0];
        } else {
          this.form.businessLicenseFile = null;
        }

        // 其他信息处理
        if (this.form.settlementMode) {
          this.form.settlementModeName = this.getDictValue(
            '结算方式',
            this.form.settlementMode
          );
        }
        if (this.$refs.sendAddress.getCheckedNodes()) {
          let node = this.$refs.sendAddress.getCheckedNodes()[0];
          if (node) {
            this.otherForm.addressId = node.path.join();
            this.otherForm.addressName = node.pathLabels.join();
          } else {
            this.otherForm.addressId = '';
            this.otherForm.addressName = '';
          }
        }

        if (!this.isUpdate) {
          delete this.form.id;
        } else {
          //   this.form.removeBankList = this.removeBankList;
          //   this.form.removeLinkList = this.removeLinkList;
        }
        const data = {
          base: this.form,
          other: this.otherForm,
          bankList: this.tableBankData,
          linkList: this.tableLinkData,
          productList: this.supplyList
        };
        if (this.isUpdate) {
          contactUpdate(data)
            .then((res) => {
              this.loading = false;
              this.$message.success("修改成功");
              this.cancel();
              this.$emit('done');
            })
            .catch((e) => {
              //this.loading = false;
            });
        } else {
          contactSave(data)
            .then((id) => {
              this.loading = false;
              this.$message.success("新增成功");
              // this.cancel();
              this._getById(id)
              this.title = '编辑客户'
              this.$emit('done');
              this.isUpdate = true
            })
            .catch((e) => {
              //this.loading = false;
            });
        }
      } catch (error) {
        // 表单验证未通过，不执行保存操作
      }

    },
    cancel() {
      this.$nextTick(() => {
        this.activeName = 'base';
        // 关闭后，销毁所有的表单数据
        this.$refs['otherForm'] && this.$refs['otherForm'].resetFields();
        this.$refs['formRef'] && this.$refs['formRef'].resetFields();
        this.form = copyObj(this.formDef),
          this.otherForm = copyObj(this.otherFormDef),
          this.tableBankData = []
        this.tableLinkData = []
        this.categoryIdList = []
        this.visible = false;
      })
    },
    async _getById(id) {
      const data = await contactDetail(id);
      this.form = data.base || {};
      this.otherForm = data.other || {};
      this.tableBankData = data.bankList || [];
      this.tableLinkData = data.linkList || [];
      this.supplyList = data.productList || [];
      if (data.base.businessLicenseFile && data.base.businessLicenseFile !== "") {
        this.$set(this.form, 'businessLicenseFiles', [data.base.businessLicenseFile])
      }
      this.categoryIdList = this.form.categoryId.split(',')
      if (this.tableLinkData && this.tableLinkData.length > 0) {
        this.tableLinkData.forEach(e => e.status = e.status + "");
      }
      if (this.otherForm.settlementMode) {
        this.otherForm.settlementMode = this.otherForm.settlementMode + "";
      }
      if (this.form.level) {
        this.form.level = this.form.level + "";
      }
      // 回显地址选择器
      if (this.form.addressId && this.form.addressId.length > 0) {
        this.form.addressId = this.form.addressId.split(",");
      }
      if (this.otherForm.addressId && this.otherForm.addressId.length > 0) {
        this.otherForm.addressId = this.otherForm.addressId.split(",");
      }
      // 回显行业
      if (this.form.industryCode && this.form.industryCode.length > 0) {
        this.form.industry = this.form.industryCode.split(",");
      }
      if (this.otherForm.deptId) {
        // 编辑时，默认查询组织相关的用户列表，用于回显
        this.$nextTick(async () => {
          await this.$refs.directorRef.getList({groupId: this.otherForm.deptId});
        })
      }
    },

    handParent() {
      let item = {
        id: this.form.parentId
      }
      this.$refs.parentRef.open(item)
    },

    changeParent(obj) {
      this.$set(this.form, 'parentId', obj.id)
      this.$set(this.form, 'parentName', obj.name)

    },
    //选择产品
    handSelectSupply() {
      this.$refs.productListRef.open( this.supplyList,-1);
    },
    getSupplyList(obj) {
      obj.forEach((item, index) => {
        let params = {}
        this.$set(params, 'contactId',this.row.id);
        this.$set(params, 'productId', item.id);
        this.$set(params, 'categoryName', item.name);
        this.$set(params, 'productCategoryId', item.categoryLevelId);
        this.$set(params, 'productBrand', item.brandNum);
        this.$set(params, 'productCategoryName', item.categoryLevelPath);
        this.$set(params, 'productCode', item.code);
        this.$set(params, 'productName', item.name);
        this.$set(params, 'modelType', item.modelType);
        this.$set(params, 'availableCountBase', item.availableCountBase);
        this.$set(params, 'measuringUnit', item.measuringUnit);
        this.$set(params, 'specification', item.specification);
        this.$set(params, 'weightUnit', item.weightUnit);
        this.$set(params, 'imgCode', item.imgCode);
        this.$set(params, 'produceType', item.produceType);
        this.$set(params, 'approvalNumber', item.approvalNumber);
        this.$set(params, 'packingSpecification', item.packingSpecification);
        this.supplyList.push(params)
      });
    },
    //删除供货产品
    handleRemoveSupply(index) {
      this.supplyList.splice(index, 1);
    },

  }
};
</script>
