<template>
  <a-drawer
    title="选择区域"
    width="50%"
    :zIndex="100"
    :visible="visible"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    @close="visible = false">
    <div class="areaSetModal">
      <div :style="{ height: tableHeight+84.5+'px' }">
        <div>
          <a-checkbox :checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>
        </div>
        <div :style="{ height: tableHeight+30+'px' }" style="overflow-y:scroll;">
          <a-tree
            v-model="checkedKeys"
            checkable
            :auto-expand-parent="autoExpandParent"
            :tree-data="subregionData"
            :checkStrictly="true"
            :expanded-keys="parentArr"
            @check="onCheck"
            @expand="onExpand"
            :replaceFields="{children:'subareaAreaList', title:'name', key:'areaSn'}"
          />
        </div>
      </div>
      <div class="areaFooter">
        <a-button type="primary" @click="save" :disabled="disabled" id="areaSet-refresh">保存</a-button>
        <a-button style="margin-left: 5px" @click="visible = false" :disabled="disabled" id="areaSet-reset">取消</a-button>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { subareaQueryAll } from '@/api/subarea'
export default {
  mixins: [commonMixin],
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    chooseData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    showModal (newValue, oldValue) {
      this.visible = newValue
    },
    visible (newValue, oldValue) {
      if (!newValue) {
        this.checkedKeys = { checked: [], halfChecked: [] }
        this.checkAll = false
        this.$emit('close')
      }
    }
  },
  data () {
    return {
      autoExpandParent: true,
      checkAll: false, //  全选
      checkedKeys: {
        checked: [], halfChecked: []
      },
      subregionData: null,
      tableHeight: 0,
      visible: false,
      disabled: false,
      parentArr: []
    }
  },
  methods: {
    // 树  默认展开被选子级的父级
    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.parentArr = expandedKeys
      this.autoExpandParent = false
    },
    getArea () {
      subareaQueryAll().then(res => {
        if (res.status == 200) {
          res.data && res.data.map(item => {
            item.name = item.subareaName
            item.areaSn = item.subareaSn
            if (item.subareaAreaList) {
              item.subareaAreaList.map(cd => {
                cd.name = cd.subareaAreaName
                cd.areaSn = cd.subareaAreaSn + '_'
                const falg = this.chooseData.checked.length > 0 ? this.chooseData.checked.includes(cd.subareaAreaSn + '_') : false
                if (falg) {
                  this.parentArr.push(cd.subareaSn)
                }
              })
            }
          })
          this.subregionData = res.data
          this.checkedKeys = this.chooseData ? this.chooseData : []
        }
      })
    },

    save () {
      this.$emit('ok', this.checkedKeys)
    },
    // 全选
    onCheckAllChange (e) {
      this.checkAll = e.target.checked
      if (e.target.checked) {
        this.checkedKeys.checked = []
        this.checkedKeys.halfChecked = []
        this.getAllFun(this.subregionData)
      } else {
        this.checkedKeys.checked = []
        this.checkedKeys.halfChecked = []
      }
    },
    // 递归完成全选
    getAllFun (data) {
      if (data) {
        data.map((item, index) => {
          this.checkedKeys.checked.push(item.areaSn)
          if (item.subareaAreaList && item.subareaAreaList.length > 0) {
            this.getAllFun(item.subareaAreaList)
          }
        })
      }
    },
    onCheck (checkedKeys) {
      this.checkedKeys = checkedKeys
    },
    pageInit () {
      const _this = this
      this.$nextTick(() => { // 页面渲染完成后的回调
        _this.setTableH()
      })
      this.getArea()
    },
    setTableH () {
      this.tableHeight = window.innerHeight - 345
    }
  }
}
</script>

<style lang="less" scoped>
.areaSetModal {
  width: 100%;
  .areaFooter {
    text-align:center;
  }
}
</style>
