<template>
  <div id="spaceTast">
    <div class="top">
      <div class="top-item">
        <span>建筑/楼层:</span>
        <el-select
          v-model="floorValue"
          @change="changeFloor"
          placeholder="请选择"
        >
          <el-option
            v-for="item in floorOptions"
            :key="item.id"
            :label="item.localName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="top-item">
        <span>功能分区:</span>
        <el-select
          v-model="parttionValue"
          @change="spaceJob"
          placeholder="请选择"
        >
          <el-option
            v-for="item in partitioneList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
      <el-input
        :style="{ width: '300px' }"
        v-model="serarchValue"
        placeholder="请输入内容"
      ></el-input>
      <div class="top-item">
        <span>任务状态:</span>
        <el-select
          v-model="jobStatusValue"
          @change="changeFloor"
          placeholder="请选择"
        >
          <el-option
            v-for="(item, key) in jobList"
            :key="key"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="clearjobStatus" plain
        >重置状态</el-button
      >
      <el-button type="primary" @click="CreatSpaceCheck" plain
        >新建空间结构核查任务</el-button
      >
      <el-button type="primary" @click="createTask" plain
        >新建“现场勘探任务”</el-button
      >
    </div>
    <div class="table">
      <el-table
        v-if="tableHeight"
        @selection-change="handleSelectionChange"
        :data="tableData"
        ref="multipleTable"
        style="width: 100%"
        :height="tableHeight"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="(item, key) in tableHead"
          :prop="item.prop"
          :label="item.lable"
          :width="item.width"
          :key="key"
        >
          <template slot-scope="scope">
            <div>
              <div v-if="item.prop == 'job'">
                {{ statusObj[scope.row[item.prop]] }}
              </div>
              <div v-else-if="item.prop == 'Arcode'">
                <el-button type="text" @click="ArcodeMsg(scope)"
                  >详情</el-button
                >
              </div>
              <div v-else>
                {{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <ul class="dlalog-top">
          <li>
            <span class="title">建筑：</span
            ><span>{{
              detailSpace.buildName ? detailSpace.buildName : ""
            }}</span>
          </li>
          <li>
            <span class="title">楼层：</span>
            <span>{{
              detailSpace.floorName ? detailSpace.floorName : ""
            }}</span>
          </li>
          <li>
            <span class="title">空间本地名称：</span>
            <span>{{
              detailSpace.localName ? detailSpace.localName : ""
            }}</span>
          </li>
          <li>
            <span class="title">本地编码：</span>
            <span>{{
              detailSpace.classCode ? detailSpace.classCode : ""
            }}</span>
          </li>
          <li>
            <span class="title">数字化交付编码：</span>
            <span>{{ detailSpace.id ? detailSpace.id : "" }}</span>
          </li>
        </ul>
        <div class="body">
          <img v-for="(obj, key) in urls" :key="key" :src="obj.url" alt="" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  building_floor,
  dict_types,
  space_job,
  set_job,
  quey_qrcode,
} from "@/api/spacetask.js";
import { space_zone } from "@/api/workScope.js";
import QRCode from "qrcode";
const statusObj = {
  all: "全部",
  "00": "新空间未核查",
  "01": "有结构核查任务",
  "02": "有结构问题",
  "03": "结构核查完毕",
  "04": "有现场勘测任务",
  "05": "已完成勘测任务",
};
const tableHead = [
  {
    lable: "建筑",
    prop: "buildName",
    width: "180",
  },
  {
    lable: "楼层",
    prop: "floorName",
    width: "180",
  },
  {
    lable: "空间本地名称",
    prop: "localName",
    width: "180",
  },
  {
    lable: "空间本地编码",
    prop: "classCode",
    width: "180",
  },
  {
    lable: "数字化交付编码编码",
    prop: "id",
    width: "380",
  },
  {
    lable: "空间状态",
    prop: "job",
    width: "180",
  },
  {
    lable: "空间二维码粘贴位置",
    prop: "Arcode",
    width: "180",
  },
];
export default {
  data() {
    return {
      statusObj,
      tableHead,
      serarchValue: "", //搜索内容
      floorOptions: [], //楼层
      partitioneList: [], //功能分区
      jobList: [], //任务状态
      floorValue: "",
      parttionValue: "",
      jobStatusValue: "",
      buildingId: "", //建筑id
      buildName: "", // 建筑名称
      currentFloorName: "",
      tableData: [],
      choiceSpace: [], //选中的空间
      tableHeight: 0, //table高度
      detailSpace: {}, //空间详情
      dialogVisible: false, // 弹窗显示
      urls: [], // 二维码路径
    };
  },
  created() {
    Promise.all([
      this.getBuildFloor(),
      this.spaceZone(),
      this.dictTypes(),
    ]).then((res) => {
      this.spaceJob();
    });
  },
  mounted() {
    const box = document.getElementById("spaceTast");
    this.tableHeight = box.offsetHeight - 60;
  },
  methods: {
    // 获取楼层
    getBuildFloor() {
      return new Promise((reslove, reject) => {
        building_floor({ target: "rtn" })
          .then((res) => {
            this.floorOptions = res.rtn[0].floor;
            this.buildingId = res.rtn[0].id;
            this.buildName = res.rtn[0].localName;
            reslove();
          })
          .catch(() => {
            reject();
          });
      });
    },
    //请求空间区域类型
    spaceZone() {
      return new Promise((reslove, reject) => {
        space_zone({})
          .then((res) => {
            res.rtn.forEach((item) => {
              this.partitioneList.push({
                name: item.name,
                id: item.code,
              });
            });
            reslove();
          })
          .catch(() => {
            reject();
          });
      });
    },
    // 获取任务状态
    dictTypes() {
      return new Promise((reslove, reject) => {
        dict_types({ target: "job" })
          .then((res) => {
            this.jobList = res.job;
            reslove();
          })
          .catch(() => {
            reject();
          });
      });
    },
    // 获取任务状态
    spaceJob() {
      const jobStatus =
        (this.jobStatusValue == "all") | (this.jobStatusValue == "")
          ? []
          : [this.jobStatusValue];
      const data = {
        buildingId: this.buildingId,
        floorId: this.floorValue,
        zoneType: this.parttionValue,
        jobStatus,
        target: "rtn",
      };
      space_job(data).then((res) => {
        this.tableData = res.rtn.map((obj) => {
          obj.buildName = this.buildName;
          // obj.floorName = this.currentFloorName;
          return obj;
        });
      });
    },
    // 改变楼层
    changeFloor(a, b) {
      this.spaceJob();
    },
    //重置工作状态
    clearjobStatus() {
      this.setStatus("00");
    },
    //新建空间结构核查任务
    CreatSpaceCheck() {
      this.setStatus("01");
    },
    //新建“现场勘探任务”
    createTask() {
      this.setStatus("04");
    },
    // table勾选回调
    handleSelectionChange(val) {
      this.choiceSpace = val;
    },
    // 设置工作状态
    setStatus(status) {
      if (this.choiceSpace.length) {
        //获取对应勾选id
        const spaceIdList = [];
        this.choiceSpace.forEach((obj) => {
          spaceIdList.push(obj.id);
        });
        const data = {
          spaceId: spaceIdList,
          buildingId: this.buildingId,
          floorId: this.floorValue,
          jobStatus: status,
          target: "action",
        };
        set_job(data).then(() => {
          // 设置完成后调用获取新的table
          this.spaceJob();
          this.toggleSelection();
        });
      } else {
        this.$message("勾选对应空间后方可设置!!!");
      }
    },
    //清空勾选
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    // 点击打开详情
    ArcodeMsg(obj) {
      this.detailSpace = obj.row;
      this.urls = [];
      const data = {
        objId: this.detailSpace.id,
        target: "rtn",
      };
      quey_qrcode(data).then((res) => {
        if (res.rtn && res.rtn.length) {
          res.rtn.forEach((a) => {
            QRCode.toDataURL(a.qr_code)
              .then((url) => {
                this.urls.push({
                  url,
                  qr_code: a.qr_code,
                });
              })
              .catch((err) => {
                console.error(err);
              });
          });
        }
        this.dialogVisible = true;
      });
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#spaceTast {
  height: 100%;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-around;
    .top-item {
      display: flex;
      align-items: center;
      span {
        margin-right: 12px;
      }
    }
  }
  .dlalog-top {
    li {
      width: 700px;
      display: flex;
      align-items: center;
      justify-content: start;
      .title {
        width: 220px;
      }
    }
  }
}
</style>