<template>
    <div class="xianList-box">
    <el-container>
      <!-- 页头 -->
      <el-header>
        <el-page-header title="" @back="goBack" content="县设置"></el-page-header>
      </el-header>

      <!-- 页面主内容 -->
      <el-main :style="'height:' + fullHeight + 'px'"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%">
        <ul class="xianList-ul">

          <li class="xianList-li" v-for="(item,index) in this.redata" :key="index" :class = "active == index ? 'addclass' : '' ">
            <img src="../../assets/imageOne/22.png" alt class="xianList-li-img" />
            <div class="xianList-li-div">
              <div class="xianList-li-text" @click="dianji($event,index)">{{item.name}}</div>
            </div>
          </li>
        </ul>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
    name: 'xianList',
    data () {
        return {
            inputText: '',
            form: {
              newmeg: '',  //添加中input的双向绑定
              delivery: false,
              type: [],
            },
            formLabelWidth: '120px',
            current: '',
            active: -1,
            fullHeight: document.documentElement.clientHeight,
            redata: {},  //数据
            loading: true, //加载
        }
    },
     watch: {
        fullHeight (val) { //监控浏览器高度变化
            if (!this.timer) {
                this.fullHeight = val
                this.timer = true
                let that = this
                setTimeout(function () { //防止过度调用监测事件，导致卡顿
                    that.timer = false
                },400)
            }

        }
    },
     mounted () {
        this.get_boderHeight()
    },
    //判断vuex的初始值是否为空
    created () {
      let _this = this;


      //进入页面从后端获取到数据渲染
      let postaData = _this.$qs.parse({
            code: localStorage.getItem('shiAcode')
      })
      _this.$axios({
        method: 'post',
        url: 'bigservers/city',
        data: postaData,
        headers: {
          'Content-Type': "application/json"
        }
      }).then(res => {
        _this.redata = res.data
        _this.loading = false
        console.log(res.data)
      }).catch(error => {
        alert('失败')
      })
    },
    methods: {
       //动态获取浏览器高度
        get_boderHeight () {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.fullHeight = document.documentElement.clientHeight
                    that.fullHeight = window.fullHeight
                }) ()
            }
        },


        //点击返回系统设置页面
        goBack () {
            let _this = this;
            _this.$router.push('/Site');
            location.reload();   //强制刷新页面
        },

        //点击list跳出弹框
        dianji (e,index) {
            let _this = this;
            _this.current = index;
            if (e.target.className === 'xianList-li-text') {
                let el = e.currentTarget;
                let data = el.innerHTML
                _this.dialogVisible = true,
                _this.inputText = data
                localStorage.setItem('xianAname',data)
                _this.$router.push('/Site')
            }
        },
   }

}
</script>

<style lang="scss">
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/xianList.scss";


</style>
