<template>
  <div :class="style">
    <label :class="labelstyle" :style="shijifontColors">市&emsp;&emsp;县</label>
    <res-area-select
      :options=options
      @res-select="getXian"
      :issearch="false"
      :initresid="initres"
    >
    </res-area-select>
  </div>
  <div :class="style">
    <label :class="labelstyle" :style="xianfontColors">街道/乡镇</label>
    <res-area-select
      :options=xian_options
      @res-select="getjdao"
      :issearch="false"
      :initresid="xianginitres"
    >
    </res-area-select>
  </div>
  <div :class="style">
    <label :class="labelstyle" :style="shequfontColors">社&emsp;&emsp;区</label>
    <res-area-select
      :options=jdao_options
      @res-select="getshequ"
      :issearch="false"
      :initresid="jdaoinitres"
    >
    </res-area-select>
    </div>
</template>
<script>

import {HttpResetClass} from 'vue-client'
import ResAreaSelect from "./ResAreaSelect.vue";
export default {
  title: '区域选择分组',
  components: {
    ResAreaSelect
  },
  props: {
    style: {
      type: String,
      default: 'col-sm-3 form-group'
    },
    labelstyle: {
      type: String,
      default: 'font_normal_title'
    },
    mul: {
      type: Boolean,
      default: true
    }
    //初始值 默认选中值
    // initres: {
    //   type: Object,
    //   default: null,
    // }
  },
  data() {
    return {
      orgresid: [this.$login.f.orgid],
      options: [],
      initres: [],
      xianginitres: [],
      jdaoinitres: [],
      xian_options: [],
      jdao_options: [],
      shijifontColors:"color: #cd5c5c",//红色
      xianfontColors:"color: #cd5c5c",//红色
      shequfontColors:"color: #cd5c5c",//红色
      pubColors:"color: #0c2e4d",// 黑色
      pub2Colors:"color: #cd5c5c"// 红色
    }
  },
  ready() {
    this.getResList();
  },
  methods: {
    //获取区域地址
    async getResList() {
      let http = new HttpResetClass()
      let req = await http.load('POST', '/rs/logic/resAreaSelect', {
        userid: this.$login.f.id,
        orgid: this.$login.f.orgid
      }, {resolveMsg: null, rejectMsg: '获取区域地址失败'})
      this.options = []
      this.options = req.data
      //设置市区默认值
      // if (this.options.length > 0) {
      //   this.initres = []
      //   this.initres.push(this.options[0].value)
      // }
    },
    async getXian(value, lable, obj) {
      this.xian_options = []
      this.jdao_options = []
      let newFilArr = obj.filter((item, i) => {
        if (item.value == value) {
          return item
        }
      })
      if (newFilArr.length > 0) {
        this.xian_options = newFilArr[0].children
        // if (this.xian_options.length > 0) {
        //   this.xianginitres = []
        //   this.xianginitres.push(this.xian_options[0].value)
        // }
      }
      if (value !=null && value.length!=0){
        this.shijifontColors = this.pubColors
      }else {
        this.shijifontColors = this.pub2Colors
        this.xianfontColors = this.pub2Colors
        this.shequfontColors = this.pub2Colors
      }
      this.$dispatch('shiji-select', value, lable)
    },
    async getjdao(value, lable, obj) {
      this.jdao_options = []
      let newFilArr = obj.filter((item, i) => {
        if (item.value == value) {
          return item
        }
      })
      if (newFilArr.length > 0) {
        this.jdao_options = newFilArr[0].children
        // this.jdaoinitres = []
        // if (this.jdao_options.length > 0) {
        //   this.jdaoinitres.push(this.jdao_options[0].value)
        // }
      }
      if (value !=null && value.length!=0){
        this.xianfontColors = this.pubColors
      }else {
        this.xianfontColors = this.pub2Colors
        this.shequfontColors = this.pub2Colors
      }
      this.$dispatch('xian-select',value, lable)
    },
    async getshequ(value, lable, obj) {
      if (value !=null && value.length!=0){
        this.shequfontColors = this.pubColors
      }else {
        this.shequfontColors = this.pub2Colors
      }
      this.$dispatch('shequ-select',value, lable)
    }
  },
  watch: {}
}
</script>
