<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;" class="selector">
            <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>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :table-item="table" :list="data" :total="total"
      :auths="[]"
      @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>
  </div>
</template>

<script>
  import {
    getList
  } from '@/api/visit/study.js'
  export default {
    data() {
      return {
        select: {
          page: 1,
          page_size: 10,
          keyword: "",
        },
        total: 0,
        data: [],
        table: [{
            label: '序号',
            type: "index",
            fixed: "left",
            width: 80
          },
          {
            label: '用户id',
            sortable: false,
            prop: 'user_id',
            width: 120
          },
          {
            label: '姓名',
            sortable: false,
            prop: 'name',
            width: 120
          },
          {
            label: '身份证',
            sortable: false,
            prop: 'idcard',
            // width: 120
          },
          {
            label: '联系方式',
            sortable: false,
            prop: 'mobile',
            width: 120
          },
          {
            label: '学习类型',
            sortable: false,
            prop: 'type',
            width: 120,
            formatter:(cell, data, value)=>{
              if(value==1){
                return '普通访客'
              }else if(value==2){
                return '施工访客'
              }else if(value==3){
                return '物流车辆'
              }else{
                return '未知'
              }
            }
          },
          {
            label: '学习时间',
            sortable: false,
            prop: 'updated_at',
            width: 180
          },
          {
            label: '有效期',
            sortable: false,
            prop: 'expire_day',
            width: 180
          },
        ]
      }
    },
    computed: {},
    mounted() {
      this.getList()
    },
    methods: {
      async getList() {
        let res = await getList(this.select)
        console.log(res)
        this.data = res.data
        this.total = res.total
      }
    },
  }
</script>

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

  .selector {
    ::v-deep .el-input--suffix .el-input__inner {
      height: 28px;
    }

    ::v-deep .el-select .el-input .el-select__caret {
      line-height: 28px;
    }

    ::v-deep .el-range-editor.el-input__inner {
      height: 28px;
      width: 250px
    }

    ::v-deep .el-date-editor .el-range__icon {
      line-height: 21px;
    }

    ::v-deep .el-date-editor .el-range-separator {
      line-height: 21px;
    }

    ::v-deep .el-date-editor .el-range__close-icon {
      line-height: 21px;
    }
  }
</style>
