<template>
  <Modal v-model="checkModal" title="选择区域" width="700" :scrollable="true" @on-cancel="cancel">
    <div>
      <row>
        <Col span="11">
          <div>
            <Input placeholder="请输入关键字搜索..." :id="areaTreeSearch" :name="areaTreeSearch"></Input>
            <card style="height: 450px;overflow-y: scroll;margin-top: 5px">
                <ul :id="areaTreeId" class="ztree"></ul>
            </card>
          </div>
        </Col>
        <Col span="2">
          <div style="margin-top: 180px;margin-left: 15px">
            <Button style="width: 23px" size="small" disabled>
              <Icon type="ios-arrow-forward" size="18" style="margin-left: -5px;color: #808695"/>
            </Button>
            <br>
            <Button style="width: 23px;margin-top: 18px" size="small" disabled>
              <Icon type="ios-arrow-back" size="18" style="margin-left: -6px;color: #808695"/>
            </Button>
          </div>
        </Col>
        <Col span="11">
          <div style="width: 90%;margin-top: 11px;margin-left: 10px">
            <div style="float: left;width: 50%;text-align: left">
              已选({{columns.length}})
            </div>
            <div style="float: right;width: 50%;text-align: right">
              <a @click="clear">清空</a>
            </div>
            <br>
          </div>
          <card style="height: 450px;;overflow-y: scroll;margin-top: 10px">
            <List size="small">
              <ListItem v-for="(item,index) in columns" :key="item.id">
                <p>
                  <Icon type="md-bookmark" size="20"/>
                  <span style="font-size: 13px">&nbsp&nbsp{{item.ename}}</span></p>
                <ListItemMeta/>
                <template slot="action">
                  <li>
                    <Icon type="md-close" size="16" @click="deleteOne(index)"/>
                  </li>
                </template>
              </ListItem>
            </List>
          </card>
        </Col>
      </row>
    </div>
    <div slot="footer">
      <Button @click="cancel" size="small">取消</Button>
      <Button type="primary" :loading="saveLoading" @click="ok" size="small">确定</Button>
    </div>
  </Modal>
</template>
<script>
  import 'ztree/js/jquery.ztree.exhide'
  import {fuzzySearch} from '@/components/ztree/ztreeSearch'

  import {getAreaTree} from './area'

  let $this;
  export default {
    name: "bcCheckArea",
    props: {
      show: {
        type: Boolean,
        default: false
      },
      multi: {
        type: Boolean,
        default: false
      },
      areaTreeId: {
        type: String,
        default: 'tree-common'
      },
      areaTreeSearch:{
        type: String,
        default: 'search-common'
      },

    },
    data() {
      return {
        checkModal: false,
        num: null,
        columns: [],
        saveLoading: false,
        treeData: [],
        setting: {//ztree树初始化设置
          view: {
            showLine: false,
            showIcon: false,
            selectedMulti: false,
          },
          data: {
            simpleData: {
              enable: true,
              idKey: "id",
              pIdKey: "pId",
              rootPId: null
            }
          },
          callback: {
            onClick: this.clickArea,
          },
          check: {
            enable: false,
            chkboxType: {"Y": "", "N": ""},
          }
        },
      }
    },
    methods: {
      clear() {
        this.columns = [];
      },
      deleteOne(index) {
        this.columns.splice(index, 1)
      },
      clickArea(event, treeId, treeNode, clickFlag) {
        if (this.columns.length == 0 || this.columns[0].ename != treeNode.ename) {
          if (this.multi) {
            if (this.columns.length >= 2)
              for (let i = 0; i < this.columns.length; i++) {
                if (this.columns[i].ename == treeNode.ename) {
                  return;
                }
              }
            let columns = Object.assign({}, treeNode);
            this.columns.splice(0, 0, columns);
            this.$forceUpdate();
          } else {
            if (this.columns.length >= 1) {
              this.$Message.warning('您只能选择一个！')
            } else {
              let columns = Object.assign({}, treeNode);
              this.columns.splice(0, 0, columns);
              this.$forceUpdate();
            }
          }
        }
      },
      reloadTreeData() {
        //数据
        //this.treeData = getAreaTree;
        const systemPrefix = config.deploymentStandAlone?'':'cas/'
        getAreaTree(systemPrefix+'api/v1/base/area/tree', {areaIds:'0', isFull: true}).then(res => {
            if(res.status&&res.result&&res.result.length>0){
                this.treeData = res.result;
                //循环将name备份到ename属性中,避免受到模糊搜索的影响
                this.treeData.forEach((n, index) => {
                    n.ename = n.name;
                    if (index === 0) {
                        n.open = true;
                    }
                });
                $.fn.zTree.init($("#" + this.areaTreeId), this.setting, this.treeData);
                fuzzySearch(this.areaTreeId, this.areaTreeSearch, null, false);//搜索功能
            }else{
                this.$Message.error( "没有数据！");
            }
        }).catch(err =>{
            this.$Message.error( "查询失败！");
            console.log(err);
        });

      },
      cancel() {
        this.$emit('update:show', false)
      },
      ok() {
        let selectedArea = this.columns;
        if(selectedArea.length==0){
            this.$Message.error( "请选择区县！");
            return;
        }
        this.$emit('update:show', false);
        this.$emit('reloadTreeData', selectedArea);
      }
    },
    mounted: function () {
      $this = this;
      this.reloadTreeData();
    },
    watch: {
      show: {
        immediate: true,
        handler: function () {
          this.checkModal = this.show;
        }
      }
    }
  }
</script>
