<style>
  .schedulVisit {
    min-height: calc(100% - 30px);
    padding: 15px;
    margin-top: 30px;
    border-radius: 8px;
    background: #fff;
  }

  .schedulVisit .fangkeTitle {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
  }

  .schedulVisit .fangkeNumb {
    display: inline-block;
    background-color: #BCCEFD;
    color: #2966FE;
    font-size: 15px;
    border-radius: 6px;
    text-align: center;
    line-height: 22px;
    margin-left: 15px;
    padding: 0px 6px;
  }

  .schedulVisit .visit_Date {
    margin-left: 60px;
    color: #000000;
    font-size: 16px;
  }

  .schedulVisit .visit_Date i {
    color: #B4B4B4;
    margin-right: 10px;
  }

  .page-option .el-input__inner {
    background-color: #F1F3F5;
    border: 0;
    height: 34px;
    line-height: 34px;
    border-radius: 10px;
  }

  .page-option .el-input__icon {
    line-height: 34px;
  }

  .schedul_Vtable tr th {
    color: #8E8E8E;
  }

  .schedul_Vtable tr td {
    color: #2D2D2D;
  }

  .visit_FORM .el-input__inner {
    background: #F0F2F5;
    border-radius: 10px;
    height: 34px;
    line-height: 34px;
    border: 0;
  }

  .visit_FORM .el-input__icon {
    line-height: 34px;
  }

  .schedulVisit .q-table {
    padding-bottom: 5px;
  }

  .schedulVisit .q-table tbody td:before {
    background: '' !important;
  }

  .schedulVisit .q-table tbody tr:hover {
    box-shadow: 0px 2px 20px 0px #E4E7FB;
    background: #fff;
    border-radius: 16px
  }

  .schedulVisit .q-table tbody td:before {
    background: transparent !important;
  }

  .scheduVipop .el-textarea__inner {
    background: #F0F2F5 !important;
    border: 0;
  }

</style>
<template>
  <div class="schedulVisit">
    <div class="page-content">
      <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat
        class="stickycreatInsertStr-column-table schedul_Vtable" separator="none" :data="data" :columns="columns"
        row-key="name" :visible-columns="visibleColumns">
        <template v-slot:top="props">
          <div class="fangkeTitle" ref="fkdj">访客登记</div>
          <span class="fangkeNumb">{{data.length}}</span>
          <div class="visit_Date">
            <i class="iconfont icon-img-rili" style=""></i>{{saveObj.PlanDate}}
          </div>
          <q-space />
          <div class="page-option" style="margin-right:20px;width:250px;">
            <el-input placeholder="姓名/电话/微信" v-model="msg.KeyWords" @input="resetSearch">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>
          <div class="page-option addVisit">
            <el-popover placement="left" popper-class="scheduVipop" width="300" trigger="click">
              <div>
                <el-form label-width="80px" :model="addMsg" ref="addMsg1" :rules="rules" style="margin-top:10px;"
                  class="visit_FORM">
                  <el-form-item label="姓名" prop="Name">
                    <el-input v-model="addMsg.Name" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" prop="Tel">
                    <el-input v-model="addMsg.Tel" placeholder="请输入电话号码"></el-input>
                  </el-form-item>
                  <el-form-item label="微信号">
                    <el-input v-model="addMsg.WeChatNum" placeholder="请输入微信号"></el-input>
                  </el-form-item>
                  <el-form-item label="兴趣课程" prop="CourseName">
                    <el-input v-model="addMsg.CourseName" placeholder="请输入兴趣课程"></el-input>
                  </el-form-item>
                  <el-form-item label="学习时间" prop="StudyTime">
                    <el-input v-model="addMsg.StudyTime" placeholder="请输入学习时间"></el-input>
                  </el-form-item>
                  <el-form-item label="当前水平" prop="LevelType">
                    <el-select v-model="addMsg.LevelType" style="width:200px;" placeholder="请选择">
                      <el-option v-for="item in GBList" :key="item.Id" :label="item.Name" :value="item.Name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="状态" prop="VisitorStatus">
                    <el-select v-model="addMsg.VisitorStatus" style="width:200px;" placeholder="请选择">
                      <el-option v-for="item in statusList" :key="item.Id" :label="item.Name" :value="item.Id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="意向评估" prop="Evaluate">
                    <el-input v-model="addMsg.Evaluate" placeholder="请输入意向评估"></el-input>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input type="textarea" v-model="addMsg.Remark" :rows="4" placeholder="请输入备注"></el-input>
                  </el-form-item>
                </el-form>
                <q-btn color="accent" size="sm" @click="submitForm('addMsg1')" style="float:right;margin-bottom:10px;"
                  label="保存" />
              </div>
              <q-btn color="accent" slot="reference" size="sm" icon="add" @click="clearAddMsg" label="添加访客"
                v-if="DutyAuthObj.isShowAdd" />
            </el-popover>
          </div>
        </template>
        <template v-slot:body-cell-VisitTimes="props">
          <q-td :props="props">
            <span>{{props.row.VisitTimes==0?'首次':props.row.VisitTimes}}</span>
          </q-td>
        </template>
        <template v-slot:body-cell-VisitorStatus="props">
          <q-td :props="props">
            <img v-if="props.row.VisitorStatus==1" src="../../assets/images/normal.png" />
            <img v-if="props.row.VisitorStatus==2" src="../../assets/images/vip.png" />
            <img v-if="props.row.VisitorStatus==3" 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>
        <template v-slot:body-cell-optioned="props">
          <q-td :props="props">
            <el-popover placement="left" popper-class="scheduVipop" width="300" ref="popover2" trigger="click">
              <div>
                <el-form label-width="80px" :model="addMsg" ref="addMsg2" :rules="rules" style="margin-top:10px;"
                  class="visit_FORM">
                  <el-form-item label="姓名" prop="Name">
                    <el-input v-model="addMsg.Name" placeholder="请输入姓名" maxlength="50"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" prop="Tel">
                    <el-input v-model="addMsg.Tel" placeholder="请输入电话号码" maxlength="50"></el-input>
                  </el-form-item>
                  <el-form-item label="微信号">
                    <el-input v-model="addMsg.WeChatNum" placeholder="请输入微信号" maxlength="50"></el-input>
                  </el-form-item>
                  <el-form-item label="兴趣课程" prop="CourseName">
                    <el-input v-model="addMsg.CourseName" placeholder="请输入兴趣课程" maxlength="50"></el-input>
                  </el-form-item>
                  <el-form-item label="学习时间" prop="StudyTime">
                    <el-input v-model="addMsg.StudyTime" placeholder="请输入学习时间" maxlength="100"></el-input>
                  </el-form-item>
                  <el-form-item label="当前水平" prop="LevelType">
                    <el-select v-model="addMsg.LevelType" style="width:200px;" placeholder="请选择">
                      <el-option v-for="item in GBList" :key="item.Name" :label="item.Name" :value="item.Name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="状态" prop="VisitorStatus">
                    <el-select v-model="addMsg.VisitorStatus" style="width:200px;" placeholder="请选择">
                      <el-option v-for="item in statusList" :key="item.Id" :value="item.Id" :label="item.Name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="意向评估" prop="Evaluate">
                    <el-input v-model="addMsg.Evaluate" placeholder="请输入意向评估" maxlength="500"></el-input>
                  </el-form-item>
                  <el-form-item label="备注">
                    <el-input type="textarea" v-model="addMsg.Remark" :rows="4" placeholder="请输入备注" maxlength="500">
                    </el-input>
                  </el-form-item>
                </el-form>
                <q-btn color="accent" size="sm" @click="submitForm2('addMsg2')" style="float:right;margin-bottom:10px;"
                  label="保存" />
              </div>
              <q-btn flat size="xs" icon="edit" slot="reference" @click="EditVisitor(props.row.Id)" color="accent"
                style="font-weight:400" label="编辑" v-if="DutyAuthObj.isShowEdit" />
            </el-popover>
            <q-btn flat size="xs" @click="getDetail(props.row)" icon="iconfont icon-View" color="accent" style="font-weight:400" label="详情" />
          </q-td>
        </template>
      </q-table>
    </div>
    <schedulFanke v-if="isShowDetail" @close="closeDetail" :save-obj="sendObj"></schedulFanke>
  </div>
</template>
<script>
  import {
    queryVisitorPage,
    queryVisitor,
    updateVisitor,
    setVisitor,
  } from '../../api/scheduling/schedu'
  import {
    getGuestBasicsEnumList
  } from '../../api/sale/sale'
  import schedulFanke from '../schedul/schedul-fanke'

  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      authObj: {
        type: Object,
        default: null
      }
    },
    components: {
      schedulFanke
    },
    data() {
      return {
        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: 'VisitTimes',
            label: '到访次数',
            field: 'VisitTimes',
            align: 'left'
          },
          {
            name: 'Remark',
            label: '备注',
            field: 'Remark',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
          }
        ],
        data: [],
        loading: true,
        pageCount: 0,
        GBList: [], //日语基础列表
        msg: {
          pageIndex: 1,
          pageSize: 5,
          rowsPerPage: 5,
          PlanId: 0,
          KeyWords: "",
        },
        addMsg: {
          Id: 0, //编号
          Name: "", //姓名
          Tel: "", //电话
          WeChatNum: "", //微信号
          CourseName: "", //兴趣课程
          StudyTime: "", //学习时间
          LevelType: "", //当前水平
          PlanId: 0, //值班编号
          VisitorStatus: '', //状态
          Evaluate: '', //意向评估
          Remark: '' //备注
        },
        statusList: [{
          Id: 1,
          Name: '正常'
        }, {
          Id: 2,
          Name: '贵宾'
        }, {
          Id: 3,
          Name: '黑名单'
        }],
        SearchKey: '', //搜索条件
        isShowVform: false,
        isShowVedit: false,
        //权限显示对象
        DutyAuthObj: {
          isShowAdd: true, //是否显示新增按钮【默认显示】
          isShowEdit: true, //是否显示编辑按钮【默认显示】
        },
        //表格可见列
        visibleColumns: [
          'Name', 'Tel', 'WeChatNum', 'CourseName', 'StudyTime', "LevelType",
          "CreateByName", "VisitorStatus", "Evaluate", 'VisitTimes', 'Remark', 'optioned'
        ], //可见列

        rules: { //表单必填验证
          Name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          Tel: [{
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          }],
          CourseName: [{
            required: true,
            message: '请输入兴趣课程',
            trigger: 'blur'
          }],
          StudyTime: [{
            required: true,
            message: '请输入学习时间',
            trigger: 'blur'
          }],
          LevelType: [{
            required: true,
            message: '请选择当前水平',
            trigger: 'change'
          }],
          VisitorStatus: [{
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }],
          Evaluate: [{
            required: true,
            message: '请输入意向评估',
            trigger: 'blur'
          }]
        },
        sendObj:{},
        isShowDetail:false

      }
    },
    watch: {
      //有默认值
      authObj: {
        handler(newValue) {
          this.initAuth();
        },
        immediate: true
      },
    },
    created() {

    },
    mounted() {
      this.msg.PlanId = this.saveObj.Id;
      this.getGuestBasics();
      this.initAuth()
      this.getVisitoryPage();
    },
    methods: {
      submitForm(addMsg1) { //提交创建、修改表单
        this.$refs[addMsg1].validate((valid) => {
          if (valid) {
            this.SaveVisitor();
          } else {
            return false;
          }
        });
      },
      submitForm2(addMsg2){
        this.$refs[addMsg2].validate((valid) => {
          if (valid) {
            this.SaveVisitor();
          } else {
            return false;
          }
        });

      },
      //初始化权限信息
      initAuth() {
        if (this.authObj) {
          if (this.authObj.isShowAdd != null && !this.authObj.isShowAdd) {
            this.DutyAuthObj.isShowAdd = this.authObj.isShowAdd;
          }
          if (this.authObj.isShowEdit != null && !this.authObj.isShowEdit) {
            this.DutyAuthObj.isShowEdit = this.authObj.isShowEdit;
          }
        }
        if (!this.DutyAuthObj.isShowEdit) {
          this.visibleColumns.splice(this.visibleColumns.length - 1, 1);
        }
      },
      //日语基础枚举
      getGuestBasics() {
        getGuestBasicsEnumList({}).then(res => {
          if (res.Code == 1) {
            this.GBList = res.Data;
          }
        });
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getVisitoryPage();
      },
      //翻页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getVisitoryPage()
      },
      //获取访客列表
      getVisitoryPage() {
        this.loading = true;
        queryVisitorPage(this.msg).then(res => {
          this.loading = false
          this.data = res.Data.PageData;
          this.pageCount = res.Data.PageCount;
        }).catch(() => {
          this.loading = false
        })
      },
      //新增修改访客
      EditVisitor(Id) {
        if (Id > 0) {
          queryVisitor({
            Id: Id
          }).then(res => {
            if (res.Code == 1) {
              var tempData = res.Data;
              if (tempData) {
                this.addMsg.Id = tempData.Id;
                this.addMsg.Name = tempData.Name;
                this.addMsg.Tel = tempData.Tel;
                this.addMsg.WeChatNum = tempData.WeChatNum;
                this.addMsg.CourseName = tempData.CourseName;
                this.addMsg.StudyTime = tempData.StudyTime;
                this.addMsg.LevelType = tempData.LevelType;
                this.addMsg.PlanId = tempData.PlanId;
                this.addMsg.VisitorStatus = tempData.VisitorStatus;
                this.addMsg.Evaluate = tempData.Evaluate;
                this.addMsg.Remark = tempData.Remark;
              }
            }
          })
        } else {
          this.clearAddMsg();
        }
      },
      clearAddMsg() {
        this.addMsg.Id = 0;
        this.addMsg.Name = "";
        this.addMsg.Tel = "";
        this.addMsg.WeChatNum = "";
        this.addMsg.CourseName = "";
        this.addMsg.StudyTime = "";
        this.addMsg.LevelType = "";
        this.msg.PlanId = this.saveObj.Id;
        this.addMsg.VisitorStatus = '';
        this.addMsg.Evaluate = "";
        this.addMsg.Remark = "";
        this.$refs.addMsg1.resetFields(); 
      },
      //保存
      SaveVisitor() {
        this.addMsg.PlanId = this.saveObj.Id;
        setVisitor(this.addMsg).then(res => {
          this.$refs.fkdj.click();
          this.isShowVform = false;
          this.getVisitoryPage();
          this.clearAddMsg();
          this.$refs.addMsg1.resetFields(); 
          this.$refs.addMsg2.resetFields(); 
        })
      },
      //过滤备注显示
      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 lang="sass">
  @import url('~assets/css/table.sass')

</style>
