<template>
    <div style="padding: 0 20px">
      <div ref="lxHeader">
        <lx-header icon="md-apps" text="访客管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <slot>
            <div style="display: flex;align-items: center;">
              <div style="margin-right: 10px;">关键词</div>

              <el-input size="mini" placeholder="请输入关键词" v-model="select.keyword" style="width: 160px;margin-right: 10px;"></el-input>
              <el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询</el-button>
              <el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">导出</el-button>

            </div>
          </slot>
        </lx-header>
      </div>

    <xy-table
      :table-item="table"
      :list="data"
      :total="total"
      @pageSizeChange="e => {select.rows = e;select.page = 1;getList()}"
      @pageIndexChange="e => {select.page = e;getList()}"
      @delete="deleteStudy"
      @editor="editorStudy">
    </xy-table>
    <addCommon ref="addCommon" @refresh="getList"></addCommon>
    <addBuild ref="addBuild" @refresh="getList"></addBuild>
    <addPark ref="addPark" @refresh="getList"></addPark>
  </div>
</template>

<script>

import {getList} from '@/api/visit/record.js'
import addCommon from '@/views/visit/component/addCommon'
import addBuild from '@/views/visit/component/addBuild'
import addPark from '@/views/visit/component/addPark'
export default {
  components: {
    addCommon,
    addBuild,
    addPark
  },
  data() {
    return {
      visible:false,
      select:{
        page:1,
        rows:10
      },
      total:0,
      data:[],
      table:[
        {
          label:'姓名',
          sortable:false,
          prop:'start_time',
          fixed:"left",
          align:"left"
        },
        {
          label:'类型',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'状态',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'是否随访',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'预约时间',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'证件类型',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'证件号',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'状态',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'单位名称',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'手机号',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'开始时间',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'结束时间',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'创建时间',
          sortable:false,
          prop:'end_time',
        },
        {
          label:'创建人',
          sortable:false,
          prop:'end_time',
        }
      ]
    }
  },
  computed: {},
  mounted() {
    // this.getList()
  },
  methods: {
    async getList(){
      let res = await getList(this.select)
      console.log(res)
      this.data = res.data
      this.total = res.total
    },
    deleteStudy(row){
      destroy({id:row.id}).then(res => {
        this.$successMessage('destroy','拜访记录')
        this.getList()
      })
    },
    editorStudy(row){
      let addWhat = row.type==1?"addCommon":(row.type==2?"addBuild":(row.type==3?"addPark":""))
      this.$refs[addWhat].id = row.id
      this.$refs[addWhat].type = 'editor'
      this.$refs[addWhat].isShow = true
    }
  },
}
</script>

<style scoped lang="scss">
//::v-deep .el-button + .el-button{
//  margin-left: 0 !important;
//}
::v-deep .el-button{
  padding: 5px 8px !important;
}
</style>
