<template>
  <div class="body">
    <div class="line">
      <div class="el-descriptions__title">流程状态</div>
      <el-timeline style="max-width: 600px; margin-top: 20px">
        <template v-if="LogList.length > 0">
          <el-timeline-item
            v-for="(item, index) in LogList"
            :key="index"
            center
            :timestamp="item.created"
            placement="top"
          >
            <el-card>
              <h4>阶段：{{ item.currentStep }}
                <el-tag v-if="item.currentType === 'wf-start'" type="success">发起</el-tag>
                <el-tag v-if="item.currentType === 'wf-end'" type="success">结束</el-tag>
                <el-tag v-if="item.currentType === 'wf-flow' && item.state === '0'" type="info">待审核</el-tag>
                <el-tag v-if="item.currentType === 'wf-flow' && item.state === '1'" type="success">通过</el-tag>
                <el-tag v-if="item.currentType === 'wf-flow' && item.state === '-1'" type="error">驳回</el-tag>
                <el-tag v-if="item.currentType === 'wf-flow' && item.state === '2'" type="error">已撤回</el-tag>
              </h4>
              <h4 v-if="item.currentType !== 'wf-end'">
                审核意见：{{ item.opinion }}
              </h4>
              <h4 v-if="item.currentType !== 'wf-end'">接收时间：{{ item.created }}</h4>
              <h4 v-if="item.currentType !== 'wf-end'">审核时间：{{ item.auditTime }}</h4>
              <p v-if="item.currentType !== 'wf-end'">操作人：{{ item.auditUser }}</p>
            </el-card>
          </el-timeline-item>
        </template>
        <template v-else>暂无内容</template>
      </el-timeline>
    </div>
    <div class="form">
      <div class="description">
        <el-descriptions title="基本信息" border>
          <el-descriptions-item label="物料编号">{{
            props.rowData.materialCode
          }}</el-descriptions-item>
          <el-descriptions-item label="物料名称">{{
            props.rowData.materialName
          }}</el-descriptions-item>
          <el-descriptions-item label="物料型号">{{
            props.rowData.materialModel
          }}</el-descriptions-item>
          <el-descriptions-item label="订单编号">
            {{ props.rowData.orderCode }}
          </el-descriptions-item>
          <el-descriptions-item label="订单名称">
            {{ props.rowData.orderName }}
          </el-descriptions-item>
          <el-descriptions-item label="归档状态">
            {{ getStatus(props.rowData.state) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-button
        type="success"
        style="margin-bottom: 10px"
        @click="showProExcel(rowData.id)"
        >查看表格数据</el-button
      >
      <div class="el-descriptions__title" v-if="!showStatus">提交申请</div>
      <div class="applyForm" v-if="!showStatus">

        <el-form ref="flowFormRef" v-model="flowForm" label-width="100px">
          <el-form-item label="选择流程模板">
            <el-tree-select
              v-model="flowForm.definitionId"
              :data="flowDataList"
              filterable
              :props="{ label: 'flowName', value: 'id' }"
              @change="whenSelectFlow"
            />
          </el-form-item>
          <el-form-item :label="name" v-if="name">
            <el-tree-select
              v-model="flowForm.users"
              :data="nextUserList"
              filterable
              :props="{ label: 'userName', value: 'userName' }"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="btns">
        <el-button type="primary" @click="sureToSave" v-if="!showStatus"
          >提交</el-button
        >
      </div>
    </div>
    <el-dialog
      v-model="dialog8.visible"
      :title="dialog8.title"
      width="950px"
      @close="dialog8.visible = false"
    >
      <el-card
        style="cursor: pointer; font-size: 20px"
        shadow="always"
        :key="index"
        @click="toShowExcel(item)"
        v-for="(item, index) in showProList"
        >{{ item.formName }}</el-card
      >
    </el-dialog>
    <el-dialog
      v-model="excelShow"
      title="详情"
      @close="excelShow = false"
      append-to-body
      fullscreen
      destroy-on-close
    >
      <ExcelDataBbox :data="ExDataObj" @close="excelShow = false" />
    </el-dialog>
  </div>
</template>
<script setup>
import {
  gerFormList,
  toCheck,
  logList,
  examineList,
  getExcelData,
} from "@/api/apply";
import {getNextUser, queryFlowDataList, submitFlow} from "@/api/flow";
import { getUserTree } from "@/api/system/user";
import ExcelDataBbox from "@/views/base/apply/excelDataBbox.vue";
const props = defineProps({
  rowData: {
    type: Object,
  },
  showStatus: {
    type: Boolean,
  },
});
const dialog8 = reactive({
  title: "表单列表",
  visible: false,
});
// 流程定义的列表
const flowDataList = ref([]);
const getFlowList = () => {
  flowForm.flowType = "workFormService"
  if(props.rowData.formType==='17'){
    flowForm.flowType = "filterSheetService"
  }
  if(props.rowData.formType==='18'){
    flowForm.flowType = "filterHSheetService"
  }
  queryFlowDataList({ flowType: flowForm.flowType }).then((res) => {
    flowDataList.value = res.data;
  });
};
const showProList = ref([]);
const showProExcel = async (id) => {
  const { data, code } = await getExcelData(id);
  showProList.value = data;
  dialog8.visible = true;
};

const flowFormRef = ref();
const flowForm = reactive({
  businessId: "",
  flowType: "workFormService",
  definitionId: "",
  users: "",
});
const excelShow = ref(false);
const ExDataObj = ref({});
const toShowExcel = (item) => {
  ExDataObj.value = item;
  excelShow.value = true;
};
const nextUserList=ref([]);
const name = ref("");
const whenSelectFlow = () => {
    //   选择完模板之后  下一节点人员 type 1 流程 2 任务
    getNextUser("1", flowForm.definitionId).then((res) => {
        name.value = res.data?.roleName ?? "";
        nextUserList.value = res.data?.users ?? [];
    });
};

const sureToSave = () => {
  flowForm.businessId=props.rowData.id;
  flowForm.flowType = "workFormService"
  if(props.rowData.formType==='17'){
    flowForm.flowType = "filterSheetService"
  }
  if(props.rowData.formType==='18'){
    flowForm.flowType = "filterHSheetService"
  }
  submitFlow(flowForm).then(() => {
    ElMessage.success("提交成功");
    emits("close");
    emits("dataList");

  });
};
const emits = defineEmits(["close", "dataList"]);
const getStatus = (val) => {
  switch (val) {
    case "0":
      return "待发起";
      break;
    case "1":
      return "完成";
      break;
    case "-1":
      return "驳回";
      break;
    case "2":
      return "撤回";
      break;
    case "3":
      return "审核中";
      break;
  }
};
const applyFormRef = ref([]);
const checkList = ref([]);
const userList = ref([]);
const submitList = ref([]);
const LogList = ref([]);
const getlogList = async () => {
  if(props.rowData.flowIns){
    const { data } = await logList(props.rowData.flowIns);
    LogList.value = data;
  }

};
const submit = async () => {
  const promiseArray = ref([]);
  applyFormRef.value.forEach((item) => {
    if (item) {
      promiseArray.value.push(
        new Promise((resolve, reject) => {
          item.validate((valid, fields) => {
            if (valid) {
              resolve();
            } else {
              reject();
            }
          });
        })
      );
    }
  });
  Promise.all(promiseArray.value)
    .then(async () => {
      //校验成功 进入下层逻辑
      submitList.value = [];
      checkList.value.forEach((item, index) => {
        submitList.value.push({
          excelFormId: props.rowData.id,
          isEnd: index == checkList.value.length - 1 ? 1 : 0,
          positionName: item.positionName,
          sort: item.sort,
          userName: item.userName,
        });
      });
      const { data, code } = await toCheck(submitList.value);
      if (code == "200") {
        emits("close");
        emits("dataList");
        ElMessage.success("提交成功");
      }
    })
    .catch(() => {
      //校验失败
      ElMessage.error("请检查表单红项填写");
    });
};
const queryUserList = () => {
  getUserTree({}).then((data) => {
    userList.value = data.data;
  });
};
const getFormListData = async (type) => {
  const { data } = await gerFormList({ formType: type });
  checkList.value = data;
};
//获取提交审核后的数据
const getExamineList = async () => {
  const { data } = await examineList({ excelFormId: props.rowData.id });
  console.log(data);
  checkList.value = data;
};
onMounted(async () => {
  await getlogList();
  //queryUserList();
  getFlowList();
  /*if (props.showStatus == true) {
    getFlowList();
  } else {
    await getFormListData(props.rowData.formType);
  }*/
});
</script>
<style lang="scss" scoped>
.green {
  color: rgb(94, 221, 152);
}
.red {
  color: rgb(255, 106, 106);
}
.body {
  display: flex;

  .line {
    width: 400px;
  }
  .form {
    width: calc(100% - 400px);
    padding-left: 20px;
    .description {
      margin-bottom: 20px;
    }
  }
  .applyForm {
    margin: 20px auto;
    border: 1px solid rgb(235, 238, 245);
    border-radius: 16px;
    padding: 20px;
  }
}
</style>
