<template>
  <div class="box">
    <div class="select_top">
      <div class="right">
        <div class="s_t_time ">

          <!-- 综合成绩区间 -->
          <span class="select_item_score">综合成绩区间
            <el-input clearable :min="0" :precision="0" oninput="value = value.replace(/[^\d]/g, '');if(value.length>9); value=value.slice(0,9)" type="number" v-model="queryParams.minScore" placeholder="最小成绩" style="display:inline"/>
            <span>至</span>
            <el-input clearable :min="0" :precision="0" oninput="value = value.replace(/[^\d]/g, '');if(value.length>9); value=value.slice(0,9)"
             type="number" v-model="queryParams.maxScore" placeholder="最大成绩" style="display:inline"/>
          </span>
          <!-- 批次 -->
          <span class="select_item_batch">批次
            <el-select v-model="queryParams.batchId" clearable >
              <el-option
                v-for="batch in batchList"
                :key="batch.batchId"
                :label="batch.batchName"
                :value="batch.batchId"
              ></el-option>
            </el-select>
          </span>
          
          <!-- 学校 -->
          <span class="select_item_school">学校
            <el-select v-model="queryParams.schoolId" clearable >
              <el-option
                v-for="school in schoolList"
                :key="school.schoolId"
                :label="school.schoolName"
                :value="school.schoolId"
              ></el-option>
            </el-select>
          </span>
          
          <!-- 时间段 -->
          <span class="select_item_dateRange">时间段
            <el-date-picker
             clearable 
              value-format="yyyy-MM-dd"
              v-model="queryParams.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </span>
          
          <el-button class="queryCircle" type="primary" icon="el-icon-search"  size="mini" @click="handleQuery" circle></el-button>
          
          <el-button class="queryCircle" icon="el-icon-refresh"  size="mini" @click="resetQuery" circle></el-button>
        </div>
      </div>
       
    </div>
   
<!-- 两个饼图 -->
    <div class="echart_box_1">
      <div class="e_1">
        <div class="title">
          <div class="t_left"><span></span>来源渠道占比</div>
          <div class="t_right">筛选条件：时间段</div>
        </div>
        <div id="echart_1" class="echart_1"></div>
      </div>
      <div class="e_3">
        <div class="title">
          <div class="t_left"><span></span>会员统计占比</div>
          <div class="t_right">筛选条件：时间段</div>
        </div>
        <div id="echart_3" class="echart_3"></div>
      </div>

      
    </div>
<!-- END两个饼图 -->
<!-- 4学校填报统计：批次、可根据成绩区间筛选各学校填报数据 -->
    <div class="echart_box_2">
      <div class="e_4">
        <div class="title">
          <div class="t_left"><span></span>学校填报统计</div>
          <div class="t_right">筛选条件：批次、时间段、综合分区间</div>
        </div>
        <div id="echart_4" class="echart_4"></div>
      </div>
    </div>
<!-- 2专业填报统计：批次、可根据成绩区间、学校筛选各专业填报数据 -->
    <div class="echart_box_2">
      

      <div class="e_2">
      
        <div class="title">
          <div class="t_left"><span></span>专业填报统计</div>
          <div class="t_right">筛选条件：批次、时间段、综合分区间、学校</div>
        </div>
        <div id="echart_2" class="echart_2"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {listMallBatch} from "@/api/mall/mallBatch";
import {listMallSchool}  from "@/api/mall/mallSchool";
import { getIntroFree, getYLife, getSchool, getMajor } from "@/api/mall/staticData";

export default {
  data() {
    return {
      //专业统计
      majorXData:undefined,
      majorYData:undefined,
      //学校统计
      schoolXData:undefined,
      schoolYData:undefined,
      //普通会员人数
      common:undefined,
      //终身会员人数
      life:undefined,
      //y 一年会员人数
      y:undefined,
      //推广渠道新增人数
      intro:undefined,
      //自由渠道新增人数
      free:undefined,
      //批次列表
      batchList:{},
      //学校列表
      schoolList:{},
      queryParams:{
        minScore:undefined,
        maxScore:undefined,
        dateRange:[],
        batchId:'',
        schoolId:'',
      },
      value1: "",
      value2: "",
     
    };
  },
  created() {
    //查批次列表
      listMallBatch().then(response =>{
        this.batchList = response.rows;
      });
    //查学校列表  
    listMallSchool().then(response =>{
        this.schoolList = response.rows;
      });

       this.getAll();
  },

  mounted() {
    this.chart_1();
    this.chart_2();
    this.chart_3();
    this.chart_4();
  },
  methods: {
     reset() {
      this.queryParams ={
        minScore:undefined,
        maxScore:undefined,
        dateRange:[],
        batchId:'',
        schoolId:'',
      };
    },
     /** 重置按钮操作 */
    resetQuery() {
      this.reset();
      this.handleQuery();
    },
    //查询
    handleQuery(){
      //验证综合成绩区间
      if(this.queryParams.minScore && this.queryParams.maxScore && this.queryParams.maxScore < this.queryParams.minScore ){
        this.$message.error('注意综合成绩区间最大最小值位置！');
      }
      // console.log("综合成绩区间"+this.queryParams.minScore+"~"+this.queryParams.maxScore
      // +"批次"+this.queryParams.batchId+"学校"+this.queryParams.schoolId+"时间段"+this.queryParams.dateRange[0]+"~"+this.queryParams.dateRange[1]);
      this.getAll();
    },
    getAll(){
      //来源渠道
      this.getEchart1();
      //会员统计
      this.getEchart3();
      //专业
      this.getEchart2();
      //学校
      // if(this.queryParams.batchId && this.queryParams.dateRange){
        this.getEchart4();
      // }
      
    },
    getEchart1(){//来源渠道
      getIntroFree(this.queryParams).then(response =>{
        if(response.data){
          this.intro = response.data.intro;
          this.free = response.data.free;
        }else{
          this.intro = null;
          this.free = null;
        }
        // console.log("渠道对比"+this.intro+"/"+this.free);
        this.chart_1();
        this.$forceUpdate();
      });
    },
    getEchart3(){//会员统计
      getYLife(this.queryParams).then(response =>{
        this.life = response.data.life;
        this.y = response.data.y;
        this.common = response.data.allN-response.data.life-response.data.y;
        // console.log("渠道对比"+this.intro+"/"+this.free);
        this.chart_3();
      });
    },
    getEchart2(){//专业
      getMajor(this.queryParams).then(response =>{
        this.majorXData = response.data.xData;
        this.majorYData = response.data.yData;
        //console.log("学校"+this.schoolXData+"/"+this.schoolYData);
        this.chart_2();
      });
    },
    getEchart4(){//学校
        getSchool(this.queryParams).then(response =>{
        this.schoolXData = response.data.xData;
        this.schoolYData = response.data.yData;
        //console.log("学校"+this.schoolXData+"/"+this.schoolYData);
        this.chart_4();
      });
    },
    //来源渠道
    chart_1() {
      
      var chartDom = document.getElementById("echart_1");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
         color: ['#f9c956', '#91cd77'],
        // title: {
        //   text: "收入类型占比",
        //   left: "10",
        // },
        legend: {
          icon: "circle",
          right: "20",
          top: "30%",
          orient: "vertical",
        },
        // grid: {
        //   left: "5%",
        //   right: "0%",
        //   bottom: "3%",
        //   containLabel: true,
        // },

        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            data: [
              { value: this.intro, name: "推广渠道" },
              { value: this.free, name: "自由渠道" }
            ],
            //标签
            label: {
              alignTo: 'none',
              formatter:'{b}\n {c}人',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 25,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#979797'
                }
              }
            },
            left: 0,
            right: "100",
            top: "50",
            bottom: 0,
          },
        ],
      };
      // request.get("/echarts/example").then(res =>{
      //   option.xAxis.data=res.data.x
      //   option.series[0].data=res.data.y
      //   myChart.setOption(option);
      // })
      myChart.setOption(option);
    },
    //专业
    chart_2() {
      var chartDom_2 = document.getElementById("echart_2");
      var myChart_2 = echarts.init(chartDom_2);
      var option;
      option = {
        color:['#f9c956'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "30%",
          left: "3%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.majorXData,
            // [
            //   "Mon",
            //   "Tue",
            //   "Wed",
            //   "Thu",
            //   "Fri",
            //   "Sat",
            //   "Sun",
            //   "15",
            //   "16",
            //   "17",
            //   "18",
            //   "155",
            // ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            barWidth: "60%",
            data: this.majorYData,
            //  [10, 52, 200, 334, 390, 330, 220, 100, 50, 48, 500, 700],
          }
        ],
      };
      myChart_2.setOption(option);
    },
    //会员统计
    chart_3() {
      // console.log("普通用户"+this.common+"/终身"+this.life + "/一年"+this.y);
      var chartDom_3 = document.getElementById("echart_3");
      var myChart_3 = echarts.init(chartDom_3);
      var option;
      option = {
        // title: {
        //   text: "客户来源占比",
        //   left: "10",
        // },
        color: ['#ffe600', '#7bbfea', '#91cd77'],
        legend: {
          icon: "circle",
          right: "20",
          top: "30%",
          orient: "vertical",
        },

        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "80%"],
            avoidLabelOverlap: false,
            data: [
              { value: this.life, name: "终身会员" },
              { value: this.y,  name: "年会员" },
              { value: this.common,  name:"普通用户"}
            ],
            //标签
            label: {
              alignTo: 'none',
              formatter:'{b}\n {c}人',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 25,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#979797'
                }
              }
            },
            left: 0,
            right: "100",
            top: "50",
            bottom: 0,
          },
        ],
      };
      myChart_3.setOption(option);
    },
    //学校
    chart_4() {
      var chartDom_4 = document.getElementById("echart_4");
      var myChart_4 = echarts.init(chartDom_4);
      var option;
     option = {
        color:['#91cd77'],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "30%",
          left: "3%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data:this.schoolXData,
            //  [
            //   "Mon",
            //   "Tue",
            //   "Wed",
            //   "Thu",
            //   "Fri",
            //   "Sat",
            //   "Sun",
            //   "15",
            //   "16",
            //   "17",
            //   "18",
            //   "155",
            // ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            barWidth: "60%",
            data: this.schoolYData,
            //[10, 52, 200, 334, 390, 330, 220, 100, 50, 48, 500, 700],
          }
        ],
      };
      myChart_4.setOption(option);
    },
  },
};
</script>

<style scoped>
.sale_1_active {
  background-color: #3b94f5 !important;
  color: #fff !important;
}
.sale_2_active {
  color: #3b94f5 !important;
}
.box {
  box-sizing: border-box;
  padding: 20px;
  background: #f8f8f8;
}
.select_top {
  margin-bottom: 20px;
  width: 100%;
  height: 40px;
  position: relative;
}
.select_top .right {
  position: absolute;
  display: flex;
  /* left: 50%;
  transform: translateX(-50%); */
  /* right:0; */
  top: 0;
}
.select_item_score{
   height: 40px;
   width:1rem;
   margin-left: 1rem;
   /* background-color: lightgray; */
}
.select_item_batch{
  height: 40px;
  margin-left: 1rem;
  /* background-color: lavenderblush; */
}
.select_item_school{
  height: 40px;
  margin-left: 1rem;
  /* background-color: lemonchiffon; */
}
.select_item_dateRange{
  height: 40px;
  margin-left: 1rem;
  /* background-color: lavender; */
}
.queryCircle{
  margin-left: 1rem;
}
.s_t_time {
  margin-left:0px;
  width:100%;
}
.s_t_time el-date-picker {
  color: red;
}
.active {
  font-weight: bolder;
  color: #3b94f5;
}
.card {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.card > div {
  margin-bottom: 20px;
  position: relative;
  width: 24%;
  height: 135px;
  overflow: hidden;
  border-radius: 10px 10px 10px 10px;
}
.c_bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.c_icon {
  position: absolute;
  left: 40px;
  top: 28px;
  width: 70px;
  height: 80px;
  z-index: 2;
}
.c_right {
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 2;
}
.content {
  z-index: 10;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 129px;
  height: 100%;
}
.c_top {
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 32px;
  color: #ffffff;
}
.c_bottom {
  font-size: 20px;
  color: #ffffff;
}
.echart_box_1 {
  margin-bottom: 20px;
}
.echart_box_2 {
  margin-bottom: 20px;
}
.echart_box_1,
.echart_box_2 {
  display: flex;
  justify-content: space-between;
}
.e_1 {
  position: relative;
  width: 45%;
  height: 316px;
  background: rgb(255, 255, 255);
  border-radius: 16px 16px 16px 16px;
}
.title {
  box-sizing: border-box;
  padding: 0 20px;
  position: absolute;
  justify-content: space-between;
  display: flex;
  width: 100%;
  top: 20px;
}
.t_left {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
  color: #3b94f5;
}
.t_left span {
  margin-right: 10px;
  width: 5px;
  height: 24px;
  background: #3b94f5;
  border-radius: 0px 0px 0px 0px;
}
.t_right {
  position: relative;
  z-index: 1000;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #333333;
}
.echart_1,
.echart_2,
.echart_3,
.echart_4 {
  width: 100%;
  height: 100%;
}
.e_2 {
  position: relative;
  width: 100%;
  height: 316px;
  background: rgb(255, 255, 255);
  border-radius: 16px 16px 16px 16px;
}
.sale_select {
  cursor: pointer;
  z-index: 1000;
  top: 15px;
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.s_s_1,
.s_s_2 {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #333;
}
.s_s_1 {
  margin-right: 67px;
}

.s_s_1 > div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 40px;
  background: #f5f7fb;
  border-radius: 4px 4px 4px 4px;
}
.s_s_2 > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 40px;
}
.s_s_2 > div > span {
  position: absolute;
  bottom: 0px;
  /* margin-top: 5px; */
  width: 30px;
  height: 2px;
  background: #3b94f5;
}
.e_3 {
  position: relative;
  width: 45%;
  height: 316px;
  background: rgb(255, 255, 255);
  border-radius: 16px 16px 16px 16px;
}
.e_4 {
  position: relative;
  width: 100%;
  height: 316px;
  background: rgb(255, 255, 255);
  border-radius: 16px 16px 16px 16px;
}

::v-deep .el-input__prefix {
  left: 100px !important;
  color: #333;
}
::v-deep .el-input__inner {
  font-size: 16px !important;
  color: #333 !important;
  width: 133px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  background-color: transparent !important;
  border: 1px solid #888888 !important;
  height: 32px !important;
}
::v-deep .el-date-editor {
  height: 32px !important;
  width: 300px !important;
}
/* 去掉 input type number 右侧 上下箭头 */
::v-deep input::-webkit-outer-spin-button,
::v-deep  input::-webkit-inner-spin-button {
        -webkit-appearance: none;
}
 ::v-deep input[type="number"]{
        -moz-appearance: textfield;
    }
 
  ::v-deep inpit{
        border: none
  }
</style>