<template>
  <a-modal
    :width="modalWidth"
    :visible="visible"
    :bodyStyle ="bodyStyle"
    title="选择企业"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
  >
    <template>
      <a-form :form="form">
        <a-input-search v-model="keyword" style="margin-bottom: 8px" placeholder="请输入企业名称" @search="onSearch" />
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="企业">
          <a-tree
            :multiple="multipe"
            checkable
            :checkedKeys="checkedKeys"
            allowClear="true"
            :checkStrictly="true"
            @check="onCheck"
            @expand="onExpand"
            :autoExpandParent="autoExpandParent"
            :expandedKeys="expandedKeys"
            :treeData="departTree"
            placeholder="请选择企业">
          </a-tree>
        </a-form-item>
      </a-form>
    </template>
  </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import { getAction } from '@/api/manage'
  import { queryDepartTreeList } from '@/api/api'


  export default {
    name: 'CompanySelectWindow',
    components: {},
    data() {
      return {
        multipe: false,
        checkedKeys: [], // 存储选中的服务商id
        departList: [], // 存储选中的服务商信息
        modalWidth: 400,
        bodyStyle:{
          maxHeight:"400px",
          "overflow-y":"auto",
        },
        departTree: [],
        title: '操作',
        visible: false,
        keyword: '',
        autoExpandParent: true,
        expandedKeys: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        dropDownStyle:{
          maxHeight:'200px',
          overflow:'auto'
        },
        confirmLoading: false,
        headers: {},
        form: this.$form.createForm(this),
        url: {
          list: '/hlgcompany/hlgCompany/allCompanyList',//查询所有企业
        }
      }
    },
    methods: {
      add(checkedDepartKeys) {
        this.checkedKeys = checkedDepartKeys;
        this.edit({})
      },
      edit() {
        this.keyword = '';
        this.departList = []
        this.queryCompanyDepartList()
        this.form.resetFields()
        this.visible = true
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.departList = []
        this.checkedKeys = []
      },
      handleSubmit() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err) => {
          if (!err) {
            that.confirmLoading = true
            let formData = {
              departIdList: this.departList
            }
            console.log(formData)
            that.departList = []
            that.$emit('ok', formData)
            that.confirmLoading = false
            that.close()
          }
        })
      },
      handleCancel() {
        this.close()
      },

      // 选择企业时作用的API
      onCheck(checkedKeys, info) {
        this.departList = []
        if(!this.multipe){//单选
          let arr = checkedKeys.checked.filter(item=>{
            return this.checkedKeys.indexOf(item)<0
          })
          this.checkedKeys = [...arr]
          let checkedNodes = info.checkedNodes
          for (let i = 0; i < checkedNodes.length; i++) {
            let de = checkedNodes[i].data.props
            console.log(1111,de)
            //只能选择企业，一级平台选择无效
            if(!de.parentId){
              this.checkedKeys = [];
              return;
            }
            let depart = { key: '', value: '',title:""}
            depart.key = de.id
            depart.value = de.id
            depart.title = de.departName;
            this.departList[0] = depart
          }
        }else{//多选
          this.checkedKeys = checkedKeys.checked
          let checkedNodes = info.checkedNodes
          for (let i = 0; i < checkedNodes.length; i++) {
            let de = checkedNodes[i].data.props
            let depart = { key: '', value: '',title:""}
            depart.key = de.id
            depart.value = de.id
            depart.title = de.departName;
            this.departList.push(depart)
          }
        }
        console.log('onCheck', checkedKeys, info)
      },
      //查询所有企业列表
      queryCompanyDepartList() {
        queryDepartTreeList().then((res) => {
          if (res.success) {
            for(let i = 0;i<res.result.length;i++){
              res.result[i].title = res.result[i].departName;
              //只能选择企业，一级平台默认不能选择
              if(!res.result[i].parentId){
                res.result[i].disabled = true;
              }
            }
            this.departTree = res.result
            this.initExpandedKeys(res.result)
          }
        })
      },
      initExpandedKeys(arr){
        if(arr && arr.length>0){
          let keys = []
          for(let item of arr){
            if(item.children && item.children.length>0){
              keys.push(item.id)
            }
          }
          this.expandedKeys=[...keys]
        }else{
          this.expandedKeys=[]
        }
      },
      onExpand (expandedKeys) {
        this.expandedKeys = expandedKeys
        this.autoExpandParent = false
      },
      modalFormOk() {

      },
      onSearch(value) {
        let that = this
        if (value) {
          //模糊搜索
          value = '*' + value + '*';
          queryDepartTreeList({departName: value}).then((res) => {
            if (res.success) {
              that.departTree = []
              for (let i = 0; i < res.result.length; i++) {
                res.result[i].title = res.result[i].departName;
                //只能选择企业，一级平台默认不能选择
                if(!res.result[i].parentId){
                  res.result[i].disabled = true;
                }
                let temp = res.result[i]
                that.departTree.push(temp)
              }
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {
          that.queryCompanyDepartList()
        }

      },
    }
  }
</script>

<style scoped>
  .ant-table-tbody .ant-table-row td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
</style>