<template>
  <el-dialog
    title="维修计划详情"
    :visible.sync="repairPlanDetailVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="60%"
  >
    <el-row class="info_wrapper">
      <el-col :span="6" class="info_column">
        <span class="label">计划单号：</span>
        <span class="value">{{ detailsData.planCode }}</span>
      </el-col>
      <el-col :span="6" class="info_column">
        <span class="label">计划名称：</span>
        <span class="value">{{ detailsData.planName }}</span>
      </el-col>
      <el-col :span="6" class="info_column">
        <span class="label">报修设备数量：</span>
        <span class="value">{{ detailsData.equiNum }}</span>
      </el-col>
      <el-col :span="6" class="info_column">
        <span class="label">状态：</span>
        <span class="value">{{
          detailsData.planStatus ? detailsData.planStatus.descp : ''
        }}</span>
      </el-col>
      <el-col :span="6" class="info_column">
        <span class="label">审核人：</span>
        <span class="value">{{ detailsData.verifyUserName }}</span>
      </el-col>
      <el-col :span="6" class="info_column">
        <span class="label">紧急程度：</span>
        <span class="value">{{ urgentObj[detailsData.urgent] }}</span>
      </el-col>
      <el-col :span="6" class="info_column">
        <span class="label">创建人：</span>
        <span class="value">{{ detailsData.createUserName }}</span>
      </el-col>
      <el-col :span="6" class="info_column">
        <span class="label">创建时间：</span>
        <span class="value">{{ detailsData.createTime }}</span>
      </el-col>
    </el-row>
    <div
      class="main_info"
      v-for="(item, index) in detailsData.planDetailRespList"
      :key="item.repairInfoId"
    >
      <div class="main_info_title">
        <el-row>
          <el-col :span="8" class="main_info_column">
            <span class="label">报修记录编码：</span>
            <span class="value">{{ item.repairsCode }}</span>
          </el-col>
          <el-col :span="8" class="main_info_column">
            <span class="label">设备编码：</span>
            <span class="value">{{ item.equiCode }}</span>
          </el-col>
          <el-col :span="8" class="main_info_column">
            <span class="label">设备名称：</span>
            <span class="value">{{ item.equiName }}</span>
            <i
              class="el-icon-d-arrow-left arrow_icon"
              @click="handleRotate(index)"
              :class="currentIndex === index ? '' : 'rotate90'"
            ></i>
          </el-col>
        </el-row>
      </div>
      <div class="transition_container">
        <el-collapse-transition>
          <div v-show="currentIndex === index">
            <el-row style="margin-bottom: 5px">
              <el-col :span="8" class="column">
                <span class="label">设备型号：</span>
                <span class="value">{{
                  item.equipmentAccount.information &&
                  item.equipmentAccount.information.modelType
                }}</span>
              </el-col>
              <el-col :span="16" class="column">
                <span class="label">设备位置：</span>
                <span class="value"
                  >{{ item.equipmentAccount.factoryName }}—{{
                    item.equipmentAccount.workshopName
                  }}—{{ item.equipmentAccount.lineName }}—{{
                    item.equipmentAccount.detailLocation
                  }}</span
                >
              </el-col>
              <el-col :span="24" class="column">
                <span class="label">故障描述：</span>
                <span class="value">{{ item.repairsDescription }}</span>
              </el-col>
              <el-col :span="16" class="column">
                <span class="label">图片：</span>
                <span class="value">
                  <el-image
                    v-for="(item, index) in item.repairsImg"
                    :key="index"
                    style="width: 100px; height: 100px; margin-right: 5px"
                    :src="item.url"
                    :preview-src-list="[item.url]"
                  >
                  </el-image
                ></span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">视频：</span>
                <span class="value">{{ item.repairsVideo }}</span>
              </el-col>
            </el-row>
            <el-row style="border-top: 1px solid #eee">
              <!-- <el-col :span="24" class="column">
                <span class="label">维修方案：</span>
                <span class="value">{{ item.maintenanceContent }}</span>
              </el-col> -->
              <el-col :span="8" class="column">
                <span class="label">计划完成时间：</span>
                <span class="value">{{ item.plannedTime }}</span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">执行部门：</span>
                <span class="value">{{ item.deptName }}</span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">执行人：</span>
                <span class="value">{{ item.workOrderExecutorName }}</span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">工单编号：</span>
                <span class="value">{{ item.workOrderCode }}</span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">工单状态：</span>
                <span class="value">{{
                  item.planWorkStatus ? item.planWorkStatus.descp : ''
                }}</span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">工单开始执行时间：</span>
                <span class="value">{{ item.acceptTime }}</span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">验收结果：</span>
                <span class="value">{{ item.acceptanceResult }}</span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">验收说明：</span>
                <span class="value">{{ item.acceptanceInstructions }}</span>
              </el-col>
              <el-col :span="8" class="column">
                <span class="label">工单完成执行时间：</span>
                <span class="value">{{ item.finishTime }}</span>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <div class="btnbox" v-if="row.isshow">
      <el-button class="confirm-btn" type="danger" plain @click="reject"
        >驳回</el-button
      >
      <el-button class="confirm-btn" type="success" plain @click="pass"
        >通过</el-button
      >
      <el-button class="cancel-btn" @click="handleClose">关闭</el-button>
    </div>

    <div class="textbox" v-if="showtext">
      <el-input
        type="textarea"
        placeholder="请输入驳回原因"
        v-model="cause"
        maxlength="30"
        rows="5"
        show-word-limit
      >
      </el-input>
      <div class="textbtnbox">
        <el-button size="small" round @click="cancelreject">取消</el-button>
        <el-button size="small" round @click="surereject">提交</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  // import maintenancePlan from '@/api/maintenance/repair/maintenancePlan'
  // import { sendAudit } from '@/api/stockManagement/stocking'
  // import { imageView } from '@/utils'
  export default {
    data() {
      return {
        repairPlanDetailVisible: false,
        currentIndex: 0,
        detailsData: {},
        urgentObj: {
          1: '普通',
          2: '紧急',
          3: '重要'
        },
        stautsObj: {
          0: '待接收',
          1: '执行中',
          2: '待审核',
          3: '完成',
          4: '已撤回',
          5: '已驳回'
        },
        cause: '',
        showtext: false,
        row: {}
      };
    },
    methods: {
      // 请求详情数据
      async openDeatailDialog(row) {
        this.row = row;
        this.repairPlanDetailVisible = true;
        const res = await maintenancePlan.planInfoDetailApi(row.id);
        console.log('详情数据：', res);
        this.detailsData = res.data;
        console.log('详情数据12：', this.detailsData.planDetailRespList);

        this.detailsData.planDetailRespList.forEach((item) => {
          // 处理图片
          if (item.repairsImg) {
            const repairsImg = item.repairsImg;
            item.repairsImg = [];
            repairsImg.split(',').map((itm) => {
              imageView(itm).then((res) => {
                item.repairsImg.push({
                  name: itm.substring('/download/'.length),
                  url: res
                });
              });

              return;
            });
          }
        });
      },
      handleClose() {
        this.repairPlanDetailVisible = false;
      },
      handleRotate(index) {
        this.currentIndex = index;
      },
      //通过按钮事件
      pass() {
        let params = {
          id: this.row.id,
          checked: true,
          myHandleId: this.row.dbid,
          handleType: 0,
          type: 1,
          cause: ''
        };
        sendAudit(params).then((res) => {
          if (res.success) {
            this.$message.success('审批通过!');
            this.$emit('refeshone');
            this.repairPlanDetailVisible = false;
          }
        });
      },
      //驳回按钮事件
      reject() {
        this.showtext = true;
      },
      cancelreject() {
        this.showtext = false;
        this.cause = '';
      },
      surereject() {
        if (!this.cause) {
          this.$message.info('请填写驳回原因！');
        } else {
          let params = {
            id: this.row.id,
            checked: false,
            myHandleId: this.row.dbid,
            handleType: 0,
            type: 1,
            cause: this.cause
          };
          sendAudit(params).then((res) => {
            if (res.success) {
              this.$message.success('审批驳回!');
              this.$emit('refeshone');
              this.repairPlanDetailVisible = false;
            }
          });
        }
      }
    },
    watch: {
      repairPlanDetailVisible(nVal, oVal) {
        if (!nVal) {
          this.cause = '';
          this.showtext = false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding-top: 10px;
  }
  .info_wrapper {
    background-color: #f7f7f7;
    padding-top: 20px;
    .info_column {
      display: flex;
      margin-bottom: 20px;
      .label {
        width: 100px;
        text-align: right;
        margin-right: 5px;
        font-weight: 700;
      }
    }
  }
  .main_info {
    margin: 20px 20px 0;
    .main_info_title {
      background-color: #bdcea3;
      color: #000;
      .main_info_column {
        display: flex;
        border-right: 1px solid #fff;
        box-sizing: border-box;
        position: relative;
        .label {
          padding: 5px 0;
          font-weight: 700;
          margin-right: 5px;
          width: 120px;
          text-align: right;
        }
        .value {
          padding: 5px 0;
        }
        .arrow_icon {
          font-size: 26px;
          font-weight: 700;
          color: #fff;
          transform: rotate(90deg);
          position: absolute;
          right: 5px;
          top: 0;
          cursor: pointer;
          &:hover {
            color: #4b7902;
          }
        }
        .rotate90 {
          transform: rotate(270deg);
        }
      }
    }
    .transition_container {
      border: 1px solid #eee;
      .column {
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        display: flex;
        .label {
          padding: 5px 0;
          background-color: #f2f2f2;
          font-weight: 700;
          margin-right: 5px;
          width: 120px;
          text-align: right;
        }
        .value {
          padding: 5px 0;
        }
      }
    }
  }
  .dialog_footer {
    text-align: right;
  }
  .btnbox {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  ::v-deep .el-button {
    padding: 10px 20px;
    margin-right: 10px;
  }
  .textbox {
    margin-top: 10px;
  }
  .textbtnbox {
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }
</style>
