<template>
  <!-- 转移分组模板 -->
  <el-dialog
    :title="title"
    append-to-body
    :visible.sync="box"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="closed"
    width="555px"
  >
    <avue-form ref="groups" :option="option" v-model="form" @submit="handleSubmit">
      <template slot="menuForm" slot-scope="{disabled}">
        <!-- <el-button type="primary" icon="el-icon-check" @click="copy" :disabled="formLoading">提交</el-button> -->
        <el-button icon="el-icon-circle-close" @click="box = false" :loading="disabled">取消</el-button>
      </template>
    </avue-form>
  </el-dialog>
</template>

<script>
import {getDeptMyTree, transferDept} from "@/api/tenant/talents";

export default {
  props: {
    ids: String,
  },
  data() {
    return {
      title: "",
      groupId: "",
      box: false,
      form: {},
      deptId: '',
      depTree: []
    };
  },
  computed: {
    option() {
      return {
        menuPosition: "right",
        menuBtn: true,
        submitBtn: true,
        emptyBtn: false,
        column: [
          {
            label: "所属机构",
            prop: "deptId",
            type: "tree",
            multiple: false,
            dicData: this.depTree,
            props: {
              label: "title",
              value: 'value'
            },
            checkStrictly: true,
            slot: true,
            span: 24,
            change: this.deptChange
          },
          {
            label: "所属分组",
            prop: "groupId",
            type: "tree",
            span: 24,
            display: true,
            dicUrl: `/api/jobslink-api/tenant/talents/group/listAll?groupType=9`,
            dicMethod: "get",
            dicFormatter: (res) => {
              return res.data.list; //返回字典的层级结构
            },
            props: {
              label: "groupName",
              value: "id",
            },
            rules: [
              {
                required: true,
                whitespace: true,
                message: "请选择分组",
                trigger: "change",
              },
            ],
            placeholder: "请选择分组",
          },
        ]
      }
    }
  },
  created() {
    this.getDept()
  },
  methods: {
    deptChange({value, column}) {
      this.deptId = value
      console.log(value)
    },
    async getDept() {
      let params = {
        tenantId: '000000'
      }
      let resData = await getDeptMyTree(params)
      if (resData.data.code === 200) {
        this.depTree = resData.data.data
        console.log(this.depTree)

      }
    },
    closed() {
      this.form = {};
      if (this.$refs.groups) {
        this.$refs.groups.init();
        this.$refs.groups.clearValidate();
        this.$refs.groups.resetForm();
      }
    },
    openDialog() {
      this.title = "转移推送";
      this.box = true;
      if (this.$refs.groups) {
        this.$refs.groups.init();
        this.$refs.groups.clearValidate();
        this.$refs.groups.resetForm();
      }
    },
    handleSubmit(form, done) {
      //提交转移分组接口
      transferDept(this.form.groupId, this.ids, this.deptId).then(
        () => {
          this.box = false;
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$emit("refresh");
          done();
        },
        (error) => {
          window.console.log(error);
          done();
        }
      );
    },
  },
};
</script>

<style>
</style>
