<template>
    <div class="projectect-attendance-drawer">
      <el-drawer
        v-if="isOpen"
        :visible.sync="isOpen"
        v-loading="loading"
        direction="ltr"
        size="30%"
      >
        <template slot="title">
          <div>{{ title + '审批日志' }}</div>
        </template>
        <div class="block" style="padding-right: 20px;">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in flowRecordList"
              :key="index"
              :icon="setIcon(item.approveStatus)"
              :color="setColor(item.approveStatus)"
            >
              <p style="font-weight: 700">
                {{ getProcess(index, item.approveStatusName) }}
              </p>
              <el-card :body-style="{ padding: '10px' }">
                <el-descriptions class="margin-top" :column="1" size="small" border>
                  <el-descriptions-item
                    v-if="item.userName"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"><i class="el-icon-user"></i>办理用户</template>
                    {{ item.userName }}
                    <el-tag type="info" size="mini">{{ item.deptName }}</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.comment"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"
                      ><i class="el-icon-tickets"></i>处理意见</template
                    >
                    {{ item.comment }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-drawer>
    </div>
  </template>
  
  <script>
  export default {
    name: "projectAuditinfoDrawer",
    components: {},
    data() {
      return {
        isOpen: false,
        title: "",
        // 遮罩层
        loading: true,
        // 流程流转数据
        flowRecordList: [],
        // label样式
        labelStyle: { width: "200px" },
      };
    },
    computed: {},
    mounted() {},
    methods: {
      getProcess(i, v) {
      let num = this.flowRecordList.length - i;
      if (num < 10) {
        num = "0" + num;
      }
      return num + ". " + v;
    },
    setIcon(val) {
      if (val == 3) {
        return "el-icon-close";
      } else {
        return "el-icon-check";
      }
    },
    setColor(val) {
      if (val == 3) {
        return "#f56c6c";
      } else {
        return "#2bc418";
      }
    },
    show(options){
      this.title=options.title;
      this.isOpen=true;
      this.$api.publics
        .selectProjectAuditinfo({
          fromType: options.logType,
          fromId: options.id
        })
        .then((res) => {
          this.flowRecordList = res.data;
          this.loading = false;
        });
    }
    },
  };
  </script>
  