<template>
  <a-modal
    :width="modalWidth"
    :visible="visible"
    title="选择服务商"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
  >
    <!--服务商树-->
    <template>
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="服务商">
          <a-tree
            :multiple="multipe"
            checkable
            :checkedKeys="checkedKeys"
            allowClear="true"
            :checkStrictly="true"
            @check="onCheck"
            :dropdownStyle="dropDownStyle"
            :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'

  const findList = (params) => getAction('/hlgsubcontractor/hlgSubcontractor/allList', params)

  export default {
    name: 'SubcontractorWindow',
    components: {},
    data() {
      return {
        multipe: false,
        checkedKeys: [], // 存储选中的服务商id
        departList: [], // 存储选中的服务商信息
        modalWidth: 400,
        departTree: [],
        title: '操作',
        visible: false,
        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: '/hlgsubcontractor/hlgSubcontractor/allList',//查询所有服务商
        }
      }
    },
    methods: {
      add(checkedDepartKeys) {
        this.checkedKeys = checkedDepartKeys;
        this.edit({})
      },
      edit() {
        this.departList = []
        this.querySubcontratorList()
        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
            let depart = { key: '', value: '',title:""}
            depart.key = de.id
            depart.value = de.id
            depart.title = de.name;
            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.name;
            this.departList.push(depart)
          }
        }
        console.log('onCheck', checkedKeys, info)
      },
      //查询所有服务商列表
      querySubcontratorList() {
        findList().then((res) => {
          if (res.success) {
            for(let i = 0;i<res.result.length;i++){
              res.result[i].title = res.result[i].name;
            }
            this.departTree = res.result
          }
        })
      },
      modalFormOk() {

      }
    }
  }
</script>

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