<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close">
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-row>
        <el-col v-if="form.parentId !== 0" :span="24">
          <el-form-item label="上级部门" prop="parentId">
            <treeselect
              v-model="form.parentId"
              :normalizer="normalizer"
              :options="deptOptions"
              placeholder="选择上级部门" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="部门名称" prop="deptName">
            <el-input v-model="form.deptName" placeholder="请输入部门名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="sort">
            <el-input-number
              v-model="form.sort"
              controls-position="right"
              :min="0" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="负责人" prop="leader">
            <el-input
              v-model="form.leader"
              maxlength="20"
              placeholder="请输入负责人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="form.phone"
              maxlength="11"
              placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input
              v-model="form.email"
              maxlength="50"
              placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio label="10">正常</el-radio>
              <el-radio label="20">停用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import deptApi from '@/api/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'DeptEdit',
    components: { Treeselect },
    data() {
      return {
        // 部门树选项
        deptOptions: [],
        defaultProps: {
          children: 'children',
          label: 'deptName',
        },
        form: {
          status: '10',
        },
        rules: {
          parentId: [
            { required: true, trigger: 'blur', message: '请选择上级部门' },
          ],
          deptName: [
            { required: true, trigger: 'blur', message: '请输入部门名称' },
          ],
          sort: [{ required: true, trigger: 'blur', message: '请输入排序' }],
          email: [
            {
              type: 'email',
              message: "'请输入正确的邮箱地址",
              trigger: ['blur', 'change'],
            },
          ],
          phone: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: '请输入正确的手机号码',
              trigger: 'blur',
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      // this.fetchData()
    },
    methods: {
      async fetchData(row) {
        let params = {}
        if (row) {
          params.excludeId = row.id
        }
        const { data: data } = await deptApi.getList(params)
        if (data) {
          this.deptOptions = this.translateDataToTree(data)
        }
      },
      handleNodeClick(node) {
        this.form.parentName = node.deptName
        this.form.parentId = node.id
      },
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
        }
        this.fetchData(row)
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let res
            if (this.form.id) {
              res = await deptApi.doEdit(this.form)
            } else {
              res = await deptApi.doAdd(this.form)
            }
            this.$baseMessage(res.msg, 'success', 'vab-hey-message-success')
            this.$emit('fetch-data')
            this.close()
          }
        })
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.id,
          label: node.deptName,
          children: node.children,
        }
      },
    },
  }
</script>
