<template>
  <el-dialog v-model="visible" title="查看流程图" width="1300px">
    <el-steps
      :active="fnGetStatus()"
      :process-status="fnGetProcessStatus()"
      align-center
      finish-status="success"
    >
      <el-step title="临时用电作业提交">
        <template #description>
          <div>{{ fnGetProcessMessage().title }}</div>
          <div>{{ fnGetProcessMessage().USER_NAME }}</div>
          <div>{{ fnGetProcessMessage().OPERATTIME }}</div>
        </template>
      </el-step>
      <el-step title="作业负责人意见">
        <template #description>
          <div>{{ info.CONFIRM_USER_NAME }}</div>
          <div>{{ info.CONFIRM_USER_SIGNER_TIME }}</div>
        </template>
      </el-step>
      <el-step title="用电单位意见">
        <template #description>
          <div>{{ info.AUDIT_USER_NAME }}</div>
          <div>{{ info.AUDIT_USER_SIGNER_TIME }}</div>
        </template>
      </el-step>
      <el-step title="配送电单位意见">
        <template #description>
          <div>{{ info.APPROVE_USER_NAME }}</div>
          <div>{{ info.APPROVE_USER_SIGNER_TIME }}</div>
        </template>
      </el-step>
      <el-step title="完成验收">
        <template #description>
          <div>{{ info.ACCEPT_USER_NAME }}</div>
          <div>{{ info.ACCEPT_USER_SIGNER_TIME }}</div>
        </template>
      </el-step>
      <el-step title="验收归档">
        <template #description>
          <div>{{ info.ACCEPT_USER_NAME }}</div>
          <div>{{ info.ACCEPT_USER_SIGNER_TIME }}</div>
        </template>
      </el-step>
    </el-steps>
    <div
      style="
        margin: 60px 60px 0 60px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div v-if="info.GUARDIAN_USER_SIGNER_TIME">
        <div class="el-step__title is-success">
          监护人：{{ info.GUARDIAN_USER_NAME }}已签字
        </div>
      </div>
      <div v-if="!info.GUARDIAN_USER_SIGNER_TIME">
        <div class="el-step__title is-error">
          监护人：{{ info.GUARDIAN_USER_NAME }}未签字
        </div>
      </div>
      <div v-if="info.CONFESS_USER_SIGNER_TIME">
        <div class="el-step__title is-success">
          安全交底人：{{ info.CONFESS_USER_NAME }}已签字
        </div>
      </div>
      <div v-if="!info.CONFESS_USER_SIGNER_TIME">
        <div class="el-step__title is-error">
          安全交底人：{{ info.CONFESS_USER_NAME }}未签字
        </div>
      </div>
      <div v-if="info.ACCEPT_CONFESS_USER_SIGNER_TIME">
        <div class="el-step__title is-success">
          接受交底人：{{ info.ACCEPT_CONFESS_USER_NAME }}已签字
        </div>
      </div>
      <div v-if="!info.ACCEPT_CONFESS_USER_SIGNER_TIME">
        <div class="el-step__title is-error">
          接受交底人：{{ info.ACCEPT_CONFESS_USER_NAME }}未签字
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  info: {
    type: Object,
    required: true,
    default: () => {},
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
const fnGetStatus = () => {
  const result = {
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 6,
  };
  return result[props.info.APPLY_STATUS] || 0;
};
const fnGetProcessStatus = () => {
  if (props.info.APPLY_STATUS < "0") return "error";
  else return "process";
};
const fnGetProcessMessage = () => {
  const info = props.info;
  const result = {
    "-2": {
      title: "作业负责人审核打回",
      USER_NAME: info.CONFIRM_USER_NAME,
      OPERATTIME: info.OPERATTIME,
    },
    "-3": {
      title: "用电单位审核打回",
      USER_NAME: info.AUDIT_USER_NAME,
      OPERATTIME: info.OPERATTIME,
    },
    "-4": {
      title: "配送电单位审核打回",
      USER_NAME: info.APPROVE_USER_NAME,
      OPERATTIME: info.OPERATTIME,
    },
    "-5": {
      title: "验收打回",
      USER_NAME: info.ACCEPT_USER_NAME,
      OPERATTIME: info.OPERATTIME,
    },
    "-99": {
      title: "已作废",
      USER_NAME: "",
      OPERATTIME: info.OPERATTIME,
    },
  };
  return (
    result[props.info.APPLY_STATUS] || {
      title: "",
      USER_NAME: info.APPLY_USER_NAME,
      OPERATTIME: info.CREATTIME,
    }
  );
};
</script>

<style scoped lang="scss"></style>
