<!-- 维修信息 -->
<template>
  <div class="repair_infoLogs">
    <el-steps
      direction="vertical"
      :active="0"
      :space="100"
      v-for="(item, index) in repairInfoLogList"
      :key="index"
    >
      <el-step v-if="item.type == 'ACCEPTANCE_CHEK'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>验收</span>
          <span>{{ item.createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>验收人：{{ item.content.userName }}</span>
          <span
            >验收结果：{{
              item.content.acceptanceResult ? '通过' : '驳回'
            }}</span
          >
          <span>验收说明：{{ item.content.acceptanceInstructions }}</span>
        </div>
      </el-step>
      <el-step v-if="item.type == 'WORK_REPORT'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>报工</span>
          <span>{{ item.content.createTime }}</span>
        </div>
        <div slot="description" class="work_report_desc">
          <div> 处理说明：{{ item.content.repairReportExplain }} </div>
          <div class="work_report_imgs" style="width: 50px; height: 50px">
            <img
              v-for="(ite, index) in item.content.workOrderImgList"
              :key="index"
              :src="ite"
              alt=""
              style="width: 40%"
            />
          </div>
          <div>
            <div>备品备件使用情况：</div>
            <el-table :data="workReportData" border>
              <el-table-column label="备件编码" prop="code" align="center" />
              <el-table-column label="备件名称" align="center" prop="name" />
              <el-table-column
                label="所属分类"
                prop="typeName"
                align="center"
              />
              <el-table-column label="型号" align="center" prop="model" />
              <el-table-column label="使用数量" prop="num" align="center" />
            </el-table>
          </div>
        </div>
      </el-step>

      <el-step v-if="item.type == 'START'">
        <span
          slot="icon"
          :class="
            lastStepName == 'START' ? 'step_icon step_active' : 'step_icon'
          "
        ></span>
        <div slot="title" class="step_title">
          <span>开始执行</span>
          <span>{{ item.createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>执行人：{{ item.content.executorName }}</span>
        </div>
      </el-step>

      <el-step v-if="item.type == 'CREATE_WORK_ORDER'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>生成工单</span>
          <span>{{ item.createTime }}</span>
        </div>
        <div
          slot="description"
          class="step_description"
          style="margin-bottom: 30px"
        >
          <el-row>
            <el-col :span="8">
              <span>工单编号：{{ item.content.workOrderCode }}</span>
            </el-col>
            <el-col :span="8">
              <span>执行人：{{ item.content.workOrderExecutorName }}</span>
            </el-col>
            <el-col :span="8">
              <span>执行人电话：{{ item.content.workOrderExecutorPhone }}</span>
            </el-col>
            <el-col :span="24">
              <span>计划完成时间：{{ item.content.plannedTime }}</span>
            </el-col>
            <el-col :span="24">
              <span>维修方案：{{ item.content.maintenanceContent }}</span>
            </el-col>
          </el-row>
        </div>
      </el-step>

      <el-step v-if="item.type == 'EXAMINE_PLAN'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>审核维修计划</span>
          <span>{{ item.content.createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>审核人：{{ item.content.examinePlanUserName }}</span>
          <span
            >审核结果：{{
              item.content.examinePlanUserName ? '通过' : ''
            }}</span
          >
          <span>审核说明：{{ item.content.examineExplain }}</span>
        </div>
      </el-step>

      <el-step v-if="item.type == 'CREATE_PLAN'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span
            >创建维修计划<span v-if="item.createNum"
              >（第{{ item.createNum }}次）</span
            ></span
          >
          <span>{{ item.createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>创建人：{{ item.content.createUserName }}</span>
          <span>计划单号：{{ item.content.planCode }}</span>
          <span>计划名称：{{ item.content.planName }}</span>
        </div>
      </el-step>

      <el-step v-if="item.type == 'ACCEPTANCE_CHEK_OUTSOURCE_WORK_ORDER'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>验收委外工单</span>
          <span>{{ item.createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>验收人：{{ item.content.executorName }}</span>
          <span
            >验收结果：{{ item.content.checkResult ? '通过' : '驳回' }}</span
          >
          <span>验收说明：{{ item.content.checkDesc }}</span>
        </div>
      </el-step>

      <el-step v-if="item.type == 'CREATE_OUTSOURCE_WORK_ORDER'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span
            >生成委外工单<span v-if="item.createNum"
              >（第{{ item.createNum }}次）</span
            ></span
          >
          <span>{{ item.createTime }}</span>
        </div>
        <div slot="description" class="step_description">
          <span>创建人：{{ item.content.executorName }}</span>
          <span>工单编号：{{ item.content.outsourcCode }}</span>
          <span>委外单位：{{ item.content.outsourcUnit }}</span>
        </div>
      </el-step>

      <el-step v-if="item.type == 'CREATE'">
        <span
          slot="icon"
          :class="index == 0 ? 'step_icon step_active' : 'step_icon'"
        ></span>
        <div slot="title" class="step_title">
          <span>创建报修记录</span>
          <span>{{ item.createTime }}</span>
          <!-- <span>{{ logs['CREATE'].createTime }}</span> -->
        </div>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
  // import repair from '@/api/maintenance/repair/repair'

  export default {
    props: {
      repairInfoLogList: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    watch: {
      repairInfoLogList(val) {
        console.log('repairInfoLogList', val);
        // val.forEach(item => {
        //   this.logs[item.type.code] = {
        //     id: item.id,
        //     name: item.type.desc,
        //     content: JSON.parse(item.content),
        //     createTime: item.createTime
        //   }
        // })
        // this.length = val.length
        // this.logsKeys = Object.keys(this.logs)
        // this.lastStepName = this.logsKeys[this.logsKeys.length - 1]
        // if (this.logs['WORK_REPORT']) {
        //   const workOrderId = this.logs['WORK_REPORT'].content.workOrderId
        //   repair
        //     .getSpareData({ workOrderId })
        //     .then(res => {
        //       // console.log(res)
        //       this.workReportData = res.data
        //     })
        //     .catch(() => {})
        // }
      }
    },
    data() {
      return {
        logs: {},
        logsKeys: [],
        lastStepName: '',
        workReportData: [],
        length: null
      };
    }
  };
</script>

<style lang="scss" scoped>
  .repair_infoLogs {
    .step_icon {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-sizing: border-box;
      background-color: #fff;
    }
    .step_active {
      border: 0;
      background-color: #1890ff;
    }
    .step_title {
      width: 400px;
      color: #000;
      display: flex;
      justify-content: space-between;
    }
    .step_description {
      display: flex;
      padding: 5px 10px;
      background-color: #f2f2f2;
      justify-content: space-between;
      color: #7f7f7f;
    }
    ::v-deep .work_report_desc {
      padding: 5px 10px;
      margin-bottom: 30px;
      background-color: #f2f2f2;
      color: #7f7f7f;
      .el-table th.el-table__cell {
        background-color: #d7d7d7;
        padding: 0;
        color: #000;
        font-weight: 400;
      }
      .el-table td.el-table__cell {
        background-color: #f2f2f2;
        padding: 0;
      }
    }
  }
</style>
