<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="
                    item.sort == rowData.sort ? 'jiantou' : 'jiantoumr'
                  "
                  style="margin-right: 10px"
                  size="30"
                />
                <el-form-item
                  style="flex: 1; align-items: start"
                  :label="item.positionName + '：'"
                  prop="userName"
                >
                  <el-select
                    v-model="item.userName"
                    filterable
                    :disabled="true"
                  >
                    <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>
        <el-form :model="checkForm" v-if="!showStatus" ref="checkFormRef">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="审核结果："
                prop="examineResult"
                :rules="[{ required: true }]"
              >
                <el-select v-model="checkForm.examineResult">
                  <el-option
                    v-for="items in checkOption"
                    :key="items"
                    :label="items.label"
                    :value="items.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="12">
            <el-form-item label="备注：" prop="remark">
              <el-input type="textarea" v-model="checkForm.remark" />
            </el-form-item>
          </el-col>
        </el-form>
      </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="item"
        @click="toShowExcel(item)"
        v-for="item in showProList"
        >{{ item.formName }}</el-card
      >
    </el-dialog>
    <el-dialog
      v-model="excelShow"
      title="详情"
      @close="excelShow = false"
      fullscreen
      destroy-on-close
    >
      <ExcelDataBbox :data="ExDataObj" @close="excelShow = false" />
    </el-dialog>
  </div>
</template>
<script setup>
import {
  toCheck,
  logList,
  examineList,
  getExcelData,
  toCheckRes,
} from "@/api/apply";
import { getUserList } from "@/api/system/user";
import ExcelDataBbox from "@/views/base/apply/excelDataBbox.vue";
const props = defineProps({
  rowData: {
    type: Object,
  },
  //true为查看状态
  //false为审核状态
  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 toShowExcel = (item) => {
  ExDataObj.value = item;
  excelShow.value = true;
};
const excelShow = ref(false);
const ExDataObj = ref({});

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 LogList = ref([]);
const checkForm = ref({
  examineResult: 1,
  remark: "",
});
const checkOption = [
  {
    label: "通过",
    value: 1,
  },
  {
    label: "驳回",
    value: 2,
  },
];
const checkFormRef = ref(null);
const getlogList = async () => {
  const { data } = await logList({ excelFormId: props.rowData.id });
  LogList.value = data;
};
const submit = async () => {
  checkFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      const { code } = await toCheckRes({
        ...checkForm.value,
        excelFormId: props.rowData.id,
        sort: props.rowData.sort,
      });
      if (code == "200") {
        ElMessage.success("审核成功！");
        emits("dataList");
        emits("close");
      }
    } else {
      ElMessage.error("请检查表达必填项");
    }
  });
};
const queryUserList = () => {
  getUserList({}).then((data) => {
    userList.value = data.data;
  });
};
//获取提交审核后的数据
const getExamineList = async () => {
  const { data } = await examineList({ excelFormId: props.rowData.id });
  checkList.value = data;
};
onMounted(async () => {
  await getlogList();
  queryUserList();
  await getExamineList();
});
</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>
