<template>
  <!-- 维修工单弹框 -->
  <el-dialog
    :title="dialogTitle"
    :visible.sync="equipmentdialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="60%"
  >
    <el-tabs v-model="detailsTabsActiveName" type="border-card">
      <el-tab-pane label="工单信息" name="keepInRepair">
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>工单编号：</span>
            <span>{{ workOrderInfo ? workOrderInfo.code : '' }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>发布时间：</span>
            <span>{{ workOrderInfo ? workOrderInfo.createTime : '' }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>委外单位：</span>
            <span>{{ workOrderInfo ? workOrderInfo.outsourcUnit : '' }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>发布人：</span>
            <span>{{ workOrderInfo ? workOrderInfo.createBy : '' }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>计划完成时间：</span>
            <span>{{
              workOrderInfo ? workOrderInfo.planCompletionTime : ''
            }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>实际完成时间：</span>
            <el-date-picker
              v-if="row.isshow"
              v-model="checkTime"
              type="date"
              style="width: 50%"
              placeholder="选择日期时间"
              size="small"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <span v-else>{{
              workOrderInfo ? workOrderInfo.checkTime : ''
            }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>状态：</span>
            <span>{{ statusObj[workOrderInfo.status] }}</span>
          </el-col>
        </el-row>
        <el-row
          class="repair_row"
          v-if="!row.isshow && workOrderInfo.status != 2"
        >
          <el-col :span="24" class="repair_column">
            <span>驳回说明：</span>
            <span>{{ workOrderInfo ? workOrderInfo.rejectReason : '' }}</span>
          </el-col>
        </el-row>
        <!--        <el-row class="repair_row">
          <el-col :span="24" class="repair_column">
            <span>图片：</span>
            <div class="upload-img" v-if="row.isshow">
              <UploadImg
                @getImgs="cbUploadImg"
                :assetName="`工单`"
                ref="UploadImg"
              />
            </div>
            <el-image
              v-for="(item, index) in workOrderInfo.repairsImg"
              :key="index"
              style="width: 100px; height: 100px; margin-right: 5px"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-col>
        </el-row> -->
      </el-tab-pane>
      <el-tab-pane label="设备信息" name="equipment">
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>设备编码：</span>
            <span>{{ equipmentInfo ? equipmentInfo.code : '' }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>权属部门：</span>
            <span>{{
              equipmentInfo ? equipmentInfo.ownershipGroupName : ''
            }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>设备名称：</span>
            <span>{{ equipmentInfo ? equipmentInfo.name : '' }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>权属人：</span>
            <span>{{
              equipmentInfo ? equipmentInfo.ownershipUserName : ''
            }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>设备分类：</span>
            <span>{{
              equipmentInfo.category
                ? equipmentInfo.category.categoryLevelPath
                : ''
            }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>权属人电话：</span>
            <span>{{
              equipmentInfo ? equipmentInfo.ownershipUserMobile : ''
            }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>固定资产编码：</span>
            <span>{{ equipmentInfo ? equipmentInfo.fixCode : '' }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>设备位置：</span>
            <span>{{ equipmentInfo.position }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>规格型号：</span>
            <span>
              {{
                equipmentInfo.category && equipmentInfo.category.specification
              }}|{{
                equipmentInfo.category && equipmentInfo.category.modelType
              }}
            </span>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="报修信息" name="repairApplication">
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>报修记录编号：</span>
            <span>{{ infoData ? infoData.code : '' }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>报修时间：</span>
            <span>{{ infoData ? infoData.createTime : '' }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>来源：</span>
            <span>{{
              infoData ? getDictValue('报修来源', infoData.sourceType) : ''
            }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>来源编码：</span>
            <span>{{ infoData ? infoData.sourceCode : '' }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>报修部门：</span>
            <span>{{ infoData ? infoData.requestDeptName : '' }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>报修人：</span>
            <span>{{ infoData ? infoData.requestUserName : '' }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="12" class="repair_column">
            <span>报修人电话：</span>
            <span>{{ infoData ? infoData.repairsDeptPhone : '' }}</span>
          </el-col>
          <el-col :span="12" class="repair_column">
            <span>期望完成时间：</span>
            <span>{{ infoData ? infoData.expectedTime : '' }}</span>
          </el-col>
        </el-row>
        <el-row class="repair_row">
          <el-col :span="24" class="repair_column">
            <span>故障描述：</span>
            <span>{{ infoData ? infoData.remark : '' }}</span>
          </el-col>
        </el-row>
        <!--        <el-row class="repair_row">
          <el-col :span="24" class="repair_column">
            <span>图片：</span>
            <el-image
              v-for="(item, index) in infoData.repairsImg"
              :key="index"
              style="width: 100px; height: 100px; margin-right: 5px"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-col>
        </el-row> -->
      </el-tab-pane>
    </el-tabs>

    <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>
    <div slot="footer" v-if="!row.isshow">
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getAssetInfo } from '@/api/ledgerAssets';
  import {
    getRepairById,
    getOutsourceInfo,
    checkOrBack
  } from '@/api/maintenance/repair_report';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    mixins: [dictMixins],
    props: {},
    data() {
      return {
        equipmentdialog: false,
        detailsTabsActiveName: 'repairApplication',
        workOrderInfo: {},
        equipmentInfo: {},
        infoData: {},
        statusObj: {
          0: '委外中',
          1: '未修复',
          2: '已完成'
        },
        dialogTitle: '',
        row: {},
        cause: '',
        showtext: false,
        checkTime: '',
        imageUrl: null
      };
    },
    created() {
      this.requestDict('报修来源');
      this.requestDict('报修状态');
    },
    methods: {
      handleClose() {
        this.equipmentdialog = false;
        this.checkTime = '';
        this.imageUrl = null;
        this.detailsTabsActiveName = 'keepInRepair';
      },
      async init(row) {
        console.log(row);
        this.row = row;
        this.equipmentdialog = true;
        this.dialogTitle = row.title;
        this.detailsTabsActiveName = 'keepInRepair';
        const res = await getOutsourceInfo(row.id);
        this.workOrderInfo = res;
        this.getSbinfo(row.equiId);
        this.getBxinfo(row.repairRequestId);
      },

      getSbinfo(params) {
        getAssetInfo(params).then((res) => {
          if (res) {
            this.equipmentInfo = res;
            this.$set(
              this.equipmentInfo,
              'position',
              res.positionList[0].pathName ? res.positionList[0].pathName : ''
            );
          }
        });
      },

      getBxinfo(params) {
        getRepairById(params).then((res) => {
          if (res) {
            this.infoData = res;
            // 处理图片
            // if (this.infoData && this.infoData.repairsImg) {
            //   const repairsImg = this.infoData.repairsImg
            //   this.infoData.repairsImg = []
            //   repairsImg.split(',').map(item => {
            //     imageView(item).then(res => {
            //       this.infoData.repairsImg.push({
            //         name: item.substring('/download/'.length),
            //         url: res
            //       })
            //     })
            //     return
            //   })
            // }
          }
        });
      },

      //通过按钮事件
      pass() {
        let params = {
          id: this.row.id,
          checkResult: 1,
          checkTime: this.checkTime,
          picPath: this.imageUrl,
          rejectReason: ''
        };
        checkOrBack(params).then((res) => {
          this.$message.success('验收成功!');
          this.$emit('refesh');
          this.handleClose();
        });
      },
      //驳回按钮事件
      reject() {
        this.showtext = true;
        let ele = document.getElementsByClassName('el-dialog__wrapper');
        let bodyscrollHeight = document.body.scrollHeight;
        this.$nextTick(() => {
          ele.forEach((element) => {
            if (element.style.display !== 'none') {
              element.scrollTop = bodyscrollHeight;
            }
          });
        });
      },
      cancelreject() {
        this.showtext = false;
        this.cause = '';
      },
      surereject() {
        if (!this.cause) {
          this.$message.info('请填写驳回原因！');
        } else {
          let params = {
            id: this.row.id,
            checkResult: 0,
            checkTime: this.checkTime,
            picPath: this.imageUrl,
            rejectReason: this.cause
          };
          checkOrBack(params).then((res) => {
            this.$message.success('驳回成功!');
            this.$emit('refesh');
            this.handleClose();
          });
        }
      },

      // 选择图片回调
      cbUploadImg(data) {
        if (data.length > 0) {
          this.imageUrl = data[0];
        } else {
          this.imageUrl = '';
        }
      }
    },
    watch: {
      equipmentdialog(nVal, oVal) {
        if (!nVal) {
          this.cause = '';
          this.showtext = false;
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  .repair_row {
    margin-bottom: 15px;
    .repair_column {
      display: flex;
      align-items: center;
      > span {
        &:first-child {
          font-weight: 700;
          text-align: right;
          width: 120px;
        }
      }
    }
  }
  .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>
