<template>
  <el-dialog
    class="danger-tips-dialog"
    :visible.sync="modalIsShow"
    width="400px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
    destroy-on-close
    @open="visibleChange"
  >
    <p class="tips-info tips-error mb-2">
      {{ curInfo.name }}操作会{{ curInfo.tips }}，请谨慎操作！！！
    </p>
    <el-form ref="modalFormComp" :model="modalForm" :rules="rules" inline>
      <el-form-item :label="`如要${curInfo.name}请输入工号`"></el-form-item>
      <el-form-item prop="content">
        <el-input
          v-model.trim="modalForm.content"
          placeholder="请输入"
          clearable
          style="width: 160px"
        ></el-input>
      </el-form-item>
    </el-form>

    <template slot="footer">
      <template v-if="confirmTime % 2">
        <el-button type="primary" :disabled="isSubmit" @click="submit"
          >确认</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </template>
      <template v-else>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" :disabled="isSubmit" @click="submit"
          >确认</el-button
        >
      </template>
    </template>
  </el-dialog>
</template>

<script>
import {
  markMarkerReset,
  markMarkerUnbind,
  markMarkerRecycle,
} from "../../api";

export default {
  name: "danger-tips-dialog",
  props: {
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
    type: {
      type: String,
      default: "reset",
    },
    groupIds: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      modalIsShow: false,
      isSubmit: false,
      infos: {
        reset: {
          name: "重置",
          tips: "将评卷员已评任务删除",
        },
        unbind: {
          name: "解绑",
          tips: "将该评卷员与这个分组关系解除绑定，他不能评这个分组",
        },
        recycle: {
          name: "回收",
          tips: "将评卷员已领未评的任务，放到未评池中",
        },
      },
      loginName: this.$ls.get("user", { loginName: "" }).loginName,
      curInfo: {},
      confirmTime: 0,
      maxConfirmTime: 3,
      modalForm: { content: "" },
      rules: {
        content: [
          {
            validator: (rule, value, callback) => {
              if (value !== this.loginName) {
                return callback(new Error(`请输入工号`));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    visibleChange() {
      this.curInfo = this.infos[this.type];
      this.modalForm.content = "";
      this.confirmTime = 0;
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    async submit() {
      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
      if (!valid) return;

      this.confirmTime += 1;
      if (this.confirmTime < this.maxConfirmTime) {
        this.modalForm.content = "";
        return;
      }

      if (this.isSubmit) return;
      this.isSubmit = true;

      let err = null;
      if (this.type === "reset") {
        await markMarkerReset({
          markUserGroupId: this.rowData.markUserGroupId,
        }).catch(() => {
          err = true;
        });
      } else if (this.type === "unbind") {
        await markMarkerUnbind({
          markUserGroupId: this.rowData.markUserGroupId,
        }).catch(() => {
          err = true;
        });
      } else {
        await markMarkerRecycle({
          markUserGroupIds: this.groupIds,
        }).catch(() => {
          err = true;
        });
      }
      this.isSubmit = false;
      if (err) return;

      this.$message.success("操作成功！");
      this.$emit("modified");
      this.cancel();
    },
  },
};
</script>
