<template>
  <div class="region">
    <div class="region_left">
      <div>
        <span class="province">{{province}}</span>
        <span class="icon">
          <i class="el-icon-location"></i>切换
          <el-cascader ref="address" class="cascader-region" popper-class='cascader-region-addd'
                       @change="addressListbtn"  v-model="address" :options="addressList" :props="props" collapse-tags></el-cascader>
      </span>
      </div>
    </div>
  </div>
</template>
<script>
  import { location } from '@/api/macro/macro'
  import dataRegion from '@/assets/json/dataRegion'
  export default {
    name:'region',
    props:['province','dataQuery'],
    data(){
      return {
        props: {
          value: 'id',
          label: 'label',
          checkStrictly: true
        },
        addressList: [],
        address:'',
        provinceId:[],
        location:''
      }
    },
    watch: {
      province(newValue, oldValue){
        this.location = newValue;
      },
    },
    created(){
      this.dataRegion()
      this.location=this.province
    },
    methods:{
      addressListbtn() {
        let nodesObj = this.$refs.address.getCheckedNodes()[0];
        this.location=nodesObj.pathLabels[nodesObj.pathLabels.length-1];
        this.provinceId=nodesObj.path;
        let data={}
        data.province=this.location
        data.provinceId=this.provinceId
        data.provinces=nodesObj.pathLabels
        this.$parent.addressListbtn(data)
        localStorage.setItem('location', true)
      },
      //地区
      async dataRegion() {
        // await axios.post("https://files.jiansheku.com/file/json/common/dataRegion.json", {}, {
        //   headers: {
        //     'Content-Type': 'application/json'
        //   }
        // }).then(res => {
        //   if (res.data.code == 200) {
        //     console.log(res.data.data)
        //   }
        // })
        var str = [];
        for (let x = 0; x < 3; x++) {
          for (let i = 0; i < dataRegion.length; i++) {
            if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
              str.push({
                'id': dataRegion[i].id,
                "label": dataRegion[i].regionName,
                "short": dataRegion[i].short,
                "value": dataRegion[i].parentId,
                "children": []
              });
            }else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
              for (let j = 0; j < str.length; j++) {
                if (str[j].id == dataRegion[i].parentId) {
                  str[j].children.push({
                    'id': dataRegion[i].id,
                    "label": dataRegion[i].regionName,
                    "short": dataRegion[i].short,
                    "value": dataRegion[i].parentId,
                    "children": []
                  });
                }
              }
            }else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
              for (let j = 0; j < str.length; j++) {
                for (let k = 0; k < str[j].children.length; k++) {
                  if (str[j].children[k].id == dataRegion[i].parentId) {
                    str[j].children[k].children.push({
                      'id': dataRegion[i].id,
                      "label": dataRegion[i].regionName,
                      "short": dataRegion[i].short,
                      "value": dataRegion[i].parentId
                      // "children":[]
                    });
                  }
                }
              }
            }
          }
        }
        this.addressList = str;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .region{
    height: 48px;
    background: #F8FBFF;
    border-radius: 4px;
    margin-bottom: 12px;
    .region_left{
      background: url("~@/assets/images/economies/img_bg.png") no-repeat;
      background-size: 100%;
      width: 603px;
      height: 48px;
      padding-left: 16px;
      .province{
        font-size: 20px;
        cursor: pointer;
        font-weight: 700;
        color: #004F9C;
        margin-right: 12px;
        line-height: 48px;
        height: 48px;
        float: left;
      }
      .icon{
        width: 24px;
        color: #0081FF;
        font-size: 12px;
        display: inline-block;
        height: 48px;
        position: relative;
        i{
          margin-left: 4px;
          font-size: 16px;
          color:#0081FF;
          padding-top: 7px;
        }
      }
      .cascader-region {
        position: absolute;
        left: -50px;
        top: 8px;
        opacity: 0;
        line-height: 22px;
        width: 80px;
      }
    }
  }
</style>
