<template>
  <div class="maintennce-details" v-loading="loading">
    <el-divider content-position="left">工单信息</el-divider>
    <div class="info-wrap">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="item-block">
            <span>工单 I D ：</span>
            <span>{{ workDetails.maintenanceId }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item-block">
            <span>工单状态：</span>
            <span>{{ workStateList[workDetails.maintenanceStatus] }}</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="item-block">
            <span>设备名称：</span>
            <span>{{ workDetails.deviceName }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item-block">
            <span>故障类型：</span>
            <span>{{ fanltTypeList[workDetails.faultType] }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="item-block">
            <span>上报人员：</span>
            <span>{{ workDetails.reporterName }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item-block">
            <span>上报时间：</span>
            <span>{{ workDetails.createTime }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row
        :gutter="20"
        v-if="
          !(
            workDetails.reporterId === logUser &&
            workDetails.maintenanceStatus === '1'
          )
        "
      >
        <el-col :span="24">
          <div class="item-block">
            <span>工单内容：</span>
            <span>{{ workDetails.maintenanceContext }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-divider
      content-position="left"
      v-if="
        showForm === '0' &&
        ((workDetails.handlerId === logUser &&
          workDetails.maintenanceStatus === '1') ||
          (workDetails.reporterId === logUser &&
            workDetails.maintenanceStatus === '1') ||
          (workDetails.maintenanceStatus === '3' && showForm === '0') ||
          (workDetails.maintenanceStatus === '4' && showForm === '0') ||
          (workDetails.maintenanceStatus === '5' && showForm === '0'))
      "
      >处理反馈信息</el-divider
    >
    <div
      class="info-wrap feedback-wrap"
      v-if="
        showForm === '0' &&
        ((workDetails.handlerId === logUser &&
          workDetails.maintenanceStatus === '1') ||
          (workDetails.reporterId === logUser &&
            workDetails.maintenanceStatus === '1') ||
          (workDetails.maintenanceStatus === '3' && showForm === '0') ||
          (workDetails.maintenanceStatus === '4' && showForm === '0') ||
          (workDetails.maintenanceStatus === '5' && showForm === '0'))
      "
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="item-block">
            <span>处理人员：</span>
            <span>{{ workDetails.handlerName }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item-block">
            <span>处理时间：</span>
            <span>{{ workDetails.handleTime }}</span>
          </div>
        </el-col>
      </el-row>

      <el-row
        :gutter="20"
        v-show="!(workDetails.handlerId === logUser && showForm === '3')"
      >
        <el-col :span="12">
          <div class="item-block">
            <span>处理反馈：</span>
            <span class="value-span">{{
              workDetails.feedbackInformation
            }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item-block">
            <span>处理意见：</span>
            <span class="value-span">{{ workDetails.advice }}</span>
          </div>
        </el-col>
      </el-row>

      <el-row
        :gutter="20"
        v-show="!(workDetails.handlerId === logUser && showForm === '3')"
      >
        <el-col :span="24">
          <div
            class="item-block"
            style="width: 100%; display: flex; height: 100px"
          >
            <span>现场图片：</span>
            <div style="width: calc(100% - 85px); display: flex">
              <img
                style="
                  width: 100px;
                  height: 100px;
                  margin-right: 10px;
                  border: 1px solid #cfcece;
                  border-radius: 3px;
                "
                :src="getIotFileUrl(val)"
                v-for="(val, index) in pictures"
                :key="val"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-divider
      content-position="left"
      v-if="
        workDetails.maintenanceStatus === '1' && workDetails.maintenanceNodeList.length > 0
      "
      >退回意见</el-divider
    >
    <div
      v-if="
        workDetails.maintenanceStatus === '1' && workDetails.maintenanceNodeList.length > 0
      "
    >
      <el-card>
        <div class="info-block-sh">
          <div class="item-block">
            <span>审核人员：</span>
            <span>{{ workDetails.maintenanceNodeList[0]["auditorName"] }}</span>
          </div>
          <div class="item-block">
            <span>审核时间：</span>
            <span>{{ workDetails.maintenanceNodeList[0]["auditTime"] }}</span>
          </div>

          <div class="item-block text">
            <span>审核结果：</span>
            <span>{{ workDetails.maintenanceNodeList[0]["auditResult"] }}</span>
          </div>

          <div class="item-block text">
            <span>审核意见：</span>
            <span>{{
              workDetails.maintenanceNodeList[0]["auditOpinion"]
            }}</span>
          </div>
        </div>
      </el-card>
    </div>

    <el-divider
      content-position="left"
      v-if="
        workDetails.maintenanceStatus === '4' ||
        workDetails.maintenanceStatus === '5'
      "
      >审核结果</el-divider
    >
    <div
      v-if="
        workDetails.maintenanceStatus === '4' ||
        workDetails.maintenanceStatus === '5'
      "
    >
      <el-timeline style="margin-top: 20px">
        <el-timeline-item
          v-for="item in workDetails.maintenanceNodeList"
          reverse
          :hide-timestamp="true"
          :key="item.auditResult"
          :icon="item.auditResult === '通过' ? 'el-icon-trophy' : 'el-icon-aim'"
          type="large"
          :color="item.auditResult === '通过' ? '#52ce90' : '#328ff0'"
          :timestamp="item.auditTime"
        >
          <el-card>
            <div class="info-block-sh">
              <div class="item-block">
                <span>审核人员：</span>
                <span>{{ item["auditorName"] }}</span>
              </div>
              <div class="item-block">
                <span>审核时间：</span>
                <span>{{ item["auditTime"] }}</span>
              </div>

              <div class="item-block text">
                <span>审核结果：</span>
                <span>{{ item["auditResult"] }}</span>
              </div>

              <div class="item-block text">
                <span>审核意见：</span>
                <span>{{ item["auditOpinion"] }}</span>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <el-divider
      content-position="left"
      v-if="
        tempType !== 'examine' &&
        showForm === '0' &&
        ((workDetails.handlerId !== logUser &&
          (workDetails.maintenanceStatus === '2' ||
            workDetails.maintenanceStatus === '0')) ||
          (workDetails.reporterId !== logUser &&
            workDetails.maintenanceStatus === '1') ||
          (workDetails.maintenanceStatus === '3' && showForm === '0') ||
          (workDetails.handlerId !== logUser &&
            workDetails.maintenanceStatus === '4'))
      "
      >订单进程</el-divider
    >
    <div
      v-if="
        tempType !== 'examine' &&
        showForm === '0' &&
        ((workDetails.handlerId !== logUser &&
          (workDetails.maintenanceStatus === '2' ||
            workDetails.maintenanceStatus === '0')) ||
          (workDetails.reporterId !== logUser &&
            workDetails.maintenanceStatus === '1') ||
          (workDetails.maintenanceStatus === '3' && showForm === '0') ||
          (workDetails.handlerId !== logUser &&
            workDetails.maintenanceStatus === '4'))
      "
    >
      <span
        style="margin-left: 20px; height: 50px; display: block"
        v-show="workDetails.maintenanceStatus === '4' && showForm === '0'"
        v-text="'工单审核被退回，正在重新处理中...'"
      ></span>
      <span
        style="margin-left: 20px; height: 50px; display: block"
        v-show="
          workDetails.handlerId !== logUser &&
          workDetails.maintenanceStatus === '2'
        "
        v-text="'工单已经确认，正在处理中...'"
      ></span>
      <span
        style="margin-left: 20px; height: 50px; display: block"
        v-show="workDetails.maintenanceStatus === '3' && showForm === '0'"
        v-text="' 订单已经处理完成，等待审核...'"
      ></span>
      <span
        style="margin-left: 20px; height: 50px; display: block"
        v-show="
          workDetails.handlerId !== logUser &&
          workDetails.maintenanceStatus === '0'
        "
        v-text="'工单正在等待处理人确认...'"
      ></span>
      <span
        style="margin-left: 20px; height: 50px; display: block"
        v-show="
          workDetails.reporterId !== logUser &&
          workDetails.maintenanceStatus === '1'
        "
        v-text="'此工单已经退回，等待处理...'"
      ></span>
    </div>
    <el-divider
      content-position="left"
      v-if="tempType === 'myWork' && expFromShow(workDetails)"
      >操作</el-divider
    >
    <el-form
      :model="form"
      :rules="rules"
      v-if="tempType === 'myWork' && expFromShow(workDetails)"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item
        label="工单内容："
        v-if="
          workDetails.reporterId === logUser &&
          workDetails.maintenanceStatus === '1'
        "
        prop="name"
      >
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          placeholder
          v-model="form.maintenanceContext"
        ></el-input>
      </el-form-item>

      <span
        v-if="
          workDetails.handlerId === logUser &&
          workDetails.maintenanceStatus === '0'
        "
        v-text="'您是此工单处理人，您可做如下操作...'"
      ></span>

      <span
        v-else-if="workDetails.maintenanceStatus === '2'"
        v-text="'订单已经确认，正在处理中...'"
      ></span>

      <span
        v-else-if="
          workDetails.handlerId === logUser &&
          workDetails.maintenanceStatus === '4'
        "
        v-text="'工单审核被退回，请重新处理...'"
      ></span>

      <el-row
        :gutter="20"
        v-if="
          workDetails.handlerId === logUser &&
          (workDetails.maintenanceStatus === '3' ||
            workDetails.maintenanceStatus === '1')
        "
      >
        <el-col :span="24">
          <el-form-item label="处理反馈：" prop="name">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder
              v-model="form.feedbackInformation"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="处理意见：" prop="name">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder
              v-model="form.advice"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div
        v-show="
          workDetails.handlerId === logUser &&
          (workDetails.maintenanceStatus === '3' ||
            workDetails.maintenanceStatus === '1')
        "
        class="item-block-img"
      >
        <span class="label-wrap">现场图片：</span>
        <div class="img-list-wrap">
          <div class="img-show" v-for="(val, index) in pictures" :key="val">
            <img
              :src="getIotFileUrl(val)"
              @mouseout="
                () => {
                  showIndex = null;
                }
              "
              @mouseenter="
                () => {
                  showIndex = index;
                }
              "
            />
            <div
              class="img-option-wrap"
              @mouseout="
                () => {
                  showIndex = null;
                }
              "
              @mouseover="
                () => {
                  showIndex = index;
                }
              "
              v-show="showIndex === index"
            >
              <i
                class="el-icon-search"
                title="查看图片"
                @click="handlePictureCardPreview(val)"
              ></i>
              <i
                class="el-icon-delete"
                title="删除图片"
                @click="handelDelFile(val)"
              ></i>
            </div>
          </div>
          <el-upload
            action
            class="avatar-uploader"
            :show-file-list="false"
            :http-request="uploud"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
      </div>

      <div class="form-submit-div">
        <el-button
          type="primary"
          v-show="
            workDetails.reporterId === logUser &&
            workDetails.maintenanceStatus === '1'
          "
          size="mini"
          @click="repSrouSubmit()"
          >确定订单</el-button
        >

        <el-button
          size="mini"
          type="primary"
          v-if="workDetails.maintenanceStatus === '0' && showForm === '0'"
          @click="handelReject()"
          >退回</el-button
        >
        <el-button
          size="mini"
          type="primary"
          v-if="
            (workDetails.maintenanceStatus === '0' ||
              workDetails.maintenanceStatus === '4') &&
            showForm === '0'
          "
          @click="handelConfirm()"
          >确认工单</el-button
        >
        <el-button
          size="mini"
          type="primary"
          v-if="
            workDetails.handlerId === logUser &&
            workDetails.maintenanceStatus === '2'
          "
          @click="handelComplete()"
          >处理完成</el-button
        >
        <el-button
          size="mini"
          type="primary"
          v-if="
            showForm === '1' &&
            workDetails.maintenanceStatus === '1' &&
            workDetails.handlerId === logUser
          "
          @click="RejectSubmitForm()"
          >提交</el-button
        >
        <el-button
          size="mini"
          type="primary"
          v-if="showForm === '1' && workDetails.maintenanceStatus === '3'"
          @click="submitForm('3')"
          >提交</el-button
        >
      </div>
    </el-form>

    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="getIotFileUrl(dialogImageUrl)" alt />
    </el-dialog>
  </div>
</template>
<script>
import { updateMaintenance, getMaintenance } from "@/api/power/maintenance";
import { uploadFile } from "@/api/file";
import { getIotFileUrl } from "@/utils/hciot";
// 工单状态(0:工单已创建 1:工单执行中 2:工单审核失败 3:工单审核成功)
const workStateList = {
  0: "工单已创建",
  1: "退回工单",
  2: "确认工单",
  3: "处理完成",
  4: "退回处理",
  5: "审核通过",
};
// 故障类型(0:设备离线 1:设备超警)
const fanltTypeList = {
  0: "设备离线",
  1: "设备超警",
};
export default {
  name: "DetailsWrap",
  props: ["maintenanceId", "maintenanceInfo", "tempType"],
  data() {
    return {
      workStateList,
      fanltTypeList,
      loading: false,
      logUser: "",
      form: {},
      showIndex: null,
      rules: {},
      fileType: ["image/jpeg", "image/png"],
      fileSize: 1024 * 1024 * 20,
      temp: {
        maintenanceId: "",
        handelTime: "",
        feedbackInformation: "",
        maintenanceStatus: "",
        pictures: [],
      },
      showForm: "0",
      workDetails: {},
      pictures: [],
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  created() {
    this.logUser = this.$store.getters.userId;
    this.handleDetails();
  },
  methods: {
    getIotFileUrl,
    // 限制图片大小和类型
    beforeAvatarUpload(file) {
      const isJPG = this.fileType.indexOf(file.type) >= 0;
      const isLt2M = file.size < this.fileSize;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 图片上传
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file;
      this.dialogVisible = true;
    },
    handelDelFile(file) {
      // console.log(file);
      this.pictures.splice(this.pictures.indexOf(file), 1);
    },
    uploud(file) {
      var formData = new FormData();
      formData.append("file", file.file);
      uploadFile(formData)
        .then((response) => {
          if (response.code === 200) {
            // this.temp.pictures.push(response.data.filePath)
            this.pictures.push(response.url);
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 条件查询详情
    handleDetails() {
      this.loading = true;
      // this.workDetails = this.maintenanceInfo;
      // 模拟数据开发测试
      // 登录用户是 上报人
      // this.workDetails.reporterId = this.logUser;
      // 登录用户是 处理人
      // this.workDetails.handlerId = this.logUser;
      // this.workDetails.maintenanceStatus = "5";
      // this.workDetails.maintenanceNodeList = [
      //   {
      //     auditResult: '通过',
      //     auditorName: 'admin',
      //     auditTime: '2021-03-04 10:29:25',
      //     auditOpinion: '合格通过！'
      //   },
      //   {
      //     auditResult: '不通过',
      //     auditorName: 'admin',
      //     auditTime: '2021-03-04 10:10:25',
      //     auditOpinion: '不合格通过！'
      //   }
      // ]
      getMaintenance(this.maintenanceId).then((response) => {
        this.workDetails = response.data;
        this.newTemp();
        this.pictures = this.workDetails.scenePictures
          ? this.workDetails.scenePictures.split(",")
          : [];
        this.showForm = "0";
        this.loading = false;
      });
    },
    // 处理人提交表单
    repSrouSubmit() {
      this.showForm = "0";
      this.form.maintenanceStatus = "0";
      updateMaintenance(this.form).then((res) => {
        if (res.code === 200) {
          this.workDetails = Object.assign(this.workDetails, this.form);
        }
      });
    },
    // 处理人退回操作
    handelReject() {
      this.newTemp();
      this.showForm = "1";
      this.workDetails.maintenanceStatus = "1";
    },
    // 退回提交
    RejectSubmitForm() {
      this.form.maintenanceStatus = "1";
      this.showForm = "0";
      // this.form.handleTime = this.parseTime(new Date(), "{y}-{m}-{d}");
      if (this.pictures) {
        this.form.scenePictures = this.pictures.join(",");
      } else {
        this.form.scenePictures = "";
      }
      updateMaintenance(this.form).then((res) => {
        if (res.code === 200) {
          this.workDetails = Object.assign(this.workDetails, this.form);
        }
      });
    },
    // 处理人确认工单
    handelConfirm() {
      this.newTemp();
      this.showForm = "1";
      this.form.maintenanceStatus = "2";
      updateMaintenance(this.form).then((res) => {
        if (res.code === 200) {
          this.workDetails = Object.assign(this.workDetails, this.form);
        }
      });
    },
    // 处理人完成工单
    handelComplete() {
      this.newTemp();
      this.workDetails.maintenanceStatus = "3";
      this.showForm = "1";
    },
    // 处理人处理完成提价
    submitForm() {
      this.form.maintenanceStatus = "3";
      this.showForm = "0";
      // this.form.handleTime = this.parseTime(new Date(), "{y}-{m}-{d}");
      if (this.pictures) {
        this.form.scenePictures = this.pictures.join(",");
      } else {
        this.form.scenePictures = "";
      }
      updateMaintenance(this.form).then((res) => {
        if (res.code === 200) {
          this.workDetails = Object.assign(this.workDetails, this.form);
        }
      });
    },
    expFromShow(row) {
      if (row.reporterId === this.logUser && row.maintenanceStatus === "1") {
        return true;
      } else if (
        row.handlerId === this.logUser &&
        (row.maintenanceStatus === "2" || row.maintenanceStatus === "0")
      ) {
        return true;
      } else if (
        row.handlerId === this.logUser &&
        row.maintenanceStatus === "1" &&
        this.showForm === "1"
      ) {
        return true;
      } else if (
        row.handlerId === this.logUser &&
        row.maintenanceStatus === "3" &&
        this.showForm === "1"
      ) {
        return true;
      } else if (
        row.handlerId === this.logUser &&
        row.maintenanceStatus === "4" &&
        this.showForm === "0"
      ) {
        return true;
      }
      return false;
    },
    newTemp() {
      this.form = {
        maintenanceId: this.workDetails.maintenanceId,
        maintenanceStatus: this.workDetails.maintenanceStatus,
      };
    },
  },
};
</script>
<style lang="scss">
.maintennce-details {
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 0 20px;
  .el-upload--picture-card {
    width: 100px;
    height: 100px;
    cursor: pointer;
    line-height: 106px;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
  }
  .el-timeline-item__wrapper {
    width: 90%;
  }
  .el-divider--horizontal {
    margin: 20px 0;
  }
  .info-wrap {
    width: 100%;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    background: gainsboro;
    margin-bottom: 10px;
    min-height: 150px;
    height: 100%;
    .el-row {
      width: 100%;
    }
  }
  .feedback-wrap {
    min-height: 200px;
    height: 100%;
  }
  .form-submit-div {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .item-block-img {
    width: 100%;
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    .label-wrap {
      display: block;
      height: 50px;
      width: 100px;
      text-align: right;
      padding-right: 12px;
      font-size: 14px;
      font-weight: 600;
    }
    .img-list-wrap {
      width: calc(100% - 120px);
      display: flex;
      flex-wrap: wrap;
      .img-show {
        overflow: hidden;
        display: flex;
        width: 100px;
        margin-right: 10px;
        flex-wrap: wrap;
        height: 100px;
        > img {
          width: 100px;
          height: 100px;
          margin-right: 10px;
          border: 1px solid #cfcece;
          border-radius: 3px;
          margin-bottom: 10px;
        }
        .img-option-wrap {
          width: 99px;
          height: 99px;
          position: relative;
          background: #d4d3d380;
          justify-content: center;
          align-items: center;
          color: #464444;
          left: 0px;
          display: flex;
          top: -110px;
          > i {
            font-size: 16px;
            margin-right: 10px;
          }
          > i:hover {
            color: #409eff;
          }
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
  .item-block {
    .value-span {
      color: #3f9ab5;
    }
  }
}
.maintennce-details::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 5px;
}
.maintennce-details::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px #c4c4c4;
  background: #dededea6;
}
.maintennce-details::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px #f6f6f6;
  border-radius: 10px;
  background: #ffffff;
}
</style>
