<template>
  <div class="content">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>招商看板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="hover">
      <!-- 搜索 -->
      <el-form :inline="true" size="small" v-model="listQuery">
        <el-form-item label="城市">
          <el-select v-model="listQuery.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
            <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驿站">
          <el-select v-model="listQuery.postStation" clearable placeholder="请选择驿站" @change="postStationchange"
                     multiple>
            <el-option v-for="(item,index) in postList" :key="index" :label="item.postStation"
                       :value="item.postStation"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务站">
          <el-select v-model="listQuery.storeNames" clearable placeholder="请选择服务站">
            <el-option v-for="(item,index) in stationList" :key="index" :label="item.station"
                       :value="item.station"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="listQuery.source" multiple clearable>
            <el-option label="渠道" :value="1"></el-option>
            <el-option label="合伙人" :value="2"></el-option>
            <el-option label="自招" :value="3"></el-option>
            <el-option label="转介绍" :value="4"></el-option>
            <el-option label="复职" :value="5"></el-option>
            <el-option label="自然流量" :value="6"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间范围">
          <el-date-picker
            v-model="listQuery.createTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="dateChange"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getInvestmentAndResignList">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据 -->
      <div class="data-board">
        <div class="board-left">
          <div>
            <div>{{ wholeData['进入公海人数'] }}人</div>
            <div>公海资源</div>
          </div>
          <div class="line-module">
            <div class="devide-line"></div>
          </div>
          <div>
            <div>{{ wholeData['培训人数'] ? wholeData['培训人数'] : 0 }}人</div>
            <div>参培人数</div>
          </div>
          <div class="line-module">
            <div class="devide-line"></div>
          </div>
          <div>
            <div>{{ wholeData['跟单人数'] }}人</div>
            <div>跟单人数</div>
          </div>
          <div class="line-module">
            <div class="small-font">{{ wholeData['跟单通过率'] }}</div>
            <div class="devide-line"></div>
            <div class="small-font">跟单通过率</div>
          </div>
          <div>
            <div>保洁：{{ wholeData['保洁入职人数'] }}人</div>
            <div>品类：{{ wholeData['品类入职人数'] }}人</div>
            <div>入职人数</div>
          </div>
        </div>
        <div class="board-right">
          <div>
            <div>保洁：{{ wholeData['保洁离职人数'] }}人</div>
            <div>品类：{{ wholeData['品类离职人数'] }}人</div>
            <div>离职人数</div>
          </div>
          <div class="small-font">
            <div>保洁：{{ wholeData['保洁流失率'] }}</div>
            <div>品类：{{ wholeData['品类流失率'] }}</div>
            <div>流失率</div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 各来源入职情况 -->
    <div style="margin:10px 0;">
      <el-card shadow="hover">
        <p>【各来源入职情况】</p>
        <div id="mainChart1"></div>
      </el-card>
    </div>
    <!-- 离职原因 跟单流失原因-->
    <div class="echart-wrapper">
      <el-card shadow="hover">
        <p>【离职原因】</p>
        <div id="mainChart2"></div>
      </el-card>
      <el-card shadow="hover">
        <p>【跟单流失原因】</p>
        <div id="mainChart3"></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Service from "../script/api/service";

export default {
  name: "saleGmv",
  data() {
    return {
      wholeData: {
        '进入公海人数': '',
        "保洁入职人数": '',
        "保洁离职人数": '',
        "跟单通过人数": '',
        "流失率": '',
        "品类离职人数": '',
        "入职人数": '',
        "离职人数": '',
        "培训人数": '',
        "品类入职人数": '',
        "跟单人数": '',
        "跟单通过率": '',
        "保洁流失率": '',
        "品类流失率": '',

        inputCount: "",
        tranCount: "",
        ojbCount: "",
        signCount: "",
        reSignCount: "",
        churnRate: "",
        ojbPassRate: ""
      },
      cityList: [],
      postList: [],
      allPostList: [],
      stationList: [],
      allStationList: [],
      listQuery: {
        city: [],
        // storeNames: [],
        storeNames: '',
        source: [],
        createTime: "",
        postStation: []
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24)
    );

    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 30)
    );
    this.listQuery.createTime = [startDate, currentDate];
    this.getResignAndLossReason();
    // this.initMainChart1();
    // this.initMainChart("mainChart2");
    // this.initMainChart("mainChart3");

    this.cityList = JSON.parse(window.localStorage.getItem("city"));

    this.allPostList = JSON.parse(window.localStorage.getItem("postStation"));
    this.postList = this.allPostList;

    // this.listQuery.city = this.cityList[0];
    // for (let i = 0; i < temp.length; i++) {
    //   temp[i].station_name = temp[i].station;
    // }
    this.allStationList = JSON.parse(window.localStorage.getItem("station"));
    console.log("this.allStationList==>" + JSON.stringify(this.allStationList));
    this.stationList = this.allStationList;
    this.getInvestmentAndResignList();
  },
  methods: {
    cityChange(value) {
      this.listQuery.storeNames = '';
      this.listQuery.postStation = [];
      if (value.length === 0) {
        this.stationList = this.allStationList;
        this.postList = this.allPostList;
      } else {
        this.stationList = this.allStationList.filter(item => {
          return value.includes(item.city);
        });
        this.postList = this.allPostList.filter(item => value.includes(item.city));
      }
    },
    postStationchange(value) {
      this.listQuery.storeNames = '';
      if (value.length === 0) {
        this.stationList = this.allStationList;
      } else {
        this.stationList = this.allStationList.filter(item => {
          return value.includes(item.postStation);
        });
      }
    },
    dateChange(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          // this.$message.warning("选中时间范围不能超过一个月");
          // this.listQuery.createTime = null;
        }
      }
    },
    getInvestmentAndResignList() {
      if (this.isEmptyObjVue(this.listQuery.createTime)) {
        this.$message.warning("时间范围不能为空");
        return false;
      }
      let params = {
        startTime: !this.isEmptyObjVue(this.listQuery.createTime)
          ? this.listQuery.createTime[0] + ""
          : "",
        endTime: !this.isEmptyObjVue(this.listQuery.createTime)
          ? this.listQuery.createTime[1] + ""
          : "",
        city: this.listQuery.city.join(","),
        // serviceStation: this.listQuery.storeNames.join(","),
        serviceStation: this.listQuery.storeNames,
        resource: this.listQuery.source.join(","),
        postStation: this.listQuery.postStation.join(",")
      };
      Service.$axiosInvestmentAndResignList(params).then(res => {
        // console.log(res);

        if (res.data.errno == "0") {
          this.wholeData = res.data.data.conversion;
          // console.log(this.wholeData);
          let category = res.data.data.category;
          let series = res.data.data.series;
          // console.log(series);
          this.initMainChart1(category, series);
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
      this.getResignAndLossReason();
    },
    initMainChart1(category, list) {
      let data1 = list[0].data;
      let data2 = list[1].data;
      var chartDom = document.getElementById("mainChart1");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ["line", "bar"]},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: category
          // data: ["渠道", "合伙人", "自招", "转介绍", "复制", "自然流量"]
        },

        series: [
          {
            name: list[0].name,
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: data1,
          },
          {
            name: list[1].name,
            type: "bar",
            stack: "total",
            label: {
              show: true
            },
            emphasis: {
              focus: "series"
            },
            data: data2,
          },

        ]
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    getResignAndLossReason() {
      Service.$axiosGetResignAndLossReason(
        {
          startTime: !this.isEmptyObjVue(this.listQuery.createTime)
            ? this.listQuery.createTime[0] + ""
            : "",
          endTime: !this.isEmptyObjVue(this.listQuery.createTime)
            ? this.listQuery.createTime[1] + ""
            : "",
          city: this.listQuery.city.join(","),
          postStation: this.listQuery.postStation.join(","),
          serviceStation: this.listQuery.storeNames,
        }
      ).then(res => {
        // console.log(res);
        if (res.data.errno == "0") {
          // loss流失 2   resign离职 type1
          let loss = res.data.data.loss.countMap;
          let resign = res.data.data.resign.countMap;
          let lossKey = [];
          let lossValue = [];
          let resignKey = [];
          let resignValue = [];
          for (let i in loss) {
            lossKey.push(i);
            lossValue.push(loss[i]);
          }
          for (let j in resign) {
            resignKey.push(j);
            resignValue.push(resign[j]);
          }
          this.initMainChart("mainChart2", resignKey, resignValue);
          this.initMainChart("mainChart3", lossKey, lossValue);
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },

    initMainChart(id, key, value) {
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        toolbox: {
          feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ["line", "bar"]},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: key
        },
        series: [
          {
            // name: '人数',
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#009EFD" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#8FFFCC" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },

            data: value
          }
        ]
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.crumbs {
  margin: 0 0 10px 0;
}

h1,
h2 {
  font-weight: normal;
}

.el-card {
  overflow-x: scroll;
  min-width: 1200px;
  border-radius: 8px;
}

.data-board {
  height: 136px;
  display: flex;
  color: #fff;
  font-size: 18px;
}

.board-left {
  flex: 3.6;
  background: linear-gradient(327deg, #09afff 0%, #0eb2da 100%);
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 40px;
  text-align: center;
}

.board-left > div > div.devide-line {
  width: 102px;
  height: 1px;
  border-bottom: 1px dashed #fff;
  margin: 6px 0;
}

.board-right {
  flex: 1;
  min-width: 300px;
  background: linear-gradient(326deg, #fe8440 0%, #fa709a 100%);
  border-radius: 0px 10px 10px 0px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 40px;
  text-align: center;
}

.board-right > div > div, .board-left > div > div {
  margin-bottom: 8px;
  /* font-size: 16px; */
}

.board-right > div > div:last-child, .board-left > div > div:last-child {
  margin-bottom: 0;
}

.board-left > div:last-child {
  margin: 0 20px 0 10px;
}

.board-left div.line-module:last-child {
  margin: 0 10px;
}

.small-font {
  font-size: 10px;
}

#mainChart1 {
  /* width: 900px; */
  height: 600px;
  margin: 0 auto;
  padding: 40px;
}

#mainChart2,
#mainChart3 {
  /* width: 900px; */
  height: 500px;
  margin: 0 auto;
  padding: 40px;
}

.echart-wrapper {
  display: flex;
}

.echart-wrapper .el-card {
  min-width: 595px;
  margin-right: 10px;
  flex: 1;
}

.echart-wrapper .el-card:last-child {
  margin-right: 0;
}
</style>
