<template>
  <div class="flow-labour-drawer">
    <el-drawer
      v-if="isOpen"
      :visible.sync="isOpen"
      ref="drawer"
      direction="rtl"
      size="60%"
    >
      <template slot="title">
        <div>{{ title }}</div>
      </template>
      <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 flowLabourNodes"
              :key="index"
              :icon="setIcon(item)"
              :color="setColor(item)"
            >
              <p style="font-weight: 700">
                {{ getSort(index)
                }}{{
                  item.flowNode == "0" ? item.createBy + "提交投诉" : item.flowNodeName
                }}
              </p>
              <el-card :body-style="{ padding: '6px' }">
                <el-descriptions class="margin-top" :column="1" size="small" border>
                  <el-descriptions-item
                    v-if="item.createBy"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"><i class="el-icon-user"></i>办理人</template>
                    {{ item.createBy }}
                    <el-tag type="info" size="mini" v-show="item.flowNode == '0'">{{
                      dataInfo.subDeptName
                    }}</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.flowComment"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"
                      ><i class="el-icon-tickets"></i>处理意见</template
                    >
                    {{ item.flowComment }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    v-if="item.files"
                    label-class-name="my-label"
                    :labelStyle="labelStyle"
                  >
                    <template slot="label"
                      ><i class="el-icon-picture"></i>凭证附件</template
                    >
                    <el-image
                      ref="preview"
                      v-for="(img, idx) in item.files.split(',')"
                      :key="idx"
                      :src="getImageUrl(img)"
                      style="width: 60px; height: 60px; margin-right: 8px"
                      @click="onPreview(img)"
                    ></el-image>
                  </el-descriptions-item>
                </el-descriptions>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="drawerRight">
          <el-form
            ref="form"
            v-loading="loading"
            :model="form"
            :rules="rules"
            label-width="80px"
            style="padding-right: 20px; padding-left: 20px"
          >
            <el-form-item label="项目名称">
              {{ dataInfo.projectName }}
            </el-form-item>
            <el-form-item label="总包单位">
              {{ dataInfo.deptName }}
            </el-form-item>
            <el-form-item label="分包单位">
              {{ dataInfo.subDeptName }}
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="投诉人">
                  {{ dataInfo.laborName }}
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话">
                  {{ dataInfo.laborPhone }}
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="身份证号">
              {{ dataInfo.laborCardId }}
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="欠薪人数">
                  {{ dataInfo.laborNumber }} <el-tag size="small">人</el-tag>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="欠薪金额">
                  {{ dataInfo.laborAmount }} <el-tag size="small">元</el-tag>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="原因说明">
              {{ dataInfo.laborReason }}
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="投诉时间">
                  <span>{{ parseTime(dataInfo.createTime, "{y}-{m}-{d}") }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投诉进度">
                  <dict-tag
                    :options="dict.type.flow_labou_appstatus"
                    :value="dataInfo.approveStatus"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="凭证附件" v-if="dataInfo.files">
              <el-image
                ref="preview"
                v-for="(img, idx) in dataInfo.files.split(',')"
                :key="idx"
                :src="getImageUrl(img)"
                style="width: 65px; height: 65px; margin-right: 8px"
                @click="onPreview(img)"
              ></el-image>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-drawer>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="previewList"
      style="z-index: 2050"
    />
  </div>
</template>

<script>
import { getFlowLabourInfo, findMyFlowLabourNodes } from "@/api/flow/flowLabourInfo";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";

export default {
  name: "approveFlowLabourDrawer",
  components: {
    ElImageViewer,
  },
  dicts: ["flow_labou_appstatus"],
  data() {
    return {
      showViewer: false,
      open: false,
      isOpen: false,
      dataInfo: {
        files: "",
      },
      title: "",
      // 遮罩层
      loading: true,
      previewList: [],
      flowLabourNodes: [],
      active: 100,
      //label样式
      labelStyle: { width: "180px" },
    };
  },
  computed: {},
  mounted() {},
  methods: {
    setIcon(row) {
      if (row.flowResult == null || row.flowResult == "100") {
        return "el-icon-check";
      } else {
        return "el-icon-close";
      }
    },
    setColor(row) {
      if (row.flowResult == null || row.flowResult == "100") {
        return "#2bc418";
      } else {
        return "#f56c6c";
      }
    },
    getSort(i) {
      let num = this.flowLabourNodes.length - i;
      if (num < 10) {
        num = "0" + num;
      }
      return num + ". ";
    },
    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;
    },
    closeViewer() {
      this.showViewer = false;
    },
    show(options) {
      this.title = "劳资投诉详情查看";
      this.form = {};
      this.form.flowId = options.id;
      this.active = parseInt(options.approveStatus / 10);
      this.isOpen = true;
      getFlowLabourInfo(options.id).then((res) => {
        this.dataInfo = res.data;
        this.loading = false;
      });
      //投诉进度查看
      findMyFlowLabourNodes(options.id).then((res) => {
        this.flowLabourNodes = res.data || [];
      });
    },
  },
};
</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;
}
</style>
<style lang="scss">
.flow-labour-drawer {
  .drawer {
    width: 100%;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    .drawerLeft {
      width: 55%;
      min-width: 280px;
      height: 100%;
      float: left;
      border-right: 1px solid #dcdfe6;
      overflow-y: scroll;
      padding-right: 20px;
    }
    .drawerRight {
      width: 45%;
      min-width: 400px;
      height: 100%;
      float: left;
      padding-left: 20px;
    }
  }
}
</style>
