<template>
  <div class="app-container project-build-node-drawer">
    <el-drawer
      v-bind="$attrs"
      v-on="$listeners"
      @opened="onOpen"
      @close="onClose"
      style="padding-left: 40px"
      title="隐患整改流程日志"
    >
      <template slot="t">
        <right-toolbar @queryTable="getAuditinfoList" :search="true"></right-toolbar>
      </template>
      <div class="block">
        <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"
                    v-for="img 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>
    </el-drawer>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="srcList"
      style="z-index: 9999"
    />
  </div>
</template>

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

export default {
  components: { ElImageViewer },
  props: {
    formData: {
      problemmodifyId: String,
    },
  },
  dicts: [],
  data() {
    return {
      // 查询参数
      queryParams: {
        mainId: null,
      },
      // 遮罩层
      loading: true,
      // 流程流转数据
      flowRecordList: [],
      //label样式
      labelStyle: { width: "200px" },
      showViewer: false,
      srcList: [],
    };
  },
  computed: {},
  watch: {
    formData: {
      handler(value) {
        this.formData = value;
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    onPreview(url) {
      this.srcList = [];
      this.srcList.push(url);
      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";
      }
    },
    onOpen() {
      this.getAuditinfoList();
    },
    onClose() {},
    /** 查询项目人员列表 */
    getAuditinfoList() {
      if (this.formData.problemmodifyId) {
        this.loading = true;
        this.queryParams.mainId = this.formData.problemmodifyId;
        auditinfoList(this.queryParams).then((response) => {
          this.flowRecordList = response.rows;
          this.loading = false;
        });
      }
    },
  },
};
</script>
