<template>
  <div class="min" @click.stop>
    <a-col :span="24">
    <div class="table">
      <a-input-group>
            <a-row :gutter="24">
              <a-col :span="14">
               <a-input-search placeholder="请输入客户姓名" enter-button @search="onSearch" />
              </a-col>
              <a-col :span="10">
                <a-button type="primary" class="f-r" @click="handleChoice">选择 </a-button>
              </a-col>
            </a-row>
       </a-input-group>
      
      <a-table 
        class="mt-15"
        bordered
        :columns="columns" 
        :data-source="data" 
        
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :scroll="{ y: 215 }">
      </a-table>
    </div>
    </a-col>
  </div>
</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
      },
    },
    data() {
      return {
        data,
        columns,
        selectedRowKeys: [],
      }
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      },
    },
    methods: {
      onSelectChange(selectedRowKeys,selectedRows) {
        console.log( selectedRowKeys,selectedRows)
        this.selectedRowKeys = selectedRowKeys
      },
      onSearch(value) {
        console.log(value)
      },
      handleChoice(){
        console.log(this.selectedRowKeys)
        this.$emit('ok',this.selectedRowKeys)
      }
    },
  }
</script>

<style scoped="scoped" lang="less">
  .min {
    width: 600px;
    position: absolute;
    background: #fff;
    z-index: 99;
    // left: 20%;
    border: 1px solid #dfdfdf;
    top: 38px;
    padding: 10px 10px 0;
    overflow: hidden;
  }
</style>
