<template>
  <div class="app-container" v-if="data">
    <page-header content="巡检详情">
      <template v-slot:right>
        <el-button @click="onExport" type="primary">导出</el-button>
      </template>
    </page-header>
    <div ref="task" class="task">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="任务名称">{{ data.taskName }}</el-descriptions-item>
        <el-descriptions-item label="任务编号">{{ data.number }}</el-descriptions-item>
        <el-descriptions-item label="任务类型">{{ typeList.find(item => item.id === data.type).label }}</el-descriptions-item>
        <el-descriptions-item label="所属路线">{{ data.routeName }}</el-descriptions-item>
        <el-descriptions-item label="巡检人员">{{ data.username }}</el-descriptions-item>
        <el-descriptions-item label="任务状态">{{ statusList.find(item => item.id === data.status).label }}</el-descriptions-item>
        <el-descriptions-item label="本人完成">{{ oneselfList.find(item => item.id === data.oneself).label }}</el-descriptions-item>
        <el-descriptions-item label="评分"> {{ data.completed ? data.score : '-' }}</el-descriptions-item>
        <el-descriptions-item label="是否合格">{{ data.completed ? data.qualified ? '合格' : '不合格' : '-' }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ data.beginTime | dateFormat('yyyy-MM-dd HH:mm') }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ data.endTime | dateFormat('yyyy-MM-dd HH:mm') }}</el-descriptions-item>
        <el-descriptions-item label="巡检时间">
          <template v-if="data.completed">{{ data.updateTime | dateFormat('yyyy-MM-dd HH:mm') }}</template>
          <template v-else>-</template>
        </el-descriptions-item>
        <el-descriptions-item label="房间名称">{{ data.roomName }}</el-descriptions-item>
        <el-descriptions-item label="楼层名称">{{ data.floorName }}</el-descriptions-item>
        <el-descriptions-item label="楼栋名称">{{ data.buildingName }}</el-descriptions-item>
      </el-descriptions>

      <el-table
          :data="data.devices"
          :span-method="objectSpanMethod"
          border
          class="mt20 w100p">
        <el-table-column prop="deviceName" label="设备名称" align="center"></el-table-column>
        <el-table-column prop="checkItemName" label="检查项名称" align="center"></el-table-column>
        <el-table-column prop="checkItemType" label="检查项类别" align="center">
          <template v-slot="scope">{{ itemTypeList.find(item => item.id === scope.row.checkItemType).label }}</template>
        </el-table-column>

        <el-table-column label="选项/拍照点" align="center">
          <template v-slot="scope">
            {{ scope.row.checkItemType === 1 ? scope.row.option.optionName : scope.row.checkItemType === 4 ? scope.row.photoPoint.name : "/" }}
          </template>
        </el-table-column>
        <el-table-column label="合格判断" align="center">
          <template v-slot="scope">
            <div v-if="scope.row.checkItemType === 1">
              {{ scope.row.option.qualifiedIfSelect ? '选中合格' : scope.row.option.qualifiedIfNoSelect ? '未选中合格' : '不合格' }}
            </div>
            <div v-if="scope.row.checkItemType === 2">
              <span v-if="scope.row.extra.checkQualifiedMinValue"> {{ scope.row.extra.qualifiedMinValue }}</span>
              <span v-else>-<span style="font-size: 24px;vertical-align: middle">∞</span></span>
              ~
              <span v-if="scope.row.extra.checkQualifiedMaxValue"> {{ scope.row.extra.qualifiedMaxValue }}</span>
              <span v-else>+<span style="font-size: 24px;vertical-align: middle">∞</span></span>
            </div>
            <div v-if="scope.row.checkItemType === 3">
              {{ qualifiedJudgeList.find(item => item.id === scope.row.extra.qualifiedJudge).label }}
            </div>
            <div v-if="scope.row.checkItemType === 4">
              {{ scope.row.photoPoint.qualifiedJudge ? '拍照合格' : '拍照不合格' }}
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column label="合格分数" align="center">-->
        <!--          <template v-slot="scope">-->
        <!--            {{ scope.row.checkItemType === 1 ? scope.row.option.score : scope.row.checkItemType === 4 ? scope.row.photoPoint.qualifiedScore : scope.row.extra.qualifiedScore }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column label="不合格分数" align="center">-->
        <!--          <template v-slot="scope">-->
        <!--            {{ scope.row.checkItemType === 1 ? "/" : scope.row.checkItemType === 4 ? scope.row.photoPoint.noQualifiedScore : scope.row.extra.noQualifiedScore }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="用户输入" align="center">
          <template v-slot="scope">
            <template v-if="data.completed">
              <div v-if="scope.row.checkItemType === 1">
                {{ scope.row.value.includes(scope.row.option.id) ? "选中" : "未选中" }}
              </div>
              <div v-if="scope.row.checkItemType === 2">
                {{ scope.row.value }}
              </div>
              <div v-if="scope.row.checkItemType === 3">
                {{ scope.row.value }}
              </div>
              <div v-if="scope.row.checkItemType === 4" class="flex justify-center flex-warp">
                <template v-if="scope.row.value.find(val => val.id === scope.row.photoPoint.id)">
                  {{ scope.row.value.find(val => val.id === scope.row.photoPoint.id).value.map(image => image.name).join('，') }}

                </template>
              </div>
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="scoreTotal" label="总分数" align="center"></el-table-column>-->
        <el-table-column prop="score" label="得分" align="center" width="80px">
          <template v-slot="scope">
            <template v-if="data.completed">
              {{ scope.row.score }}
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>
        <el-table-column label="是否合格" align="center" width="80px">
          <template v-slot="scope">
            <template v-if="data.completed">
              {{ scope.row.qualified ? '合格' : '不合格' }}
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div v-for="(image, index) in images"
           :key="image.name"
           :class="['image-container',{'image-container-margin':index%3===1}]">
        <div>
          {{ image.name }}
        </div>
        <el-image
            :preview-src-list="images.map(img => img.value)"
            :src="image.value"
            class="image"
            fit="cover">
        </el-image>
      </div>
    </div>
    <el-backtop target=".app-wrapper">
      <div style="{
            height: 100%;
            width: 100%;
            background-color: #1989fa;
            box-shadow: 0 0 6px rgba(0,0,0, .12);
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            color: white;
          }">
        <i class="el-icon-upload2"></i>
      </div>
    </el-backtop>
  </div>
</template>

<script>


import PdfLoader from "@/utils/htmlToPdf";

export default {
  name: "PatrolTaskRecordDetail",
  data() {
    return {
      id: undefined, // 数据id
      data: undefined,
      images: [], // 全部图片
      itemTypeList: [{id: 1, label: "选择"}, {id: 2, label: "数字"}, {id: 3, label: "文本"}, {id: 4, label: "拍照"}],
      statusList: [{id: 1, label: "未开始"}, {id: 2, label: "进行中"}, {id: 3, label: "正常完成"}, {id: 4, label: "超时漏检"}, {id: 5, label: "超时完成"}],// 任务状态列表
      qualifiedJudgeList: [{id: 1, label: "始终合格"}, {id: 2, label: "始终不合格"}, {id: 3, label: "无内容合格"}, {id: 4, label: "有内容合格"}],
      typeList: [{id: 1, label: "日任务"}, {id: 2, label: "周任务"}, {id: 3, label: "月任务"}], // 任务类型列表
      oneselfList: [{id: null, label: "-"}, {id: false, label: "否"}, {id: true, label: "是"}],
    }
  },

  watch: {},

  mounted() {
    this.initData();
  },

  methods: {
    // 初始化数据
    initData() {
      this.getDetail(this.$route.query);
    },

    // 取消
    onCancel() {
      this.$router.back();
    },

    // 导出
    onExport() {
      const splitOptions = [{type: 'table', className: 'el-table__row'}, {type: 'div', className: 'image-container'}];
      new PdfLoader(this.$refs["task"], 'pdf', splitOptions).outPutPdfFn("巡检详情" + Date.now());
    },

    // 获取详情
    getDetail(query) {
      this.$axios.get(`/v1/patrol/task/record/query/room`, {params: {taskId: query.taskId, roomId: query.roomId, userId: query.userId}}).then(data => {
        data.devices.unshift({deviceName: data.roomName, checkItems: data.checkItems})
        let photoIndex = 1;
        data.devices = data.devices.flatMap(device => {
          const checkItems = device.checkItems.flatMap((checkItem) => {
            if (checkItem.checkItemType === 1) {
              const value = checkItem.value?.split(',').map(v => Number(v)) ?? [];
              const options = JSON.parse(checkItem.checkItem).options;
              return options.map((option, optionIndex, options) => {
                return {...checkItem, deviceName: device.deviceName, option: option, value: value, itemRowspan: optionIndex === 0 ? options.length : 0, itemColspan: 1};
              })
            } else if (checkItem.checkItemType === 2) {
              return [
                {...checkItem, deviceName: device.deviceName, extra: JSON.parse(checkItem.checkItem).extra, value: checkItem.value, itemRowspan: 1, itemColspan: 1}
              ];
            } else if (checkItem.checkItemType === 3) {
              return [
                {...checkItem, deviceName: device.deviceName, extra: JSON.parse(checkItem.checkItem).extra, value: checkItem.value, itemRowspan: 1, itemColspan: 1}
              ];
            } else if (checkItem.checkItemType === 4) {
              const value = (checkItem.value && JSON.parse(checkItem.value).map(item => {
                const images = (item.value?.split(",") ?? []).map(image => {
                  const imageObj = {name: `图${photoIndex++}`, value: image};
                  this.images.push(imageObj);
                  return imageObj;
                });
                return {id: item.id, value: images};

              })) || [];
              // const value = (checkItem.value && JSON.parse(checkItem.value).map(item => {
              //   item.value = item.value?.split(",") ?? [];
              //   return {name: `图${photoIndex++}`, value: item};
              // })) || [];
              const photoPoints = JSON.parse(checkItem.checkItem).photoPoints;
              return photoPoints.map((photoPoint, photoPointIndex, photoPoints) => {
                return {...checkItem, deviceName: device.deviceName, photoPoint: photoPoint, value: value, itemRowspan: photoPointIndex === 0 ? photoPoints.length : 0, itemColspan: 1};
              })
            }
          })
          checkItems.forEach((item, index, list) => {
            item.deviceRowspan = index === 0 ? list.length : 0;
            item.deviceColspan = 1;
          })
          return checkItems;
        });
        this.data = data;
      })
    },

    // 单元格大小
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        return {
          rowspan: row.deviceRowspan,
          colspan: row.deviceColspan
        };
      } else if (columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
        return {
          rowspan: 1,
          colspan: 1
        };
      } else {
        return {
          rowspan: row.itemRowspan,
          colspan: row.itemColspan
        };
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {

  .task {
    margin: 0 auto;
    width: 714px;
  }

  .image-container {
    display: inline-flex;
    flex-direction: column;
    width: 226px;
    height: 480px;
    margin-bottom: 12px;

    .image {
      width: 100%;
      height: 100%;
      margin-top: 5px
    }
  }

  .image-container-margin {
    margin: 0 15px;
  }

  ::v-deep .el-descriptions-item__label {
    width: 12%;
  }

  ::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
    border: 1px solid #000;
  }

  ::v-deep .el-descriptions-item__label.is-bordered-label {
    color: #000;
    background-color: #e7e7e7;
  }

  ::v-deep .el-descriptions__body {
    color: #000;
  }

  ::v-deep .el-table--group, .el-table--border {
    border-left: 2px solid #000;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
  }

  ::v-deep .el-table--border .el-table__cell {
    border-right: 2px solid #000;
  }

  ::v-deep .el-table th.el-table__cell.is-leaf, ::v-deep .el-table td.el-table__cell {
    border-bottom: 2px solid #000;
  }

  ::v-deep .el-table thead, ::v-deep .el-table {
    color: #000;
  }
}
</style>
