<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;
  }

  .addVisit .bg-accent {
    font-size: 12px !important;
    border-radius: 10px;
    background: linear-gradient(90deg, #2966FE, #2696FF) !important;
  }

  .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">
        <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 v-model="isShowVform" placement="left" popper-class="scheduVipop" width="300" trigger="click">
              <div>
                <el-form label-width="70px" style="margin-top:10px;" class="visit_FORM">
                  <el-form-item label="姓名">
                    <el-input v-model="addMsg.Name" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="电话">
                    <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="兴趣课程">
                    <el-input v-model="addMsg.CourseName" placeholder="请输入兴趣课程"></el-input>
                  </el-form-item>
                  <el-form-item label="学习时间">
                    <el-input v-model="addMsg.StudyTime" placeholder="请输入学习时间"></el-input>
                  </el-form-item>
                  <el-form-item label="当前水平">
                    <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="状态">
                    <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.Name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="意向评估">
                    <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="isShowVform=!isShowVform,SaveVisitor()"
                  style="float:right;margin-bottom:10px;" label="保存" />
              </div>
              <q-btn color="accent" slot="reference" size="sm" icon="add" @click="clearAddMsg" label="添加访客" />
            </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: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="70px" style="margin-top:10px;" class="visit_FORM">
                  <el-form-item label="姓名">
                    <el-input v-model="addMsg.Name" placeholder="请输入姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="电话">
                    <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="兴趣课程">
                    <el-input v-model="addMsg.CourseName" placeholder="请输入兴趣课程"></el-input>
                  </el-form-item>
                  <el-form-item label="学习时间">
                    <el-input v-model="addMsg.StudyTime" placeholder="请输入学习时间"></el-input>
                  </el-form-item>
                  <el-form-item label="当前水平">
                    <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="状态">
                    <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.Name">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="意向评估">
                    <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="SaveVisitor()" style="float:right;margin-bottom:10px;"
                  label="保存" />
              </div>
              <q-btn flat size="xs" icon="edit" slot="reference" @click="SetVisitor(props.row.Id)" color="accent"
                style="font-weight:400" label="编辑" />
            </el-popover>
          </q-td>
        </template>
      </q-table>
    </div>
  </div>
</template>
<script>
  import {
    queryVisitorPage,
    queryVisitor,
    updateVisitor,
    setVisitor,
  } from '../../api/scheduling/schedu'
  import {
    getGuestBasicsEnumList
  } from '../../api/sale/sale'

  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    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: [], //日语基础列表
        isShowBtn: true, //默认显示新增名单
        msg: {
          pageIndex: 1,
          pageSize: 5,
          rowsPerPage: 5,
          PlanId: 0,
          KeyWords: "",
        },
        addMsg: {
          Id: 0, //编号
          Name: "", //姓名
          Tel: "", //电话
          WeChatNum: "", //微信号
          CourseName: "", //兴趣课程
          StudyTime: "", //学习时间
          LevelType: "", //当前水平
          PlanId: 0, //值班编号
          VisitorStatus:1, //状态
          Evaluate:'', //意向评估
          Remark:'' //备注
        },
        statusMsg: {
          Id: 0, //编号
          VisitorStatus: 0, //访客状态(1-正常，2-贵宾，3-黑名单)
          Evaluate: "", //意向评估
          Remark: "", //备注
        },
        statusList: [{
          Id: 1,
          Name: '正常'
        }, {
          Id: 2,
          Name: '贵宾'
        }, {
          Id: 3,
          Name: '黑名单'
        }],
        SearchKey: '', //搜索条件
        isShowVform: false,
        isShowVedit: false,
      }
    },
    created() {
      this.msg.PlanId=this.saveObj.Id;
      this.getGuestBasics();
    },
    mounted() {
      
      this.getVisitoryPage();
    },
    methods: {
      //日语基础枚举
      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
        })
      },
      //新增修改访客
      SetVisitor(Id) {
        if (Id > 0) {
          queryVisitor({
            Id: Id
          }).then(res => {
            if (res.Code == 1) {
              var tempData = res.Data;
              console.log(tempData,'tempData');
              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.addMsg.PlanId = 0;
      },
      //保存
      SaveVisitor() {
        this.addMsg.PlanId = this.saveObj.Id;
        setVisitor(this.addMsg).then(res => {
          this.$refs.fkdj.click();
          this.isShowVform = false;
          this.getVisitoryPage();
          this.clearAddMsg();
        })
      },
      //修改访客状态
      setVisitorStatus() {
        updateVisitor(this.statusMsg).then(res => {
          console.log(res);
        })
      }
    }
  }

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

</style>
