<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-12 q-table__title">{{name}}-{{date}}试听学员名单</div>
          <q-space />
          <div class="page-option">
            <!-- <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="添加客户" @click="editVisitor(null)" /> -->
          </div>
        </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">
                 <el-tooltip effect="dark" :content="props.row.Remark" placement="top">
                    {{getRemarks(props.row.Remark)}}
                </el-tooltip>
           
          </q-td>
        </template>
        <!-- <template v-slot:body-cell-Id="props">
          <q-td :props="props">
            <q-btn flat size="xs" @click="editVisitor(props.row)" icon="edit" color="accent" style="font-weight:400"
              label="编辑" />
            <q-btn flat size="xs" @click="getDetail(props.row)" icon="iconfont icon-View" color="accent"
              style="font-weight:400" label="详情" />
            <q-btn flat size="xs" @click="getAppointment(props.row)" icon="iconfont icon-ziyuan1" 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>
    <visitor-form v-if="isShowVisitor" :save-obj="visitObjOption" @close="closeVisitorForm" @success="refreshPage">
    </visitor-form>
    <schedulFanke v-if="isShowDetail" @close="closeDetail" :save-obj="sendObj"></schedulFanke>
    <appoint-form v-if="isShowFangke" :save-obj="visitObjOption" @close="closeAppoint"  @success="refreshPage"></appoint-form>
  </div>
</template>

<script>
  import {
    queryVisitorPage,
  } from '../../api/scheduling/schedu'
  import schedulFanke from '../../components/schedul/schedul-fanke'
  import visitorForm from '../../components/schedul/visitor-form'
  import appointForm from '../../components/schedul/appoint-form'
  export default {
    meta: {
      title: "试听学员名单"
    },
    components: {
      schedulFanke,
      visitorForm,
      appointForm
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          IsQueryAll:1,
          QReserveClassIds:"",
          KeyWords: "",
        },
        name:"",
        date:"",
        pageCount: 0,
        dataList: [],
        loading: false,
        columns: [{
            name: 'Name',
            label: '姓名',
            required: true,
            field: 'Name',
            align: 'left'
          },
           {
            name: 'Age',
            field: 'Age',
            label: '年龄',
            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,
        isShowVisitor: false,
        visitObjOption: null,
        isShowFangke: false, //是否显示填写预约
      }
    },
    mounted() {
      this.getList();
    },
    created() {
        if(this.$route.query.classId){
            this.msg.QReserveClassIds=this.$route.query.classId
        }
        if(this.$route.query.name){
            this.name=this.$route.query.name
        }
        if(this.$route.query.date){
            this.date=this.$route.query.date
        }
    },
    methods: {
      //新增访客
      editVisitor(obj) {
        if (obj) {
          this.visitObjOption = obj;
        } else {
          this.visitObjOption = null;
        }
        this.isShowVisitor = true;
      },
      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.getList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //过滤备注显示
      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;
      },
      //关闭访客弹窗
      closeVisitorForm() {
        this.isShowVisitor = false;
        this.isShowDetail = false;
      },
      //刷新页面
      refreshPage() {
        this.isShowVisitor = false;
        this.isShowDetail = false;
        this.getList();
      },
      //打开约课
      getAppointment(item) {
        this.visitObjOption=item;
        this.isShowFangke = true;
      },
      closeAppoint() {
        this.isShowFangke = 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>
