<template>
  <Modal v-model="checkPersonModal" title="选择人员" width="700" :scrollable="true" @on-cancel="cancel">
    <div>
      <row>
        <Col span="11">
          <div>
            <Input v-show="tabDefault==='company'" key="1" :id="treeId+'keyword'" name="keyword" prefix="ios-search"
                   placeholder="搜索"/>
            <Input v-show="tabDefault==='role'" key="2" :id="treeId+'keyword2'" name="keyword2" prefix="ios-search"
                   placeholder="搜索"/>
            <Input v-show="tabDefault==='interior'" key="3" :id="treeId+'keyword3'" name="keyword3" prefix="ios-search"
                   placeholder="搜索"/>
            <Input v-show="tabDefault==='quickly'" key="4" :id="treeId+'keyword4'" name="keyword4" prefix="ios-search"
                   placeholder="搜索"/>
          </div>
          <card style="height: 450px;overflow-y: scroll;margin-top: 5px">
            <Tabs ref="tabs1" v-model="tabDefault" size="small" @on-click="tabClick" animated name="tabs1">
              <TabPane v-if="company" label="按单位用户" name="company" tab="tabs1">
                <div class="area-tree-div" style="overflow: auto">
                  <ul :id="treeId+'area-list-tree'" class="ztree"></ul>
                </div>
              </TabPane>
              <TabPane v-if="role" label="按角色" name="role" tab="tabs1">
                <div class="area-tree-div" style="overflow: auto">
                  <ul :id="treeId+'area-list-tree3'" class="ztree"></ul>
                </div>
              </TabPane>
              <TabPane v-if="interior" label="按内部员工" name="interior" tab="tabs1">
                <div class="area-tree-div" style="overflow: auto">
                  <ul :id="treeId+'area-list-tree2'" class="ztree"></ul>
                </div>
              </TabPane>
              <TabPane v-if="quickly" label="便捷选择" name="quickly" tab="tabs1">
                <div class="area-tree-div" style="overflow: auto">
                  <ul :id="treeId+'area-list-tree4'" class="ztree"></ul>
                </div>
              </TabPane>
            </Tabs>
          </card>
        </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-contact" size="24"/>
                  <span style="font-size: 13px">&nbsp&nbsp{{item.userName}}</span></p>
                <ListItemMeta/>
                <template #action>
                  <li>
                    <Icon type="md-close" size="16" @click="deleteOne(index)"/>
                  </li>
                </template>
              </ListItem>
            </List>
          </card>
        </Col>
      </row>
    </div>
    <template #footer>
    <div>
      <Button @click="cancel" size="small">取消</Button>
      <Button type="primary" :loading="saveLoading" @click="ok" size="small">确定</Button>
    </div>
    </template>
  </Modal>
</template>
<script>
  import 'ztree/js/jquery.ztree.exhide'
  import { fuzzySearch } from '@/components/ztree/ztreeSearch'
  import { getAreaCompany } from './checkApi'

  let $this
  export default {
    name: 'bcCheckPerson',
    data () {
      return {
        key1: '',
        checkPersonModal: false,
        num: null,
        columns: [],
        saveLoading: false,
        treeCompanyData: [],
        orgDataZ: [
          { id: 1, pId: 0, type: 'org', isParent: true, name: '长沙博矗软件技术有限公司', level: 1 },
          { id: 2, pId: 1, type: 'org', isParent: true, name: '研发部', },
          { id: 3, pId: 1, type: 'org', isParent: true, name: '客服部', },
          { id: 4, pId: 1, type: 'org', isParent: true, name: '业务部', },
          { id: 5, pId: 1, type: 'org', isParent: true, name: '人事部', },
          { id: 6, pId: 2, type: 'user', isParent: false, name: '赵001', userName: '赵001' },
          { id: 7, pId: 3, type: 'user', isParent: false, name: '钱001', userName: '钱001' },
          { id: 8, pId: 3, type: 'user', isParent: false, name: '赵002', userName: '赵002' },
          { id: 9, pId: 3, type: 'user', isParent: false, name: '钱002', userName: '钱002' },
          { id: 10, pId: 4, type: 'user', isParent: false, name: '钱002', userName: '钱002' },
          { id: 11, pId: 4, type: 'user', isParent: false, name: '钱003', userName: '钱003' },
          { id: 12, pId: 5, type: 'user', isParent: false, name: '钱004', userName: '钱004' },
        ],
        roleData: [{ id: 1, pId: 0, type: 'role', isParent: true, name: '总经理' },
          { id: 2, pId: 0, type: 'role', isParent: true, name: '部门经理' },
          { id: 3, pId: 0, type: 'role', isParent: true, name: '业务员' },
          { id: 4, pId: 0, type: 'role', isParent: true, name: '客服经理' },
          { id: 5, pId: 0, type: 'role', isParent: true, name: '客服', },
          { id: 6, pId: 1, type: 'user', isParent: false, name: '总经理1', userName: '总经理1' },
          { id: 7, pId: 2, type: 'user', isParent: false, name: '经理1', userName: '经理1' },
          { id: 8, pId: 3, type: 'user', isParent: false, name: '业务员1', userName: '业务员1' },
          { id: 9, pId: 4, type: 'user', isParent: false, name: '客服经理1', userName: '客服经理1' },
          { id: 10, pId: 5, type: 'user', isParent: false, name: '客服1', userName: '客服1' }],
        quicklyData: [
          { id: 1, pId: 0, type: 'quick', isParent: true, name: '最近审批人' },
          { id: 2, pId: 0, type: 'quick', isParent: true, name: '快捷2' },
        ],
        setting: {//ztree树初始化设置
          view: {
            showLine: false,
            showIcon: true,
            selectedMulti: false,
          },
          data: {
            simpleData: {
              enable: true,
              idKey: 'id',
              pIdKey: 'pId',
              rootPId: null
            }
          },
          callback: {
            onClick: this.clickArea,
            // onCheck: this.checkArea
          },
          check: {
            enable: false,
            chkboxType: { 'Y': '', 'N': '' },
          }
        },
        tabDefault: this.company ? 'company' : (this.role ? 'role' : (this.interior ? 'interior' : 'quickly'))
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      company: {
        type: Boolean,
        default: false
      },
      role: {
        type: Boolean,
        default: false
      },
      interior: {
        type: Boolean,
        default: false
      },
      quickly: {
        type: Boolean,
        default: false
      },
      areas: {
        type: Array,
        default: function () {
          return []
        }
      },
      companys: {
        type: Array,
        default: function () {
          return []
        }
      },
      roles: {
        type: Array,
        default: function () {
          return []
        }
      },
      orgs: {
        type: Array,
        default: function () {
          return []
        }
      },
      resultData: {
        type: Array,
        default: function () {
          return []
        }
      },
      treeId: {
        type: String,
        default: '1'
      },
      multi: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      tabClick (name) {
        $this.tabDefault = name;
        $this.$forceUpdate()
      },
      clear () {
        this.columns = []
      },
      deleteOne (index) {
        this.columns.splice(index, 1)
      },
      reloadAreaData () {
        /*this.treeCompanyData.forEach((n, index) => {
          if (index === 0) {
            n.open = true;
          }
          if (n.type == 'user') {
            n.icon = "./iconImg/user.png";
          }
        });
        $.fn.zTree.init($("#area-list-tree"), this.setting, this.treeCompanyData);
        fuzzySearch('area-list-tree', 'keyword', null, false);//搜索功能
        return; */
        let ids = '';
        let params = {};
        if(this.companys.length == 0 && this.areas.length == 0){
          return
        }
        if (this.companys.length > 0) {
          for (let i = 0; i < this.companys.length; i++) {
            if(i==this.companys.length-1){
              ids = ids + (this.companys[i].companyId ? this.companys[i].companyId : this.companys[i].id)
            }else{
              ids = ids + (this.companys[i].companyId ? this.companys[i].companyId : this.companys[i].id) + ','
            }
          }
          params = { companyIds: ids }
        } else if (this.areas.length > 0) {
          for (let i = 0; i < this.areas.length; i++) {
            if(i==this.areas.length-1){
              ids = ids + (this.areas[i].areaId ? this.areas[i].areaId : this.areas[i].id)
            }else{
              ids = ids + (this.areas[i].areaId ? this.areas[i].areaId : this.areas[i].id) + ','
            }
          }
          params = { areaIds: ids }
        }
        getAreaCompany(params).then(area => {
          //循环将name备份到ename属性中,避免受到模糊搜索的影响
          if (area.data.result && area.data.result.length > 0) {
            this.treeCompanyData=area.data.result;
            this.treeCompanyData.forEach((n, index) => {
              if (index === 0) {
                n.open = true
              }
              if (n.type == 'user') {
                n.icon = './iconImg/user.png'
                n.userName=n.name
              }
            })
            $.fn.zTree.init($('#'+this.treeId+'area-list-tree'), this.setting, this.treeCompanyData);
            fuzzySearch(this.treeId+'area-list-tree', this.treeId+'keyword', null, false)//搜索功能
          } else {
            this.$Message.warning('没有查询到区域信息！')
            $.fn.zTree.init($('#'+this.treeId+'area-list-tree'), this.setting, this.treeCompanyData);
            fuzzySearch(this.treeId+'area-list-tree', this.treeId+'keyword', null, false)//搜索功能
          }

        }).catch(err => {
          this.$Message.error('区域树查询失败！')
          console.log(err)
        })
      },
      clickArea (event, treeId, treeNode, clickFlag) {
        if (treeNode.type == 'user') {
          if (this.multi) {
            if (this.columns.length == 0 || this.columns[0].userName != treeNode.userName) {
              if (this.columns.length >= 2) {
                for (let i = 0; i < this.columns.length; i++) {
                  if (this.columns[i].userName == treeNode.userName) {
                    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();
            }
          }
        }
      },
      reloadOrgData () {
        this.orgDataZ.forEach((n, index) => {
          if (index === 0) {
            n.open = true
          }
          if (n.level && n.level == 1) {
            n.icon = './iconImg/file.png'
          } else if (n.type == 'user') {
            n.icon = './iconImg/user.png'
          } else {
            n.icon = './iconImg/org.png'
          }
        })
        $.fn.zTree.init($('#'+this.treeId+'area-list-tree2'), this.setting, this.orgDataZ)
        fuzzySearch(this.treeId+'area-list-tree2', this.treeId+'keyword3', null, false)//搜索功能
        return
        /*
        let params='';
        if(this.orgs.length>0){
          for(let i=0;i<this.orgs.length;i++){
            params=params+this.orgs[i].orgId?this.orgs[i].orgId:this.orgs[i].id+','
          }
        }
        getAllTree(0, true).then(area => {
           //循环将name备份到ename属性中,避免受到模糊搜索的影响
           if (area.result && area.result.length > 0) {
             this.orgDataZ.forEach((n, index) => {
          if (index === 0) {
            n.open = true;
          }
          if (n.level && n.level == 1) {
            n.icon = "./iconImg/file.png";
          } else if (n.type == 'user') {
            n.icon = "./iconImg/user.png";
          } else {
            n.icon = "./iconImg/org.png";
          }
          });
           $.fn.zTree.init($("#area-list-tree2"), this.setting, this.orgDataZ);
           fuzzySearch('area-list-tree2', 'keyword3', null, false);//搜索功能
           } else {
             this.$Message.warning("没有查询到区域信息！");
            $.fn.zTree.init($("#area-list-tree2"), this.setting, this.orgDataZ);
            fuzzySearch('area-list-tree2', 'keyword3', null, false);//搜索功能
           }

         }).catch(err => {
           this.$Message.error("区域树查询失败！")
           console.log(err);
         })*/
      },
      reloadRoleData () {
        this.roleData.forEach((n, index) => {
          if (index === 0) {
            n.open = true
          }
          if (n.type == 'user') {
            n.icon = './iconImg/user.png';
          }
        })
        $.fn.zTree.init($('#'+this.treeId+'area-list-tree3'), this.setting, this.roleData)
        fuzzySearch(this.treeId+'area-list-tree3', this.treeId+'keyword2', null, false)//搜索功能
        return
        /*
        let params='';
        if(this.roles.length>0){
          for(let i=0;i<this.roles.length;i++){
            params=params+this.roles[i].roleId?this.roles[i].roleId:this.roles[i].id+','
          }
        }
        getAllTree(0, true).then(area => {
           //循环将name备份到ename属性中,避免受到模糊搜索的影响
           if (area.result && area.result.length > 0) {
             this.roleData.forEach((n, index) => {
          if (index === 0) {
            n.open = true;
          }
          if (n.type == 'user') {
            n.icon = "./iconImg/user.png";
          }
        });
           $.fn.zTree.init($("#area-list-tree3"), this.setting, this.roleData);
           fuzzySearch('area-list-tree3', 'keyword2', null, false);//搜索功能
           } else {
             this.$Message.warning("没有查询到区域信息！");
             $.fn.zTree.init($("#area-list-tree3"), this.setting, this.roleData);
             fuzzySearch('area-list-tree3', 'keyword2', null, false);//搜索功能
           }

         }).catch(err => {
           this.$Message.error("区域树查询失败！")
           console.log(err);
         })*/
      },
      reloadQuicklyData () {
        this.quicklyData.forEach((n, index) => {
          if (index === 0) {
            n.open = true
          }
          if (n.type == 'user') {
            n.icon = './iconImg/user.png'
          }
        })
        $.fn.zTree.init($('#'+this.treeId+'area-list-tree4'), this.setting, this.quicklyData)
        fuzzySearch(this.treeId+'area-list-tree4', this.treeId+'keyword4', null, false)//搜索功能
        return
        /* getAllTree(0, true).then(area => {
           //循环将name备份到ename属性中,避免受到模糊搜索的影响
           if (area.result && area.result.length > 0) {
            this.quicklyData.forEach((n, index) => {
          if (index === 0) {
            n.open = true;
          }
          if (n.type == 'user') {
            n.icon = "./iconImg/user.png";
          }
        });
           $.fn.zTree.init($("#area-list-tree4"), this.setting, this.quicklyData);
           fuzzySearch('area-list-tree4', 'keyword4', null, false);//搜索功能
           } else {
             this.$Message.warning("没有查询到区域信息！");
             $.fn.zTree.init($("#area-list-tree4"), this.setting, this.quicklyData);
             fuzzySearch('area-list-tree4', 'keyword4', null, false);//搜索功能
           }

         }).catch(err => {
           this.$Message.error("区域树查询失败！")
           console.log(err);
         })*/
      },
      cancel () {
        this.$emit('update:show', false)
      },
      ok () {
        this.$emit('update:show', false)
        this.$emit('update:resultData', this.columns)
        this.$emit('checkOk',this.columns);
      },
      clearCache(){
        this.columns=[];
        this.$emit('update:resultData', [])
      }
    }
    ,
    mounted: function () {
      $this = this
    }
    ,
    watch: {
      show: {
        immediate: true,
        handler:

          function () {
            this.checkPersonModal = this.show
          }
      },
      companys: {
        immediate: true,
        handler:
          function () {
            this.$nextTick(() => {
              if (this.company) {
                this.reloadAreaData()
              }
            })
          }
      },
      areas: {
        immediate: true,
        handler:
          function () {
            this.$nextTick(() => {
              if (this.company) {
                this.reloadAreaData()
              }
            })
          }
      },
      orgs: {
        immediate: true,
        handler:
          function () {
            this.$nextTick(() => {
              if (this.interior) {
                this.reloadOrgData()
              }
            })
          }
      },
      roles: {
        immediate: true,
        handler:
          function () {
            this.$nextTick(() => {
              if (this.role) {
                this.reloadRoleData()
              }
            })
          }
      },
    }
  }
</script>
