<template>
  <a-modal 
  title="选择服务商"
  :width="950" 
  :visible="visible" 
  :confirmLoading="loading" 
		cancelText="取消"
		okText="保存"
  @ok="handleChoice" 
  @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <div class="table">
        <a-input-group>
              <a-row :gutter="8">
                <a-col :span="8">
                 <a-input placeholder="请输入服务商" v-model="queryParam.Name" />
                </a-col>
                <a-col :span="8">
                 <a-input placeholder="请输入手机号" v-model="queryParam.TelPhone" />
                </a-col>
                <a-col :span="4">
                  <a-button type="primary" class="f-r" @click="handleSubmit">查询 </a-button>
                </a-col>
              </a-row>
         </a-input-group>
        
        <a-table 
          class="mt-15"
          bordered
          :columns="columns" 
          :data-source="data" 
          :scroll="{ y: 215 }"
          :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
          >
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
 const columns = [{
      title: '客户',
      dataIndex: 'Name',
    },
    {
      title: '手机号',
      dataIndex: 'TelPhone',
    },
  ]


  const data = [{
      Id: '1',
      Name: '32',
      TelPhone: '15237899695',
    },
    {
      Id: '2',
      Name: '33',
      TelPhone: '15237899695',
    },
    {
      Id: '2',
      Name: '33',
      TelPhone: '15237899695',
    },
    {
      Id: '2',
      Name: '33',
      TelPhone: '15237899695',
    },
    {
      Id: '2',
      Name: '33',
      TelPhone: '15237899695',
    },
    {
      Id: '2',
      Name: '33',
      TelPhone: '15237899695',
    },
    {
      Id: '2',
      Name: '33',
      TelPhone: '15237899695',
    },
  ]

  export default {
    props: {
      loading: {
        type: Boolean,
        default: () => false
      },
      visible: {
        type: Boolean,
        required: true
      }
    },
    data() {
      return {
        data,
        columns,
        queryParam:{},
        selectedRowKeys: [],
      }
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      },
    },
    methods: {
      //搜索
      handleSubmit() {
        console.log(this.queryParam)
      },
      
      onSelectChange(selectedRowKeys, selectedRows) {
        console.log(selectedRowKeys, selectedRows)
        this.selectedRowKeys = selectedRowKeys
      },
      handleChoice(){
        console.log(this.selectedRowKeys)
        if(this.selectedRowKeys.length==0){
           this.$message.info('请选择服务商')
        }else{
           this.$message.info('您已经选择了服务商')
        }
        
        // this.$emit('ok',this.selectedRowKeys)
      }
    },
  }
</script>
<style scoped="scoped">
  .header{
        height: 56px;
        line-height: 56px;
        position: relative;
        top: -24px;
        background: #e8e8e8;
        left: -24px;
        right: -24px;
        padding-left: 20px;
        border-bottom: 1px solid #dfdfdf;
  }
</style>
