<style>
  .Sysuser_Date .el-input__inner {
    background: transparent !important;
    border: 0 !important;
  }

</style>
<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.VisitorName"
            label="客户名称" @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled stack-label option-value="TId" option-label="TeacherName"
            v-model="msg.TeacherId" :options="TeacherList" emit-value map-options label="老师" clearable />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled stack-label option-value="RoomId" option-label="RoomName"
            v-model="msg.ClassRoomId" ref="ClassRoomId" :options="ClassRoomList" label="关联教室" clearable :dense="false"
            class="col-6 q-pb-lg" emit-value map-options />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled stack-label option-value="Id" option-label="Name"
            v-model="msg.Q_ReserveStatus" ref="Q_ReserveStatus" :options="statusList" label="状态" clearable
            :dense="false" class="col-6 q-pb-lg" emit-value map-options />
        </div>
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="msg.Id" label="预约编号"
            @clear="resetSearch" maxlength="20" />
        </div>
        <div class="col-4">
          <div class="col-4 Sysuser_Date">
            <q-field filled>
               <template v-slot:control>
                <el-date-picker v-model="msg.StartClassDate" value-format="yyyy-MM-dd" type="date" placeholder="开始时间"
                  size="small" style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>至
                <el-date-picker v-model="msg.EndClassDate" value-format="yyyy-MM-dd" type="date" placeholder="结束时间"
                  size="small" style="width:47%;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
                </el-date-picker>
              </template>
            </q-field>
          </div>
        </div>
      </div>
    </div>
    <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-ClassTime="props">
        <q-td :props="props">
          {{props.row.ClassTime}}-{{props.row.EndTime}}
        </q-td>
      </template>
      <template v-slot:body-cell-OrderId="props">
        <q-td :props="props">
          <template v-if="props.row.OrderId && props.row.OrderId>0">
            <span style="color:blue;cursor:pointer"
              @click="goOrderStatistics(props.row.OrderId)">{{props.row.OrderId}}</span>
          </template>
        </q-td>
      </template>
      <template v-slot:body-cell-ClassContent="props">
        <q-td :props="props">
          <div style="min-width: 150px;word-break: break-word;white-space: normal;">
            {{props.row.ClassContent}}
          </div>
        </q-td>
      </template>
      <template v-slot:body-cell-ReserveStatusStr="props">
        <q-td :props="props">
          <template v-if="props.row.ReserveStatus==0">
            {{props.row.ReserveStatusStr}}
          </template>
          <template v-if="props.row.ReserveStatus==1">
            <span style="color:green;cursor:pointer;"> {{props.row.ReserveStatusStr}}</span>
          </template>
          <template v-if="props.row.ReserveStatus==2">
            <span style="color:#ff00ff;cursor:pointer;"> {{props.row.ReserveStatusStr}}</span>
              <q-tooltip :offset="[10, 10]">
                 {{props.row.Remark}}
               </q-tooltip>
          </template>
          <template v-if="props.row.ReserveStatus==3">
            <span style="color:red;cursor:pointer;"> {{props.row.ReserveStatusStr}}</span>
              <q-tooltip :offset="[10, 10]">
                 {{props.row.Remark}}
            </q-tooltip>
          </template>
        </q-td>
      </template>
      <template v-slot:body-cell-Id="props">
        <q-td :props="props">
          <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" v-if="props.row.ReserveStatus!=1" icon="delete" color="negative"
            style="font-weight:400;" label="删除" @click="deleteAppoint(props.row)" />
          <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left:10px;"
            v-if="props.row.ReserveStatus==0">
            <q-list>
              <q-item clickable v-close-popup @click="ExchangeOrder(props.row)">
                <q-item-section>
                  <q-item-label>转订单</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="OperateVitior(props.row,2)">
                <q-item-section>
                  <q-item-label>流单</q-item-label>
                </q-item-section>
              </q-item>
              <q-item clickable v-close-popup @click="OperateVitior(props.row,3)">
                <q-item-section>
                  <q-item-label>取消</q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </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>
    <yuekeForm v-if="isShowYue" :ChoiceType="ChoiceType" :save-obj="visitorItem" @close="closeVisitorForm"
      @success="refreshPage"></yuekeForm>
    <exorderForm v-if="isShowExOrder" :save-obj="visitorItem" @close="closeVisitorForm" @success="refreshPage">
    </exorderForm>
    <appodetailForm v-if="isShowDetail" :save-obj="visitorItem" @close="closeVisitorForm"></appodetailForm>
  </div>
</template>

<script>
  import {
    queryVisitorReservePage,
    RemoveVisitorReserve
  } from '../../api/scheduling/schedu'
  import {
    getTeacherDropDownList,
    queryClassRoomList
  } from "../../api/school/index";
  import yuekeForm from '../../components/schedul/yueke-form'
  import exorderForm from '../../components/schedul/exorder-form'
  import appodetailForm from '../../components/schedul/appodetail-form'
  export default {
    meta: {
      title: "我的约课"
    },
    components: {
      yuekeForm,
      exorderForm,
      appodetailForm
    },
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          StartClassDate: "", //开始日期
          EndClassDate: "", //结束日期
          TeacherId: "",
          ClassRoomId: "",
          Q_ReserveStatus: "", //状态
          VisitorName: "", //客户名称
          Id: "",
        },
        dataList: [],
        loading: false,
        PageCount: 0,
        columns: [{
            name: 'VisitorName',
            label: '客户名称',
            field: 'VisitorName',
            align: 'left'
          },
          {
            name: 'ClassDateStr',
            label: '日期',
            field: 'ClassDateStr',
            align: 'left'
          },
          {
            name: 'ClassTime',
            label: '约课时间',
            field: 'ClassTime',
            align: 'left'
          },
          {
            name: 'TeacherName',
            label: '老师',
            field: 'TeacherName',
            align: 'left'
          },
          {
            name: 'RoomName',
            label: '教室',
            field: 'RoomName',
            align: 'left'
          },
          {
            name: 'ClassContent',
            label: '主讲内容',
            field: 'ClassContent',
            align: 'left'
          },
          {
            name: 'ReserveStatusStr',
            label: '状态',
            field: 'ReserveStatusStr',
            align: 'left'
          },
          {
            name: 'OrderId',
            label: '订单编号',
            field: 'OrderId',
            align: 'left'
          },
          {
            name: 'Id',
            label: '操作',
            field: 'Id'
          }
        ],
        TeacherList: [],
        ClassRoomList: [],
        statusList: [{
            Id: 0,
            Name: "跟进中"
          },
          {
            Id: 1,
            Name: "成交"
          },
          {
            Id: 2,
            Name: "流单"
          },
          {
            Id: 3,
            Name: "取消"
          },
        ],
        isShowYue: false,
        ChoiceType: 0,
        visitorItem: {}, //选中的对象
        isShowExOrder: false,

        isShowDetail: false //显示详情
      }
    },
    created() {
      if (this.$route.query.Id) {
        this.msg.Id = this.$route.query.Id;
      }
      this.GetTeacherList();
      this.getClassRoomList();
    },
    mounted() {
      let nowDay = new Date();
      var year = nowDay.getFullYear(); //年
      var month = nowDay.getMonth() + 1; //月
      var day = nowDay.getDate(); //日
      this.msg.StartClassDate = year + '-' + month + '-' + day;

      this.getList()
    },
    methods: {
      //获取教师下拉
      GetTeacherList() {
        getTeacherDropDownList({}).then(res => {
          if (res.Code == 1) {
            this.TeacherList = res.Data;
          }
        });
      },
      //获取教室下拉
      getClassRoomList() {
        queryClassRoomList({}).then(res => {
          if (res.Code == 1) {
            this.ClassRoomList = res.Data;
          }
        })
      },
      //重新查询
      resetSearch() {
        this.msg.pageIndex = 1;
        this.getList();
      },
      changePage(val) {
        this.msg.pageIndex = val;
        this.getList()
      },
      //获取课程系列分页列表
      getList() {
        queryVisitorReservePage(this.msg).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.PageCount = res.Data.PageCount;
          }
        })
      },
      //预约操作按钮
      OperateVitior(item, type) {
        this.ChoiceType = type;
        this.isShowYue = true;
        this.visitorItem = item;
      },
      //关闭弹窗
      closeVisitorForm() {
        this.isShowYue = false;
        this.isShowExOrder = false;
        this.isShowDetail = false;
      },

      //刷新页面
      refreshPage() {
        this.isShowYue = false;
        this.isShowExOrder = false;
        this.isShowDetail = false;
        this.getList();
      },
      ExchangeOrder(item) {
        this.visitorItem = item;
        this.isShowExOrder = true;
      },
      //查看详情
      getDetail(item) {
        this.visitorItem = item;
        this.isShowDetail = true;
      },
      //跳转到报名统计
      goOrderStatistics(id) {
        this.OpenNewUrl("/sale/orderStatistics", {
          OrderId: id
        });
      },
      //删除约课管理
      deleteAppoint(item) {
        let delMsg = {
          Id: item.Id
        };
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除约课信息？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          RemoveVisitorReserve(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '删除成功！',
                position: 'top'
              })
              this.getList();
            }
          })
        }).onCancel(() => {

        });
      }
    }
  }

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

</style>
