<template>
  <div class="app-container">
    <el-form
      ref="form1"
      label-position="left"
      label-width="160px"
      :rules="rules"
      :model="dto"
    >
      <div class="itemGroup">
        <el-divider content-position="left">基础设置</el-divider>
        <el-form-item label="客户所属" prop="CompanyPossess">
          <el-select
            v-model="dto.CompanyPossess"
            @change="companyPossesChanged"
          >
            <el-option
              v-for="item in companyPossess"
              :key="item.Value"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isLangTianCustomer" label="客户分类" prop="CustomerType">
          <el-select
            v-model="dto.CustomerCategory"
            placeholder="客户分类"
            :disabled="dto.Type == 1"
          >
            <el-option
              v-for="item in customerCategories"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="所属分公司" prop="BranchCompanyId">
          <el-select
            v-model="dto.BranchCompanyId"
            placeholder="所属分公司"
            :disabled="dto.Type == 1"
          >
            <el-option
              v-for="item in branchCompanyCustomers"
              :key="item.Id"
              :label="item.CompanyName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户名称" prop="CompanyName">
          <el-input v-model="dto.CompanyName" />
        </el-form-item>
        <el-form-item label="客户简称" prop="Abbreviation">
          <el-input v-model="dto.Abbreviation" @change="createInitial" />
        </el-form-item>
        <el-form-item label="客户代码" prop="CustomerNumber">
          <el-input v-model="dto.CustomerNumber" :readonly="dto.Id > 0" />
        </el-form-item>
        <el-form-item label="业务员" prop="SalesmanUserId">
          <el-select
            v-model="dto.SalesmanUserId"
            placeholder="业务员"
            clearable
            filterable
            @change="changeGetWXCUstomres"
          >
            <el-option
              v-for="item in salesmanUser"
              :key="item.Id"
              :label="item.NickName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="对接人" prop="Contact">
          <el-input v-model="dto.Contact" />
        </el-form-item>
        <el-form-item label="对接人职位" prop="ContactTitle">
          <el-input v-model="dto.ContactTitle" />
        </el-form-item>
        <el-form-item label="联系地址" prop="ContactTitle">
          <el-input v-model="dto.Address" />
        </el-form-item>
        <el-form-item label="联系电话" prop="ContactNumber">
          <el-input v-model="dto.ContactNumber" />
        </el-form-item>
        <el-form-item label="联系邮箱" prop="EMail">
          <el-input v-model="dto.EMail" />
        </el-form-item>
        <el-form-item label="合作时间" prop="CooperationTime">
          <el-date-picker
            v-model="dto.CooperationTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>

        <el-form-item
          v-if="!isLangTianCustomer"
          label="对接平台"
          prop="DockingPlatform"
        >
          <el-select
            v-model="dto.DockingPlatform"
            placeholder="选择一个对接平台"
            clearable
            filterable
          >
            <el-option
              v-for="item in Dockingplatform"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户类型" prop="Type">
          <el-select v-model="dto.Type" placeholder="客户类型">
            <el-option
              v-for="item in customerTypes"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="!isLangTianCustomer" label="附件">
          <el-upload
            class="upload-demo"
            action="http://wms.xingyunyi.cn/api/Customer/UpdateCustomerLoadFile"
            :on-success="changeInputBillUrl"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">{{ dto.ContractFile }}</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-if="dto.BusinessLicense" label="营业执照照片">
          <div class="photo-item">
            <img class="business-images" :src="dto.BusinessLicense" width="80" @click="hanleViewImages(dto.BusinessLicense)" />
          </div>
        </el-form-item>
        <el-form-item v-if="dto.IDCard" label="身份证照片">
          <div class="photo-item">
            <div class="photo-images" v-for="url in getIDCardt">
              <img class="photo-images" :src="url" width="80" @click="hanleViewImages(url)" />
            </div>
          </div>
        </el-form-item>
      </div>

      <div class="itemGroup">
        <el-divider content-position="left">结算设置</el-divider>
        <el-form-item label="结算公司" prop="SettlementCompany">
          <el-select
            v-model="dto.SettlementCompany"
            placeholder="选择结算公司"
            clearable
            filterable
          >
            <el-option
              v-for="item in settlementCompanys"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="!isLangTianCustomer"
          label="结算节点"
          prop="DeductionNode"
        >
          <el-select
            v-model="dto.DeductionNode"
            placeholder="选择结算节点"
            clearable
            filterable
          >
            <el-option
              v-for="item in DeductionNodes"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="!isLangTianCustomer"
          label="计费对象"
          prop="CalculateWeightType"
        >
          <el-select
            v-model="dto.CalculateWeightType"
            placeholder="选择计费对象"
            clearable
            filterable
          >
            <el-option
              v-for="item in CalculateWeightTypes"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="帐期" prop="BillingCycle">
          <el-select
            v-model="dto.BillingCycle"
            placeholder="选择帐期"
            clearable
            filterable
          >
            <el-option
              v-for="item in billingCycle"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item
          v-if="!isLangTianCustomer"
          label="扣费节点"
          prop="SettlementCycle"
        >
          <el-select
            v-model="dto.SettlementCycle"
            placeholder="扣费方式"
            clearable
            filterable
          >
            <el-option
              v-for="item in SettlementCycle"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="预报节点"
          prop="ForecastNode"
        >
          <el-select
            v-model="dto.ForecastNode"
            placeholder="预报节点"
            filterable
          >
            <el-option
              v-for="item in ForecastNodeList"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="帐期额度" prop="AccountingPeriodLimit">
          <el-input-number v-model="dto.AccountingPeriodLimit" :min="0"  ></el-input-number>

        </el-form-item> -->
        <el-form-item label="是否进行欠费拦截" prop="IsInterceptCustomers">
          <el-switch
            v-model="dto.IsInterceptCustomers"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <!-- <el-form-item label="是否自定义结账天数" prop="IsCustomCheckoutDays">
          <el-switch
            v-model="dto.IsCustomCheckoutDays"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="自定义结账天数" prop="CustomCheckoutDays" v-if="dto.IsCustomCheckoutDays">
          <el-input-number v-model="dto.CustomCheckoutDays" :min="0" :max="90" ></el-input-number>
        </el-form-item> -->
        <el-form-item label="账单模板" prop="BillDownloadUrl">
          <el-select
            v-model="dto.BillDownloadUrl"
            placeholder="账单模板"
            clearable
            filterable
          >
            <el-option
              v-for="item in BillDownloadUrlList"
              :key="item.Url"
              :label="item.Name"
              :value="item.Url"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="代缴IOSS" prop="AgentIOSS">
          <el-switch
            v-model="dto.AgentIOSS"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
          <el-form-item label="澳洲偏远退回" prop="AURemoteRetreat">
          <el-switch
            v-model="dto.AURemoteRetreat"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
         <el-form-item label="是否免收客户上网费用" prop="IsOnlineFree">
          <el-switch
            v-model="dto.IsOnlineFree"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="是否免收结算上网费用" prop="IsOnlineFreeAsBranchCompany">
          <el-switch
            v-model="dto.IsOnlineFreeAsBranchCompany"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="支付方式" prop="PayIdList" v-if="getCurrentParamsId">
          <!-- 复选框,参数，逗号隔开 -->
          <el-checkbox-group v-model="checkPayIdList" @change="changePayIdList">
            <el-checkbox v-for="item in PayTypeList" :label="item.Value">{{ item.Label }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </div>
      <div v-if="!isLangTianCustomer" class="itemGroup">
        <el-divider content-position="left">容错配置</el-divider>
        <el-form-item label="是否仅出线上面单" prop="OnlineLabelType">
          <el-switch
            v-model="dto.OnlineLabelType"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="是否仅SKU面单" prop="SkuLabel">
          <el-switch
            v-model="dto.SkuLabel"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>

        <el-form-item label="单号防重复" prop="AutomaticSerialNumber">
          <el-switch
            v-model="dto.AutomaticSerialNumber"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="跳过自动中转面单" prop="NoErrorToTransfer">
          <el-switch
            v-model="dto.NoErrorToTransfer"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="跳过末端出中转单" prop="IsAutoToTransfer">
          <el-switch
            v-model="dto.IsAutoToTransfer"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="启用计抛拦截" prop="UseVolumWeightIntercept">
          <el-switch
            v-model="dto.UseVolumWeightIntercept"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="是否开启中文品名翻译" prop="UseTransCNName">
          <el-switch
            v-model="dto.UseTransCNName"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="补充面单" prop="SupplementSheet">
          <el-select
            v-model="dto.SupplementSheet"
            placeholder="选择补充面单类型"
            clearable
            filterable
          >
            <el-option
              v-for="item in SupplementSheet"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="是否仅输出中性面单" prop="IsOnlyPrintTranfer">
          <el-switch
            v-model="dto.IsOnlyPrintTranfer"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item label="中性面单条码" prop="DrawTransferNumberType">
          <el-select
            v-model="dto.DrawTransferNumberType"
            placeholder="中性面单条码"
            filterable
          >
            <el-option
              v-for="item in transferNumberType"
              :key="item.Name"
              :label="item.Name"
              :value="item.Value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="默认海关编码" prop="DefaultHSCODE">
          <el-input v-model="dto.DefaultHSCODE" />
        </el-form-item>
        <el-form-item label="启用海关编码自动匹配" prop="UseHsCodeMatch">
          <el-switch v-model="dto.UseHsCodeMatch" />
          <el-alert
            title="如果已设置默认海关编码，则优先默认海关编码"
            type="warning"
            :closable="false"
          />
        </el-form-item>
      </div>
      <div v-if="!isLangTianCustomer" class="itemGroup">
        <el-divider content-position="left">轨迹相关</el-divider>
        <el-form-item label="物流详情显示上网时间" prop="IsShowOnlineTime">
          <el-switch
            v-model="dto.IsShowOnlineTime"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
        <el-form-item
          label="是否显示跟踪中的下单信息"
          prop="IsShowOrderingTracking"
        >
          <el-switch
            v-model="dto.IsShowOrderingTracking"
            active-color="#13ce66"
            inactive-color="#ccc"
          />
        </el-form-item>
      </div>
      <div class="itemGroup">
        <el-divider content-position="left">企微绑定信息</el-divider>
        <el-form-item label="当前绑定企微用户名：" prop="AgentIOSS">
          <div class="qw-warp">
            <div class="binding-text">{{ !Bindings ? '未绑定' : Bindings.Name }}</div>
            <div v-show="bindingShow" class="binding-btn">
              <!-- 当绑定企微的字段没有值时 -->
              <el-button v-if="!Bindings" type="primary" size="small" @click="hanleBindingBtn">绑定</el-button>
              <el-button v-else type="primary" size="small" @click="againShowBindingBtn = !againShowBindingBtn">重新绑定</el-button>
            </div>
            <div v-if="!bindingShow" class="binding-btn">
              <el-select
                v-model="WXUserId"
                popper-class="define-s-warp"
              >
                <el-option
                  v-for="item in bindUserList"
                  :key="item.WXUserId"
                  :label="item.Name"
                  :value="item.WXUserId"
                  @click="changeWXUserId(item)"
                >
                  <img :src="item.Avatar" alt="" srcset="">
                  <span class="name">{{ item.Name }}</span>
                </el-option>
              </el-select>
              <!-- 没有绑定 ==》 没有值的情况 -->
              <div v-if="showBindingBtn">
                <el-button type="primary" size="small" class="binding-left-16" :loading="loadBinding" @click="hanleBinding(0)">确认绑定</el-button>
                <el-button type="danger" size="small" @click="hanleBindingBtn">取消</el-button>
              </div>
              <!-- 已绑定 =》 有值的情况 -->
              <div v-if="againShowBindingBtn">
                <el-button type="primary" size="small" class="binding-left-16" :loading="loadBinding" @click="hanleBinding(1)">确认绑定</el-button>
                <el-button type="danger" size="small" :loading="loadUnBinding" @click="hanleUnbinding">取消绑定</el-button>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>
      <div class="itemGroup" style="text-align: center">
        <el-form-item>
          <el-button
            type="primary"
            :loading="saveLadding"
            @click="validateSave()"
          >保存</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 预览附件 -->
    <el-image
      class="customer-remittance-img"
      ref="customerImageRef"
      style="width: 0px;height: 0px;"
      :src="viewImagesUrl"
      :preview-src-list="[viewImagesUrl]">
    </el-image>
  </div>
</template>
<script>
import pinyin from 'pinyin'
import {
  _getCustomer,
  _editCustomer,
  _addCustomer,
  _getSalesmanUsers,
  _getAllBranchCompanyCustomers
} from '@/api/customer'
import {
  _getDockingPlatform,
  _getSupplementSheet,
  _getSettlementCompanys,
  _getTransferNumberType,
  _getBillingCycle,
  _getSettlementCycleEnum,
  _getDeductionNodesEnum,
  _getCalculateWeightTypes,
  _getWXCUstomres,
  _GetWXCustomer,
  _BindWXCustomers,
  _UnBindWXCustomers,
  _getForecastNodeList,
  _getDownloadUrl,
  _getPayTypeList
} from '@/api/baseInfo'
export default {
  name: 'CustomerEdit',
  data() {
    return {
      saveLadding: false,
      customers: [],
      salesmanUser: [],
      SupplementSheet: [],
      Dockingplatform: [],
      settlementCompanys: [],
      transferNumberType: [],
      DeductionNodes: [],
      billingCycle: [],
      SettlementCycle: [],
      ForecastNodeList: [],
      branchCompanyCustomers: [],
      CalculateWeightTypes: [],
      customerTypes: [
        { Name: '客户', Value: 0 },
        { Name: '分公司', Value: 1 },
        { Name: '头程客户', Value: 2 }
      ],
      companyPossess: [
        { Name: '行运易', Value: 0 },
        { Name: '朗天', Value: 1 },
        { Name: '运控', Value: 2 },
        { Name: '集通' , Value:3}
      ],
      customerCategories: [
        { name: '同行代理', value: 1 },
        { name: '国内直客', value: 2 },
        { name: '国外直客', value: 3 }
      ],
      dto: {
        api: true,
        apiService: 1,
        defaultSend: false,
        customerNumber: null,
        IsVolumnWeight: true,
        SettlementCompany: '',
        BranchCompanyId: 0,
        CalculateWeightType: 0,
        Type: 0,
        CooperationTime: '',
        // BillingCycle: 1,
        DeductionNode: undefined,
        CustomerCategory: null,
        ForecastNode: 3,
        DeclareValue: [
          {
            MinWeight: 0,
            MaxWeight: 0,
            DeclareValue: 0
          }
        ],
        TrackingMore: [{}]
      },
      rules: {
        CompanyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        CustomerNumber: [
          { required: true, message: '请输入客户代码', trigger: 'blur' }
        ],
        Abbreviation: [
          { required: true, message: '请输入公司简称', trigger: 'blur' }
        ],
        SalesmanUserId: [{ required: true, message: '请选择业务员', trigger: 'blur' }],
        Contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        ContactNumber: [
          { required: true, message: '请输入联系人电话', trigger: 'blur' }
        ],
        CooperationTime: [{ required: true, message: '请选择合作时间', trigger: 'blur' }],
        BillingCycle: [
          { required: true, message: '请选择账单周期', trigger: 'blur' }
        ],
        SettlementCycle: [
          { required: true, message: '请选择结算周期', trigger: 'blur' }
        ],
        DeductionNode: [
          { required: true, message: '请选择扣费节点', trigger: 'blur' }
        ],
        CalculateWeightType: [
          { required: true, message: '请选择计费对象', trigger: 'blur' }
        ],
        BranchCompanyId: [
          { required: true, message: '请选择所属公司', trigger: 'blur' }
        ],
        ForecastNode: [
          { required: true, message: '请选择预报节点', trigger: 'blur' }
        ],
      },
      // 企微绑定信息
      Bindings: null, // 企微绑定信息
      bindUserList: [],
      WXUserId: null,
      WXUserParams: null,
      showBindingBtn: false,
      againShowBindingBtn: false, // 绑定显示内容
      loadBinding: false, // 确认绑定load
      loadUnBinding: false,// 取消绑定load
      BillDownloadUrlList: [],//特殊模板地址列表
      PayTypeList: [],//支付方式列表
      checkPayIdList: [],//选中的支付方式
      currentParamsId: 0,
      viewImagesUrl: undefined
    }
  },
  computed: {
    isLangTianCustomer() {
      // console.log(this.dto.CompanyPossess, this.dto.companyPossess == 1)
      return this.dto.CompanyPossess == 1||this.dto.CompanyPossess==2||this.dto.CompanyPossess==3
    },
    // 绑定按钮显示、隐藏
    bindingShow() {
      return this.showBindingBtn == this.againShowBindingBtn
    },
    getCurrentParamsId() {
      return this.currentParamsId > 0 ? false : true
    },
    getIDCardt() {
      if (!this.dto.IDCard) return []
      return this.dto.IDCard.split(',')
    },
  },
  created() {
    this.checkPayIdList = []
    this.currentParamsId = this.$route.params.Id
    _getCustomer(this.$route.params.Id)
      .then((response) => {
        this.dto = response
        //this.dto.ForecastNode = 3
        if (response.DeductionNode === 0) this.dto.DeductionNode = undefined
        if (this.dto.BillingCycle === 0) this.dto.BillingCycle = undefined
        if(typeof response.OnlineLabelType === 'number') {
          const OnlineLabelType = response.OnlineLabelType !== 0 ? true : false
          this.$set(this.dto, 'OnlineLabelType', OnlineLabelType)
        }
        if (response.PayIdList && typeof response.PayIdList === 'string') this.checkPayIdList = response.PayIdList.split(',')
        this.changeGetWXCUstomres(this.dto.SalesmanUserId)
        this.dto.PickingProcess += ''
      })
      .finally(() => {
        if (!this.dto.Id) {
          // 时间初始化
          var today = this.addDays(new Date(), 0)
          this.dto.CooperationTime = this.DateFormat(today, 'yyyy-MM-dd')
        }
        _getPayTypeList().then((res) => {
          this.PayTypeList = res
          if (res && res.length > 0) {
            const checkPayIdList = res.map(item => item.Value)
            this.checkPayIdList = checkPayIdList
            const PayIdList = checkPayIdList.join(',') || null
            this.$set(this.dto, 'PayIdList', PayIdList)
          }
        })
        _getDownloadUrl().then((res) => {
          this.BillDownloadUrlList = res
          if (res && res.length > 0) {
            const BillDownloadUrl = res[0].Url
            this.$set(this.dto, 'BillDownloadUrl', BillDownloadUrl)
          }
        })
      })
    _getDockingPlatform().then((response) => {
      this.Dockingplatform = response
    })
    _getSupplementSheet().then((response) => {
      this.SupplementSheet = response
    })
    _getSettlementCompanys().then((response) => {
      this.settlementCompanys = response
    })
    _getSalesmanUsers().then((response) => {
      this.salesmanUser = response
    })
    _getTransferNumberType().then((response) => {
      this.transferNumberType = response
    })
    _getBillingCycle().then((response) => {
      this.billingCycle = response
    })
    _getSettlementCycleEnum().then((response) => {
      this.SettlementCycle = response
    })

    _getForecastNodeList().then((res) => {
      this.ForecastNodeList = res
    })

    _getDeductionNodesEnum().then((resp) => {
      this.DeductionNodes = resp
    })

    _getAllBranchCompanyCustomers().then((resp) => {
      this.branchCompanyCustomers = resp
    })
    _getCalculateWeightTypes().then((resp) => {
      this.CalculateWeightTypes = resp
    })
    // 获取客户企微绑定值
    if (this.$route.params.Id > 0) {
      _GetWXCustomer(this.$route.params.Id).then((resp) => {
        this.Bindings = resp.WXUserId ? resp : null
        this.WXUserId = resp.WXUserId
      })
    }

  },
  methods: {
    companyPossesChanged(e) {},
    createInitial(e) {
      if (!!e && !this.dto.CustomerNumber) {
        const initials = pinyin(e, { style: 'normal' })
        let codes = ''
        for (const i of initials) {
          codes += i[0].toUpperCase()
        }
        // 判断所属增加前缀
        var prefix = 'GZ-'
        if (this.dto.BranchCompanyId) {
          var companyName = this.branchCompanyCustomers.find((x) => x.Id == this.dto.BranchCompanyId).CompanyName
          companyName = companyName.replace('分公司', '')
          const tempInitials = pinyin(companyName, { style: 'first_letter' })
          let tempCodes = ''
          for (const i of tempInitials) {
            tempCodes += i[0].toUpperCase()
          }
          prefix = tempCodes + '-'
        }
        this.dto.CustomerNumber = prefix + codes
      }
    },
    changeInputBillUrl(r) {
      this.dto.ContractFile = r.Data.url
    },
    validateSave() {
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          this.save()
        } else {
          return false
        }
      })
    },

    save() {
      // 数据表后加字段可空，实际不空，前端限制
      if (!this.isLangTianCustomer && this.dto.SettlementCycle < 1) {
        this.$message({ type: 'warning', message: '结算周期为必选项！' })
        return false
      }
      if (this.dto.Type == 0 && !this.dto.BranchCompanyId) {
        this.$message({ type: 'warning', message: '请选择所属分公司' })
        return false
      }
      // 限制end
      this.saveLadding = true
      if (!this.dto.Id) {
        _addCustomer(this.dto)
          .then((response) => {
            if (response.Success == true) {
              this.$message('添加成功')
            } else {
              const msg = response.message || '新建客户失败'
              this.$message({ type: 'error', message: msg })
            }
          })
          .catch(() => {
            this.$message({ type: 'error', message: '新建客户失败' })
          })
          .finally(() => {
            this.saveLadding = false
          })
      } else {
        // 编辑审核类型判断
        this.dto.VerificationSteps === 1 ? (this.dto.OnVerification = true) : (this.dto.OnVerification = false)
        _editCustomer(this.dto)
          .then((response) => {
            if (response.Success == true) {
              this.$message('保存成功')
            } else {
              const msg = response.message || '保存失败'
              this.$message({ type: 'error', message: msg })
            }
          })
          .catch(() => {
            this.$message({ type: 'error', message: '保存失败' })
          })
          .finally(() => {
            this.saveLadding = false
          })
      }
    },
    // js获取当前时间
    addDays(d, days) {
      var adjustDate = new Date(d.getTime() + 24 * 60 * 60 * 1000 * days)
      return adjustDate
    },
    DateFormat(d, format) {
      var date = {
        'M+': d.getMonth() + 1,
        'd+': d.getDate(),
        'h+': d.getHours(),
        'm+': d.getMinutes(),
        's+': d.getSeconds(),
        'q+': Math.floor((d.getMonth() + 3) / 3),
        'S+': d.getMilliseconds()
      }
      if (/(y+)/i.test(format)) {
        format = format.replace(
          RegExp.$1,
          (d.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      for (var k in date) {
        if (new RegExp('(' + k + ')').test(format)) {
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? date[k]
              : ('00' + date[k]).substr(('' + date[k]).length)
          )
        }
      }
      return format
    },
    // 获取下拉列表中的对象
    changeWXUserId(val) {
      this.WXUserParams = this.bindUserList.find(item => item.WXUserId === val)
    },
    // 企微用户
    changeGetWXCUstomres(val) {
      // 45
      if (val&&val >= 0) {
        _getWXCUstomres(val).then((resp) => {
          this.bindUserList = resp
        })
      }
    },
    // 隐藏没有值的绑定
    hanleBindingBtn() {
      this.showBindingBtn = !this.showBindingBtn
    },
    // 取消绑定
    hanleUnbinding() {
      this.loadUnBinding = true
      // 请求取消绑定接口
      const CustomerId = this.$route.params.Id
      _UnBindWXCustomers({ ...this.Bindings, CustomerId }).then(result => {
        // 隐藏下拉框、绑定按钮
        this.loadUnBinding = false
        this.againShowBindingBtn = !this.againShowBindingBtn
        this.Bindings = null
        this.WXUserId = null
      }).catch(() => {
        this.$message({ type: 'error', message: '取消绑定服务端错误' })
      })
    },
    // 确认绑定
    hanleBinding(type) {
      this.loadBinding = true
      this.changeWXUserId(this.WXUserId)
      const CustomerId = this.$route.params.Id
      this.Bindings = this.WXUserParams
      // 请求绑定接口
      _BindWXCustomers({ ...this.Bindings, CustomerId }).then(result => {
        // 隐藏下拉框、绑定按钮
        this.loadBinding = false
        // 绑定与未绑定的内容隐藏
        type === 0 ? this.showBindingBtn = !this.showBindingBtn : this.againShowBindingBtn = !this.againShowBindingBtn
      }).catch(() => {
        this.$message({ type: 'error', message: '确认绑定服务端错误' })
      })
    },
    changePayIdList(val) {
      const PayIdList = val.join(',') || null
      this.$set(this.dto, 'PayIdList', PayIdList)
    },
    hanleViewImages(url) {
      this.viewImagesUrl = url
      const customerImageDom = this.$refs.customerImageRef
      if (customerImageDom && url) {
        customerImageDom.clickHandler()
        this.$nextTick(() => {
          if (customerImageDom.$el) {
            const mask = customerImageDom.$el.querySelector(".el-image-viewer__mask")
            mask && mask.addEventListener("click", function(e) {
              customerImageDom.closeViewer()
            })
          }
        })
      }
    },
  }
}
</script>
<style lang="scss">
.customer-remittance-img {
  ::v-deep {
    .el-image-viewer__close {
      color: #fff;
    }
  }
}
.itemGroup {
  margin: 10px;
  border: 1px solid #ebebeb;
  padding: 30px;
}
.itemGroup .qw-warp {
  display: flex;
}
.itemGroup {
  .photo-item {
    display: flex;
    flex-wrap: wrap;
    &> div:first-child  {
      margin-right: 20px;
    }
    .photo-images {
      position: relative;
      width: 248px;
      height: 148px;
      border-radius: 6px;
      object-fit: cover;
      cursor: pointer;
    }
    .business-images {
      width: 168px;
      height: 188px;
      border-radius: 6px;
      object-fit: cover;
    }
  }
}

.define-s-warp .el-select-dropdown__item {
  height: 48px;
  padding-left: 12px;
  padding-right: 12px;
  overflow: hidden;
}
.define-s-warp .el-select-dropdown__item img {
  float: left;
  width: 38px;
  height: 38px;
  object-fit: cover;
}
.define-s-warp .el-select-dropdown__item .name {
  float: left;
  padding-left: 6px;
}
.itemGroup .qw-warp .binding-left-16 {
  margin-left:16px;
}
.itemGroup .qw-warp .binding-btn {
  display: flex;
  margin-left: 16px;
  margin-right:16px;
}
</style>
