<template>
  <div style="padding: 0 20px" class="listwrap">
    <el-dialog title="今日访客" :visible.sync="listShow" width="80%">
      <xy-table :table-item="table" :list="data" :total="total" :height="tableHeights"
        :auths='[]'
        :is-page='false'
        @pageSizeChange="e => {select.page_size = e;select.page = 1;getList()}"
        @pageIndexChange="e => {select.page = e;getList()}">
        <template v-slot:btns>
          <div></div>
        </template>
      </xy-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="listShow = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getList
  } from '@/api/gate'
  export default {
    components: {},
    data() {
      return {
        listShow:false,
        tableHeights: 0,
        select: {
          page: 1,
          rows: 999,
          keyword: "",
          audit_status: "",
          start_date: "",
          end_date: "",
          is_export: 0
        },
        selectRange: [],
        statusList: [{
            id: -1,
            value: '待学习'
          },
          {
            id: 0,
            value: '待审核'
          },
          {
            id: 1,
            value: '通过(待进厂)'
          },
          {
            id: 2,
            value: '驳回'
          },
          {
            id: 3,
            value: '已进厂'
          },
          {
            id: 4,
            value: '已离厂'
          }
        ],
        total: 0,
        data: [],
        table: [{
            label: '序号',
            type: "index",
            fixed: "left",
            width: 80
          },
          {
            label: '姓名',
            sortable: false,
            prop: 'name',
            fixed: "left",
            width: 120
          },
          {
            label: '类型',
            sortable: false,
            prop: 'type_text',
            width: 120
          },
          {
            label: '状态',
            sortable: false,
            prop: 'audit_status_text',
            width: 120
          },
          {
            label: '是否随访',
            sortable: false,
            prop: 'follw_people',
            width: 80,
            formatter: (cell, data, value) => {
              return value ? '是' : '否'
            }
          },
          {
            label: '预约时间',
            sortable: false,
            prop: 'date',
            width: 120
          },
          {
            label: '证件类型',
            sortable: false,
            prop: 'credent',
            width: 120,
            formatter: (cell, data, value) => {
              return value == 1 ? '身份证' : '护照'
            },
          },
          {
            label: '证件号',
            sortable: false,
            prop: 'idcard',
            width: 180
          },
          {
            label: '手机号',
            sortable: false,
            prop: 'mobile',
            width: 120
          },
          {
            label: '单位名称',
            sortable: false,
            prop: 'company_name',
            width: 180
          },

          {
            label: '开始时间',
            sortable: false,
            prop: 'start_date',
            width: 180
          },
          {
            label: '结束时间',
            sortable: false,
            prop: 'end_date',
            width: 180
          },
          {
            label: '创建时间',
            sortable: false,
            prop: 'created_at',
            width: 180

          }
          // {
          //   label: '创建人',
          //   sortable: false,
          //   prop: 'admin_id',
          //   width: 120
          // }
        ]
      }
    },
    computed: {},
    mounted() {

    },
    created() {
      this.tableHeight()
      this.getToday()
      // this.getList()

    },
    watch:{
      listShow(newval){
        if(newval){
          this.getList()
        }
      }
    },
    methods: {
      getToday() {
        let now = new Date()
        let nowDay = this.$moment(now).format("YYYY-MM-DD")
        this.select.start_date = nowDay
        this.select.end_date = nowDay
        this.selectRange = [nowDay, nowDay]
      },
      async getList() {
        let res = await getList(this.select)
        this.data = res.data
        this.total = res.total
      },
      selectRangeM(val) {
        console.log(val)
        if (val) {
          this.select.start_date = val[0]
          this.select.end_date = val[1]
        } else {
          this.select.start_date = ""
          this.select.end_date = ""
        }
      },
      tableHeight(val) {
        this.$nextTick(function() {
           let clientHeight = document.documentElement.clientHeight;
            let paginationHeight = 37; //分页的高度
            let topHeight = 50; //页面 头部
            this.tableHeights = clientHeight*.5
              console.log(this.tableHeights)
        })
      }
    },
  }
</script>

<style scoped>
  .listwrap .el-button{

  }

</style>
