<template>
  <div>
    <editMode ref="editMode" v-model="formVisible" :loading="detailLoading" :options="formOptions" :data="defaultFormData" :title="title || titles[mode]" :mode="detailMode" @dataChange="formData = $event" @submit="submit" @close="close">
      <template #parentId="{row}">
        <DeptSelect v-if="mode == 'add'" ref="deptSelect" v-model.trim="row.parentName" dept @change="Object.assign(row, { parentId: $event.deptId, parentName: $event.deptName })" />
        <div v-else>{{ row.parentName || '--' }}</div>
      </template>
    </editMode>
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import detailMixins from '../mixins/detail'
import { addDept, updateDept } from '@/apiV2/dept'

export default {
  name: '',
  inject: ['global', 'refresh'],
  mixins: [detailMixins],
  data() {
    return {
      detailLoading: false,
      mode: 'see', // 查看see / 编辑edit / 添加add
      title: '',
      titles: { // 弹窗标题(动态)
        see: '查看',
        add: '新增',
        edit: '编辑'
      },
      formVisible: false // 弹窗显示
    }
  },
  computed: {
    isEditAdd() {
      return this.mode === 'edit' || this.mode === 'add'
    },
    detailMode() {
      return this.mode === 'addChild' ? 'add' : this.mode
    }
  },
  methods: {
    showDialog({ mode, title, formData }) {
      this.title = title
      this.mode = mode || (this.formData.id ? 'edit' : 'add')
      if (mode === 'add') {
        this.resetFormData()
      } else {
        this.defaultFormData = deepClone(formData)
      }
      this.initFormData()
      this.formVisible = true
    },
    initFormData() { // 表单数据 初始化过滤
      // const { userRoleList } = this.global
      const { id, name, parentId } = this.defaultFormData
      if (this.mode === 'edit') {
        if (parentId === 0) this.$set(this.defaultFormData, 'parentName', '--')
      } else if (this.mode === 'addChild') {
        this.resetFormData()
        this.$set(this.defaultFormData, 'parentId', id)
        this.$set(this.defaultFormData, 'parentName', name)
      }
    },
    filterFormData(formData) { // 表单数据 提交过滤
      const data = deepClone(formData)
      if (data.id === 0) {
        delete data.parentName
      }
      return data
    },
    async submit(data) {
      const formData = this.filterFormData(data)
      this.detailLoading = true
      try {
        let res = {}
        if (this.mode === 'add' || this.mode === 'addChild') {
          res = await addDept(formData)
        } else {
          res = await updateDept(formData)
        }
        if (res.success) {
          this.formVisible = false
          this.refresh()
        }
      } finally {
        this.detailLoading = false
      }
    },
    close() {
      this.resetFormData()
      this.$refs.editMode.clearValidate()
      this.formVisible = false
    }
  }
}
</script>

<style scoped lang="scss">

.width-clear {
  width: auto
}
.finish-dialog {
  /deep/ .el-form-item {
    &__content  {
      width: calc(100% - 180px); // 减去label宽
      max-width: none;
      .el-checkbox-group {
        line-height: normal;
      }
    }
    &__label {
      padding-right: 12px !important;
    }
    &.fit-width {
      .el-form-item__content {
        width: fit-content;
      }
    }
  }
  &.edit, &.add {
    /deep/ .el-form-item {
      margin-bottom: 22px;
    }
  }
  &.see {
    .detail-dialog {
      // background-color: #f8f8f8;
      padding: 20px;
    }
    /deep/ .el-form-item {
      &__label, &__content { // 统一行高
        line-height: 2;
      }
      margin-bottom: 10px;
    }
  }
}

/* 穿梭框 */
/deep/ .el-transfer {
  &__buttons {
    display: inline-flex;
    flex-direction: column;
    .el-button + .el-button {
      margin-left: 0;
    }
  }
}
</style>
