<template>
  <div class="q-mb-lg">
    <q-card flat class="item-shadow sell">
      <div class="top">
        <div class="row flex justify-between items-center">
          <div class="flex items-center q-px-md q-pt-md q-mb-xs">
            <div class="sell-title">市场/销售</div>
          </div>
        </div>
        <VueApexCharts width="100%" height="105" :options="chartOptions" :series="series" ref="apex"
          v-if="sellBlock!==2">
        </VueApexCharts>
      </div>
      <div class="bottom flex justify-between content-between">
        <div class="sell-block" :class="{'active-sell':sellBlock==1}" @click="ckeckSell(1,'新名单','AddCount')">
          <div class="flex no-wrap justify-between items-center">
            <img src="../../assets/images/newindex/sell1.png" style="width:26px;height:26px">
            <q-btn size="sm" dense flat round icon="more_horiz">
              <q-menu auto-close>
                <div class="block-btn item-shadow" @click="showAddStu">
                  添加名单
                </div>
              </q-menu>
            </q-btn>
          </div>
          <div class="sell-num">
            {{PersionData.todayAdd}}<span class="unit">人</span>
          </div>
          <div class="flex no-wrap justify-between items-center">
            <div class="sell-name">今日新名单</div>
            <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;" v-if="getIsUp('AddCount')">
            <img src="../../assets/images/newindex/sell7.png" alt="" style="width:10px;" v-else />
          </div>
        </div>
        <div class="sell-block" :class="{'active-sell':sellBlock==2}" style="background-color:#FFF5F8"
          @click="ckeckSell(2)">
          <div class="flex no-wrap justify-between items-center">
            <img src="../../assets/images/newindex/sell2.png" style="width:26px;height:26px">
            <q-btn size="sm" dense flat round icon="more_horiz">
              <q-menu auto-close>
                <div class="block-btn item-shadow">
                  立即跟进
                </div>
              </q-menu>
            </q-btn>
          </div>
          <div class="sell-num">
            {{PersionData.notCommunicateCount}}<span class="unit">人</span>
          </div>
          <div class="flex no-wrap justify-between items-center">
            <div class="sell-name">待跟进</div>
            <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;">
          </div>
        </div>
        <div class="sell-block" :class="{'active-sell':sellBlock==3}" style="background-color:#E8FFF3"
          @click="ckeckSell(3,'到访','VisitCount')">
          <div class="flex no-wrap justify-between items-center">
            <img src="../../assets/images/newindex/sell3.png" style="width:26px;height:26px">
            <q-btn size="sm" dense flat round icon="more_horiz">
              <q-menu auto-close>
                <div class="block-btn item-shadow">
                  立即跟进
                </div>
              </q-menu>
            </q-btn>
          </div>
          <div class="sell-num">
            {{PersionData.todayVisit}}<span class="unit">人</span>
          </div>
          <div class="flex no-wrap justify-between items-center">
            <div class="sell-name">今日到访</div>
            <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;" v-if="getIsUp('VisitCount')">
            <img src="../../assets/images/newindex/sell7.png" alt="" style="width:10px;" v-else />
          </div>
        </div>
        <div class="sell-block" :class="{'active-sell':sellBlock==4}" style="background-color:#F2FAFF;"
          @click="ckeckSell(4,'拜访','appointmentCount')">
          <div class="flex no-wrap justify-between items-center">
            <img src="../../assets/images/newindex/sell4.png" style="width:26px;height:26px">
            <q-btn size="sm" dense flat round icon="more_horiz">
              <q-menu auto-close>
                <div class="block-btn item-shadow" >
                  立即跟进
                </div>
              </q-menu>
            </q-btn>
          </div>
          <div class="sell-num">
            {{PersionData.appointmentCount}}<span class="unit">人</span>
          </div>
          <div class="flex no-wrap justify-between items-center">
            <div class="sell-name">今日拜访</div>
            <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;"
              v-if="getIsUp('appointmentCount')">
            <img src="../../assets/images/newindex/sell7.png" alt="" style="width:10px;" v-else />
          </div>
        </div>
        <div class="sell-block" :class="{'active-sell':sellBlock==5}" style="background-color:#FFFAF5"
          @click="ckeckSell(5,'新同行','customerCount')">
          <div class="flex no-wrap justify-between items-center">
            <img src="../../assets/images/newindex/sell5.png" style="width:26px;height:26px">
            <q-btn size="sm" dense flat round icon="more_horiz">
              <q-menu auto-close>
                <div class="block-btn item-shadow" @click="showAddPeer">
                  添加同行
                </div>
              </q-menu>
            </q-btn>
          </div>
          <div class="sell-num">
            {{PersionData.customerCount}}<span class="unit">人</span>
          </div>
          <div class="flex no-wrap justify-between items-center">
            <div class="sell-name">今日新同行</div>
            <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;"
              v-if="getIsUp('customerCount')">
            <img src="../../assets/images/newindex/sell7.png" alt="" style="width:10px;" v-else />
          </div>
        </div>
        <div class="sell-block" :class="{'active-sell':sellBlock==6}" style="background-color:#FEF4FE"
          @click="ckeckSell(6,'试听','trialLessonCount')">
          <div class="flex no-wrap justify-between items-center">
            <img src="../../assets/images/newindex/sell6.png" style="width:26px;height:26px">
            <q-btn size="sm" dense flat round icon="more_horiz">
              <q-menu auto-close>
                <div class="block-btn item-shadow">
                  立即添加
                </div>
              </q-menu>
            </q-btn>
          </div>
          <div class="sell-num">
            {{PersionData.trialLessonCount}}<span class="unit">人</span>
          </div>
          <div class="flex no-wrap justify-between items-center">
            <div class="sell-name">今日试听</div>
            <img src="../../assets/images/newindex/sell8.png" alt="" style="width:10px;"
              v-if="getIsUp('trialLessonCount')">
            <img src="../../assets/images/newindex/sell7.png" alt="" style="width:10px;" v-else />
          </div>
        </div>
      </div>
    </q-card>
    <AddCustomerStu v-if="isShowAddStu" @close="closeForm" @success="getPersionNumData"></AddCustomerStu>
    <AddCustomerPeer v-if="isShowAddPeer" @close="closeForm" @success="getPersionNumData"></AddCustomerPeer>
  </div>
</template>
<script>
  import {
    queryPersonnelStatic
  } from '../../api/course/index'
  import VueApexCharts from "vue-apexcharts";
  import AddCustomerStu from '../../components/school/student/studentAdd-form';//添加新学员
  import AddCustomerPeer from '../../components/sale/customerEdit-form';//添加新同行
  export default {
    components: {
      VueApexCharts,
      AddCustomerStu,
      AddCustomerPeer,
    },
    data() {
      return {
        series: [{
          name: "",
          data: []
        }],
        chartOptions: {
          chart: {
            type: "line",
            sparkline: {
              enabled: true
            }
          },
          stroke: {
            width: 2,
            curve: "smooth" //straight,smooth
          },
          fill: {
            type: "solid",
            opacity: [1, 1]
          },
          yaxis: {
            min: 0,
            labels: {
              formatter(val, index) {
                return val.toFixed(0);
              }
            }
          },
          colors: ["#fff"],
          title: {
            text: " ",
            offsetX: 0,
            style: {
              fontSize: "36px",
              color: "#000"
            }
          }
        },
        sellBlock: 1,
        //人员统计
        PersionData: {
          dayList: [{
            AddCount: 0,
          }, {
            AddCount: 0,
          }]
        },
        isShowAddStu: false,
        isShowAddPeer:false,
      };
    },
    mounted() {
      this.getPersionNumData();
    },
    methods: {
      //人数统计
      getPersionNumData() {
        queryPersonnelStatic({}).then(res => {
          if (res.Code == 1) {
            this.PersionData = res.Data;
            this.ckeckSell(1, '新名单', 'AddCount')
          }
        });
      },
      ckeckSell(n, name, field) {
        this.sellBlock = n;
        if (n == 2) return
        this.series[0].name = name;
        this.series[0].data = []
        this.PersionData.dayList.map(item => {
          const obj = {
            x: item.x,
            y: item[field]
          }
          this.series[0].data.push(obj)
        })
        setTimeout(() => {
          this.$refs.apex.updateSeries(this.series)
        }, 100)
      },
      //判断上升或下降
      getIsUp(field) {
        const today = this.PersionData.dayList[this.PersionData.dayList.length - 1]
        const yesterday = this.PersionData.dayList[this.PersionData.dayList.length - 2]
        if (today[field] && yesterday[field]) {
          const res = (Number(today[field]) - Number(yesterday[field])) > 0
          return res
        } else {
          return false
        }
      },
      closeForm() {
        this.isShowAddStu = false;
        this.isShowAddPeer=false;
      },
      showAddStu() {
        this.isShowAddStu = true;
      },
      showAddPeer() {
        this.isShowAddPeer = true;
      },
    }
  };

</script>
<style lang="scss" scoped>
  .sell {
    // width: 660px;
    height: 515px;
    border-radius: 8px;
    background-color: #FFFFFF;
    overflow: hidden;
    position: relative;

    .sell-title {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-right: 40px;
    }

    .top {
      //   width: 660px;
      height: 185px;
      border-radius: 8px 8px 0 0;
      background-color: #009EF7;
    }

    .bottom {
      width: 34vw;
      height: 320px;
      position: absolute;
      top: 160px;
      left: 50%;
      transform: translateX(-50%);
      padding: 0 1vw;

      .sell-block {
        width: 9.5vw;
        height: 145px;
        background-color: #F8F5FF;
        border-radius: 6px;
        padding: 16px;
        cursor:pointer;
        
        .sell-num {
          height: 60px;
          font-size: 36px;
          font-family: Source Han Sans CN;
          font-weight: 800;
          color: #404040;
          line-height: 30px;
          padding-top: 20px;

          .unit {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #404040;
          }
        }

        .sell-name {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #404040;
          white-space: nowrap;
        }

      }
    }
  }

  .active-sell {
    box-shadow: 1px 3px 49px 0px rgba(0, 158, 247, 0.28);
  }

  .block-btn {
    font-size: 0.7vw;
    color: #111111;
    white-space: nowrap;
    padding:6px 15px;
  }

</style>
