<template>
    <modulen>
        <template class="DataState" #title
            >门架数据上传状态
            <el-checkbox
                class="checkBox"
                v-model="checked1"
                label="异常筛选"
                size="large"
                @change="checkBoxState"
            />
            <span class="stateDetail" @click="goStateDetail"
                >状态明细&nbsp;&nbsp;<i class="el-icon-caret-right"></i
            ></span>
        </template>
        <div class="dayToll-md">
            <div class="daytoll-head">
                <div class="cell-a">
                    <span class="tops" @click="tops">顶部</span>
                </div>
                <div class="cell-b">门架</div>
                <div class="cell-c">状态</div>
            </div>
            <div class="listout" id="listout2">
                <vue-seamless-scroll :data="dataList">
                    <div
                        class="cell-list"
                        v-for="(item, index) in dataList"
                        :key="index"
                    >
                        <div class="cell-a">{{ index + 1 }}</div>

                        <template v-if="item.gateName.length > 12">
                            <div
                                class="cell-b"
                                :title="item.gateName"
                                style="
                                    font-size: 12px;
                                    padding: 0 0 0 12vw (12);
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                "
                            >
                                {{ item.gateName }}
                            </div>
                        </template>
                        <template v-else>
                            <div class="cell-b" :title="item.gateName">
                                {{ item.gateName }}
                            </div>
                        </template>
                        <!--  || item.provinceId == 'YN' -->
                        <div class="cell-c" v-if="item.status == '正常'">
                            <span
                                class="c-status"
                                style="background: #00ffa2"
                            ></span>
                            <span class="c-status-text">正常</span>
                        </div>
                        <div class="cell-c" v-else>
                            <span
                                class="c-status"
                                style="background: #ff4f4f"
                            ></span>
                            <span class="c-status-text">异常</span>
                        </div>
                    </div>
                </vue-seamless-scroll>
            </div>
        </div>
    </modulen>
</template>

<script >
import { formatThousand } from "@/utils/util";
import { Geteupdatastatus } from "@/api/chargeInfo.js";
import vueSeamlessScroll from "./slideList.vue";
import { generateKey } from "@/api/operation";
export default {
    components: {
        vueSeamlessScroll,
    },
    data() {
        return {
            query: {
                status: "",
                level: 0,
                dimension: "",
            },
            dataList: [],
            checked1: false,
            code: 0,
            numLength: null,
            loading: false,
        };
    },
    computed: {
        selectRoad() {
            return this.$store.state.road.selectRoadId;
        },
    },
    watch: {
        selectRoad(newVal) {
            const level = this.$store.state.road.selectLevel;
            const roadId = newVal ? newVal[level - 1] : "";
            this.query.level = level;
            this.query.dimension = roadId;
            this.getData();
        },
    },
    mounted() {
        this.getData();
        window.addEventListener("scroll", this.handleScroll, true);
    },

    beforeUnmount() {
        window.addEventListener("scroll", this.handleScroll, false);
    },

    methods: {
        formatThousand,
        async getData() {
            document.getElementById("listout2").scrollTop = 0;
            this.loading = true;
            const data = await Geteupdatastatus(this.query);
            this.dataList = data.msgContent;
            this.loading = false;
            //4360
            this.numLength = this.dataList.length * 33;
        },
        // 跳转
        async goStateDetail() {
            generateKey().then((res) => {
                // res.data
                if (res.data) {
                    window.open(
                        `http://183.64.175.153:6005/manage/report/gate/transferDetail.html?identityCode=046B48A9-B739-4396-8A03-CC9B2D4C7B61`
                    );
                }
            });
        },
        // 筛选
        checkBoxState(value) {
            this.dataList = [];
            if (value === false) {
                this.query.status = "";
            } else {
                this.query.status = "异常";
            }
            this.getData();
        },

        // 滚动条到底部，跳转到顶部
        handleScroll(e) {
            let scrollTop = document.getElementById("listout2").scrollTop;
            // // 没有点击异常筛选的时候到底部4200
            // if (this.checked1 === false) {
            //   console.log(123,this.numLength);
            //   if (scrollTop >= this.numLength) {
            //       // 回到顶部
            //       document.getElementById('listout2').scrollTop = 0
            //       // 回到顶部，数据重新渲染
            //       this.dataList = []
            //       this.getData()
            //   }
            // }
            // // 点击异常筛选的时候到底部1100
            // if (this.checked1 === true) {
            //   if (scrollTop >= this.numLength) {
            //     // 回到顶部
            //     document.getElementById('listout2').scrollTop = 0
            //     this.dataList = []
            //     // 回到顶部，数据重新渲染
            //     this.dataList = this.dataList.filter((item) => item.status == "异常")

            //   }
            // }
        },
        async tops() {
            if (this.checked1 === true) {
                this.dataList = [];
                this.query.status = "异常";
                this.getData();
            } else {
                this.dataList = [];
                this.query.status = "";
                this.getData();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.tops{
  display: inline-block;
  border-radius: 5px;
  height: 25px;
  width: 40px;
  line-height: 25px;
  color: #3d74ff;
  cursor: pointer;
}.DataState {
  position: relative;
}

.stateDetail {
  position: absolute;
  right: 20px;

  cursor: pointer;
}

.checkBox {
  position: absolute;
  right: 120px;
  bottom: 8px;
  cursor: pointer;
  font-weight: 800;
  color: #fff;
}

.dayToll-md {
  width: 100%;
  height: 100%;

  .daytoll-head {
    width: 100%;
    display: flex;
    color: #9aa7bf;
  }

  .listout {
    width: 100%;
    height: vh(273);
    overflow: auto;
  }

  .cell-list {
    width: 100%;
    display: flex;

    .cell-a {
      font-family: "Exo2";
      color: #9aa7bf;
      font-weight: bold;
    }

    .cell-b {
      color: #9aa7bf;
    }
  }

  .cell-list:nth-child(even) {
    background: rgba(73, 153, 255, 0.1);
    border: 1px solid rgba(73, 153, 255, 0.2);
  }

  .cell-a,
  .cell-b,
  .cell-c {
    height: vh(39);
    line-height: vh(39);
    padding: 0 12px;
  }

  .cell-a {
    width: 60px;
    text-align: right;
  }

  .cell-b {
    width: calc(100% - 245px);
  }

  .cell-c {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .c-status {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    margin-right: 5px;
  }

}
</style>