<template>
  <div class="app-container">
    <el-button
      icon="el-icon-back"
      size="mini"
      style="margin-bottom: 10px"
      @click="$router.go(-1)"
    >
      返回
    </el-button>
    <div style="display: flex">
      <div style="width: 59%;margin-right: 10px">
        <div style="margin:6px 0px 14px;font-size: 20px;">安检记录</div>
        <el-table v-loading="loading" :data="inspectInfoList">
          <el-table-column label="安检人" align="center" prop="memberName"/>
          <el-table-column label="安检时间" align="center" prop="createTime" width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.createTime">{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="用户" align="center" prop="nickName"/>
          <el-table-column label="用户地址" align="center" prop="address"  width="150" :show-overflow-tooltip="true"/>
          <el-table-column label="是否安检" align="center" prop="status">
            <template slot-scope="scope">
              <span v-if="scope.row.status == '0'">未检测</span>
              <span v-if="scope.row.status == '1'">已检测</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-document"
                @click="handleInspectDetail(scope.row)"
              >详情</el-button>

              <el-button
                size="mini"
                type="text"
                icon="el-icon-location"
                @click="handleLocation(scope.row)"
              >位置</el-button>

              <!--<el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                v-if="17 == $store.state.user.userId"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                v-if="17 == $store.state.user.userId"
                @click="handleDelete(scope.row)"
              >删除</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getInspectInfoList"
        />
      </div>

      <!-- 位置 -->
      <div style="width: 40%;margin-left: 10px">
        <div id="map" style="width: 100%;height: 500px;border: 1px solid;margin-top: 45px"></div>
      </div>
    </div>

    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="isView" width="1000px" append-to-body destroy-on-close>
      <table class="inspect" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="8">唐山鸿海科技有限公司居民燃气用户入户检查服务告知单</td>
        </tr>
        <tr>
          <td colspan="3">用户地址</td>
          <td style="width: 30%">{{inspectContent.userAddress}}</td>
          <td style="width: 8%">用户名</td>
          <td style="width: 12%">{{inspectContent.userName}}</td>
          <td style="width: 8%">气表号</td>
          <td style="width: 22%">{{inspectContent.gasNum}}</td>
        </tr>
        <tr>
           <td colspan="4">巡检员对您家中燃气设施进行全面检测。请您配合!</td>
           <td colspan="4">
             <span style="margin-right: 15px"><input type="checkbox" v-model="inspectContent.test" disabled/>已检测</span>
             <span><input type="checkbox" v-model="inspectContent.noTest" disabled/>未检测</span>
           </td>
         </tr>
         <tr>
            <td>部位</td>
            <td colspan="2">代码</td>
            <td colspan="5">检查发现的问题</td>
         </tr>
         <tr>
            <td rowspan="3">燃气表</td>
            <td></td>
            <td>1</td>
            <td colspan="4">燃气表外观损坏或漏气</td>
            <td><input type="checkbox" v-model="inspectContent.one" disabled/></td>
         </tr>

         <tr>
            <td></td>
            <td>2</td>
            <td colspan="4">燃气表表箱及锁具损坏</td>
            <td><input type="checkbox" v-model="inspectContent.two" disabled/></td>
         </tr>
         <tr>
           <td></td>
           <td>3</td>
           <td colspan="4">燃气表为反表</td>
           <td><input type="checkbox" v-model="inspectContent.three" disabled/></td>
         </tr>

        <tr>
          <td rowspan="6">管道阀门</td>
          <td>*</td>
          <td>4</td>
          <td colspan="4">户内燃气管道及阀门等燃气设施被包封在密闭空间内</td>
          <td><input type="checkbox" v-model="inspectContent.four" disabled/></td>
        </tr>

        <tr>
          <td></td>
          <td>5</td>
          <td colspan="4">管道管卡缺损、管道松动。(户内、外架空管、表前表后管)</td>
          <td><input type="checkbox" v-model="inspectContent.five" disabled/></td>
        </tr>

        <tr>
          <td></td>
          <td>6</td>
          <td colspan="4">管道严重锈蚀。(户外架空管、户内、表前表后管)</td>
          <td><input type="checkbox" v-model="inspectContent.six" disabled/></td>
        </tr>

        <tr>
          <td></td>
          <td>7</td>
          <td colspan="4">户外架空管是否有漏气</td>
          <td><input type="checkbox" v-model="inspectContent.seven" disabled/></td>
        </tr>

        <tr>
          <td>*</td>
          <td>8</td>
          <td colspan="4">搭接电线、作为电气接地线或悬挂重物</td>
          <td><input type="checkbox" v-model="inspectContent.eight" disabled/></td>
        </tr>

        <tr>
          <td></td>
          <td>9</td>
          <td colspan="4">表前、表后阀门启闭不灵活或漏气</td>
          <td><input type="checkbox" v-model="inspectContent.nine" disabled/></td>
        </tr>

        <tr>
          <td>灶前自闭</td>
          <td>*</td>
          <td>10</td>
          <td colspan="4">自闭阀不能正常工作或漏气</td>
          <td><input type="checkbox" v-model="inspectContent.ten" disabled/></td>
        </tr>

        <tr>
          <td rowspan="4">燃气灶具</td>
          <td>*</td>
          <td>11</td>
          <td colspan="4">燃气灶具波纹管连接不牢固或漏气</td>
          <td><input type="checkbox" v-model="inspectContent.eleven" disabled/></td>
        </tr>

        <tr>
          <td>*</td>
          <td>12</td>
          <td colspan="4">燃气灶具未使用波纹管连接、穿墙且长度超过2米</td>
          <td><input type="checkbox" v-model="inspectContent.twelve" disabled/></td>
        </tr>

        <tr>
          <td>*</td>
          <td>13</td>
          <td colspan="4">燃气灶具无熄火保护装置</td>
          <td><input type="checkbox" v-model="inspectContent.thirteen" disabled/></td>
        </tr>

        <tr>
          <td>*</td>
          <td>14</td>
          <td colspan="4">燃气灶具超过使用年限或漏气</td>
          <td><input type="checkbox" v-model="inspectContent.fourteen" disabled/></td>
        </tr>

        <tr>
          <td rowspan="3">燃气灶具</td>
          <td>*</td>
          <td>15</td>
          <td colspan="4">燃气壁挂炉安装在浴室内</td>
          <td><input type="checkbox" v-model="inspectContent.fifteen" disabled/></td>
        </tr>

        <tr>
          <td></td>
          <td>16</td>
          <td colspan="4">壁挂炉前燃气阀门启闭不灵活或漏气</td>
          <td><input type="checkbox" v-model="inspectContent.sixteen" disabled/></td>
        </tr>

        <tr>
          <td></td>
          <td>17</td>
          <td colspan="4">燃气壁挂炉波纹管连接不牢固或漏气</td>
          <td><input type="checkbox" v-model="inspectContent.seventeen" disabled/></td>
        </tr>

        <tr>
          <td rowspan="5"></td>
          <td>*</td>
          <td>18</td>
          <td colspan="4">厨房或安装燃气壁挂炉的房间住人</td>
          <td><input type="checkbox" v-model="inspectContent.eighteen" disabled/></td>
        </tr>

        <tr>
          <td>*</td>
          <td>19</td>
          <td colspan="4">存在第二气源(如液化气罐等)</td>
          <td><input type="checkbox" v-model="inspectContent.nineteen" disabled/></td>
        </tr>

        <tr>
          <td></td>
          <td>20</td>
          <td colspan="4">存在非正常用气现象(私改、偸气)</td>
          <td><input type="checkbox" v-model="inspectContent.twenty" disabled/></td>
        </tr>

        <tr>
          <td>*</td>
          <td>21</td>
          <td colspan="4">燃煤炉具与户内燃气管道、燃气壁挂炉或天然气灶距离过近。</td>
          <td><input type="checkbox" v-model="inspectContent.twentyone" disabled/></td>
        </tr>

        <tr>
          <td></td>
          <td>22</td>
          <td colspan="4">户内燃气泄漏</td>
          <td><input type="checkbox" v-model="inspectContent.twentytwo" disabled/></td>
        </tr>

        <tr>
          <td colspan="8" style="text-align: left">
            特殊群体:<input type="checkbox" v-model="inspectContent.renter" disabled/>租房户
            <input type="checkbox" v-model="inspectContent.old" disabled/>独居老人
            <input type="checkbox" v-model="inspectContent.moveDifficult" disabled/>行动受限
            <input type="checkbox" v-model="inspectContent.other" disabled/>其他       备注:{{inspectContent.remark}}</td>
        </tr>

        <tr>
          <td colspan="8" style="text-align: left">
            <div>
              尊敬的用户:上述<√>内容为您家中存在的用气问题及相应的整改措施,<*>为需要用户自行整改部分,
              请您仔细阅读并确认后,积极配合整改,如因未整改引起的一切后果由用户自行承担。
            </div>
            <div>
              温馨提示:不用气时请您及时关闭灶前阀门,并经常检查和保护家中燃气设施,避免燃气事故的发生。
            </div>
            <div>
              <div style="display: flex;margin-top: 10px">
                <div style="width: 50%">
                  用户确认签字:{{inspectContent.userSign}}
                  <!--<el-image :src="inspectContent.userSign" :z-index="9999" :preview-src-list="[inspectContent.userSign]" style="height: 30px;width: 180px"/>-->
                </div>
                <div>
                  巡检员签字:{{inspectContent.inspectSign}}
                  <!--<el-image :src="inspectContent.inspectSign" :z-index="9999" :preview-src-list="[inspectContent.inspectSign]" style="height: 30px;width: 180px"/>-->
                </div>
              </div>
              <div style="margin-left: 50%"> 检查日期: {{inspectContent.inspectDate}}</div>
            </div>
          </td>
        </tr>

      </table>

    </el-dialog>

  </div>
</template>

<script>
  import { listInspect }from "@/api/inspectionWork/inspect";
  import { EditorMap } from "@/utils/mapClass/map";
  import { mapGetters } from "vuex";
  export default {
    name: "task-inspect-detail",
    props:{
      taskId:{
        type: Number
      }
    },
    data(){
      return{
        loading: false,
        inspectInfoList: [],
        queryParams:{
          pageNum: 1,
          pageSize: 10,
          taskId: null
        },
        total: 0,
        gaoMap: null,
        isView: false,
        inspectContent:{
          userAddress: "",
          userName: "",
          gasNum: "",
          noTest: false,
          test: false,
          one: false,
          two: false,
          three: false,
          four: false,
          five: false,
          six: false,
          seven: false,
          eight: false,
          nine: false,
          ten: false,
          eleven: false,
          twelve: false,
          thirteen: false,
          fourteen: false,
          fifteen: false,
          sixteen:false,
          seventeen: false,
          eighteen: false,
          nineteen: false,
          twenty:false,
          twentyone: false,
          twentytwo: false,
          renter: false,
          old: false,
          moveDifficult: false,
          other: false,
          remark: "",
          userSign: "",
          inspectSign: "",
          inspectDate: ""
        }
      }
    },
    mounted(){
      this.initMap();
      this.queryParams.taskId = this.$route.query.taskId;
      this.getInspectInfoList();

    },
    methods:{
      //安检记录
      getInspectInfoList(){
        listInspect(this.queryParams).then(res =>{
          if(res.code == 200){
            this.total = res.total;
            this.inspectInfoList = res.rows;
            if(this.inspectInfoList.length >0){
              this.addLocation({longitude: this.inspectInfoList[0].longitude, latitude: this.inspectInfoList[0].latitude,nickName:this.inspectInfoList[0].nickName,iconType:"taskInspect"})
            }
          }
        })
      },
      //地图初始化
      initMap(){
        const path = eval(this.systemSetting.map_center);
        this.gaoMap = new EditorMap(
          "map",
          {
            center: path,
            zoom: 12,
          },
          this
        );
      },
      //位置上图
      addLocation(data){
        this.gaoMap.allDevice["taskInspect"]?.forEach((item) =>{
          this.gaoMap.map.remove(item);
        })
        this.gaoMap.control= 2;
        this.gaoMap.addDevice(data,null);
        this.gaoMap.map.panTo([data.longitude, data.latitude]);
      },
      handleLocation(row){
        this.addLocation({longitude: row.longitude, latitude: row.latitude,nickName:row.nickName,iconType:"taskInspect"})
      },
      handleInspectDetail(row){
        if(row.inspectContent){
          this.inspectContent = JSON.parse(row.inspectContent);
          this.isView = true;
        }else{
          this.$message.error("未生成检查单!");
        }
      }
    },
    computed: {
      ...mapGetters(["systemSetting"])
    },
  }
</script>

<style scoped lang="scss">
  .inspect{
    width: 100%;
    td{
      //width: 16%;
      text-align: center;
    }
  }

</style>