<template>
  <page-header-wrapper>
    <div @click="Tablevisible=false" class="tableClass">
    <!-- 头部搜索 -->
    <div class="table-page-search-wrapper " style="position: relative;">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="12" :xs="12"  :xl="4" class="mb-15">
              <a-input placeholder="昵称" v-model="queryParam.BusinessId"></a-input>
          </a-col>
          <a-col :md="12" :xs="12" :xl="4" class="mb-15">
              <a-input placeholder="请选择客户"  v-model="queryParam.BusinessName"  @click.stop="Tablevisible=true"/>
          </a-col>
          <a-col :md="12" :xs="12" :xl="4" class="mb-15">
              <a-input placeholder="请输入手机号" v-model="queryParam.TelPhone" />
          </a-col>
          <a-col :md="12" :xs="12" :xl="4" class="mb-15">
              <a-input placeholder="昵称" v-model="queryParam.BusinessId"></a-input>
          </a-col>
          <a-col :md="24" :xs="24" :xl="4" class="mb-15 text-r">
            <a-button type="primary"  html-type="submit" @click="handleSubmit">查询</a-button>
            <a-button type="primary" @click="handleAdd" class="ml-15">新增 </a-button>
          </a-col>
        </a-row>
        <!-- 选择客户 -->
        <create-table
          ref="createTable"
          v-show="Tablevisible"
          :loading="confirmLoading"
          @ok="handleTableOk"
        />
      </a-form>
    </div>
    <!-- 表格 -->
    <a-table
     bordered 
     :columns="columns" 
     :data-source="data" 
     :scroll="{ x: 1200,}"
    >
      <a slot="action" slot-scope="text, record" @click="handleEdit(record)">编辑</a>
    </a-table>
    <!-- 编辑 -->
    <create-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :model="mdl"
      @cancel="handleCancel"
      @ok="handleOk"
    /> 
    </div>
  </page-header-wrapper>
  
</template>

<script>
  const columns = [{
  		title: '昵称',
  		dataIndex: 'nickname',
      key: 'nickname',
  		width: 180,
      ellipsis: true,
  	},
  	{
  		title: '手机号',
  		dataIndex: 'TelPhone',
      key: 'TelPhone',
  	},
  	{
  		title: '设备',
  		dataIndex: 'equname',
      key: 'equname',
  	},
  	{
  		title: '客户',
  		dataIndex: 'RealName',
      key: 'RealName',
  	},
  	{
  		title: '备注',
  		dataIndex: 'Desc',
      key: 'Desc',
  		ellipsis: true,
  	},
  	{
  		title: '注册时间',
  		dataIndex: 'createtime',
      key: 'createtime',
      width:180,
  		ellipsis: true,
  	},
  	{
  		title: '操作',
  		key: 'action',
      width:100,
      fixed: 'right',
  		scopedSlots: {
  			customRender: 'action'
  		},
  	},
  ]
  
  import CreateForm from './components/CreateForm'
  import CreateTable from './components/CreateTable'
  import data from '@/static/data.json'
  export default {
    components: {
      CreateForm,
      CreateTable
    },
    data() {
      return {
        data:[],
        columns,
        content: 8,
        selectedRowKeys: [],
        loading: false,
        userClick:true,
        Type: '全部',
        Status: '全部',
        // 查询参数
        queryParam: {
          BusinessId: '',
          Type: 0,
          Status: 0,
        },
        visible: false,
        confirmLoading: false,
        mdl: null,
        Tablevisible:false,
        Servicevisible:false,
      }
    },
    computed: {
      hasSelected() {
        return this.selectedRowKeys.length > 0
      },
    },
    created() {
      this.data=data.data
    },
    methods: {
					//搜索
					handleSubmit() {
					  console.log(this.queryParam)
					},
					handleAdd() {
					  this.mdl = null
					  this.visible = true
					  this.confirmLoading=false
					},
      handleEdit(record) {
        this.visible = true
        this.mdl = { ...record
        }
      },
      // 取消添加/编辑
      handleCancel() {
        console.log('取消')
        this.visible = false
        const form = this.$refs.createModal.form
        form.resetFields()
      },
      // 确定添加/编辑
      handleOk() {
        const that = this
        const form = that.$refs.createModal.form
        that.confirmLoading = true
        form.validateFields((errors, values) => {
          if (!errors) {
            console.log('values', values)
            if (values.id > 0) {
              // 修改 e.g.
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve()
                }, 1000)
              }).then(res => {
                that.visible = false
                that.confirmLoading = false
                form.resetFields()
                that.$message.info('修改成功')
              })
            }else {
              // 新增
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve()
                }, 1000)
              }).then(res => {
                that.visible = false
                that.confirmLoading = false
                form.resetFields()
                that.$refs.table.refresh()

                that.$message.info('新增成功')
              })
            }
          } else {
            that.confirmLoading = false
          }
        })
      },
      //选择客户
      handleTableOk(item){
        this.Tablevisible = false
        this.confirmLoading = true
        console.log(item)
      },
    },
  }
</script>
<style lang="less" scoped="scoped">
  .cardInfo{
    display: flex;
    justify-content: space-around;
    padding-bottom: 25px;
    background-color: #fff;
  }
  .head-info {
    text-align: center;
    margin: 0 24px;
    flex-grow: 1;
    flex-shrink: 0;
    align-self: center;
    border: 1px solid #dfdfdf;
    padding: 20px 0;
    span {
      color: #666;
      display: inline-block;
      font-size: 14px;
      margin-bottom: 4px;
    }

    p {
      color: #333;
      font-size: 24px;
      margin: 0;
    }
  }
</style>
