<template>
  <Modal
    :options="getModalOptions"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
    :on-close="handleClose"
  >
    <template #Context>
      <n-form
        ref="formRef"
        :model="form"
        label-placement="left"
        :rules="rules"
        :on-positive-click="handleConfirm"
        :on-negative-click="handleClose"
      >
        <n-form-item label="部门编号:" path="code">
          <n-input
            v-model:value="form.code"
            clearable
            :maxlength="20"
            placeholder="请输入部门编号"
          />
        </n-form-item>
        <n-form-item label="部门名称:" path="name">
          <n-input
            v-model:value="form.name"
            clearable
            :maxlength="20"
            placeholder="请输入部门名称"
          />
        </n-form-item>
        <n-form-item label="所属部门:" path="pid">
          <n-select
            v-model:value="form.pid"
            :options="getDeptList"
            placeholder="请选择所属部门"
          />
        </n-form-item>
        <n-form-item label="排序号" path="sort">
          <n-input-number v-model:value="form.sort" placeholder="请输入排序号" />
        </n-form-item>
        <n-form-item
          label="备注:"
        >
          <n-input
            v-model:value="form.note"
            type="textarea"
            :rows="3"
            :maxlength="200"
            placeholder="请输入备注"
          />
        </n-form-item>
      </n-form>
    </template>
  </Modal>
</template>

<script>
import { defineComponent, computed, reactive, toRefs } from 'vue'
import Modal from '@/components/Modal/index.vue'
import { addDept, editDept } from '@/api/system/dept/index'
export default defineComponent({
  name: 'UserModal',
  components: { Modal },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {}
    },
    deptList: {
      type: Array,
      default: () => []
    }
  },
  emits: {
    'update:visible': null,
    'done': null
  },
  setup(props, { emit }) {
    const data = reactive({
      form: {
        avatar: '/images/user/20211011/20211011151447698.jpg',
        code: '',
        deptId: null,
        username: '',
        realname: '',
        password: '',
        roleIds: [],
        status: 1,
        note: ''

      },
      deptOptions: [],
      rolesOptions: [],
      rules: {
        code: [
          { required: true, message: '请输入部门编号', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入部门名称', type: 'string', trigger: 'blur' }
        ],
        sort: [
          { required: true, type: 'number', message: '请输入排序号', trigger: 'blur' }
        ]
      }
    })
    // 获取部门选项
    const getDeptList = computed(() => {
      const list = props.deptList.map((item) => {
        const menu = {
          label: item.name,
          value: item.id
        }
        return menu
      })
      return list
    })

    const getModalOptions = computed(() => {
      const row = props.row
      if (props.row.pid === 0) {
        row.pid = null
      }
      console.log('====部门计算属性触发了====', row)
      return {
        title: props.row.name ? '修改部门' : '添加部门',
        show: props.visible,
        form: Object.assign(data.form, row),
        negativeText: '取消',
        positiveText: '确认'
      }
    })

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    return {
      ...toRefs(data),
      getDeptList,
      getModalOptions,
      handleClose
    }
  },
  methods: {
    // 表单提交
    handleConfirm() {
      const type = this.row.name ? 'edit' : 'add'
      this.$refs.formRef.validate((errors) => {
        if (!errors) {
          if (type === 'add') {
            addDept(this.form).then(res => {
              if (res.code === 0) {
                this.handleClose()
                this.$emit('done')
                $message.success(res.msg)
              } else {
                $message.error(res.msg)
              }
            }).catch(e => {
              console.log(e)
            })
          } else if (type === 'edit') {
            editDept(this.form).then(res => {
              if (res.code === 0) {
                this.handleClose()
                this.$emit('done')
                $message.success(res.msg)
              } else {
                $message.error(res.msg)
              }
            })
          }
        }
      })
    }
  }
})
</script>
<style scoped lang='scss'>
</style>
