<template>
  <div class="pages">
    <p-card class="full-card-panel">
      <div slot="title" style="display: inline-block; cursor: pointer" @click="back">
        <a-icon class="mr-10" style="color: #1990ff" type="arrow-left" />
        用户管理{{ typeTitle }}
      </div>
      <div v-if="type !== 'view'" slot="extra">
        <p-button type="primary" @click="onSubmit">保存</p-button>
      </div>
      <p-spin :spinning="spinning">
        <p-form-model
          ref="formTarget"
          :label-col="{ span: 8 }"
          :model="form"
          :rules="{
            username: [{ required: true, message: '请输入用户账号', trigger: 'change' }],
            nickname: [{ required: true, message: '请输入用户名称', trigger: 'change' }],
            personType: [{ required: true, message: '请选择账号类型', trigger: 'change' }],
            expireDate: [{ required: true, message: '请选择有效期至', trigger: 'change' }],
            userCategory: [{ required: true, message: '请选择用户分类', trigger: 'change' }],
            // companyName: [{ required:!companyAttr.disabled, message: '请选单位', trigger: 'change' }],
            password: [{ required: true, message: '请输入密码', trigger: 'change' }],
          }"
          :wrapper-col="{ span: 16 }"
          class="plg-grid-from"
        >
          <a-row>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="用户账号" prop="username">
                <p-input v-model="form.username" :disabled="type !== 'add'" placeholder="请输入用户账号" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="用户名称" prop="nickname">
                <p-input v-model="form.nickname" :disabled="type === 'view'" placeholder="请输入用户名称" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <a-form-model-item label="账号类型" prop="personType">
                <p-select v-model="form.personType" placeholder="选择账号类型" :disabled="type === 'view'" :options="personTypeOptions" allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <a-form-model-item label="有效期至" prop="expireDate">
                <p-date-picker :disabled="type === 'view'" v-model="form.expireDate" style="width: 100%" valueFormat="YYYY-MM-DD" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <a-form-model-item label="用户分类" prop="userCategory">
                <p-select v-model="form.userCategory" :disabled="type === 'view'" placeholder="选择用户分类" :options="userCategoryOptions" @change="userCategoryChange" allowClear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="员工编号">
                <p-input v-model="form.employeeNum" :disabled="type === 'view' || form.userCategory !== 'I'" placeholder="请输入员工编号" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="单位名称" prop="companyName">
                <p-search-modal v-model="form.companyName" v-bind="companyAttr" @change="(event, value) => onFormChange('company', event, value)" />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="单位编号">
                <p-input v-model="form.companyCode" disabled readOnly/>
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="联系电话">
                <p-input v-model="form.phoneNumber" :disabled="type === 'view'" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="邮箱">
                <p-input v-model="form.emailAddr" :disabled="type === 'view'" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6" v-if="type === 'add'">
              <p-form-model-item label="用户密码" prop="password">
                <p-input v-model="form.password" allowClear />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="是否启用">
                <p-switch v-model="form.disable" :replaceFields="{ true: 1, false: 0 }" :disabled="type === 'view'" allowClear />
              </p-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="创建人">
                <p-input v-model="form.createby" disabled />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="创建时间">
                <p-input v-model="form.createDate" disabled />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="最后修改人">
                <p-input v-model="form.lastmodifyby" disabled />
              </p-form-model-item>
            </a-col>
            <a-col :span="8" :xxl="6">
              <p-form-model-item label="最后修改时间">
                <p-input v-model="form.lastmodifydate" disabled />
              </p-form-model-item>
            </a-col>
          </a-row>
        </p-form-model>
      </p-spin>
    </p-card>
  </div>
</template>

<script>
import { add, update, getDetail } from './api'
import * as $formItems from './modules/searchModalConfig'

export default {
  props: {
    type: '',
    editData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      $formItems,
      spinning: false,
      form: {
        disable: 1,
        userCategory: 'I',
        companyName: '',
        companyCode: '',
        companyId: '',
      },
      // 字典
      voidOptions: [],
      personTypeOptions: [
        { label: '企业管理员', value: 1 },
        { label: '普通用户', value: 2 },
      ],
      userCategoryOptions: [
        { label: '内部员工', value: 'I' },
        { label: '客户', value: 'C' },
        { label: '供应商', value: 'V' },
        { label: '货主', value: 'H' },
        { label: '承运商', value: 'S' },
        { label: '司机', value: 'D' },
        { label: '送货员', value: 'M' },
      ],
    }
  },
  mounted() {
    if (this.editData.id) {
      this.getDetail()
    }
  },
  computed: {
    typeTitle() {
      const dictionary = {
        add: '新增',
        edit: '编辑',
        view: '查看',
      }
      return dictionary[this.type] || this.type
    },
    companyAttr() {
      //      // I-内部员工 C-客户 V-供应商 H-货主 S-承运商
      const { userCategory } = this.form
      if (!userCategory) {
        return { tableConfig: {}, placeholder: '请先选择单位类型', disabled: true }
      }
      // I-内部员工 C-客户 V-供应商 H-货主 S-承运商 D-司机,M-送货员
      if (userCategory === 'I'||userCategory === 'D'||userCategory === 'M') return { tableConfig: {}, placeholder: '仅需输入员工编号', disabled: true }
      if (userCategory === 'C') return $formItems.customerAttr
      if (userCategory === 'V') return $formItems.supplierAttr
      if (userCategory === 'H') return $formItems.consignorAttr
      if (userCategory === 'S') return $formItems.carrierAttr
      return { tableConfig: {}, placeholder: '匹配错误', disabled: true }
    },
  },
  methods: {
    back() {
      this.$emit('back')
    },
    getDetail() {
      const { id } = this.editData
      getDetail({ userId: id }).then((res) => {
        if (res.success) {
          delete res.data.roles
          this.form = res.data
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    // 保存提交
    onSubmit() {
      this.$refs.formTarget.validate((flag) => {
        if (!flag) return
        if (this.type === 'add') this.onAdd()
        if (this.type === 'edit') this.onUpdate()
      })
    },
    // 新增
    onAdd() {
      this.spinning = true
      add({ ...this.form })
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.back()
          } else {
            this.$message.warn(res.message)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    // 更新
    onUpdate() {
      this.spinning = true
      update({ ...this.form })
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.back()
          } else {
            this.$message.warn(res.message)
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    // 用户分类修改
    userCategoryChange(value, label) {
      Object.assign(this.form, { employeeNum: '', companyName: '', companyCode: '', companyId: '' })
    },
    onFormChange(name, { selectData }, value) {
      selectData = Array.isArray(selectData) ? selectData[0] : selectData
      if (name === 'branch') {
        if (!value) {
          Object.assign(this.form, { branchname: '', branchcode: '', branchid: '' })
          return
        }
        const { branchname, branchcode, branchid } = selectData
        this.$set(this.form, 'branchname', branchname)
        this.$set(this.form, 'branchcode', branchcode)
        this.$set(this.form, 'branchid', branchid)
        return
      }
      if (name === 'company') {
        if (!value) {
          Object.assign(this.form, { companyName: '', companyCode: '', companyId: '' })
          return
        }
        let companyName, companyCode, companyId
        const { userCategory } = this.form
        // I-内部员工 C-客户 V-供应商 H-货主 S-承运商
        if (userCategory === 'C') {
          const { customerName, customerCode, id: customerId } = selectData
          companyName = customerName
          companyCode = customerCode
          companyId = customerId
        }
        if (userCategory === 'V') {
          const { supplierName, supplierCode, id: supplierId } = selectData
          companyName = supplierName
          companyCode = supplierCode
          companyId = supplierId
        }
        if (userCategory === 'H') {
          const { consignorName, consignorCode, id: consignorId } = selectData
          companyName = consignorName
          companyCode = consignorCode
          companyId = consignorId
        }
        if (userCategory === 'S') {
          const { carrierName, carrierCode, id: carrierId } = selectData
          companyName = carrierName
          companyCode = carrierCode
          companyId = carrierId
        }
        if (userCategory === 'M' || userCategory === 'D') {
          companyName = ''
          companyCode = ''
          companyId = ''
        }
        Object.assign(this.form, { companyName, companyCode, companyId })
        return
      }
    },
  },
}
</script>

<style lang='less' scoped>
::v-deep .ant-select,
::v-deep .ant-input-number {
  width: 100%;
}
</style>