<template>
  <div class="bigBox" ref="bigBox">
    <div class="container">
      <div class="header">
        <span class="title">{{ title }}</span>
        <span class="close" @click="closeDialog">
          <el-icon :size="22">
            <CircleClose />
          </el-icon>
        </span>
      </div>
      <div class="search" style="color: aliceblue;" ref="searchBox">
        <el-form ref="formRef" :model="listQuery"><el-form-item label=" 线路名称">
            <el-input v-model="listQuery.xlmc" placeholder="请输入线路名称" />
          </el-form-item>
          <el-form-item>
            <el-button class="serchBtn" @click="handleFilter"> 查询 </el-button>
            <el-button @click="reset()"> 重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="datalist">
        <div class="tabBox">
          <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn"
            :tableHeight="pageData.tableHeight" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
            :controlsWidth="pageData.controlsWidth" @chooseData="chooseData">
            <!-- 操作 -->
             <template #rwsj="{ row }">
              {{ row.rwkssj }}--{{ row.rwjssj }}
            </template>
            <template #controls="{ row }">
              <el-link type="primary" @click="drawAline( row)">查看线路</el-link>
            </template>
          </MyTable>
          <!-- <Pages @changeNo="handleSizeChange" @changeSize="handleCurrentChange" :tableHeight="pageData.tableHeight"
            :pageConfiger="{
              ...pageData.pageConfiger,
              total: pageData.total
            }"></Pages> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import emitter from "@/utils/eventBus.js";
import { ref, watch, onMounted, onUnmounted, getCurrentInstance, reactive } from "vue";
import { handleSelectListDp } from "@/api/dpApi/home.js";
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
import { tbQwXfAselectById } from '@/api/lz/backstage'
const { proxy } = getCurrentInstance();
const { D_BZ_XB } = proxy.$dict("D_BZ_XB");
const props = defineProps({
  data: {
    type: Object,
    default: () => { },
  },
});
const list = reactive({
  tableData: [],
  pageCurrent: 1,
  pageSize: 20,
});
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "null",
    loading: false,
  },
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  },
  controlsWidth: 200,
  tableColumn: [
    { label: "线路名称", prop: "xlmc" },
    { label: "民警", prop: "mjxm" },
    { label: "辅警", prop: "fjxm" },
    { label: "保安", prop: "baxm" },
    { label: "巡逻日期", prop: "rwsj",showSolt:true,width:"300px" },
  ]
});
const title = ref("巡逻路线");
const showBut = ref("")
const listQuery = ref({});
const loading = ref(false)
function _ggetSelectDeckList(staus, qwlx) {
  loading.value = true;
  let data = { ...listQuery.value, ...pageData.pageConfiger };
  handleSelectListDp(data).then((res) => {
    loading.value = false;
    pageData.tableData = res ? res : [];
    pageData.total = res.total
    //是否展示点位
  }).catch(() => { loading.value = false; });
}
watch(() => props.data, (val) => {
  showBut.value = val.type
  _ggetSelectDeckList()
}, { deep: true, immediate: true })
onMounted(() => {
  _ggetSelectDeckList()
  tabHeightFn()
});
onUnmounted(() => {
  emitter.off("showJLWindow");
});
const handleCurrentChange = (currentPage) => {
  pageData.pageConfige.pageCurrent = currentPage;
  _ggetSelectDeckList();
};
// pageSize 改变触发
const handleSizeChange = (currentSize) => {
  pageData.pageConfiger.pageSize = currentSize;
  _ggetSelectDeckList();
};
// 关闭弹窗
function closeDialog() {
  emitter.emit("deletePointArea", "route");
  emitter.emit("removeEara", 'point');
  emitter.emit("openZdXl", { show: false });
  list.tableData = [];
}
// 搜索
function handleFilter() {
  pageData.pageConfiger.pageCurrent = 1;
  _ggetSelectDeckList();
}
//重置
function reset() {
  listQuery.value = {
    ssbmdm: "", jzMc: ""
  }
  handleFilter()
}
const drawAline = (val) => {
  emitter.emit("deletePointArea", "bxd");
  emitter.emit("removeAll", "bxx");
  emitter.emit("openZdXl", { show: false });
  console.log(val);
  let bxd = []
  let coords = [{ coords: [val.bxx.zb], text: val.bxx.bxxMc }]
  let zbd = val.bxx.bxds.map(item => {
    return {
      jd: item.jd,
      wd: item.wd,
      bxdMc:item.bxdMc,
      icon: item.sfdk == '0' ? require("@/assets/point/zsdw.png") : require("@/assets/point/ydk.png")
    }
  })
  bxd = [...bxd, ...zbd]
  emitter.emit("echoLine", { coords, width: 4, flag: "bxx", type: 'dash', isclear: true, color: '#ff0000' });
  handlePoint(bxd, "", "bxd", 0.6, '#FF0000');
};
// 处理撒点
function handlePoint(arr, icon, flag, scale, fontColor) {
  let list = arr.filter((item) => {
    item.identification = flag;
    return item.jd && item.wd;
  });
  if (list.length > 0) emitter.emit("addPointArea", { coords: list, icon: icon, flag: flag, scale, fontColor,showTitle:true });
}
const bigBox = ref() // 表格高度计算
const searchBox = ref()
const tabHeightFn = () => {
  pageData.tableHeight = bigBox.value.offsetHeight - searchBox.value.offsetHeight - 320;
  window.onresize = function () {
    tabHeightFn();
  };
};
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.bigBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99;

  .container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 80%;
    height: 80vh;
    background: #052342;
    padding: 0 20px;

    .header {
      width: 100%;
      height: 60px;
      line-height: 60px;

      .title {
        float: left;
        font-size: 16px;
      }

      .close {
        float: right;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .datalist {
      height: 60vh;
    }

    .fenye {
      height: 60px;
    }
  }
}

.el-form {
  display: flex;
}

.serchBtn {
  margin-left: 20px;
}



::v-deep .el-table {
  background: #052342;
  --el-table-border-color: #25343f;
  color: #ffffff;
  --el-table-row-hover-bg-color: #063257 !important;
  // --el-table-row-hover-bg-color: #737373;
}

::v-deep .el-table__inner-wrapper {
  background: #052342;
}

::v-deep .el-table__inner-wrapper:hover {
  background: #052342 !important;
}

::v-deep .el-table th.el-table__cell {
  background: #052342 !important;
  color: #ffffff;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background: #005fbf37;
}

::v-deep .el-table td.el-table__cell {
  color: #ffffff !important;
  background: #052342;
}

::v-deep .el-form-item__label {
  color: #ffffff;
}

::v-deep .el-table__body tr.current-row>td.el-table__cell {
  background: #052342;
}
::v-deep .el-input__inner {
  color: #fff;
}
</style>
