<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.KeyWords" label="关键字"
            @clear="resetSearch" maxlength="20" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="sticky-column-table sticky-right-column-table" separator="none" :data="dataList" :columns="columns"
        row-key="name">
        <template v-slot:top="props">
          <div class="col-2 q-table__title">访客登记</div>
          <q-space />
        </template>
        <template v-slot:body-cell-VisitorStatus="props">
          <q-td :props="props">
            <img v-if="props.row.VisitorStatus==1" title="正常" src="../../assets/images/normal.png" />
            <img v-if="props.row.VisitorStatus==2" title="贵宾" src="../../assets/images/vip.png" />
            <img v-if="props.row.VisitorStatus==3" title="黑名单" src="../../assets/images/blackList.png" />
          </q-td>
        </template>
        <template v-slot:body-cell-Evaluate="props">
          <q-td :props="props">
            {{getRemarks(props.row.Evaluate)}}
          </q-td>
        </template>
        <template v-slot:body-cell-Remark="props">
          <q-td :props="props">
            {{getRemarks(props.row.Remark)}}
          </q-td>
        </template>
        <template v-slot:body-cell-Id="props">
          <q-td :props="props">
            <q-btn flat size="xs" @click="getDetail(props.row)" icon="iconfont icon-View" color="accent" style="font-weight:400" label="详情" />
          </q-td>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
      </q-table>
    </div>
    <schedulFanke v-if="isShowDetail" @close="closeDetail" :save-obj="sendObj"></schedulFanke>
  </div>
</template>

<script>
  import {
    queryVisitorPage,
  } from '../../api/scheduling/schedu'
  import schedulFanke from '../../components/schedul/schedul-fanke'
  export default {
    meta: {
      title: "访客登记"
    },
    components: {
      schedulFanke
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          KeyWords: "",
        },
        pageCount: 0,
        dataList: [],
        loading: false,
        columns: [{
            name: 'Name',
            label: '姓名',
            required: true,
            field: 'Name',
            align: 'left'
          },
          {
            name: 'Tel',
            field: 'Tel',
            label: '电话',
            align: 'left',
          },
          {
            name: 'WeChatNum',
            field: 'WeChatNum',
            label: '微信',
            align: 'left'
          },
          {
            name: 'CourseName',
            label: '兴趣课程',
            field: 'CourseName',
            align: 'left'
          },
          {
            name: 'StudyTime',
            label: '学习时间',
            field: 'StudyTime',
            align: 'left'
          },
          {
            name: 'LevelType',
            label: '当前水平',
            field: 'LevelType',
            align: 'left'
          },
          {
            name: 'CreateByName',
            label: '关联人员',
            field: 'CreateByName',
            align: 'left'
          },
          {
            name: 'VisitorStatus',
            label: '状态',
            field: 'VisitorStatus',
            align: 'left'
          },
          {
            name: 'Evaluate',
            label: '意向评估',
            field: 'Evaluate',
            align: 'left'
          },
          {
            name: 'CreateTimeStr',
            label: '到访时间',
            field: 'CreateTimeStr',
            align: 'left'
          },
          {
            name: 'VisitTimes',
            label: '到访次数',
            field: 'VisitTimes',
            align: 'left'
          },
          {
            name: 'Remark',
            label: '备注',
            field: 'Remark',
            align: 'left'
          },
          {
            name: 'Id',
            label: '操作',
          }
        ],
        sendObj:{},
        isShowDetail:false
      }
    },
    mounted() {
      this.getList();
    },
    created() {

    },
    methods: {
      getList() {
        this.loading = true;
        queryVisitorPage(this.msg).then(res => {
          this.loading = false;
          this.dataList = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false;
        })
      },
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getVisitoryPage();
      },
      changePage() {
        this.msg.pageIndex = val;
        this.getVisitoryPage();
      },
      //过滤备注显示
      getRemarks(remark){
        if(remark.length>10){
          return remark.substring(0,10)+'...';
        }else{
          return remark;
        }
      },
      //获取详情
      getDetail(obj){
        this.sendObj = obj;
        this.isShowDetail=true;
      },
      //关闭
      closeDetail(){
        this.isShowDetail=false;
      }
    }
  }

</script>
<style scoped>
  .border-bottom {
    border-bottom: 1px dashed #EEE;
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

</style>
<style lang="sass">
  @import url('~assets/css/table.sass')

</style>
