<template>
  <ya-drawer
    :drawerProps="props.drawerProps"
    @handleEvent="handleEvent"
    destroy-on-close
    :before-close="handleCloseDrawer"
  >
    <template #content>
      <ya-form
        label-position="top"
        @handleEvent="handleEvent"
        :formColumns="formColumnsDialog"
        labelWidth="100px"
        :formData="formDataDialog"
        :rules="rulesDialog"
        :ref="
          (el) => {
            if (el) dialogForm = el;
          }
        "
      >
      </ya-form>
    </template>
  </ya-drawer>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted, watch } from "vue";
import {
  issuedRisk,
  modifyRisk,
} from "../../../../api/digitalAssets/assetRisk/abnormalRisk";
import { getUserInfoCache } from "../../../../utils/auth/user";
import { yaMessage } from "../../../../utils/message";
const props: any = defineProps({
  assetRiskId: String,
  initData: Function,
  activeNum: Number,
  drawerProps: Object,
});
const formDataDialog: any = ref({});
const formColumnsDialog: any = ref({});
const rulesDialog = ref({});
let dialogForm = ref();
//用户id
interface UserInfo {
  userAuthentication: {
    principal: {
      roleId: number;
    };
  };
}
const userinfo: UserInfo = (getUserInfoCache() || {}) as UserInfo;
const roleid = ref(Number(userinfo.userAuthentication.principal.roleId));

const formColumns1 = ref([
  {
    key: "resource",
    type: "input",
    label: "下发原因",
    col: 24,
    placeholder: "请输入",
    clearable: true,
  },
]);
const formColumns2 = ref([
  {
    key: "accept",
    type: "select",
    label: "是否接受",
    col: 24,
    placeholder: "请选择",
    options: [
      {
        value: "0",
        label: "是",
      },
      {
        value: "1",
        label: "否",
      },
    ],
    clearable: true,
  },
  {
    key: "instruct",
    type: "input",
    label: "接受说明",
    col: 24,
    placeholder: "请输入",
    clearable: true,
  },
]);
const formColumns3 = ref([
  {
    key: "finish",
    type: "select",
    label: "是否完成",
    col: 24,
    placeholder: "请选择",
    options: [
      {
        value: "0",
        label: "是",
      },
      {
        value: "1",
        label: "否",
      },
    ],
    clearable: true,
  },
]);
const formColumns4 = ref([
  {
    key: "through",
    type: "select",
    label: "是否通过",
    col: 24,
    placeholder: "请选择",
    options: [
      {
        value: "0",
        label: "是",
      },
      {
        value: "1",
        label: "否",
      },
    ],
    clearable: true,
  },
  {
    key: "check",
    type: "input",
    label: "核验说明",
    col: 24,
    placeholder: "请输入",
    clearable: true,
  },
]);
const rulesDialog1 = ref({
  resource: [{ message: "请输入下发原因", trigger: "change" }],
});
const rulesDialog2 = ref({
  accept: [{ required: true, message: "请选择", trigger: "change" }],
  instruct: [{ required: false, message: "请输入", trigger: "change" }],
});
const rulesDialog4 = ref({
  through: [{ required: true, message: "请选择", trigger: "change" }],
  check: [{ required: false, message: "请输入", trigger: "change" }],
});
watch(
  () => props.activeNum,
  (val) => {
    if (val == 1) {
      props.drawerProps.title = "下发";
      formColumnsDialog.value = formColumns1;
      rulesDialog.value = rulesDialog1;
    } else if (val == 2) {
      props.drawerProps.title = "整改";
      formColumnsDialog.value = formColumns2;
      rulesDialog.value = rulesDialog2;
    } else if (val == 3) {
      props.drawerProps.title = "整改";
      formColumnsDialog.value = formColumns3;
    } else {
      props.drawerProps.title = "核验";
      formColumnsDialog.value = formColumns4;
      rulesDialog.value = rulesDialog4;
    }
  }
);
watch(
  () => formDataDialog.value.accept,
  (val) => {
    console.log(val);

    if (val == "1") {
      rulesDialog2.value.instruct[0].required = true;
    } else {
      rulesDialog2.value.instruct[0].required = false;
    }
    console.log(rulesDialog2.value.instruct[0].required);
  }
);
watch(
  () => formDataDialog.value.through,
  (val) => {
    if (val == "1") {
      rulesDialog4.value.check[0].required = true;
    } else {
      rulesDialog4.value.check[0].required = false;
    }
  }
);
//抽屉的事件
const handleEvent = function (data) {
  if (data.eventName == "errorSubmit") {
    return;
  } else if (data.eventName == "success") {
    handleConfirm();
    return;
  } else if (data.eventName == "successSubmit") {
    handleSubmit();
    return;
  }
};
//清空表单
const resetDrawerForm = function () {
  formDataDialog.value.resource = "";
  formDataDialog.value.instruct = "";
  formDataDialog.value.accept = "";
  formDataDialog.value.finish = "";
  formDataDialog.value.check = "";
  formDataDialog.value.through = "";
};
// (抽屉的确定事件)
const handleSubmit = function () {
  let params = ref({});
  if (props.activeNum == 1) {
    params.value = {
      flawId: props.assetRiskId,
      userId: roleid.value,
      detail: formDataDialog.value.resource,
    };
    issuedRisk(params.value).then((res) => {
      const { code, message } = res;
      if (code == 200) {
        props.initData();
        props.drawerProps.showDrawer = false;
        yaMessage(message, "success");
        resetDrawerForm();
      }
    });
  } else {
    if (props.activeNum == 2) {
      params.value = {
        detail: formDataDialog.value.instruct,
        isAccepted: formDataDialog.value.accept,
      };
    } else if (props.activeNum == 3) {
      params.value = {
        isDone: formDataDialog.value.finish,
      };
    } else {
      params.value = {
        detail: formDataDialog.value.check,
        isDone: formDataDialog.value.through,
      };
    }
    params.value.flawId = props.assetRiskId;
    modifyRisk(params.value).then((res) => {
      const { code, message } = res;
      if (code == 200) {
        props.initData();
        props.drawerProps.showDrawer = false;
        yaMessage(message, "success");
        resetDrawerForm();
      }
    });
  }
};
const handleConfirm = function () {
  dialogForm.value.submitForm(dialogForm.value.ruleFormRef);
};
// 关闭抽屉
const handleCloseDrawer = async (done) => {
  if (dialogForm.value) {
    await dialogForm.value.resetForm(dialogForm.value.ruleFormRef);
  }
  done();
};
</script>
