<!--
@name: 客户管理-编辑查看
@author: 张泽贤
@time: 2022-07-13
@doc: PROLOG_UPCloudSolutionForTMS__v1.2.1_基础数据_1.2.1.doc
-->
<template>
  <p-card class="full-card-panel">
    <a-space slot="title" style="display: flex; align-items: center; cursor: pointer">
      <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
      客户管理-{{ typeTitle }}
    </a-space>
    <div slot="extra" v-show="type !== 'view'">
      <p-button :disabled="spinning" type="primary" @click="onSave" v-action:saveSubmit>保存</p-button>
    </div>
    <p-spin :spinning="spinning">
      <p-form-model ref="ruleForm" class="plg-grid-from" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="rules">
        <a-divider orientation="left">基本信息</a-divider>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="客户编码" prop="code">
              <div v-if="type === 'view'">{{ form.code }}</div>
              <p-input v-model="form.code" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="客户名称" prop="name">
              <div v-if="type === 'view'">{{ form.name }}</div>
              <p-input v-model="form.name" :disabled="type === 'edit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="客户简称" prop="shortName">
              <div v-if="type === 'view'">{{ form.shortName }}</div>
              <p-input v-model="form.shortName" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="部门" prop="departmentName">
              <div v-if="type === 'view'">{{ form.departmentName }}</div>
              <departmenTree :departmentId="form.departmentId" @getDepartment="getDepartment" v-else></departmenTree>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="合作性质" prop="cooperativeNature">
              <div v-if="type === 'view'">{{ form.cooperativeNatureName }}</div>
              <p-select v-model="form.cooperativeNature" :options="options.COOPERATIVE_NATURE" allowClear v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="税务登记号" prop="taxRegisterNumber">
              <div v-if="type === 'view'">{{ form.taxRegisterNumber }}</div>
              <p-input v-model="form.taxRegisterNumber" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="营业执照号" prop="businessLicenseNumber">
              <div v-if="type === 'view'">{{ form.businessLicenseNumber }}</div>
              <p-input v-model="form.businessLicenseNumber" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="道路许可证" prop="roadPermit">
              <div v-if="type === 'view'">{{ form.roadPermit }}</div>
              <p-input v-model="form.roadPermit" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="货主" prop="cargoOwnerName">
              <div v-if="type === 'view'">{{ form.cargoOwnerName }}</div>
              <p-search-modal v-model="form.cargoOwnerName" v-bind="$data.$formItems.consignorAttr" @change="(...args) => onFormChange('consignor', ...args)" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="备注" prop="memo">
              <div v-if="type === 'view'">{{ form.memo }}</div>
              <p-input v-model="form.memo" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left" v-if="mextendedField_list.length > 0">扩展属性</a-divider>
        <extendedField :mextendedField_list="mextendedField_list" :type="type" :form="form"></extendedField>
        <a-divider orientation="left">联系信息</a-divider>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="联系人" prop="contact">
              <div v-if="type === 'view'">{{ form.contact }}</div>
              <p-input v-model="form.contact" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="手机号" prop="phoneNumber">
              <div v-if="type === 'view'">{{ form.phoneNumber }}</div>
              <p-input v-model="form.phoneNumber" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="座机号" prop="landlineNumber">
              <div v-if="type === 'view'">{{ form.landlineNumber }}</div>
              <p-input v-model="form.landlineNumber" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="邮箱" prop="email">
              <div v-if="type === 'view'">{{ form.email }}</div>
              <p-input v-model="form.email" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="邮编" prop="postCode">
              <div v-if="type === 'view'">{{ form.postCode }}</div>
              <p-input v-model="form.postCode" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="省市区" prop="zoneValue">
              <div v-if="type === 'view'">{{ form.provinceName + form.cityName + form.districtName }}</div>
              <p-cascader-zone :value="zoneValue" :disabled="type === 'view'" @change="handleZoneChange" :level="3" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="12">
            <p-form-model-item label="详细地址" prop="address" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-row>
                <a-col :span="20">
                  <div v-if="type === 'view'">{{ form.address }}</div>
                  <p-input v-model="form.address" v-else />
                </a-col>
                <a-col :span="4" style="text-align: right" v-if="type !== 'view'">
                  <p-button type="primary" @click="onAddressAnalysis">地址解析</p-button>
                </a-col>
              </a-row>
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="经度" prop="longitude">
              <div v-if="type === 'view'">{{ form.longitude }}</div>
              <p-input v-model="form.longitude" v-else readOnly />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="纬度" prop="latitude">
              <div v-if="type === 'view'">{{ form.latitude }}</div>
              <p-input v-model="form.latitude" v-else readOnly />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left">开户信息</a-divider>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="法人代表" prop="legalman">
              <div v-if="type === 'view'">{{ form.legalman }}</div>
              <p-input v-model="form.legalman" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="发票抬头" prop="invoice">
              <div v-if="type === 'view'">{{ form.invoice }}</div>
              <p-input v-model="form.invoice" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="税号" prop="invoiceTaxNumber">
              <div v-if="type === 'view'">{{ form.invoiceTaxNumber }}</div>
              <p-input v-model="form.invoiceTaxNumber" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="注册资金" prop="registeredCapital">
              <div v-if="type === 'view'">{{ form.registeredCapital }}</div>
              <p-input v-model="form.registeredCapital" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="开户行" prop="bank">
              <div v-if="type === 'view'">{{ form.bankName }}</div>
              <p-select v-model="form.bank" :options="options.BANK" allowClear v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="银行帐号" prop="bankAccount">
              <div v-if="type === 'view'">{{ form.bankAccount }}</div>
              <p-input v-model="form.bankAccount" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="成立时间" prop="established">
              <div v-if="type === 'view'">{{ form.established }}</div>
              <a-date-picker v-model="form.established" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="注册地址" prop="registeredAddress">
              <div v-if="type === 'view'">{{ form.registeredAddress }}</div>
              <p-input v-model="form.registeredAddress" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left">业务信息</a-divider>
        <!-- <a-row>
          <a-col :span="4">
            <p-form-model-item label="" prop="pickUpSign">
              <p-checkbox v-model="form.pickUpSign" :readOnly="type === 'view'">提货签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="autoPickUpSign">
              <p-checkbox v-model="form.autoPickUpSign" :readOnly="type === 'view'">自动签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="pickUpPicture">
              <p-checkbox v-model="form.pickUpPicture" :readOnly="type === 'view'">提货图片</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="默认提货围栏" prop="defaultPickUpRail">
              <div v-if="type === 'view'">{{ form.defaultPickUpRail }}KM</div>
              <p-input v-model="form.defaultPickUpRail" suffix="KM" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">
            <p-form-model-item label="" prop="deliverySign">
              <p-checkbox v-model="form.deliverySign" :readOnly="type === 'view'">送达签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="autoDeliverySign">
              <p-checkbox v-model="form.autoDeliverySign" :readOnly="type === 'view'">自动签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="deliveryPicture">
              <p-checkbox v-model="form.deliveryPicture" :readOnly="type === 'view'">送达图片</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="默认送达围栏" prop="defaultDeliveryRail">
              <div v-if="type === 'view'">{{ form.defaultDeliveryRail }}KM</div>
              <p-input v-model="form.defaultDeliveryRail" suffix="KM" v-else />
            </p-form-model-item>
          </a-col>
        </a-row> -->

        <a-row :gutter="16" type="flex">
          <a-col :flex="0">
            <p-form-model-item  :labelCol="{span:0}" :wrapperCol="{span:24}" label="" prop="pickUpSign">
              <p-checkbox v-model="form.pickUpSign" :readOnly="type === 'view'">提货签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{span:0}" :wrapperCol="{span:24}"   label="" prop="autoPickUpSign">
              <p-checkbox v-model="form.autoPickUpSign" :readOnly="type === 'view'">自动签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col flex="0 0 520px">
            <p-form-model-item
               :labelCol="{span:5}" :wrapperCol="{span:19}"
                label="可签到时间点" prop="pickUpSignTime">
              <a-space>
              <p-select
              v-model="form.pickUpSignTime"
              style="width:140px"
              :options="options&&options.PICK_UP_SIGN_TIME" :disabled="type === 'view'"/>
              <a-input-number
                :readOnly="type === 'view'"
                style="width:100px"
                v-model="form.pickUpSignTimeDura"
                :disabled="type === 'view'"
              />
              <p-select v-model="form.pickUpSignTimeUnit"
              style="width:80px"
              :options="options&&options.SIGN_TIME_UNIT"
              :disabled="type === 'view'"
              />
              <span>区间</span>
            </a-space>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{span:0}" :wrapperCol="{span:24}"  label="" prop="pickUpPicture">
              <p-checkbox v-model="form.pickUpPicture" :readOnly="type === 'view'">提货图片</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{span:8}" :wrapperCol="{span:16}"  label="默认提货围栏" prop="defaultPickUpRail">
              <div v-if="type === 'view'">{{ form.defaultPickUpRail }}KM</div>
              <p-input v-model="form.defaultPickUpRail" suffix="KM" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="16" type="flex">
          <a-col :flex="0">
            <p-form-model-item :labelCol="{span:0}" :wrapperCol="{span:24}" label="" prop="deliverySign">
              <p-checkbox v-model="form.deliverySign" :readOnly="type === 'view'">送达签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{span:0}" :wrapperCol="{span:24}" label="" prop="autoDeliverySign">
              <p-checkbox v-model="form.autoDeliverySign" :readOnly="type === 'view'">自动签到</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col flex="0 0 520px">
            <p-form-model-item
               :labelCol="{span:5}" :wrapperCol="{span:19}"
                label="可签到时间点" prop="deliverySignTime">
              <a-space>
              <p-select v-model="form.deliverySignTime"
              :disabled="type === 'view'"
              style="width:140px"
              :options="options&&options.PICK_UP_SIGN_TIME"/>
              <a-input-number
               :disabled="type === 'view'"
                style="width:100px"
                v-model="form.deliverySignTimeDura"
                placeholder=""
              />
              <p-select
              :disabled="type === 'view'"
               v-model="form.deliverySignTimeUnit"
              style="width:80px"
              :options="options&&options.SIGN_TIME_UNIT"/>
              <span>区间</span>
            </a-space>
            </p-form-model-item>
          </a-col>
          <a-col :flex="0">
            <p-form-model-item :labelCol="{span:0}" :wrapperCol="{span:24}" label="" prop="deliveryPicture">
              <p-checkbox  v-model="form.deliveryPicture" :readOnly="type === 'view'">送达图片</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col  :flex="0">
            <p-form-model-item label="默认送达围栏" prop="defaultDeliveryRail">
              <div v-if="type === 'view'">{{ form.defaultDeliveryRail }}KM</div>
              <p-input v-model="form.defaultDeliveryRail" suffix="KM" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="4">
            <p-form-model-item label="" prop="returnOrderFlag">
              <p-checkbox v-model="form.returnOrderFlag" :readOnly="type === 'view'">正本回单</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="4">
            <p-form-model-item label="" prop="returnOrderPicture">
              <p-checkbox v-model="form.returnOrderPicture" :readOnly="type === 'view'">回单图片</p-checkbox>
            </p-form-model-item>
          </a-col>
          <a-col :span="6" :offset="4">
            <p-form-model-item label="回单期限" prop="returnOrderDeadline">
              <div v-if="type === 'view'">{{ form.returnOrderDeadline }}天</div>
              <p-input v-model="form.returnOrderDeadline" suffix="天" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
      </p-form-model>
    </p-spin>
  </p-card>
</template>

<script>
import departmenTree from '@/blocks/components/formConfig/index.departmenTree.multiple.vue'
import CascaderZone from '@/blocks/components/cascaderZone'
import extendedField from '@/blocks/extendedField'
import * as $formItems from '@/blocks/components/searchModalConfig/index'

import { viewCustomer, saveCustomer, updateCustomer } from '../js/api'
export default {
  components: { PCascaderZone: CascaderZone, extendedField, departmenTree },
  props: {
    type: {
      type: String,
      default: '',
    },
    editId: {
      type: String,
      default: '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        add: '新增',
        edit: '编辑',
        view: '查看',
        copy: '复制',
      }
      return dictionary[this.type] || this.type
    },
  },
  data() {
    const positveOrZero = (rule, value, callback) => {
      if (value && !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(value)) {
        callback(new Error('请输入非负数'))
      } else {
        callback()
      }
    }
    return {
      $formItems,
      spinning: false,

      form: {
        pickUpSign: false,
        autoPickUpSign: false,
        pickUpPicture: false,
        deliverySign: false,
        autoDeliverySign: false,
        deliveryPicture: false,
        returnOrderFlag: false,
        returnOrderPicture: false,
        nonAptDt: 10,
        departmentId: '',
        departmentCode: '',
        departmentName: '',
        loadInterval: '',
        defaultPickUpRail: '',
        defaultDeliveryRail: '',
        nonAptSpecStartDate: '',
        nonAptSpecEndDate: '',

        pickUpSignTime:'',
        pickUpSignTimeDura:'',
        pickUpSignTimeUnit:'',
        deliverySignTime:'',
        deliverySignTimeDura:'',
        deliverySignTimeUnit:''
      },
      rules: {
        code: [{ required: true, message: '客户编码不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '客户名称不能为空', trigger: 'blur' }],
        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
        cooperativeNature: [{ required: true, message: '合作性质不能为空', trigger: 'change' }],
        cargoOwnerName: [{ required: true, message: '货主不能为空', trigger: 'change' }],
        loadInterval: [{ validator: positveOrZero, trigger: 'blur' }],
        defaultPickUpRail: [{ validator: positveOrZero, trigger: 'blur' }],
        defaultDeliveryRail: [{ validator: positveOrZero, trigger: 'blur' }],
        returnOrderDeadline: [{ validator: positveOrZero, trigger: 'blur' }],
        loadingTime: [{ validator: positveOrZero, trigger: 'blur' }],
      },

      // 省市区弹窗状态
      zoneValue: [],
    }
  },
  mounted() {
    if (this.editId) {
      this.spinning = true
      viewCustomer({ id: this.editId })
        .then((res) => {
          if (res.success) {
            res.data.pickUpSign = res.data.pickUpSign === 1
            res.data.autoPickUpSign = res.data.autoPickUpSign === 1
            res.data.pickUpPicture = res.data.pickUpPicture === 1
            res.data.deliverySign = res.data.deliverySign === 1
            res.data.autoDeliverySign = res.data.autoDeliverySign === 1
            res.data.deliveryPicture = res.data.deliveryPicture === 1
            res.data.returnOrderFlag = res.data.returnOrderFlag === 1
            res.data.returnOrderPicture = res.data.returnOrderPicture === 1
            if (this.type === 'copy') {
              res.data.code = ''
              res.data.name = ''
              res.data.departmentId = ''
              res.data.departmentCode = ''
              res.data.departmentName = ''
            }
            this.form = { ...res.data }
            if (this.form.province) {
              this.zoneValue.push(this.form.province)
            }
            if (this.form.city) {
              this.zoneValue.push(this.form.city)
            }
            if (this.form.district) {
              this.zoneValue.push(this.form.district)
            }
          } else {
            this.$exception(res)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    }
  },
  methods: {
    back() {
      this.$emit('back')
    },

    // 省市区
    handleZoneChange(value, arrValue, form) {

      this.form.provinceName = ''
      this.form.province = ''
      this.form.cityName = ''
      this.form.city = ''
      this.form.districtName = ''
      this.form.district = ''
      this.zoneValue = value
      if (this.zoneValue && this.zoneValue.length) {
        if (arrValue[0]) {
          this.form.provinceName = arrValue[0].zname
          this.form.province = arrValue[0].zoneid
        }
        if (arrValue[1]) {
          this.form.cityName = arrValue[1].zname
          this.form.city = arrValue[1].zoneid
        }
        if (arrValue[2]) {
          this.form.districtName = arrValue[2].zname
          this.form.district = arrValue[2].zoneid
        }
      }
    },

    // 地址解析
    onAddressAnalysis() {
      this.$emit('upadteAddress', { address: this.form.address, longitude: this.form.longitude, latitude: this.form.latitude })
    },

    // 部门
    getDepartment(value) {
      this.form.departmentId = value.departmentId
      this.form.departmentCode = value.departmentCode
      this.form.departmentName = value.departmentName
    },

    // 保存
    onSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return
        if (this.type === 'add' || this.type === 'copy') this.onMethod(saveCustomer)
        if (this.type === 'edit') this.onMethod(updateCustomer)

        return
      })
    },
    onMethod(method) {
      let params = { ...this.form }
      params.pickUpSign = params.pickUpSign ? 1 : 0
      params.autoPickUpSign = params.autoPickUpSign ? 1 : 0
      params.pickUpPicture = params.pickUpPicture ? 1 : 0
      params.deliverySign = params.deliverySign ? 1 : 0
      params.autoDeliverySign = params.autoDeliverySign ? 1 : 0
      params.deliveryPicture = params.deliveryPicture ? 1 : 0
      params.returnOrderFlag = params.returnOrderFlag ? 1 : 0
      params.returnOrderPicture = params.returnOrderPicture ? 1 : 0

      this.spinning = true
      method(params)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('back')
          } else {
            this.$exception(res)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },

    onFormChange(name, ...args) {
      if (name === 'consignor') {
        this.$set(this.form, 'cargoOwnerId', args[1] ? args[2][0].cargoOwnerId : '')
        this.$set(this.form, 'cargoOwnerCode', args[1] ? args[2][0].cargoOwnerCode : '')
        this.$set(this.form, 'cargoOwnerName', args[1] ? args[2][0].cargoOwnerName : '')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.border {
  border: 1px solid #e8e8e8;
}
</style>