<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 id="chooseAreaModal-checkAll-btn" :checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>
        </div>
        <div :style="{ height: tableHeight+30+'px' }" style="overflow-y:scroll;">
          <a-tree
            v-model="checkedKeys"
            checkable
            id="chooseAreaModal-tree"
            :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 style="margin-right: 15px" @click="visible = false" :disabled="disabled" id="chooseAreaModal-close">取消</a-button>
        <a-button type="primary" @click="save" :disabled="disabled" id="chooseAreaModal-save">保存</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)
          }
        })
      }
    },
    // 选中  check
    onCheck (checkedKeys) {
      this.checkedKeys = checkedKeys
    },
    // 初始化
    pageInit () {
      const _this = this
      this.$nextTick(() => { // 页面渲染完成后的回调
        _this.setTableH()
      })
      this.getArea()
    },
    // 计算表格高度
    setTableH () {
      this.tableHeight = window.innerHeight - 325
    }
  }
}
</script>

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