<template>
  <div class="page-body MainPlan xg">
    <div class="col row wrap q-col-gutter-md">
      <div class="col-2" style="width: 13%">
        <el-date-picker v-model="msg.StartTime" type="date" value-format="yyyy-MM-dd" placeholder="开始日期" size="small"
          style="width: 100%" @change="refreshPage()" :picker-options="picker" :clearable="false">
        </el-date-picker>
      </div>
      <div class="col-2" style="width: 13%">
        <el-date-picker v-model="msg.EndTime" type="date" value-format="yyyy-MM-dd" placeholder="结束日期" size="small"
          style="width: 100%" @change="refreshPage()" clear-icon="iconfont icon-guanbi" :picker-options="pickerEnd">
        </el-date-picker>
      </div>
      <div class="col-2">
        <q-btn color="accent" size="sm" class="q-mr-md" label="下载" @click="DownLoadPlanAppointmentStatic()" />
        <q-btn color="accent" size="sm" class="q-mr-md" label="新增" @click="ShowAddForm" />
      </div>
    </div>
    <stuAppointmentList :tableData="tableData" @chang="getPlanAppointmentList" @refresh="refreshPage"
      v-loading="loading"></stuAppointmentList>
    <appointmentForm v-if="isShowAddForm" :setingObj="setingObj" @refresh="refreshPage"></appointmentForm>
  </div>
</template>

<script>
  import {
    queryPlanAppointmentStatic,
  } from "../../api/stuMan/index";

  import {
    EduDownLoad
  } from "../../api/common/common";
  import stuAppointmentList from "./components/stuAppointmentList";
  import appointmentForm from "./components/appointmentForm";
  export default {
    meta: {
      title: "学员预约统计",
    },
    components: {
      stuAppointmentList,
      appointmentForm,
    },
    data() {
      return {
        persistent: false,
        loading: false,
        //是否显示新增弹窗
        isShowAddForm: false,
        msg: {
          StartTime: "",
          EndTime: "",
        },
        tableData: [], //表格数据
        picker: {
          disabledDate: (time) => {},
        },
        pickerEnd: {
          disabledDate: (time) => {
            let startTime = this.msg.StartTime;
            if (startTime) {
              return time.getTime() <= new Date(startTime).getTime() - 8.64e7;
            } else {
              return time.getTime() < Date.now() - 8.64e7;
            }
          },
        },
        setingObj: {},
      };
    },
    created() {
      let date = new Date();
      let today =
        date.getFullYear() + "-" +
        (date.getMonth() < 9 ?
          "0" + (date.getMonth() + 1) :
          date.getMonth() + 1) +
        "-" +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
      this.msg.StartTime = today;
    },
    mounted() {
      this.getPlanAppointmentList();
    },
    methods: {
      //下载学员预约信息
      DownLoadPlanAppointmentStatic() {
        var newMsg = JSON.parse(JSON.stringify(this.msg));
        this.loading = true;
        EduDownLoad("/PlanAppoiment/DownLoadPlanAppointmentStatic", newMsg, "学员预约统计.xls", res => {
          this.loading = false;
        });
      },
      refreshPage() {
        this.isShowAddForm = false;
        this.setingObj = {};
        this.getPlanAppointmentList();
      },
      //获取学员预约统计
      getPlanAppointmentList() {
        queryPlanAppointmentStatic(this.msg).then((res) => {
          if (res.Code == 1) {
            this.tableData = res.Data;
          }
        });
      },
      //线索新增弹窗
      ShowAddForm() {
        this.isShowAddForm = true;
        this.setingObj = {};
      }
    },
  };
</script>
<style lang="scss">
  .xg .el-input--prefix .el-input__inner {
    padding-left: 50px;
  }

  .yuyuezhuangtai .el-input--prefix .el-input__inner {
    padding-left: 60px;
  }
</style>