<template>
  <!-- 整改巡检 -->
  <div calss="checkDetails">
    <vue-scroll style="height: 100%">
      <div class="goBack whiteBlock">
        <el-button type="primary" size="medium" @click="goBackBtn"
          >
          <!-- 返回 -->
          {{$t('message.safeMangeCheck.back')}}
          </el-button
        >
      </div>

      <div class="content whiteBlock">
        <div class="pageTitle">
          <!-- 内容详细 -->
          {{$t('message.safeMangeCheck.contentDetail')}}
        </div>
        <div style="width: 80%">
          <el-form size="medium" label-width="240px" class="demo-ruleForm">
            <!-- 检查性质 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[0]">
              <div class="form_item">{{ detailsData.checkNature }}</div>
            </el-form-item>
            <!-- 检查项 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[1]">
              <div class="form_item">{{ detailsData.checkPoints }}</div>
            </el-form-item>
            <!-- 检查内容 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[2]">
              <div class="form_item">{{ detailsData.checkContent }}</div>
            </el-form-item>
            <!-- 检查时间 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[3]">
              <div class="form_item">{{ detailsData.checkTime }}</div>
            </el-form-item>
            <!-- 附件 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[4]">
              <div
                class="form_item"
                style="background: none"
                v-if="detailsData.fileUrl"
              >
                <img
                  :src="fileUrl + item.url"
                  class="img"
                  v-for="(item, index) in detailsData.fileList"
                  :key="index"
                  @click="handlePictureCardPreview({ url: fileUrl + item.url })"
                />
              </div>
            </el-form-item>
            <!-- 整改人 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[5]">
              <div class="form_item">{{ detailsData.rectifyPeopleAme }}</div>
            </el-form-item>
            <!-- 通知人 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[6]">
              <div class="form_item">{{ detailsData.notifier }}</div>
            </el-form-item>
            <!-- 整改要求 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[7]">
              <div class="form_item">{{ detailsData.rectifyRequire }}</div>
            </el-form-item>
            <!-- 备注 -->
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[8]">
              <div class="form_item">{{ detailsData.remarks }}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="content bottom_content whiteBlock">
        <div class="pageTitle">
          <!-- 整改情况 -->
          {{$t('message.safeMangeCheck.changeDetail')}}
        </div>
        <div v-if="checkRecord.length > 0">
        <el-form
          size="medium"
          label-width="240px"
          style="width: 80%; margin-bottom: 120px"
          class="demo-ruleForm"
          
          v-for="(item, index) in checkRecord"
          :key="index"
        >
          <el-form-item :label="$t('message.safeMangeCheck.formItem')[5]+':'">
            <div class="form_item">{{ item.rectifyPeopleName }}</div>
            <div class="pass_wrap" v-if="item.status != 1">
              <img
                src="@/assets/images/icon_pass.png"
                v-if="item.status == 2"
              />
              <img
                src="@/assets/images/icon_unpass.png"
                v-if="item.status == 3"
              />
            </div>
          </el-form-item>
          <!-- 检查内容: -->
          <el-form-item :label="$t('message.safeMangeCheck.formItem')[2]+':'">
            <div class="form_item">{{ item.replyContent }}</div>
          </el-form-item>
          <el-form-item :label="$t('message.safeMangeCheck.formItem')[4]+':'">
            <div
              class="form_item"
              style="background: none"
              v-if="item.fileList.length > 0"
            >
              <img
                :src="fileUrl + imgItem.url"
                class="img"
                @click="
                  handlePictureCardPreview({ url: fileUrl + imgItem.url })
                "
                v-for="(imgItem, imgIndex) in item.fileList"
                :key="imgIndex"
              />
            </div>
          </el-form-item>
          <!-- 复核人: -->
          <el-form-item :label="$t('message.safeMangeCheck.reviewer')">
            <div class="form_item">{{ item.inspectorName }}</div>
          </el-form-item>
          <!-- 复核内容: -->
          <el-form-item :label="$t('message.safeMangeCheck.checkTheContent')" v-if="item.status != 1">
            <div class="form_item">{{ item.replyContent }}</div>
          </el-form-item>
          <el-form-item :label="$t('message.safeMangeCheck.formItem')[4]+':'" v-if="item.status != 1">
            <div
              class="form_item"
              style="background: none"
              v-if="item.auditFileList.length > 0"
            >
              <img
                :src="fileUrl + imgItem.url"
                class="img"
                @click="
                  handlePictureCardPreview({ url: fileUrl + imgItem.url })
                "
                v-for="(imgItem, imgIndex) in item.auditFileList"
                :key="imgIndex"
              />
            </div>
          </el-form-item>
        </el-form>
        </div>

        <div v-else class="noData">
          <img src="@/assets/images/noData.png"/>
          <div>
            <!-- 暂无数据 -->
            {{$t('message.safeMangeCheck.noData')}}
          </div>
        </div>


        <div
          class="correctiveContent"
          v-if="
            (userInfo.userId == detailsData.rectifyPeople &&
              checkRecord.length > 0 &&
              checkRecord[checkRecord.length - 1].status == 3) ||
            (userInfo.userId == detailsData.rectifyPeople &&
              checkRecord.length <= 0)
          "
        >
          <el-button
            type="primary"
            style="width: 200px; margin-top: 10%"
            size="medium"
            @click="correctiveReplyBtn"
            >
            <!-- 整改回复 -->
            {{$t('message.safeMangeCheck.correctiveReply')}}
            </el-button
          >
        </div>

        <div
          class="correctiveContent"
          v-if="
            userInfo.userId == detailsData.inspector &&
            checkRecord.length > 0 &&
            checkRecord[checkRecord.length - 1].status == 1
          "
        >
          <el-button
            type="primary"
            style="width: 200px; margin-top: 20px"
            size="medium"
            @click="auditBtn"
            >
            <!-- 审核回复 -->
             {{$t('message.safeMangeCheck.reviewReply')}}
            </el-button
          >
        </div>
      </div>

      <!-- 整改回复弹窗 -->
      <el-dialog :modal-append-to-body="false" :title="$t('message.safeMangeCheck.correctiveReply')" :visible.sync="dialogVisible" width="667px">
        <div class="dialog_content">
          <el-form
            :model="correctiveForm"
            ref="correctiveForm"
            label-width="80px"
            class="demo-ruleForm"
            :rules="rules"
          >
          <!-- 回复内容 -->
            <el-form-item :label="$t('message.safeMangeCheck.replyContent')" prop="replyContent">
              <!-- 请输入内容 -->
              <el-input
                type="textarea"
                :rows="3"
                :placeholder="$t('message.safeMangeCheck.placeholder')+$t('message.safeMangeCheck.content')"
                v-model="correctiveForm.replyContent"
              >
              </el-input>
            </el-form-item>
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[4]" prop="replyImg">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="(file) => handleRemove(file, 1)"
                :on-success="(file) => handleSuccess(file, 1)"
                name="files"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" size="medium"
              >
              <!-- 取 消 -->
               {{$t('message.safeMangeCheck.cancel')}}
              </el-button
            >
            <el-button type="primary" @click="saveBtn(1)" size="medium"
              >
              <!-- 确 定 -->
              {{$t('message.safeMangeCheck.confirm')}}
              </el-button
            >
          </span>
        </div>
      </el-dialog>
      <!-- 审核回复弹窗 -->
      <el-dialog :modal-append-to-body="false" title="审核回复" :visible.sync="auditDialog" width="667px">
        <div class="dialog_content">
          <el-form
            :model="auditForm"
            ref="auditForm"
            label-width="80px"
            class="demo-ruleForm"
            :rules="rules"
            size="medium"
          >
            <el-form-item :label="$t('message.safeMangeCheck.replyContent')" prop="replyContent">
              <el-input
                type="textarea"
                :rows="3"
                :placeholder="$t('message.safeMangeCheck.placeholder')+$t('message.safeMangeCheck.content')"
                v-model="auditForm.replyContent"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="审核结果" prop="status">
              <div class="flex">
                <div>
                  <el-switch
                    v-model="auditForm.status"
                    active-color="#13ce66"
                    inactive-color="#DCDFE6"
                  >
                  </el-switch>
                </div>
                <p style="margin: 1px 0 0 10px">
                  {{ auditResult ? "通过" : "不通过" }}
                </p>
              </div>
            </el-form-item>
            <el-form-item :label="$t('message.safeMangeCheck.formItem')[4]" prop="auditReplyImg">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="(file) => handleRemove(file, 2)"
                :on-success="(file) => handleSuccess(file, 2)"
                name="files"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="auditDialog = false" size="medium"
              >
              <!-- 取 消 -->
               {{$t('message.safeMangeCheck.cancel')}}
              </el-button
            >
            <el-button type="primary" @click="saveBtn(2)" size="medium"
              >
              <!-- 确 定 -->
              {{$t('message.safeMangeCheck.confirm')}}
              </el-button
            >
          </span>
        </div>
      </el-dialog>

      <!-- 大图 -->
      <el-dialog :modal-append-to-body="false" :visible.sync="imageUrlDialog">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </vue-scroll>
  </div>
</template>
<script>
import { getDetailsDataApi,getRectificationRecordListApi,approvalRectifyRecordApi,addRectifyRecordApi } from "@/assets/js/api/safeManage";

export default {
  props: ["dataId"],
  data() {
    return {
      userInfo: "",
      fileUrl: "",
      uploadUrl: "",
      id: "",
      detailsData: {}, //基本信息
      rules: {
        replyImg: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        replyContent: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        replyContent: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        auditReplyImg: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
      },
      correctiveForm: {
        //整改回复
        replyContent: "",
        replyImg: "",
        securityId: "",
      },
      auditForm: {
        //审批回复
        replyContent: "",
        auditReplyImg: "",
        id: "",
        status: true,
      },
      dialogVisible: false,
      auditDialog: false,
      auditResult: true,
      imageUrlDialog: false,
      dialogImageUrl: "",
      checkRecord: [], //整改记录
      fileList: [],
      type: 1, //1整改回复  2审批回复
    };
  },

  created() {
    this.userInfo = this.$store.state.userInfo;
    this.id = this.$props.dataId;
    this.uploadUrl = this.$store.state.UPLOADURL;
    this.fileUrl = this.$store.state.FILEURL;
    this.getCheckDetailsData();
    this.getCheckRecordList();
  },
  methods: {
    //返回按钮
    goBackBtn() {
      this.$emit("detailType", 1);
    },

    //获取详情 基本数据
    getCheckDetailsData() {
      let data = {
        id: this.id,
      };
      getDetailsDataApi(data).then((res) => {
        if (res.code == 200) {
          this.detailsData = res.result;
          if (res.result.fileUrl) {
            this.detailsData.fileList = JSON.parse(res.result.fileUrl);
          } else {
            this.detailsData.fileList = [];
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //获取详情 整改记录
    getCheckRecordList() {
      let data = {
        securityId: this.id,
      };
      getRectificationRecordListApi(data).then((res) => {
        if (res.code == 200) {
          //整改回复图片
          if(res.result.dataList.length>0){
            for(let i= 0; i<res.result.dataList.length; i++){
              if(res.result.dataList[i].replyImg){
                res.result.dataList[i].fileList = JSON.parse(res.result.dataList[i].replyImg)
              }else{
                res.result.dataList[i].fileList = [];
              }
            };
            //审核回复图片
            for(let i= 0; i<res.result.dataList.length; i++){
              if(res.result.dataList[i].auditReplyImg){
                res.result.dataList[i].auditFileList = JSON.parse(res.result.dataList[i].auditReplyImg)
              }else{
                res.result.dataList[i].auditFileList = [];
              }
            };
          }
          this.checkRecord = res.result.dataList;
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //整改回复按钮
    correctiveReplyBtn() {
      this.dialogVisible = true;
      this.type = 1;
    },
    //审核回复按钮
    auditBtn() {
      this.type = 2;
      this.auditDialog = true;
    },
    //删除成功
    handleRemove(file, type) {
      let url = file.response.data[0].imageUrl;
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url == url) {
          this.fileList.splice(i, 1);
        }
      }
    },

    //上传成功
    handleSuccess(file, type) {
      let data = { name: file.data[0].filename, url: file.data[0].imageUrl };
      this.fileList.push(data);
    },

    //查看附件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imageUrlDialog = true;
    },

    //回复保存
    saveBtn(type) {
      //整改回复
      if (type == 1) {
        this.correctiveForm.replyImg =
          this.fileList.length > 0 ? JSON.stringify(this.fileList) : "";
        this.$refs.correctiveForm.validate((valid) => {
          if (valid) {
            let data = JSON.parse(JSON.stringify(this.correctiveForm));
            data.securityId = this.id;
            addRectifyRecordApi(data).then((res) => {
              if (res.code == 200) {
                this.getCheckDetailsData();
                this.getCheckRecordList();
                this.dialogVisible = false;
                this.correctiveForm = {
                  //整改回复
                  replyContent: "",
                  replyImg: "",
                  securityId: "",
                };
                this.fileList = [];
              }
            });
          } else {
            return false;
          }
        });

        //审批回复
      } else {
        this.auditForm.auditReplyImg =
          this.fileList.length > 0 ? JSON.stringify(this.fileList) : "";
        this.$refs.auditForm.validate((valid) => {
          if (valid) {
            let data = JSON.parse(JSON.stringify(this.auditForm));
            data.id = this.checkRecord[this.checkRecord.length - 1].id;
            data.status = data.status ? 2 : 3;
            approvalRectifyRecordApi(data).then((res) => {
              this.auditForm = {
                //审批回复
                replyContent: "",
                auditReplyImg: "",
                id: "",
                status: true,
              };
              this.fileList = [];
              this.auditDialog = false;
              this.getCheckDetailsData();
              this.getCheckRecordList();
            });
          } else {
            return false;
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-content: center;
}
.checkDetails {
  width: 100%;
  height: 100%;
}
.goBack {
  padding: 15px 20px;
  box-sizing: border-box;
}
.content {
  margin: 20px 0;
  padding: 15px 20px;
  box-sizing: border-box;
}
.form_item {
  background: #f3f5fd;
  margin: 0px 15px;
  padding: 0 10px;
  word-wrap: break-word;
}
.bottom_content {
  width: 100%;
  min-height: 46%;
  margin-bottom: 0;
  padding-bottom: 100px;
}
.correctiveContent {
  text-align: center;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-ruleForm {
  position: relative;
}
.pass_wrap {
  position: absolute;
  top: 25px;
  right: 40%;
  z-index: 10;
}
.img {
  width: 40px;
  height: 50px;
  margin-right: 5px;
  cursor: pointer;
}

.noData{
  margin-top: 50px;
  text-align: center;
  color: #C5D5FC;
}
</style>