<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import { getNextUser, audit } from "@/api/flow";
import {
  ComponentNameClass,
  DrawerTitleClass,
  TopTitleClass,
} from "@/views/flow/common/CheckTopInfos/utils";
// 要在这里引入组件 才能展示  以及 src/views/flow/common/CheckTopInfos/utils/index.ts  添加类型
import RouteFlowComService from "@/views/flow/common/CheckTopInfos/routeFlowComService.vue";
import RouteFlowService from "@/views/flow/common/CheckTopInfos/routeFlowService.vue";
import SeqInFlowService from "@/views/flow/common/CheckTopInfos/seqInFlowService.vue";
import WorkFormService from "@/views/flow/common/CheckTopInfos/workFormService.vue";
import FilterSheetService from "@/views/flow/common/CheckTopInfos/filterSheetService.vue";
import FilterHSheetService from "@/views/flow/common/CheckTopInfos/filterHSheetService.vue";
import ReworkService from "@/views/flow/common/CheckTopInfos/reworkService.vue";
import RemoveService from "@/views/flow/common/CheckTopInfos/removeService.vue";
import ItemReplaceService from "@/views/flow/common/CheckTopInfos/itemReplaceService.vue";

const allComponents = shallowReactive({
  RouteFlowComService,
  RouteFlowService,
  SeqInFlowService,
  WorkFormService,
  FilterSheetService,
  FilterHSheetService,
  ReworkService,
  RemoveService,
  ItemReplaceService,
});
const dialogVisible = ref(false);
const componentName = ref("");
const emits = defineEmits(["finish", "cancel"]);
const props = defineProps({
  operType: {
    default: "0",
    type: String,
  },
});

const close = () => {
  dialogVisible.value = false;
  componentName.value = "";
};

let currentRow: any = {};
const openCheckDrawer = (row) => {
  dialogVisible.value = true;
  currentRow = row;
  userList.value = [];
  getNextUser("2", row.id).then((res) => {
    if (res.data) {
      showLabel.value = res.data.roleName;
      userList.value = res.data.users;
    }
  });
};
const userList = ref([]);
const showLabel = ref(null);

defineExpose({
  openCheckDrawer,
  close,
});

const activeNames = ref(["1"]);
const handleChange = (val: any) => {
  console.log(val);
};

const auditObj = (params) => {
  audit(params).then((res) => {
    emits("finish", 1);
    dialogVisible.value = false;
  });
};
const toPass = async () => {
  const params = {
    taskId: currentRow.id,
    message: currentRow.message,
    state: 1,
    nextUsers: currentRow.nextUsers,
  };
  auditObj(params);
};

const disAgree = async () => {
  if (!currentRow.message) {
    currentRow.message = "不同意";
  }
  const params = {
    taskId: currentRow.id,
    message: currentRow.message,
    state: -1,
    nextUsers: currentRow.nextUsers,
  };
  auditObj(params);
};

watch(
  () => props.operType,
  (val) => {
    alert(props.operType);
  },
  {
    immediately: true,
  }
);
</script>

<template>
  <el-drawer
    v-model="dialogVisible"
    direction="rtl"
    size="1000"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <template #header>
      <h4 v-text="DrawerTitleClass[currentRow.taskType]"></h4>
    </template>
    <template #default>
      <el-scrollbar>
        <div class="check-container">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item
              :title="TopTitleClass[currentRow.taskType]"
              name="1"
            >
              <component
                :is="allComponents[ComponentNameClass[currentRow.taskType]]"
                :row="currentRow"
              />
            </el-collapse-item>
          </el-collapse>
          <el-form style="margin-top: 20px" v-if="props.operType == 'todo'">
            <el-form-item :label="showLabel" v-if="showLabel && userList">
              <el-select
                v-model="currentRow.nextUsers"
                filterable
                allow-create
                default-first-option
                placeholder="请选择人员"
              >
                <el-option
                  v-if="userList"
                  v-for="item in userList"
                  :key="item.userName"
                  :label="item.userName"
                  :value="item.userName"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="审核意见:">
              <el-input v-model="currentRow.message"></el-input>
            </el-form-item>
          </el-form>
          <el-form style="margin-top: 20px" v-if="props.operType == 'done'">
            <el-form-item label="审核状态:">
              <el-tag v-if="currentRow.state === '1'" type="success"
                >通过</el-tag
              >
              <el-tag v-if="currentRow.state === '-1'" type="error"
                >驳回</el-tag
              >
              <el-tag v-if="currentRow.state === '2'" type="error"
                >已撤回</el-tag
              >
            </el-form-item>
            <el-form-item label="审核意见:">
              <el-input v-model="currentRow.opinion" disabled></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="close">取消</el-button>
        <el-button
          v-if="props.operType == 'todo'"
          type="primary"
          @click="toPass"
          >通过</el-button
        >
        <el-button
          v-if="props.operType == 'todo'"
          type="warning"
          @click="disAgree"
          >不同意</el-button
        >
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
:deep(.el-drawer__header) {
  margin: 0;
}
.check-container {
  font-size: 14px;
}
</style>
