<template>
  <div>
    <el-dialog
      :title="title + '详情'"
      :visible.sync="isShow"
      width="1200px"
      :destroy-on-close="true"
    >
      <el-table
        :data="tableData"
        row-key="itemId"
        height="441"
        style="max-height: 450px; overflow-y: auto"
        default-expand-all
      >
        <!-- align="left" -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              v-if="props.row.dataInfoList"
              :data="props.row.dataInfoList"
            >
              <el-table-column
                label="履职内容"
                align="center"
                :show-overflow-tooltip="true"
                prop="pointName"
              >
              </el-table-column>
              <el-table-column
                label="履职区域"
                align="center"
                :show-overflow-tooltip="true"
                prop="areaName"
              >
              </el-table-column>
              <el-table-column
                label="履职结果"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <span
                    style="color: green"
                    v-if="scope.row.executeFlag == '001'"
                    >{{ scope.row.executeResult }}</span
                  >
                  <span
                    style="color: red"
                    v-else-if="scope.row.executeFlag == '002'"
                    >{{ scope.row.executeResult }}</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="履职时间"
                align="center"
                :show-overflow-tooltip="true"
                prop="executeTime"
              >
              </el-table-column>
              <el-table-column label="履职图片" align="center">
                <template slot-scope="scope">
                  <div
                    class="block"
                    v-for="img in scope.row.appResumptionDataImgList"
                  >
                    <el-image
                      style="width: 50px; height: 50px; margin-right: 5px"
                      :src="img.imgPath"
                      fit="fit"
                      :preview-src-list="
                        imgPreviewSrcList(scope.row.appResumptionDataImgList)
                      "
                    >
                    </el-image>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="问题描述"
                align="center"
                :show-overflow-tooltip="true"
                prop="resRemark"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          label="履职项"
          align="center"
          prop="itemName"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/api/resumption/taskManger.js";
export default {
  data() {
    return {
      isShow: false,
      title: "",
      tableData: [],
    };
  },
  methods: {
    async refresh(id, ymd) {
      let detail = await api.one(id, ymd);
      if (detail && detail.length > 0) {
        this.tableData = detail;
      } else {
        this.tableData = [];
      }
    },
    async show(id, title, ymd) {
      // console.log(id,title);
      this.title = title;
      await this.refresh(id, ymd);
      this.isShow = true;
    },
    onHide() {
      this.isShow = false;
    },
    reset() {
      this.tableData = [];
    },
    imgPreviewSrcList(imgList) {
      let srcList = [];
      imgList.forEach((element) => {
        srcList.push(element.imgPath);
      });
      return srcList;
    },
  },
};
</script>

<style lang="scss">
.block {
  // padding: 10px 10px;
  text-align: center;
  // border-right: 1px solid #eff2f6;
  display: inline-block;
  // width: 20%;
  // vertical-align: top;
}
</style>
