<style scoped>
  @import "../financial/css/cssReset.css";

  .baseSet_Title {
    width: 120px !important;
    padding: 18px 0 0 16px;
    text-align: right;
  }

  .singeRowTable tr th {
    border: 1px solid #d2d2d2;
  }

  .studentTracking td:first-child {
    background-color: #E6E6E6;
    position: sticky;
    left: 0px;
  }

  .studentTracking th:first-child {
    position: sticky;
    left: 0px;
  }

  .stulistNumber {
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 22px;
    border: 1px solid #2961FE;
    border-radius: 50%;
    cursor: pointer;
    color: #2961FE;
  }

  .OCourseTable {
    width: 400px;
    text-align: center;
  }

  .OCourseTable tr td {
    height: 40px;
  }

  .OCourseTable tr th {
    height: 40px;
    background-color: rgb(238, 238, 239);
  }

</style>
<template>
  <div class="page-body studentTracking">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">

        <!-- <div class="col-3">
          <q-field filled dense>
            <template v-slot:control>
            <el-date-picker v-model="msg.StartTime" type="month" value-format="yyyy-MM" placeholder="订单日期"
                  size="small" style="border:none;" @change="resetSearch" clear-icon="iconfont icon-guanbi">
              </el-date-picker>
            </template>
          </q-field>
        </div> -->

        <div class="col-2" style="width: 13%">
          <q-field filled dense>
            <el-date-picker v-model="msg.StartTime" type="month" value-format="yyyy-MM" placeholder="订单日期" size="small"
              style="width: 100%" @change="resetSearch" clear-icon="iconfont icon-guanbi">
            </el-date-picker>
          </q-field>
        </div>


      </div>
    </div>

    <div style="width: 100%;text-align: right;padding: 0 20px;margin-bottom: 10px;">
      <span @click="morequery=!morequery" style="display:inline-flex;align-items:center;cursor: pointer;">
        <q-btn color="accent" class="q-mr-md" size="sm" icon="download" label="下载" v-if="isHaveDownLoad"
          @click="downloadStudentFollow" />

      </span>
    </div>
    <div class="col row wrap q-gutter-x-md" v-if="dataList">
      <div class="col stics">
        <span class="stics-name">订单总价</span>
        <span>{{dataList.totalPrice}}</span>
      </div>
      <div class="col stics">
        <span class="stics-name">总单数</span>
        <span>{{dataList.orderNum}}</span>
      </div>
      <div class="col stics">
        <span class="stics-name">上旬总价</span>
        <span style="color: #F72E52">{{dataList.totalPriceShang}}</span>
      </div>
      <div class="col stics">
        <span class="stics-name">中旬总价</span>
        <span style="color:#2961FE;">{{dataList.totalPriceZhong}}</span>
      </div>
      <div class="col stics">
        <span class="stics-name">下旬总价</span>
        <span>{{dataList.totalPriceXia}}</span>
      </div>

      <div v-if="dataList.sourceList&&dataList.sourceList.length>0"
        v-for=" ( itemSource , indexSource ) in dataList.sourceList " :key="indexSource">

        <div class="col stics">
          <span class="stics-name">{{itemSource.CreateTypeStr}}</span>
          <span>{{itemSource.OrderNum}}单</span>
          <span>占比{{itemSource.PriceRate*100}}%</span>
        </div>

      </div>

    </div>
    <div style="width: 100%;margin-top: 20px">
      <monthStatisticslist :dataObj="dataList" @success="refreshPage" :loading="loading" ref="monthStatisticslist">
      </monthStatisticslist>

    </div>
  </div>
</template>
<script>
  import {
    GetStudentMonthList,
  } from '../../api/studyabroad/index'
  import {
    queryCourseDropdownList,
  } from '../../api/course/index'
  import {
    queryEmployee
  } from "../../api/users/user";
  import {
    queryGuestStateList,
    CreateTypeList,
    GetStuChannelList,
    GetCustomerList,
    getGuestLearningGoalsEnumList
  } from "../../api/sale/sale.js";
  import {
    queryStuStageList,
    GetStudentTypeList,
    GetPersonalDimension,
    getSchoolDropdown,
    getStudentDorpDownList
  } from "../../api/school/index";
  import {
    GetStudentAdvisorConfigList,
  } from "../../api/customerstudent/customerstudent";
  import {
    EduDownLoad
  } from "../../api/common/common";
  import monthStatisticslist from "../../components/school/student/monthStatisticslist";
  import {
    mapState
  } from "vuex";

  export default {
    meta: {
      title: "市场部学员跟踪"
    },
    components: {
      monthStatisticslist
    },
    data() {
      return {
        msg: {
          StartTime: '',
        },
        loading: false,
        dataList: null, //列表数据
      }
    },
    created() {
      let firstDay = new Date();
      var year = firstDay.getFullYear(); //年
      var month = firstDay.getMonth() + 1; //月
      this.msg.StartTime = year + '-' + month;


    },
    computed: mapState({
      //是否有下载权限
      isHaveDownLoad(state) {
        if (state.user.userInfo && state.user.userInfo.ActionMenuList && state.user.userInfo.ActionMenuList.length >
          0) {
          let action = state.user.userInfo.ActionMenuList.find(x => {
            if (x.FunctionCode == "studentTracking_download") {
              return x;
            }
          });
          return action && action.FunctionCode;
        }
        return false;
      }
    }),
    mounted() {
      this.getList(); //获取列表
    },
    methods: {

      //刷新页面
      refreshPage() {
        this.getList()
      },
      downloadStudentFollow() {
        var msg = JSON.parse(JSON.stringify(this.msg));
        this.loading = true;
        EduDownLoad(
          "/StudentStat/DownLoadStudentMonth",
          msg,
          "已报名学员.xls", res => {
            this.loading = false;
          }
        );
      },




      getRole() {
        queryEmployee({
          IsLeave: 1,
          UserRole: 2
        }).then(res => {
          this.RoleListData = res.Data;
        });
      },
      resetSearch() {

        this.getList();
      },
      getList() {
        this.loading = true;
        let msg = JSON.parse(JSON.stringify(this.msg))
        GetStudentMonthList(msg).then(res => {
            this.loading = false;
            this.dataList = res.Data;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      //获取客户类型
      getCustomTypeList() {
        GetStudentTypeList().then(res => {
          if (res.Code == 1) {
            this.customTypeList = res.Data;
          }
        })
      },
      //获取客户阶段列表
      getStuStageList() {
        queryStuStageList().then(res => {
          this.customState = res.Data;
        });
      },
      //课程的筛选
      filterFnkec(val, update) {
        update(() => {
          if (val === '') {
            this.myCourseList = this.allCourseList
          } else {
            const needle = val.toLowerCase();
            this.myCourseList = this.allCourseList.filter(v => v.CourseName.toLowerCase().indexOf(needle) > -1);
          }
        })
      },
    },
  }

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

</style>
<style scoped>
  /deep/.el-input__inner,
  /deep/.el-range-input {
    background-color: transparent;
    border: none;
  }

  .stics {
    padding: 10px 20px;
    background: #DDDEE0;
    border-radius: 4px;
    font-size: 13px;
    color: #000000;
    font-weight: bold
  }

  .stics .stics-name {
    color: #2D2D2D;
    font-weight: 600;
    margin-right: 10px
  }

  .roatImg {
    transform: rotate(180deg);
  }

</style>
