<template>
  <div>
    <div class="eqp_view_top flex items-center">
      <span>{{ $t("EQP_STATUS") }}</span>
      <div
        class="eqp_status flex items-center justify-center"
        :style="{
          background: `${eqpData.statusColor}`,
        }"
      >
        {{ eqpData.statusName }}
      </div>
    </div>
    <a-timeline>
      <a-timeline-item>
        <svg-icon
          slot="dot"
          icon-class="down_01"
          style="width: 20px; height: 20px"
        />
        <span class="timeline_title">{{ $t("DOWNTIME") }}</span>
        <div class="timeline_item">
          {{ $t("DOWNTIME") }}{{ $t("START_TIME") }}:
          {{ eqpData.statusStartTime }}
        </div>
        <div class="timeline_item">
          {{ $t("DOWNTIME") }}{{ $t("DURATION") }}:
          {{ eqpData.statusDuration }}
        </div>
        <div class="timeline_box"></div>
      </a-timeline-item>
      <a-timeline-item
        v-for="(item, index) in eqpData.repairTicketLogList"
        :key="index"
      >
        <svg-icon
          slot="dot"
          :icon-class="
            eqpData.repairTicketLogList.length === index + 1
              ? item.repairTicketStatus + '_active'
              : item.repairTicketStatus
          "
          style="width: 20px; height: 20px"
        />
        <span
          class="timeline_title"
          :class="{
            active: eqpData.repairTicketLogList.length === index + 1,
          }"
          >{{ formatData(orderStatusList, item.repairTicketStatus) }}</span
        >
        <!-- 待结单 -->
        <div
          v-if="item.repairTicketStatus === 'WAIT_ACCEPT'"
          class="timeline_item"
        >
          <template v-if="item.operateType === 'SWITCH_OUT'">
            设备人员
            <span>{{ item.operateUser }}</span>
            已于
            <span>{{ item.operateTime }}</span>
            转单到
            <span>{{ item.nextOperateUser }}</span>
            ，请尽快接单
          </template>
          <template v-else-if="item.type === 'AUTO_CALL'">
            系统
            <span>{{ item.operateUser }}</span>
            已于
            <span>{{ item.operateTime }}</span>
            生成叫修工单，请尽快接单
          </template>
          <template v-else>
            设备人员
            <span>{{ item.operateUser }}</span>
            已于
            <span>{{ item.operateTime }}</span>
            生成叫修工单
          </template>
        </div>
        <!-- 待派工 -->
        <div
          v-if="item.repairTicketStatus === 'WAIT_ASSIGN'"
          class="timeline_item"
        >
          <template v-if="item.type === 'AUTO_CALL'">系统</template>
          <template v-else>
            申请人员
            <span>{{ item.operateUser }}</span>
          </template>
          已于
          <span>{{ item.operateTime }}</span>
          生成叫修工单，请尽快派单
        </div>
        <!-- 维修中 开始 -->
        <div
          v-if="item.repairTicketStatus === 'WAIT_REPAIR'"
          class="timeline_item"
        >
          设备人员
          <span>{{ item.operateUser }}</span>
          已于
          <span>{{ item.operateTime }}</span>
          <template v-if="item.operateType === 'ACCEPT'">
            接单，正在维修
          </template>
          <template v-else-if="item.operateType === 'CONFIRM'"
            >确认驳回</template
          >
          <template v-else>开始维修设备</template>
        </div>
        <!-- 待确认 开始 -->
        <div
          v-if="item.repairTicketStatus === 'WAIT_CONFIRM'"
          class="timeline_item"
        >
          设备人员
          <span>{{ item.operateUser }}</span>
          已于
          <span>{{ item.operateTime }}</span>
          完成维修，请尽快确认
        </div>
        <!-- 待确认 开始 -->
        <div
          v-if="item.repairTicketStatus === 'FINISHED'"
          class="timeline_item"
        >
          设备人员
          <span>{{ item.operateUser }}</span>
          已于
          <span>{{ item.operateTime }}</span>
          <template v-if="item.type === 'NOT_NEED_CONFIRM'">完成维修</template>
          <template v-else>确认通过</template>
        </div>
        <div class="timeline_box"></div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script>
export default {
  name: "RepairProgress",
  props: {
    eqpData: {
      type: Object,
      default() {
        return {};
      },
    },
    orderStatusList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    formatData(data, status) {
      const result = data.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
  },
};
</script>
<style lang="less" scoped>
@import "@/assets/css/fault_repair.less";
</style>
