<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="1200px"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <!-- <div>
      <el-form>
        <el-row>
          <el-col :span="7">
            <el-form-item label="巡检人" v-if="taskInfo.type == 'inspector'">
              {{ taskInfo.inspector }}
            </el-form-item>
            <el-form-item label="管线名称" v-if="taskInfo.type == 'pipe'">
              {{ taskInfo.pipeName }}
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="执行时间">
              {{ taskInfo.pushTime }}
            </el-form-item>
          </el-col>

          <el-col :span="7">
            <el-form-item label="任务进度">
              {{ taskInfo.finishPointNum }} / {{ taskInfo.totalPointNum }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div> -->

    <div class="d-top flex-b bb">
      <div v-if="title != '巡检员打卡记录'" class="item flex">
        <div class="l">管线名称</div>
        <div class="r">{{ taskInfo.pipeName }}</div>
      </div>

      <div v-else class="item flex">
        <div class="l">巡检员</div>
        <div class="r">{{ taskInfo.inspector }}</div>
      </div>

      <div class="item flex">
        <div class="l">执行时间</div>
        <div class="r">{{ taskInfo.pushTime }}</div>
      </div>
      <div class="item flex">
        <div class="l">执行进度</div>
        <div class="r">
          {{ taskInfo.finishPointNum }} / {{ taskInfo.totalPointNum }}
        </div>
      </div>
    </div>
    <div class="container flex-b">
      <div class="l before-none">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="打卡点" prop="pointTitle">
            <el-input
              v-model="queryParams.pointTitle"
              placeholder="请输入打卡点"
              clearable
              size="small"
              style="width: 250px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            > -->
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="pipeInspectList" height="380">
          <el-table-column
            label="打卡点"
            align="center"
            prop="pointTitle"
            width="150"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            v-if="title != '巡检员打卡记录'"
            label="巡线员"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0">-</span>
              <span v-if="scope.row.status >= 1">{{ scope.row.inspector }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-else
            label="属于管线"
            align="center"
            prop="pipeName"
            width="120"
            :show-overflow-tooltip="true"
          />

          <!--  <el-table-column
            label="打卡地点"
            align="center"
            prop="pointTitle"
            :show-overflow-tooltip="true"
          /> -->
          <el-table-column label="打卡状态" align="center" prop="status">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0" style="color: red"
                >未打卡</span
              >
              <span v-if="scope.row.status >= 1" style="color: green"
                >打卡</span
              >
            </template>
          </el-table-column>
          <el-table-column label="打卡图片" align="center" prop="status">
            <template slot-scope="scope">
              <!-- <MyImage
                v-if="scope.row.imgurl"
                :src="scope.row.imgurl.split(',')[0]"
                :preview-src-list="scope.row.imgurl.split(',')"
              /> -->
              <div class="tableImg">
                <MyTableImage
                  v-if="scope.row.imgurl"
                  :src="scope.row.imgurl.split(',')[0]"
                  :preview-src-list="scope.row.imgurl.split(',')"
                />
                <span v-else> -</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="打卡时间"
            align="center"
            prop="createTime"
            width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.createTime">{{
                parseTime(scope.row.createTime, "{h}:{i}:{s}")
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-document"
                v-if="scope.row.content"
                @click="handleDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleLoaction(scope.row)"
                >打卡位置</el-button
              >
              <el-button
                size="mini"
                type="text"
                v-if="scope.row.danger == 1"
                @click="handleHidden(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"
          :pageSizes="[queryParams.pageSize]"
          @pagination="getPipeInspectInfo"
        />
      </div>
      <div class="r">
        <div id="map" style="width: 100%; height: 100%px"></div>
      </div>
    </div>
    <!-- <el-row>
      <el-col :span="14" style="padding-right: 10px">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="68px"
        >


          <el-form-item label="打卡点" prop="pointTitle">
            <el-input
              v-model="queryParams.pointTitle"
              placeholder="请输入打卡点"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="pipeInspectList">
          <el-table-column
            label="巡线人"
            align="center"
            prop="inspector"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="管道名称"
            align="center"
            prop="pipeName"
            width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="打卡地点"
            align="center"
            prop="pointTitle"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="打卡状态" align="center" prop="status">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0" style="color: red"
                >未打卡</span
              >
              <span v-if="scope.row.status == 1" style="color: green"
                >打卡</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="打卡时间"
            align="center"
            prop="createTime"
            width="150"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.createTime">{{
                parseTime(scope.row.createTime, "{h}:{i}:{s}")
              }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="150"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-document"
                v-if="scope.row.content"
                @click="handleDetail(scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleLoaction(scope.row)"
                >打卡位置</el-button
              >
              <el-button
                size="mini"
                type="text"
                v-if="scope.row.danger == 1"
                @click="handleHidden(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="getPipeInspectInfo"
        />
      </el-col>

      <el-col :span="10">
        <div
          id="map"
          style="width: 100%; height: 600px; border: 1px solid"
        ></div>
      </el-col>
    </el-row> -->

    <!-- 巡检详情表格 -->
    <InspectTable ref="inspectTable" />

    <!-- 隐患信息 -->
    <el-dialog
      title="隐患信息"
      :visible.sync="dangerDetailOpen"
      width="1400px"
      append-to-body
      destroy-on-close
    >
      <!-- 隐患信息 -->
      <DangerDetailInfo ref="dangerDetail" />
    </el-dialog>
  </el-dialog>
</template>

<script>
import {
  selectTPipeTaskPointInspectList,
  selectPipeAndPointInspectInfo,
} from "@/api/pipetask/pipeinspect";
import { EditorMap } from "@/utils/mapClass/map";
import MyTableImage from "@/components/MyTableImage/index.vue";
import { mapGetters } from "vuex";
import InspectTable from "./InspectTable";
import DangerDetailInfo from "@/views/checktask/task/components/DangerDetailInfo";
import { listDanger } from "@/api/checktask/danger";
export default {
  name: "detail-info",
  props: {
    title: {
      type: String,
      default: "详情",
    },
  },
  components: {
    InspectTable,
    DangerDetailInfo,
    MyTableImage,
  },
  data() {
    return {
      open: false,
      total: 0,
      pipeInspectList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 7,
        taskId: null,
        inspector: null,
        pipeName: null,
        pointTitle: null,
        pipeId: null,
      },
      loading: false,
      gaoMap: null,
      dangerDetailOpen: false,
      pipeAndPointInfo: {},
      taskInfo: {},
    };
  },
  methods: {
    //初始化信息
    initInfo() {
      this.open = true;
      this.initMap();
      this.getPipeInspectInfo();
      this.getPipeAndPointInfo();
    },
    getPipeInspectInfo() {
      this.loading = true;
      selectTPipeTaskPointInspectList(this.queryParams).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.total = res.total;
          this.pipeInspectList = res.rows;
          /*if(this.pipeInspectList && this.pipeInspectList[0].longitude){
              this.addLocation(this.pipeInspectList[0].longitude,this.pipeInspectList[0].latitude,this.pipeInspectList[0].pointTitle)
            }*/
        }
      });
    },
    //初始化管道及打开点上图数据
    getPipeAndPointInfo() {
      selectPipeAndPointInspectInfo(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.pipeAndPointInfo = res.data;
          this.initPipeAndPoint();
        }
      });
    },
    //初始化地图
    initMap() {
      this.$nextTick(() => {
        const path = eval(this.systemSetting.map_center);
        this.gaoMap = new EditorMap(
          "map",
          {
            center: path,
            //mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758",
            zoom: 12.5,
          },
          this
        );
      });
    },
    initPipeAndPoint() {
      if (this.pipeAndPointInfo.pipeInfo) {
        if (Array.isArray(this.pipeAndPointInfo.pipeInfo)) {
          this.pipeAndPointInfo.pipeInfo.forEach((item) => {
            this.addPipe(item);
          });
        } else {
          this.addPipe(this.pipeAndPointInfo.pipeInfo);
        }
      }
      if (this.pipeAndPointInfo.pointInfo) {
        this.pipeAndPointInfo.pointInfo.forEach((item) => {
          if (item.status != 1) {
            this.addMarker(
              require("@/assets/firstimage/no-click-point.png"),
              item
            );
          } else {
            this.addMarker(
              require("@/assets/firstimage/click-point.png"),
              item
            );
          }
        });
      }
    },
    addPipe(pipeInfo) {
      if(pipeInfo.coordinates){
        let path = JSON.parse(pipeInfo.coordinates);
        let pipe = new AMap.Polyline({
          path: eval(path),
          strokeWeight: 4,
          strokeColor: "#1890FF",
        });
        this.gaoMap.map.add(pipe);
        this.gaoMap.map.setCenter(path[0]);
      }
    },
    addMarker(icon, data) {
      let marker = new AMap.Marker({
        map: this.gaoMap.map,
        anchor: "bottom-center",
        icon,
        position: [data.pointLongitude, data.pointLatitude],
        extData: data,
      });
      marker.on("mouseover", (e) => {
        const target = e.target;
        target.setLabel({
          content: target.getExtData().pointTitle,
          direction: "top",
        });
      });
      marker.on("mouseout", (e) => {
        const target = e.target;
        target.setLabel({ content: "" });
      });
      return marker;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getPipeInspectInfo();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleLoaction(row) {
      if (row.longitude && row.latitude) {
        this.addLocation(row.longitude, row.latitude, row.pointTitle);
      } else {
        this.$message.error("当前位置未打卡");
      }
    },
    //位置上图
    addLocation(longitude, latitude, pointTitle) {
      this.gaoMap.allDevice["pipeInspectMarket"]?.forEach((item) => {
        this.gaoMap.map.remove(item);
      });
      this.gaoMap.control = 2;
      this.gaoMap.addDevice({
        longitude: longitude,
        latitude: latitude,
        deviceName: pointTitle,
        iconType: "pipeInspectMarket",
      });
      this.gaoMap.map.panTo([longitude, latitude]);
    },
    handleDetail(row) {
      if (row.content) {
        this.$refs.inspectTable.open = true;
        this.$refs.inspectTable.jsondata = JSON.parse(row.content);
      } else {
        this.$message.error("未生成巡检单");
      }
    },
    //隐患详情
    // handleHidden(row) {
    //   this.dangerDetailOpen = true;
    //   this.$nextTick(() => {
    //     this.$refs.dangerDetail.queryParams.inspectId = row.id;
    //     this.$refs.dangerDetail.queryParams.type = 4;
    //     this.$refs.dangerDetail.getList();
    //   });
    // },
    handleHidden(row) {
      listDanger({pageNum: 1,pageSize: 99999,inspectId:row.id,type:4}).then((response) => {
        if(response.code != 200 || response.rows == null || response.rows.length == 0){
        this.$message.error("未查到隐患信息！");
        return;
      }
      this.dangerDetailOpen = true;
      this.$nextTick(() => {
        this.$refs.dangerDetail.getList(response);
    });
    })
      /* this.dangerDetailOpen = true;
       this.$nextTick(() => {
         this.$refs.dangerDetail.queryParams.inspectId = row.id;
         this.$refs.dangerDetail.getList();
       });*/
    },
  },

  computed: {
    ...mapGetters(["systemSetting"]),
  },
};
</script>
<style lang="scss">
.before-none {
  .el-table {
    &::before {
      display: none;
    }
  }
}
</style>
<style lang="scss" scoped>
.d-top {
  height: 56px;
  align-items: center;
  background: #f9f9f9;
  margin-top: 18px;
  margin-bottom: 29px;
  padding-left: 16px;

  .item {
    font-size: 14px;
    color: #3d3d3d;
    margin-right: 170px;
    align-items: center;
    .l {
      margin-right: 16px;
      font-weight: 800;
    }
  }
}
.container {
  height: 520px;
  .l {
    width: 650px;
    margin-right: 30px;
    border: 1px solid #eeeeee;
    padding: 19px 33px 27px 26px;
  }
  .r {
    flex: 1;
    height: 100%;
    #map {
      height: 100%;
    }
  }
}
.tableImg {
  width: 50px;
  height: 50px;
  // background: red;
}
</style>
