<!--
 * @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="enter"
                ><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="middle">
              <el-select
                v-model="searchData.type"
                placeholder="任务类型"
                size="mini"
              >
                <el-option
                  v-for="item in type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="right">
              <el-select
                v-model="searchData.state"
                placeholder="任务状态"
                size="mini"
              >
                <el-option
                  v-for="item in state"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="bottom-wrapper">
            <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 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>
        </div>
        <div class="page">
          <pagination
            style="width: 100%; padding: 0px !important"
            :small="true"
            :total="tableData.length"
            :page="page"
            :limit.sync="limit"
            @pagination="getList"
            layout="prev, pager, next, jumper"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { XjxcMap } from "@/utils/mapClass/xjxcmap";
import Null from "@/components/bigWindow/Null";
import moment from "moment";
import Pipe from "./Pipe.vue";

let arr = [
  {
    id: 1,
    name: "燃气检测",
    unt: 1,
    type: 2,
    state: 3,
    utl: 2,
    value: ["2022-4-1", "2022-4-12"],
    path: "[[114.210488,38.257287],[114.21087,38.257218],[114.210664,38.25583],[114.213991,38.255507],[114.213962,38.256362],[114.213962,38.254397],[114.213962,38.255553],[114.213991,38.25412],[114.212137,38.254189],[114.212137,38.254836],[114.210812,38.254767],[114.212107,38.254836],[114.212166,38.254212],[114.213874,38.25412],[114.213991,38.255553],[114.218261,38.255137],[114.219291,38.254952],[114.218585,38.254698],[114.219321,38.254952],[114.224355,38.254605],[114.224355,38.252432],[114.224385,38.254628],[114.22306,38.254698],[114.22462,38.255091],[114.228566,38.254628],[114.224532,38.255091],[114.224385,38.256986],[114.218938,38.257287],[114.224385,38.25701],[114.224296,38.258882]]",
  },
  {
    id: 2,
    name: "燃气泄漏检测",
    unt: 1,
    type: 2,
    state: 2,
    utl: 3,
    value: ["2022-4-1", "2022-4-12"],
    path: "[[114.183586,38.264945],[114.181374,38.264866],[114.181441,38.265655],[114.181374,38.264866],[114.177487,38.265471],[114.177554,38.265997],[114.176851,38.265997],[114.176851,38.26626],[114.176717,38.265708],[114.169353,38.267055],[114.169793,38.272073],[114.169353,38.267038],[114.169333,38.267038],[114.165557,38.267697]]",
  },
  {
    id: 3,
    name: "入户安检",
    unt: 2,
    type: 3,
    state: 1,
    utl: 2,
    value: ["2022-4-1", "2022-4-12"],
    path: "[[114.206628,38.25932],[114.206688,38.259038],[114.205715,38.258193],[114.206695,38.259009],[114.206493,38.256513],[114.206194,38.256466],[114.206013,38.254239],[114.204974,38.254364],[114.205972,38.254258],[114.205511,38.250257],[114.196482,38.250445],[114.205491,38.250257],[114.21296,38.24977],[114.205511,38.250257],[114.205089,38.246589],[114.20471,38.24654],[114.204289,38.243749],[114.204709,38.243733],[114.207324,38.243577],[114.204669,38.243718],[114.204528,38.242402],[114.204208,38.240535],[114.204549,38.242449],[114.204649,38.243689],[114.20509,38.246606]]",
  },
  {
    id: 4,
    name: "探测器报警",
    unt: 2,
    type: 1,
    state: 3,
    utl: 1,
    value: ["2022-4-1", "2022-4-12"],
  },
  {
    id: 5,
    name: "安装家用气体探测器",
    unt: 1,
    type: 3,
    state: 3,
    utl: 3,
    value: ["2022-4-1", "2022-4-12"],
  },
  {
    id: 6,
    name: "入户安检",
    unt: 1,
    type: 2,
    state: 3,
    utl: 3,
    value: ["2022-4-1", "2022-4-12"],
  },
  {
    id: 7,
    name: "探测器消警",
    unt: 1,
    type: 1,
    state: 2,
    utl: 2,
    value: ["2022-4-1", "2022-4-12"],
  },
  {
    id: 8,
    name: "燃气泄漏",
    unt: 1,
    type: 3,
    state: 2,
    utl: 3,
  },
  {
    id: 9,
    name: "家用探测器报警",
    unt: 1,
    type: 2,
    state: 3,
    utl: 2,
  },
  {
    id: 10,
    name: "气体泄漏",
    unt: 1,
    type: 2,
    state: 3,
    utl: 3,
  },
  {
    id: 11,
    name: "火灾报警",
    unt: 1,
    type: 2,
    state: 1,
    utl: 2,
  },
  {
    id: 12,
    name: "入户安检",
    unt: 1,
    type: 1,
    state: 3,
    utl: 3,
  },
  {
    id: 13,
    name: "入户安检",
    unt: 1,
    type: 3,
    state: 3,
    utl: 4,
  },
  {
    id: 14,
    name: "气体泄漏",
    unt: 1,
    type: 3,
    state: 1,
    utl: 2,
  },
  {
    id: 15,
    name: "爆炸",
    unt: 1,
    type: 2,
    state: 2,
    utl: 4,
  },
  {
    id: 16,
    name: "爆炸",
    unt: 1,
    type: 3,
    state: 3,
    utl: 1,
  },
  {
    id: 17,
    name: "有毒气体泄漏",
    unt: 1,
    type: 3,
    state: 1,
    utl: 3,
  },
  {
    id: 18,
    name: "火灾",
    unt: 1,
    type: 3,
    state: 4,
    utl: 3,
  },
  {
    id: 19,
    name: "报警",
    unt: 1,
    type: 1,
    state: 3,
    utl: 3,
  },
];
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: [],
      },
      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());
  },
  methods: {
    mapInit() {
      this.map = new XjxcMap("xjxcmap", {}, this);
    },
    reset() {
      this.searchData = {
        // 任务名称
        task: "",
        unt: "",
        type: "",
        state: "",
        value: [],
      };
      this.enter();
    },
    enter() {
      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.tableData = arr.filter((item) => {
          const a = item.name.indexOf(task) >= 0;
          const b = unt ? item.unt == unt : true;
          const c = type ? item.type == type : true;
          const d = state ? item.state == state : true;
          const e =
            value.length > 0
              ? Array.isArray(item.value) &&
                moment(value[0]).valueOf() <= moment(item.value[0]).valueOf()
              : true;
          const f =
            value.length > 0
              ? Array.isArray(item.value) &&
                moment(value[1]).valueOf() >= moment(item.value[1]).valueOf()
              : true;

          return a && b && c && d && e && f;
        });
        this.loading = false;
      }, 200);
    },

    getList(e) {
      console.log(e);
      this.loading = true;
      setTimeout(() => {
        this.page = e.page;
        this.loading = false;
      }, 200);
    },
    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>