<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>
          <div class="col-2 q-table__title">访客管理</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="props">
          <q-tr :props="props">
            <q-td key="Name" :props="props">
              <span style="color:#2961FE;cursor:pointer;" @click="getDetail(props.row)">{{props.row.Name}}</span>
            </q-td>
            <q-td key="Age" :props="props">
              {{props.row.Age}}
            </q-td>
            <q-td key="Tel" :props="props">
              {{props.row.Tel}}
            </q-td>
            <q-td key="WeChatNum" :props="props">
              {{props.row.WeChatNum}}
            </q-td>
            <q-td key="CourseName" :props="props">
              {{props.row.CourseName}}
            </q-td>
            <q-td key="StudyTime" :props="props">
              {{props.row.StudyTime}}
            </q-td>
            <q-td key="LevelType" :props="props">
              {{props.row.LevelType}}
            </q-td>
            <q-td key="CreateByName" :props="props">
              {{props.row.CreateByName}}
            </q-td>
            <q-td key="VisitorStatus" :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>
            <q-td key="Evaluate" :props="props">
              {{props.row.Evaluate}}
            </q-td>
            <q-td key="CreateTimeStr" :props="props">
              {{props.row.CreateTimeStr}}
            </q-td>
            <q-td key="VisitTimes" :props="props">
              {{props.row.VisitTimes}}
            </q-td>
            <q-td key="Id" :props="props">
              <q-btn flat size="xs" @click="editVisitor(props.row)" icon="edit" color="accent" style="font-weight:400"
                label="编辑" />
              <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left: 10px">
                <q-list>
                  <q-item clickable v-close-popup @click="editorEmployee(props.row)">
                    <q-item-section>
                      <q-item-label>修改业务员</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="getAppointment(props.row)">
                    <q-item-section>
                      <q-item-label>申请约课</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="getDetail(props.row)">
                    <q-item-section>
                      <q-item-label>详情</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </q-td>
          </q-tr>
          <q-tr :props="props">
            <q-td colspan="100%" class="bg-grey-2">
              <div class="flex row items-start">
                <q-badge color="negative" class="q-mr-md">
                  备注
                </q-badge>
                <div v-html="props.row.Remark" class="text-left col"></div>
              </div>
            </q-td>
          </q-tr>
        </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>
    <visitorcreate-form v-if="isShowVisitorCreate" :save-obj="visitObjOption" @close="closeVisitorForm"
      @success="refreshPage">
    </visitorcreate-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 {
    getVisitorAllPageList,
  } from '../../api/stuMan/index'
  import schedulFanke from '../../components/schedul/schedul-fanke'
  import visitorForm from '../../components/schedul/visitor-form'
  import visitorcreateForm from '../../components/schedul/visitorcreate-form'
  import appointForm from '../../components/schedul/appoint-form'
  export default {
    meta: {
      title: "访客管理"
    },
    components: {
      schedulFanke,
      visitorForm,
      appointForm,
      visitorcreateForm
    },
    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: 'Id',
            label: '操作',
          }
        ],
        sendObj: {},
        isShowDetail: false, //是否显示详情
        isShowVisitor: false, //是否显示修改访客弹窗
        isShowVisitorCreate: false, //是否显示修改业务员弹窗
        visitObjOption: null,
        isShowFangke: false, //是否显示填写预约
      }
    },
    mounted() {
      this.getList();
    },
    created() {

    },
    methods: {
      //新增访客
      editVisitor(obj) {
        if (obj) {
          this.visitObjOption = obj;
        } else {
          this.visitObjOption = null;
        }
        this.isShowVisitor = true;
      },
      //显示修改业务员弹窗
      editorEmployee(obj) {
        if (obj) {
          this.visitObjOption = obj;
        } else {
          this.visitObjOption = null;
        }
        this.isShowVisitorCreate = true;
      },
      getList() {
        this.loading = true;
        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;
        }
      },
      //获取详情
      getDetail(obj) {
        this.sendObj = obj;
        this.isShowDetail = true;
      },
      //关闭
      closeDetail() {
        this.isShowDetail = false;
      },
      //关闭访客弹窗
      closeVisitorForm() {
        this.isShowVisitor = false;
        this.isShowVisitorCreate = false;
        this.isShowDetail = false;
      },
      //刷新页面
      refreshPage() {
        this.isShowVisitor = false;
        this.isShowDetail = false;
        this.isShowVisitorCreate = 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>