<template>
  <form-list class="mt-5" ref="form" :items="option">
    <!-- <template #userEmp>
      <v-switch v-model="userEmp" label="不使用员工机构组织" @change="handleUserEmp"></v-switch>
    </template> -->
    <template #showPassword="{ item }">
      <v-switch v-model="item.value" label="统一认证账号可选择不设置密码" @change="handleShowPassword"></v-switch>
    </template>
  </form-list>
</template>

<script>
import FormList from '@/components/Form/list'
import { getRoleList } from '@/api/menu'
import { coreGraph } from '@/api'
export default {
  name: 'user-edit',
  components: { FormList },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    itemData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      option: {
        options: [
          {
            type: 'text',
            key: 'username',
            value: null,
            label: '请输入用户账号/统一认证号 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入用户账号/统一认证号']
          },
          {
            type: 'text',
            key: 'name',
            value: null,
            label: '请输入昵称 *',
            outlined: true,
            dense: true,
            rules: [v => !!v || '请输入昵称']
          },
          // {
          //   type: 'text',
          //   key: 'employeeCode',
          //   value: null,
          //   label: '请绑定人员编码 *',
          //   outlined: true,
          //   dense: true,
          //   rules: [v => !!v || '请绑定人员编码']
          // },
          {
            value: false,
            noParam: true,
            hide: this.isEdit,
            key: 'showPassword',
            slotName: 'showPassword'
          },
          {
            type: 'password',
            key: 'password',
            value: null,
            disabled: false,
            hide: this.isEdit,
            label: '请输入用户密码 *',
            outlined: true,
            dense: true
          },
          // {
          //   hide: this.$store.getters.userInfo.tenantCode !== '1',
          //   slotName: 'userEmp'
          // },
          {
            type: 'autocomplete',
            key: 'organizationNo',
            value: null,
            label: '请选择所在机构 *',
            outlined: true,
            dense: true,
            col: 6,
            hide: true,
            itemText: 'organization_name',
            itemValue: 'organization_no',
            items: [],
            noParam: true,
            change: this.handleChangeEmp
          },
          {
            type: 'autocomplete',
            key: 'employeeCode',
            value: null,
            label: '请选择要绑定的员工 *',
            noDataText: '请先选择所属机构',
            outlined: true,
            hide: true,
            col: 6,
            dense: true,
            itemText: 'staff_name',
            itemValue: 'staff_code',
            rules: [v => !!v || '请选择要绑定的员工'],
            items: []
          },
          {
            type: 'text',
            key: 'phone',
            col: 6,
            value: null,
            label: '请输入用户电话',
            outlined: true,
            dense: true
          },
          {
            type: 'text',
            key: 'email',
            col: 6,
            value: null,
            label: '请输入用户邮箱',
            outlined: true,
            dense: true
          },
          {
            type: 'autocomplete',
            key: 'roleId',
            value: [],
            label: '请选择用户角色 *',
            itemText: 'roleName',
            itemValue: 'id',
            outlined: true,
            noAttach: true,
            multiple: true,
            dense: true,
            rules: [v => v.length > 0 || '请选择用户角色'],
            items: [],
            change: this.change
          },
          {
            type: 'ifRadio',
            key: 'state',
            value: 0,
            label: '用户状态',
            outlined: true,
            dense: true,
            items: [{ label: '正常', value: 0 }, { label: '冻结', value: 1 }]
          }
        ]
      }
    }
  },
  computed: {
    useEmp () {
      return this.$store.getters.userInfo.tenantCode === 'a613722d-f0cc-404b-88b7-4f92dbed5264'
    }
  },
  async created () {
    this.handleUserEmp(!this.useEmp)
    if (this.useEmp) {
      await this.getDeptItems()
    }
    await this.initDict()
    if (this.isEdit) {
      this.option.options.forEach(element => {
        if (element.key === 'username') element.disabled = true
        if (element.key === 'roleId') {
          element.value = this.itemData.role.map(e => e.id)
          return
        }
        element.value = this.itemData[element.key]
      })
      if (this.useEmp) {
        this.getEmpInfo(this.itemData.employeeCode)
      }
    }
  },
  methods: {
    handleUserEmp (val) {
      this.option.options.forEach(ele => {
        if (ele.key === 'organizationNo' || ele.key === 'employeeCode') {
          ele.hide = val
        }
      })
    },
    async getDeptItems () {
      try {
        const query = {
          metaDataCombinationEngName: 'organization',
          history: 1,
          pageState: 0
        }
        const { data } = await coreGraph(query)
        this.option.options.find(e => e.key === 'organizationNo').items = data
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async handleChangeEmp (e) {
      const dept = this.option.options.find(e => e.key === 'organizationNo').items
      const obj = dept.find(val => val.organization_no === e)
      if (!obj) {
        return
      }
      const dbColumn = ['分行', '支行'].indexOf(obj?.organization_category) !== -1 ? 'parent_organization_no' : 'organization_no'
      try {
        const query = {
          metaDataCombinationEngName: 'employee_organization',
          history: 1,
          pageState: 0,
          query: [
            { dbColumn, compare: '=', value: e }
          ]
        }
        const { data } = await coreGraph(query)
        this.option.options.find(e => e.key === 'employeeCode').items = data
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    // 编辑回显机构&员工
    async getEmpInfo (value) {
      if (!value) return
      try {
        const query = {
          metaDataCombinationEngName: 'employee_organization',
          history: 1,
          pageState: 0,
          query: [
            { dbColumn: 'staff_code', compare: '=', value }
          ]
        }
        const { data } = await coreGraph(query)
        if (!data.length) return
        this.option.options.find(e => e.key === 'organizationNo').value = data[0].organization_no
        this.handleChangeEmp(data[0].organization_no)
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    change () {
      // console.log(arguments)
    },
    async initDict () {
      try {
        const { data } = await getRoleList({ size: 9999 })
        this.option.options.find(e => e.key === 'roleId').items = data.records
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    validate () {
      return this.$refs.form.$refs.form.validate()
    },
    getValue () {
      // const obj = {}
      return this.option.options.reduce((res, item) => {
        if (item.noParam || item.hide) {
          return res
        }
        if (item.key === 'roleId') {
          res[item.key] = item.value.toString()
          return res
        }
        res[item.key] = item.value

        return res
      }, {})
      // this.option.options.forEach(element => {
      //   if (element.noParam) return
      //   if (!element.hide && element.key !== 'showPassword') obj[element.key] = element.value
      // })
      // return obj
    },
    handleShowPassword (val) {
      const obj = this.option.options.find(e => e.key === 'password')
      if (val) {
        obj.disabled = true
        obj.value = null
      } else obj.disabled = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
