<template>
  <div v-loading="loading">
    <el-form ref="form" inline :model="form" v-if="!isEmpty">
      <template v-for="(item, key) in form">
        <select-user
          v-if="item.length > 0"
          :key="key"
          :name="key"
          :item="item"
          :branchsyId="branchsyId"
          :employeeByOrganId="employeeByOrganId"
          :technicianByOrganId="technicianByOrganId"
        />
      </template>
    </el-form>
    <empty v-else>
      <p>无需交接，点击确定继续操作离职</p>
    </empty>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close">取 消</el-button>
      <el-button @click="submit" type="primary">确 定</el-button>
    </span>
  </div>
</template>
<script>
import { array2object } from '@/helpers/utils'
import { employeeOperate } from '@/api/systemManage'
import { employeeLevelDetail, employeeLevel, employeeFindEmployeeByRole } from '../api'
import selectUser from './select-user'
export default {
  props: ['detail'],
  components: {
    'select-user': selectUser
  },
  data() {
    return {
      list: [],
      form: {
        repair: [],
        director: [],
        education: [],
        teamTeacher: [],
      },
      employees: [],
      loading: false,
    }
  },
  computed: {
    isEmpty() {
      let empty = true
      for (const key in this.form) {
        if (Object.hasOwnProperty.call(this.form, key)) {
          const item = this.form[key];
          if (item.length > 0) {
            empty = false
          }
        }
      }
      return empty
    },
    branchsyId() {
      return array2object(this.selects.branchs, 'id')
    },
    technicianByOrganId() {
      const data = {}
      for (const item of this.selects.technician) {
        if (item.organIdList) {
          for (const organId of item.organIdList) {
            if (!data[organId]) {
              data[organId] = []
            }
            data[organId].push(item)
          }
        }
      }
      return data
    },
    employeeByOrganId() {
      const data = {}
      for (const item of this.employees) {
        if (item.organIdList) {
          for (const organId of item.organIdList) {
            if (!data[organId]) {
              data[organId] = []
            }
            data[organId].push(item)
          }
        }
      }
      return data
    }
  },
  async mounted() {
    this.$store.dispatch('setBranchs')
    this.$store.dispatch('setTechnician')
    this.FetchDetail()
  },
  methods: {
    async submit() {
      if (!this.$refs.form) {
        try {
          await employeeOperate({
            employeeId: this.detail.id,
            operate: 'DEMISSION'
          })
          this.$message.success('提交成功')
          this.$listeners.close()
          this.$listeners.submited()
        } catch (error) {}
        return
      }
      this.$refs.form.validate(async valid => {
        if (valid) {
          let list = []
          for (const key in this.form) {
            if (Object.hasOwnProperty.call(this.form, key)) {
              const item = this.form[key];
              list = list.concat(item.map(row => ({...row, roleName: key})))
            }
          }
          try {
            await employeeLevel(list)
            this.$message.success('提交成功')
            this.$listeners.close()
            this.$listeners.submited()
          } catch (error) {}
        }
      })
    },
    async FetchDetail() {
      this.loading = true
      try {
        const res = await Promise.all([
          employeeFindEmployeeByRole({
            rows: 99999
          }),
          employeeLevelDetail({
            userId: this.detail.id
          })
        ]).then(res => {
          this.employees = res[0].data.rows
          return res[1]
        })
        this.list = res.data
        for (const key in res.data) {
          if (Object.hasOwnProperty.call(res.data, key)) {
            const type = res.data[key];
            for (const item of type) {
              this.form[key].push({
                organId: item,
                transferUserId: '',
                levelUserId: this.detail.id
              })
            }
          }
        }
        this.form = this.form
      } catch (error) {}
      this.loading = false
    }
  }
};
</script>
<style lang="less" scoped>
.dialog-footer{
  text-align: right;
  display: block;
  padding-bottom: 20px;
  margin-top: 20px;
}
</style>
