<!--
 * @Author: your name
 * @Date: 2022-04-13 10:27:33
 * @LastEditTime: 2022-04-14 17:59:39
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Bottom.vue
-->
<template>
  <div class="map-bottom-wrapper">
    <div id="xjxcmap" class="map"></div>
    <div class="left-box all-flex-h">
      <div class="top">
        <div class="title">巡检任务查看</div>
        <div class="wrapper">
          <div class="top-wrapper flex">
            <div class="input-wrapper">
              <el-input
                v-model="searchData.task"
                placeholder="点击输入任务名称"
                suffix-icon="el-icon-search"
                size="mini"
              >
              </el-input>
            </div>
            <div class="enter">
              <el-button size="mini" @click="getList"
                ><span class="text">确认</span></el-button
              >
            </div>
            <div class="reset">
              <el-button size="mini" @click="reset">
                <span class="text">重置</span>
                <i class="el-icon-refresh el-icon--right"></i>
              </el-button>
            </div>
          </div>

<!--          <div class="middle-wrapper flex">
            <div class="left">
              <el-select
                v-model="searchData.unt"
                placeholder="执行单位"
                size="mini"
              >
                <el-option
                  size="mini"
                  v-for="item in unt"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="right">
              <el-date-picker
                style="width: 100%"
                v-model="searchData.value"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
                size="mini"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </div>-->

        </div>
      </div>

      <div class="bottom all-flex-h">
        <div ref="table" class="table">
<!--          <el-table
            v-loading="loading"
            :data="
              tableData.filter((item, index) => {
                return index >= (page - 1) * limit && index < page * limit;
              })
            "
            style="width: 100%"
            :height="tableScrollH"
            ref="t"
            class="t"
          >
            <el-table-column fixed prop="name" label="任务名称" width="90">
              <template v-slot="scope">
                <div :title="scope.row.name" class="zzz">
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="unt" label="执行单位" width="90">
              <template v-slot="scope">
                <div :title="scope.row.unt" class="zzz">
                  {{ unt[scope.row.unt - 1].label }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="任务类型" width="90">
              <template v-slot="scope">
                <div :title="scope.row.type" class="zzz">
                  {{ type[scope.row.type - 1].label }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="任务状态" width="90">
              <template v-slot="scope">
                <div :title="scope.row.state" class="zzz">
                  {{ state[scope.row.state - 1].label }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="handle" label="操作" width="90">
              <template v-slot="scope">
                <el-button @click="mapDo(scope.row)" type="text"
                  ><span :class="{ target: target == scope.row.id }"
                    >巡检信息</span
                  ></el-button
                >
              </template>
            </el-table-column>
          </el-table>-->

          <el-table v-loading="loading" :data="infoList">
            <el-table-column label="任务名称" align="center" prop="taskName" />
            <el-table-column label="巡线时间" align="center" prop="linePatrolTime">
              <template slot-scope="scope">
                <span>{{ scope.row.linePatrolTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="巡线人员" align="center" prop="linePatrolPerson">
            </el-table-column>
            <el-table-column label="单位名称" align="center" prop="beyondEnterpriseName"/>
            <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-map-location"
                  @click="getTravel(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="getList"
          />

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XjxcMap } from "@/utils/mapClass/xjxcmap";
import Null from "@/components/bigWindow/Null";
import Pipe from "./Pipe.vue";
import { listPatrol } from "@/api/inspectionWork/linePatrol";
import {listAccident} from "@/api/inspectionWork/inspectionAccident";
import {getLastLocation} from "@/api/operationMonitor/vehicleInfo";
import {getVehicleLocations} from "@/api/operationMonitor/vehicleLocationInfo";
import {
  getPipe,
  getTyx,
  getFm,
} from "@/api/bigWindow/getDevice";
import Device from "@/components/bigWindow/Device.vue";


let arr = [
];
export default {
  data() {
    return {
      map: null,
      loading: false,
      // 点击巡检信息的选中状态
      target: null,
      // 任务类型选项
      unt: [
        { value: 1, label: "中燃翔科技" },
        { value: 2, label: "中诚燃气" },
      ],
      type: [
        { value: 1, label: "入户安检" },
        { value: 2, label: "巡检" },
        { value: 3, label: "其他" },
      ],
      state: [
        { value: 1, label: "派发中" },
        { value: 2, label: "已接单" },
        { value: 3, label: "已反馈" },
        { value: 4, label: "已归档" },
      ],
      searchData: {
        // 任务名称
        task: "",
        unt: "",
        type: "",
        state: "",
        value: [],
      },
      infoList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskName:"",
        beyondEnterpriseId:""
      },
      tableScrollH: 100,
      // 表格数据
      tableData: arr,
      page: 1,
      limit: 10,
    };
  },
  mounted() {
    this.mapInit();
    /*this.$nextTick(() => {
      const dom = document.getElementsByClassName("t")[0];
      dom.style.height = this.$refs.table.getBoundingClientRect().height + "px";
    });
    console.log(moment("2022-11-29").valueOf());*/
    this.getList();
  },
  methods: {
    mapInit() {
      this.map = new XjxcMap("xjxcmap", {center: [114.684979,38.038292]}, this);
      //调压箱
      this.labelsLayerMarksTysGoMap(getTyx, Device, true);
      //阀门井
      this.labelsLayerMarksFmjGoMap(getFm, Device, true);
    },
    labelsLayerMarksTysGoMap(httpFunc, component, show) {
      return httpFunc().then((res) => {
        const mapData = res.data;
      console.log("调压箱", mapData);
      this.map.labelsLayerMarksTysGoMap(mapData, component, show);
    });
    },

  labelsLayerMarksFmjGoMap(httpFunc, component, show) {
    return httpFunc().then((res) => {
      const mapData = res.data;
    console.log("阀门井", mapData);

    this.map.labelsLayerMarksFmjGoMap(mapData, component, show);
  });
  },


    reset() {
      this.searchData = {
        // 任务名称
        task: "",
        unt: "",
        type: "",
        state: "",
        value: [],
      };
      this.getList();
    },
    getList() {
      this.loading = true;
      this.map.infowindowClose();
      this.target = null;
      this.map.remove();

      setTimeout(() => {
        this.page = 1;
        const { task, unt, type, state, value } = this.searchData;
        this.queryParams.taskName = task;
        this.queryParams.beyondEnterpriseId = unt;

        listPatrol(this.queryParams).then(response => {
          this.infoList = response.rows;
          console.log(this.infoList)
          this.total = response.total;
          this.loading = false;
        });
      }, 200);
    },

    /**获取车辆轨迹操作*/
    getTravel(row){
      if (row.coordinates) {
        try {
          const path = JSON.parse(row.coordinates);

          // 清除之前的轨迹
          this.map.remove();

          const polylineData = {
            path: JSON.stringify(path),
            iconType: 0, // 与 XjxcMap 中的 iconType3 对应
            pipePressure: 4,
            strokeWeight: 4,
            title: row.taskName || "巡检轨迹"
          };

          // 添加折线到地图（null 表示不需要组件）
          this.map.addPipeLine(polylineData, null);

          // 调整地图视野
          const middleIndex = Math.floor(path.length / 2);
          this.map.map.panTo(path[middleIndex]);

        } catch (error) {
          console.error('轨迹数据解析失败:', error);
          this.msgError("轨迹数据格式错误");
        }
      } else {
        this.msgError("暂无轨迹数据");
      }

    },

    mapDo(data) {
      // 暂无信息
      if (!Array.isArray(eval(data.path))) {
        this.msgError("暂无巡检信息");
        return;
      }
      this.target = data.id;
      this.map.remove();
      this.map.create(data, Null, Pipe);
    },
  },
};
</script>

<style lang="scss" scoped>
.map-bottom-wrapper {
  height: 100%;
  position: relative;

  & > .map {
    height: 100%;
  }
  & > .left-box {
    width: 497px;
    position: absolute;
    top: 0;
    bottom: 0;
    > .top {
      width: 100%;
      // height: 143px;
      padding-bottom: 10px;
      margin-bottom: 9px;
      border-radius: 3px;
      box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
      background: #fff;
      .title {
        padding: 8px 0 4px 15px;
        border-bottom: 1px solid rgba(231, 231, 231, 1);
        font-size: 21px;
        font-weight: 400;
      }
      .wrapper {
        padding: 6px 12px 0px 12px;
        .top-wrapper {
          margin-bottom: 6px;
          div {
            &.input-wrapper {
              width: 337px;
              margin-right: 3px;
            }
            &.enter,
            &.reset {
              // flex:1;
              span.text {
                font-size: 12px;
                color: #333333;
              }
            }
          }
        }
        .middle-wrapper {
          width: 100%;
          margin-bottom: 6px;
          > div {
            //width: 150px;
            // background: red;
          }
        }
      }
    }
    > .bottom {
      flex: 1;
      border-radius: 3px;
      box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
      background: #fff;
      box-sizing: border-box;
      padding: 12px 20px;
      padding-bottom: 0;
      justify-content: space-between;
      .table {
        flex: 1;
        //background-color: red;
        .target {
          color: #ffc337;
          font-weight: 600;
        }
      }
      .page {
        // height: 100px;
        width: 100%;
      }
    }
  }
}
</style>
