<template>
  <div class="page-body visitorRecord">
    <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 class="col-3">
          <q-select @input="resetSearch" standout="bg-primary text-white" option-value="Id" clearable
            option-label="EmployeeName" v-model="msg.CreateBy" :options="EmployeeList" emit-value map-options
            label="业务员" use-input @filter="filterFn2" />
        </div>
        <div class="col-3">
          <q-field filled>
             <template v-slot:control>
              <el-date-picker v-model="dateList2" @change="resetSearch()" value-format="yyyy-MM-dd" type="daterange" style="border:none;"
                :picker-options="option"  range-separator="至"  start-placeholder="开班开始时间"  end-placeholder="开班结束时间">
                 </el-date-picker>       
            </template>
          </q-field>
        </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-Name="props">
          <q-td>
            <span style="color:#2961FE;cursor:pointer;" @click="getDetail(props.row)">{{props.row.Name}}</span>
          </q-td>
        </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: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 {
    getVisitorAllPageList,
  } from '../../api/stuMan/index'
  import {
    queryEmployee
  } from '../../api/users/user';
  import schedulFanke from '../../components/schedul/schedul-fanke'

  export default {
    meta: {
      title: "访问记录"
    },
    components: {
      schedulFanke
    },

    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          KeyWords: "",
          CreateBy: '',
          StartTime: '',
          EndTime: '',
        },
        pageCount: 0,
        dataList: [],
        dateList2: [],
        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'
          },

        ],
        option: {
          disabledDate: (time) => {
            return time.getTime() > Date.now()
          }
        },
        EmployeeList: [], //业务员
        AllemployeeList: [],
        isShowDetail:false,
        sendObj: {},
      }
    },
    mounted() {
      this.getList();
      this.getEmployee()
    },
    created() {

    },
    methods: {
      //关闭
      closeDetail() {
        this.isShowDetail = false;
      },
      //获取详情
      getDetail(obj) {
        this.sendObj = obj;
        this.isShowDetail = true;
      },
      getList() {
        this.loading = true;
        if (this.dateList2 && this.dateList2.length > 0) {
          this.msg.StartTime = this.dateList2[0];
          this.msg.EndTime = this.dateList2[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        getVisitorAllPageList(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;
        }
      },
      //业务员
      getEmployee(id) {
        var qMsg = {
          Dept_Id: 0
        }
        qMsg.Dept_Id = id;
        queryEmployee(qMsg).then(res => {
          if (res.Code == 1) {
            this.EmployeeList = res.Data;
            let obj = {
              Id: "",
              EmployeeName: "不限"
            }
            this.EmployeeList.unshift(obj)
            this.AllemployeeList = JSON.parse(JSON.stringify(this.EmployeeList));
          }
        }).catch(() => {

        })
      },
      //筛选业务员
      filterFn2(val, update) {
        update(() => {
          if (val === '') {
            this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList))
          } else {
            const needle = val.toLowerCase()
            this.EmployeeList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
          }
        })
      },



    }
  }

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

  .visitorRecord .el-input {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .visitorRecord .el-input__inner {
    width: 100%;
    border: none;
    background-color: transparent;
  }

  .visitorRecord .el-range-input {
    background-color: transparent !important;
  }

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

</style>
