<template>
  <div class="ssp-container-index-drawer">
    <el-drawer
      v-if="vOpen"
      :visible.sync="vOpen"
      ref="drawer"
      v-loading="loading"
      direction="rtl"
      @close="closeCallBack"
      size="60%"
    >
      <template slot="title">
        <div>{{ typeName }}隐患详情查看</div>
      </template>
      <div class="block">
        <div class="drawer">
          <div class="drawerLeft">
            <el-steps :active="active" finish-status="success" simple>
              <el-step title="提交隐患"></el-step>
              <el-step title="处理隐患"></el-step>
              <el-step title="整改复检"></el-step>
              <el-step title="处理完成"></el-step>
            </el-steps>
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in flowRecordList"
                :key="index"
                :icon="setIcon(item.processState)"
                :color="setColor(item.processState)"
              >
                <p style="font-weight: 700">
                  {{ getProcess(index, item.process) }}
                </p>
                <el-card :body-style="{ padding: '10px' }">
                  <el-descriptions class="margin-top" :column="1" size="small" border>
                    <el-descriptions-item
                      v-if="item.createUserName"
                      label-class-name="my-label"
                      :labelStyle="labelStyle"
                    >
                      <template slot="label"
                        ><i class="el-icon-user"></i>办理用户</template
                      >
                      {{ item.createUserName }}
                      <el-tag type="info" size="mini">{{ item.createUser }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item
                      v-if="item.createTime"
                      label-class-name="my-label"
                      :labelStyle="labelStyle"
                    >
                      <template slot="label"
                        ><i class="el-icon-date"></i>办理时间</template
                      >
                      {{ item.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item
                      v-if="item.fileUrls"
                      label-class-name="my-label"
                      :labelStyle="labelStyle"
                    >
                      <template slot="label" v-if="item.processState == 1"
                        ><i class="el-icon-picture-outline"></i>隐患图片</template
                      >
                      <template slot="label" v-if="item.processState != 1"
                        ><i class="el-icon-picture-outline"></i>整改图片</template
                      >
                      <el-image
                        ref="preview" :key="idx"
                        v-for="(img,idx) in item.fileUrls.split(',')"
                        :src="img + '.min.jpg'"
                        style="width: 50px; height: 50px; margin-right: 10px"
                        @click="onPreview(img)"
                      ></el-image>
                    </el-descriptions-item>
                    <el-descriptions-item
                      v-if="item.opinion"
                      label-class-name="my-label"
                      :labelStyle="labelStyle"
                    >
                      <template slot="label"
                        ><i class="el-icon-tickets"></i>处理意见</template
                      >
                      {{ item.opinion }}
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
          <div class="drawerRight">
            <el-form
              ref="form"
              label-width="80px"
              size="mini"
              :model="form"
              :rules="rules"
              style="padding-right: 20px; padding-left: 20px"
            >
              <el-form-item label="项目名称">
                {{ dataInfo.problemArea }}
              </el-form-item>
              <el-form-item label="隐患图片">
                <el-image
                  ref="preview" :key="idx"
                  v-for="(img,idx) in dataInfo.smarkUrl.split(',')"
                  :src="getImageUrl(img)"
                  style="width: 60px; height: 60px; margin-right: 8px"
                  @click="onPreview(img)"
                ></el-image>
              </el-form-item>
              <el-form-item label="问题类型">
                <span v-if="dataInfo.problemType == '1'" class="timeline_for_state_1"
                  >常规检查</span
                >
                <span v-else class="timeline_for_state_2">专项检查</span>
              </el-form-item>
              <el-form-item label="隐患类型">
                <dict-tag
                  v-if="dataInfo.infoType == 1"
                  :options="dict.type.ssp_zlyhlx"
                  :value="dataInfo.dangerType"
                />
                <dict-tag
                  v-if="dataInfo.infoType == 0"
                  :options="dict.type.ssp_aqyhlx"
                  :value="dataInfo.dangerType"
                />
              </el-form-item>
              <el-form-item label="隐患描述">
                {{ dataInfo.workParts }}
              </el-form-item>
              <el-form-item label="整改要求">
                {{ dataInfo.changeInfo }}
              </el-form-item>
              <el-form-item label="检查单位">
                {{ dataInfo.deptName }}
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="检查分类">
                    <el-tag v-if="dataInfo.roleType == 3">产发集团</el-tag>
                    <el-tag v-if="dataInfo.roleType == 4">责任主体（子公司）</el-tag>
                    <el-tag v-if="dataInfo.roleType == 5">甲方代表</el-tag>
                    <el-tag v-if="dataInfo.roleType == 6">总包单位</el-tag>
                    <el-tag v-if="dataInfo.roleType == 7">监理单位</el-tag>
                    <el-tag v-if="dataInfo.roleType == 8">分包单位</el-tag>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="检查人">
                    {{ dataInfo.createUserName }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="检查时间">
                    {{ dataInfo.createTime }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="整改人">
                    {{ dataInfo.lordSent }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="抄送人">
                    {{ dataInfo.copySend }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="复检人">
                    {{ dataInfo.recheckSend }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="截至时间">
                {{ dataInfo.nickedTime }}
              </el-form-item>
              <el-form-item
                v-if="dataInfo.checkState == 0 || dataInfo.checkState == 3"
                label="整改说明"
                prop="flowComment"
              >
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入整改说明（255字内）"
                  v-model="form.flowComment"
                />
              </el-form-item>
              <el-form-item
                v-if="dataInfo.checkState == 1"
                label="复检意见"
                prop="flowComment"
              >
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入复检意见（255字内）"
                  v-model="form.flowComment"
                />
              </el-form-item>
              <el-form-item
                v-if="dataInfo.checkState == 0 || dataInfo.checkState == 3"
                label="整改图片"
                prop="files"
              >
                <image-upload v-model="form.files" :limit="5" />
              </el-form-item>
              <div style="text-align: center; padding-bottom: 20px">
                <el-button @click="cancel">取 消</el-button>
                <el-button
                  type="success"
                  v-if="dataInfo.checkState == 0 || dataInfo.checkState == 3"
                  icon="el-icon-check"
                  @click="submitForm(0)"
                  >提 交 整 改</el-button
                >
                <el-button
                  type="danger"
                  v-if="dataInfo.checkState == 1"
                  icon="el-icon-error"
                  @click="submitForm(2)"
                  >复 检 驳 回</el-button
                >
                <el-button
                  type="success"
                  v-if="dataInfo.checkState == 1"
                  icon="el-icon-success"
                  @click="submitForm(4)"
                  >复 检 通 过</el-button
                >
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="previewList"
      style="z-index: 9999"
    />
  </div>
</template>

<script>
import { auditinfoList, modifyProblem } from "@/api/trouble/sspProblemmodify";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import { getSspProblemmodify } from "@/api/trouble/sspProblemmodify";

export default {
  name: "modifyProblemDrawer",
  components: { ElImageViewer },
  props: {
    closeCallBack: {
      type: Function,
    },
  },
  dicts: ["ssp_zlyhlx", "ssp_aqyhlx", "smz_ssp_checkstate"],
  data() {
    return {
      vOpen: false,
      option: {},
      // 查询参数
      queryParams: {
        mainId: null,
      },
      form: {
        flowComment: "",
        files: "",
      },
      rules: {
        flowComment: [
          { required: true, message: "请输入处理意见", trigger: "blur" },
          { max: 255, message: "处理意见最多255字符", trigger: "blur" },
        ],
        files: [{ required: true, message: "请上传整改图片", trigger: "blur" }],
      },
      // 遮罩层
      loading: true,
      // 流程流转数据
      flowRecordList: [],
      //label样式
      labelStyle: { width: "200px" },
      showViewer: false,
      previewList: [],
      dataInfo: {
        smarkUrl: "",
      },
      active: 100,
      typeName: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getImageUrl(url) {
      return process.env.VUE_APP_BASE_API + url + ".min.jpg";
    },
    onPreview(urls) {
      this.previewList = [];
      urls.split(",").forEach((item) => {
        this.previewList.push(process.env.VUE_APP_BASE_API + item);
      });
      this.showViewer = true;
    },
    getProcess(i, v) {
      let num = this.flowRecordList.length - i;
      if (num < 10) {
        num = "0" + num;
      }
      return num + ". " + v;
    },
    closeViewer() {
      this.showViewer = false;
    },
    setIcon(val) {
      if (val == 2) {
        return "el-icon-close";
      } else {
        return "el-icon-check";
      }
    },
    setColor(val) {
      if (val == 2) {
        return "#f56c6c";
      } else {
        return "#2bc418";
      }
    },
    show(options) {
      if (this.option.id != options.id) {
        this.form.flowComment = "";
        this.form.files = "";
      }
      if (options.infoType == 1) {
        this.typeName = "质量";
      } else {
        this.typeName = "安全";
      }
      this.option = options;
      this.initDataInfo();
      this.getAuditinfoList();
      this.vOpen = true;
    },
    initDataInfo() {
      this.loading = true;
      getSspProblemmodify(this.option.id).then((res) => {
        if (res.data.checkState == 0) {
          this.active = 1;
        } else if (res.data.checkState == 1) {
          this.active = 2;
        } else if (res.data.checkState == 3) {
          this.active = 1;
        }
        this.dataInfo = res.data;
        this.loading = false;
      });
    },
    /** 查询项目人员列表 */
    getAuditinfoList() {
      this.queryParams.mainId = this.option.id;
      auditinfoList(this.queryParams).then((response) => {
        this.flowRecordList = response.rows;
      });
    },
    // 取消按钮
    cancel() {
      this.vOpen = false;
    },
    /** 提交按钮 */
    submitForm(v) {
      let that = this;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let msg = "提交复检";
          if (v == 2) {
            msg = "复检驳回";
          }
          if (v == 4) {
            msg = "复检通过";
          }
          this.$confirm("是否确认" + msg + "?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              that.loading = true;
              let params = {
                mainId: that.option.id,
                processState: v,
                opinion: that.form.flowComment,
                fileUrls: that.form.files,
              };
              modifyProblem(params).then((res) => {
                that.$modal.msgSuccess("操作成功");
                that.loading = false;
                //关闭并刷新列表
                that.$refs.drawer.closeDrawer();
              });
            })
            .catch(() => {
              console.log("取消操作");
            });
        }
      });
    },
  },
};
</script>
<style scope>
.el-alert {
  display: flex !important;
}
.el-alert--info.is-light {
  background: cornflowerblue !important;
  color: #ffffff !important;
}
.el-alert--info .el-alert__description {
  color: #ffffff !important;
}
.el-steps--simple {
  padding: 5px 5px !important;
}
.el-timeline-item {
  padding-bottom: 0px !important;
}
.el-timeline {
  padding-left: 5px !important;
  padding-top: 20px !important;
}
.el-timeline-item__wrapper {
  padding-left: 15px !important;
}
.el-timeline-item__content {
  font-weight: 900;
}
.el-form-item {
  margin-bottom: 15px !important;
}
.el-step.is-simple .el-step__title {
  font-size: 13px !important;
}
.el-card {
  margin-left: -15px !important;
}
</style>
<style lang="scss">
.ssp-container-index-drawer {
  .drawer {
    width: 100%;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    .drawerLeft {
      width: 50%;
      min-width: 280px;
      height: 100%;
      float: left;
      border-right: 1px solid #dcdfe6;
      overflow-y: scroll;
      padding-right: 20px;
    }
    .drawerRight {
      width: 50%;
      min-width: 400px;
      height: 100%;
      float: left;
      padding-left: 20px;
    }
  }
}
</style>
