<template>
    <div class="layer-group">
        <modulen
            :loading="loading"
            :error="error"
            :info="bsMeta && bsMeta['utilities']"
        >
            <template #title>道路巡查车辆</template>
            <div class="SearchBox" v-if="vehicleLists.length">
                <select
                    v-model="Voiture"
                    class="voiture"
                    @change="selectVoiture"
                >
                    <!-- <option value="全部">全部</option> -->
                    <option value="巡查车">巡查车</option>
                    <!-- <option value="救援车">救援车</option> -->
                </select>
                <input
                    ref="seach_input"
                    v-model="Searchtext"
                    type="text"
                    class="Search"
                />
                <i @click="handeGetText" class="searchImg">
                    <img src="@/assets/images/Search.png" alt=""
                /></i>
            </div>
            <empty v-else />
            <div class="content">
                <div class="a">
                    <div
                        :class="[
                            selectedCameraId &&
                            [
                                item.children[0].value,
                                item.children[1]?.value,
                            ].includes(selectedCameraId)
                                ? 'plate_true'
                                : 'plate',
                        ]"
                        v-for="(item, index) in vehicleLists"
                        :key="index + 1"
                    >
                        <span class="state" v-if="item.status == 1">在线</span>
                        <span class="off-line" v-else>离线</span>
                        <span class="close" @click="close"></span>
                        <p>{{ item.name }}</p>
                        <span
                            v-if="item.children[0].status == 1"
                            class="left"
                            @click="selectVehicleCamera(item.children[0].value)"
                        >
                            {{
                                item.children[0]?.name.includes("布控球")
                                    ? "布控球"
                                    : "车载"
                            }}</span
                        >
                        <span v-else class="off-line-left">
                            {{
                                item.children[0]?.name.includes("布控球")
                                    ? "布控球"
                                    : "车载"
                            }}</span
                        >
                        <span
                            v-if="
                                item.children[1] && item.children[1].status == 1
                            "
                            class="right"
                            @click="
                                selectVehicleCamera(item.children[1]?.value)
                            "
                        >
                            {{
                                item.children[1]?.name.includes("布控球") &&
                                item.children[1]
                                    ? "布控球"
                                    : "车载"
                            }}</span
                        >
                        <!-- <span   v-else class="off-line-right">  {{item.children[1]?.name.includes('布控球')&&item.children[1]?'布控球':'车载'}}</span> -->
                        <span
                            v-else-if="
                                item.children[1] && item.children[1].status == 0
                            "
                            class="off-line-right"
                        >
                            {{
                                item.children[1] &&
                                item.children[1]?.name.includes("布控球")
                                    ? "布控球"
                                    : "车载"
                            }}</span
                        >
                    </div>
                </div>
            </div>
        </modulen>
    </div>
    <div class="quantity">
        <div class="on-line">
            <span>在线车辆</span>
            <span class="number" v-if="onLine == ''">{{ 0 }}</span>
            <span class="number" v-else>{{ onLine }}</span>
        </div>
        <div class="on-line">
            <span>离线车辆</span>
            <span class="number" v-if="onLine == ''">{{ 0 }}</span>
            <span class="number" v-else>{{ offLine }}</span>
        </div>
        <div class="sum">
            <span>全部车辆</span>
            <span class="number" v-if="Sum == ''">{{ 0 }}</span>
            <span class="number" v-else>{{ Sum }}</span>
        </div>
    </div>
    <div class="videoList">
        <el-dialog
            title=" "
            v-model="videoVisible"
            width="730px"
            :destroy-on-close="true"
        >
            <template #title></template>
            <div style="height: 20px"></div>
            <div>
                <div class="player" style="height: 510px">
                    <videoPlayer ref="videoplayer"></videoPlayer>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import GisMap from "@/components/GisMapRoadWatch/index.vue";
import { mapState } from "vuex";
import vehiclePng from "@/assets/images/cruiser.png";
import {
    getVideoCameraResourceCar,
    getVideoUrls,
} from "@/api/operationMonitor";
import { getVideoUrl } from "@/api/operation";
import videoPlayer from "../../../../videoSurveillance/newLayerContrl/components/videoPlayer.vue";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
export default {
    components: {
        GisMap,
        videoPlayer,
        vueSeamlessScroll,
    },
    computed: {
        selectRoad() {
            return this.$store.state.road.selectRoadId;
        },
        ...mapState({
            map: (state) => state.map.map,
            selectedCameraId: (state) => state.monitor.selectedCameraId,
        }),
    },
    watch: {
        map() {
            this.getLiveData();
        },
        selectRoad(newVal) {
            const selectProvince = this.$store.state.road.selectProvince;
            const level = this.$store.state.road.selectLevel; // 获取当前选择的值的下标
            const Id = newVal ? newVal[level - 1] : ""; //  下标-1
            this.query.level = level;
            // this.query.dimension = Id;
            this.query.dimension = selectProvince; // 只传选中的省份
            this.plateNumber = Id;
            this.getLiveData();
        },
    },
    data() {
        return {
            Voiture: "巡查车",
            lnglat: "",
            mapConfig: {},
            query: {
                level: "0",
                dimension: "",
            },
            elProps: {
                label: "name",
                value: "value",
                expandTrigger: "hover",
            },
            live_interval: null,
            isWindows: false,
            activeVehicle: null,
            DATA: "", //1111
            List: [],
            vehicleLists: [],
            eventData: [],
            marker: null,
            // Time:10000,
            // 视频
            plate: "", //车牌
            url: "",
            loading: false,
            videoVisible: false,
            onLine: "", //在线总数
            offLine: "", //离线
            Sum: "", //总数
            state: 1,
            Searchtext: "", //搜索框
            plateNumber: "CQ", //车牌第一位
            typeName: "",
            text: "CQ",
            closeState: true,
            region: [
                {
                    name: "渝",
                    id: 1,
                    type: "CQ",
                },
                {
                    name: "川",
                    id: 2,
                    type: "SC",
                },
                {
                    name: "贵",
                    id: 3,
                    type: "GZ",
                },
                {
                    name: "云",
                    id: 4,
                    type: "YN",
                },
                {
                    name: "皖",
                    id: 5,
                    type: "AH",
                },
            ],
        };
    },
    created() {},
    mounted() {
        this.getLiveData(2);
        this.live_interval = setInterval(() => {
            this.getLiveData(2);
            this.selectVehicleCamera(this.selectedCameraId);
            this.addDefaultMarker(this.lnglat);
        }, 30 * 1000);
    },

    beforeUnmount() {
        if (this.live_interval) {
            clearInterval(this.live_interval);
        }
    },
    methods: {
        async selectVehicleCamera(id) {
            let item = null;
            id &&
                this.vehicleLists.forEach((val) => {
                    if (val.children.length > 0) {
                        val.children.forEach((ele) => {
                            if (ele.value == id) {
                                item = ele;
                            }
                        });
                    }
                });
            let cameraId = id;
            if (item?.lable.includes("渝")) {
                // 重庆车辆 视频id取 gbIndexCode
                cameraId = item.gbIndexCode;
            }
            this.$store.dispatch("monitor/setSelectedCameraId", cameraId);
            if (this.map) {
                if (item) {
                    this.map.flyTo({
                        center: [item.longitude, item.latitude],
                        zoom: 10,
                    });
                    this.addDefaultMarker([item.longitude, item.latitude], id);
                } else {
                    this.addDefaultMarker(["", ""], "");
                }
            }
        },

        addDefaultMarker(lnglat, id) {
            // 异常数据直接返回
            if (!lnglat) {
                return;
            }
            this.lnglat = lnglat;
            const _this = this;
            if (!this.marker) {
                let el = document.createElement("div");
                el.id = "marker";
                el.style["background-image"] = `url(${vehiclePng})`;
                el.style["background-size"] = "contain";
                el.style["background-repeat"] = "no-repeat";
                el.style["background-position"] = "center";
                el.style.width = "60px";
                el.style.height = "60px";
                this.marker = new minemap.Marker(el, { offset: [-20, -40] })
                    .setLngLat(lnglat)
                    .addTo(this.map);
                el.onclick = function () {
                    const Id = _this.selectedCameraId;
                    // 点击车子的时候发送请求，传入对应id
                    _this.videoVisible = true;
                    getVideoUrl(Id).then((res) => {
                        _this.url = res.data;
                        _this.$refs.videoplayer.createPlayer(_this.url, Id);
                    });
                };
            } else {
                this.marker.setLngLat(lnglat);
            }
        },

        close() {
            this.map.flyTo({
                center: ["105.8239515869493", "29.262943891582296"],
                zoom: 4.9,
            });
            this.addDefaultMarker(["", ""], "");
            if (this.live_interval) {
                clearInterval(this.live_interval);
            }
        },
        // 删除this指向 ，用于进入页面就更新发送请求
        async getLiveData(type) {
            // this.vehicleLists = []
            const resTag = await getVideoCameraResourceCar(this.query);
            this.vehicleLists = resTag.data || [];

            this.$nextTick(() => {
                this.$refs.seach_input?.focus();
            });
            let name = this.region.filter((item) => {
                return item.type.includes(this.plateNumber);
            });
            this.typeName = name[0]?.name;
            if (this.Voiture == "巡查车") {
                let patrol = this.vehicleLists.filter((item) =>
                    item.children[0].name.includes("巡")
                );
                this.vehicleLists = patrol;
            }

            if (this.Voiture == "救援车") {
                let rescue = this.vehicleLists.filter((item) =>
                    item.children[0].name.includes("拖")
                );
                this.vehicleLists = rescue;
            }
            //   if (this.Voiture == "全部") {
            //     this.vehicleLists = resTag.data;
            //   }
            this.onLine = this.vehicleLists.filter(
                (item) => item.status == 1
            ).length;
            this.Sum = this.vehicleLists.length;
            this.offLine = this.Sum - this.onLine;
        },
        async handeGetText() {
            let text = this.Searchtext;
            if (this.Searchtext == "") {
                this.getLiveData();
                return;
            }
            const resTag = await getVideoCameraResourceCar(this.query);
            this.vehicleLists = resTag.data || [];
            let filterList = this.vehicleLists.filter((item) =>
                item.name.substring(1).includes(text)
            );
            this.vehicleLists = filterList;
        },
        async selectVoiture() {
            this.getLiveData();
        },
    },
};
</script>
<style lang="scss" scoped>
.panelBox {
  // position: relative;
  z-index: 999;
}
.road-video {
  position: relative;
  width: 100%;
  height: 220px;
  margin: 14px 0;
  border: 2px solid #00a1ff;
  & > img {
    width: 100%;
    height: 100%;
  }
  & > .cm-map {
    z-index: 10;
  }

  .road-select {
    width: 130px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 12;

    ::v-deep(input::placeholder) {
      color: #94c2e2;
      font-size: 14px;
    }
    ::v-deep(.el-input__inner) {
      color: #94c2e2;
      background: #1b406c;
      border: none;
      font-size: 14px;
    }
    ::v-deep(.el-select__popper.el-popper) {
      background: rgba(5, 15, 45, 0.7);
      color: white;
    }
  }
}
.road-video::before {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 10px;
  width: calc(100% - 20px);
  content: "";
  border-top: 2px solid #016886;
  border-bottom: 2px solid #016886;
  z-index: 0;
}
.road-video::after {
  position: absolute;
  top: 10px;
  right: -2px;
  left: -2px;
  height: calc(100% - 20px);
  content: "";
  border-right: 2px solid #016886;
  border-left: 2px solid #016886;
  z-index: 0;
}

::v-deep(.el-dialog__header) {
  padding: 0;
}
::v-deep(.el-dialog__body) {
  background-image: url("@/assets/images/expressway/popbg.png") !important;
  background-size: 100% 100% !important;
}
.quantity {
  width: 90%;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  margin-left: 17px;
  .on-line {
    width: 100px;
    height: 50px;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #7986a0;
    background-image: url("@/assets/images/expressway/popbg.png") !important;
    background-size: 100% 100%;
    padding-top: 2px;
  }
  .sum {
    width: 100px;
    height: 50px;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #7986a0;
    background-image: url("@/assets/images/expressway/popbg.png") !important;
    background-size: 100% 100%;
    padding-top: 2px;
  }
  .number {
    font-size: 18px;
    color: #fff;
  }
}
</style>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.content {
  display: flex !important;
  justify-content: space-evenly;
  flex-wrap: nowrap;
  width: 110%;
  height: 200px;
  overflow: auto;
  padding: 0;
}
.a {
  display: flex !important;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.plate {
  position: relative;
  width: 158px;
  height: 60px;
  background-color: #0a2745;
  border: 1px solid #203a55;
  border-radius: 5px;
  text-align: center;
  margin-top: 7px;
  padding: 3px;
  p {
    margin-bottom: 3px;
  }
  .left {
    display: inline-block;
    width: 50px;
    margin-right: 10px;
    color: #fff;
    background-color: #067ef9;
    border: 1px solid #133c6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .off-line-left {
    display: inline-block;
    width: 50px;
    margin-right: 10px;
    color: #7c9399;
    background-color: #0f3b6c;
    border: 1px solid #133c6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right {
    display: inline-block;
    width: 50px;
    color: #fff;
    background-color: #067ef9;
    border: 1px solid #133c6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
  .off-line-right {
    display: inline-block;
    width: 50px;
    color: #7c9399;
    background-color: #0f3b6c;
    border: 1px solid #133c6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .state {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    font-size: 12px;
    background-color: #19c06d;
  }
  .off-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    font-size: 12px;
    background-color: #5a7395;
  }
  .close {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 10px;
    background: url("@/assets/images/close.png") no-repeat;
    background-size: 100% 100%;
  }
}
.plate_true {
  position: relative;
  width: 158px;
  height: 60px;
  background-color: #0a2745;
  border: 1px solid #13b3ff;
  border-radius: 5px;
  text-align: center;
  margin-top: 7px;
  padding: 3px;

  p {
    margin-bottom: 3px;
  }
  .left {
    display: inline-block;
    width: 50px;
    margin-right: 10px;
    color: #fff;
    background-color: #067ef9;
    border: 1px solid #133c6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .off-line-left {
    display: inline-block;
    width: 50px;
    margin-right: 10px;
    color: #7c9399;
    background-color: #0f3b6c;
    border: 1px solid #133c6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .right {
    display: inline-block;
    width: 50px;
    color: #fff;
    background-color: #067ef9;
    border: 1px solid #133c6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .off-line-right {
    display: inline-block;
    width: 50px;
    color: #7c9399;
    background-color: #0f3b6c;
    border: 1px solid #133c6a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .state {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    font-size: 12px;
    background-color: #19c06d;
  }
  .off-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    font-size: 12px;
    background-color: #5a7395;
  }
  .close {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 10px;
    background: url("@/assets/images/close.png") no-repeat;
    background-size: 100% 100%;
  }
}
.titleText {
  margin-right: 130px;
}
.SearchBox {
  position: absolute;
  top: -30px;
  right: 25px;
  width: 150px;
  height: 20px;
  padding: 0;
  text-align: center;
  background-color: #13253b;
  z-index: 99;
  .voiture {
    position: absolute;
    left: -30px;
    width: 40px;
    display: inline-block;
    height: 18px;
    margin-right: 10px;
    border-right: 1px solid #275b80;
    color: #49c1fc;
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    background-color: #13253b;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none; //这三个就已经去掉了小箭头
    z-index: 999;
  }
  // .text{
  //   display: inline-block;
  //   width: 30px;
  //   height: 18px;
  //   margin-right: 10px;
  //   border-right: 1px solid #275b80;
  //   color: #49c1fc;
  //   font-size: 16px;
  //   line-height: 18px;
  //   background-color:#13253b ;
  //   cursor: pointer;
  //   appearance:none;
  //   -moz-appearance:none;
  //   -webkit-appearance:none;//这三个就已经去掉了小箭头
  // }
  .searchImg {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 35px;
    height: 20px;
    cursor: pointer;
  }
  img {
    display: inline-block;
  }
}
.Search {
  width: 130px;
  height: 20px;
  border: 0;
  padding-top: 0px;
  height: 20px;
  background-color: #13253b;
}
input[type="text"]:focus {
  outline: none;
  background-color: #13253b;
}
select:focus {
  outline: none;
  background-color: #13253b;
}
</style>
