<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.positionName }}</h4>
              <h4>
                结果：<span
                  :class="item.examineResult == 1 ? 'green' : 'red'"
                  >{{ item.examineResult == 1 ? "通过" : "驳回" }}</span
                >
              </h4>
              <p v-if="item.remark">备注：{{ item.remark }}</p>
              <p>操作人：{{ item.userName }}</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">提交申请</div>
      <div class="applyForm" v-if="checkList.length > 0">
        <template v-for="(item, index) in checkList" :key="item">
          <el-form :model="item" ref="applyFormRef">
            <el-row>
              <el-col :span="12" style="display: flex">
                <svg-icon
                  :icon-class="
                    rowData.state == '3'
                      ? 'jiantoumr'
                      : item.sort == rowData.sort
                        ? 'jiantou'
                        : 'jiantoumr'
                  "
                  v-if="showStatus"
                  style="margin-right: 10px"
                  size="30"
                />
                <el-form-item
                  style="flex: 1; align-items: start"
                  :label="item.positionName + '：'"
                  :rules="[{ required: true }]"
                  prop="userName"
                >
                  <el-select
                    v-model="item.userName"
                    filterable
                    :disabled="showStatus"
                  >
                    <el-option
                      v-for="items in userList"
                      :key="items.userName"
                      :label="items.userName"
                      :value="items.userName"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  style="margin-left: 20px"
                  label="备注："
                  v-if="item.remark"
                  prop="remark"
                >
                  {{ item.remark }}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </template>
      </div>
      <div class="btns">
        <el-button type="primary" @click="submit" 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"
      width="1600"
    >
      <proWorkOrderExcel :data="ExDataObj" @close="excelShow = false" />
    </el-dialog>
  </div>
</template>
<script setup>
import {
  gerFormList,
  toCheck,
  logList,
  examineList,
  getExcelData,
} from "@/api/apply";
import { getUserList } from "@/api/system/user";
const props = defineProps({
  rowData: {
    type: Object,
  },
  showStatus: {
    type: Boolean,
  },
});
const dialog8 = reactive({
  title: "表单列表",
  visible: false,
});
const showProList = ref([]);
const showProExcel = async (id) => {
  const { data, code } = await getExcelData(id);
  showProList.value = data;
  dialog8.visible = true;
};
const excelShow = ref(false);
const ExDataObj = ref({});
const toShowExcel = (item) => {
  ExDataObj.value = item;
  excelShow.value = true;
};
const emits = defineEmits(["close", "dataList"]);
const getStatus = (val) => {
  switch (val) {
    case "0":
      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 () => {
  const { data } = await logList({ excelFormId: props.rowData.id });
  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 = () => {
  getUserList({}).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();
  if (props.showStatus == true) {
    await getExamineList();
  } 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>
