<template>
  <div class="content">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>私域复购看板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card>
      <el-form inline label-width="60px">
        <el-row>
          <el-form-item label="城市">
            <el-select
              v-model="selectQuery.cityName"
              multiple
              @change="cityChange1"
              clearable
              placeholder="请选择城市"
              filterable
            >
              <el-option
                v-for="(item, index) in cityList"
                :key="index"
                :label="item.cityName"
                :value="item.cityName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="加盟商">
            <el-select v-model="selectQuery.fraName" clearable placeholder="请选择加盟商" filterable>
              <template v-for="(item, index) in fraList">
                <el-option :key="index" :label="item" :value="item" />
              </template>
            </el-select>
          </el-form-item>

          <el-form-item label="周期">
            <!-- <el-date-picker v-model="selectQuery.month" format="yyyy年 第 WW 周" type="week" value-format="yyyy-MM-dd"
            placeholder="选择周" @change="weekChange" :picker-options="weekOptions"></el-date-picker>-->
            <el-date-picker
              v-model="selectQuery.month"
              type="month"
              value-format="yyyy-MM"
              placeholder="请选择月份"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="queryReBuy()">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <div class="zhibiao">
        <!--散单复购 指标-->
        <div class="sdfg">
          <div class="dv">
            <el-row>
              <div class="zbsj">
                <span class="zi">整体保洁复购</span>
              </div>
            </el-row>
            <el-row>
              <div class="kuang">
                <font class="shu">{{ (rebuy.index.total_rebuy_price).toFixed(2) }}</font>
                <!-- <font class="ren">元</font> -->
                <!-- <font class="alt">15%</font><br /> -->
                <br />
                <div class="sxzrs">整体复购金额</div>
              </div>
              <div class="kuang">
                <font class="shu">{{ Number(rebuy.index.rebuy_rate*100).toFixed(2) }}</font>
                <font class="ren">%</font>
                <br />
                <div class="sxzrs">整体复购率</div>
              </div>
              <div class="kuang">
                <font class="shu">{{ rebuy.index.rebuy_count }}</font>
                <font class="ren">单</font>
                <br />
                <div class="sxzrs">复购单量</div>
              </div>
            </el-row>
          </div>
        </div>

        <!--整体保洁复购-->
        <div class="sdfgtu" id="mainChart1"></div>

        <!--单次复购指标-->
        <div class="zqfg">
          <div class="dv">
            <div class="zbsj">
              <span class="zi">单次保洁复购</span>
            </div>
            <div class="kuang-wrapper">
              <div class="list-kuang">
                <div class="kuang">
                  <font class="shu">
                    {{
                    (rebuy.index.single_rebuy_price).toFixed(2)
                    }}
                  </font>
                  <!-- <font class="ren">%</font> -->
                  <div class="sxzrs">单次整体复购金额</div>
                </div>
                <div class="kuang">
                  <font class="shu">{{ Number(rebuy.index.single_2_single_rate*100).toFixed(2) }}</font>
                  <font class="ren">%</font>
                  <br />
                  <div class="sxzrs">单次续约率</div>
                </div>
                <div class="kuang">
                  <font class="shu">{{ Number(rebuy.index.single_2_cycle_rate*100).toFixed(2) }}</font>
                  <font class="ren">%</font>
                  <br />
                  <div class="sxzrs">单次转周期率</div>
                </div>
              </div>
              <div class="list-kuang">
                <div class="kuang">
                  <font class="shu">{{ Number(rebuy.index.single_rebuy_rate*100).toFixed(2) }}</font>
                  <font class="ren">%</font>
                  <div class="sxzrs">单次整体复购率</div>
                </div>
                <div class="kuang">
                  <font class="shu">{{ rebuy.index.single_2_single }}</font>
                  <font class="ren">单</font>
                  <div class="sxzrs">单次续约订单数</div>
                </div>
                <div class="kuang">
                  <font class="shu">{{ rebuy.index.single_2_cycle }}</font>
                  <font class="ren">单</font>
                  <div class="sxzrs">单次转周期订单数</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--单次保洁复购-->
        <div class="zqfgtu" id="mainChart2"></div>

        <!--保洁周期复购指标-->
        <div class="jcfg">
          <div class="dv">
            <div class="zbsj">
              <span class="zi">保洁周期复购</span>
            </div>

            <div class="kuang-wrapper">
              <div class="list-kuang">
                <div class="kuang">
                  <font class="shu">
                    {{
                    (rebuy.index.cycle_rebuy_price).toFixed(2)
                    }}
                  </font>
                  <!-- <font class="ren">%</font> -->
                  <div class="sxzrs">整体周期复购金额</div>
                </div>
                <div class="kuang">
                  <font class="shu">{{ Number(rebuy.index.cycle_2_single_rate*100).toFixed(2) }}</font>
                  <font class="ren">%</font>
                  <br />
                  <div class="sxzrs">周期续约单次率</div>
                </div>
                <div class="kuang">
                  <font class="shu">{{ Number(rebuy.index.cycle_2_cycle_rate*100).toFixed(2) }}</font>
                  <font class="ren">%</font>
                  <br />
                  <div class="sxzrs">周期续约率</div>
                </div>
              </div>
              <div class="list-kuang">
                <div class="kuang">
                  <font class="shu">{{ Number(rebuy.index.cycle_rebuy_rate*100).toFixed(2) }}</font>
                  <font class="ren">%</font>
                  <div class="sxzrs">整体周期复购率</div>
                </div>
                <div class="kuang">
                  <font class="shu">{{ rebuy.index.cycle_2_single }}</font>
                  <font class="ren">单</font>
                  <div class="sxzrs">周期续约单次数</div>
                </div>
                <div class="kuang">
                  <font class="shu">{{ rebuy.index.cycle_2_cycle}}</font>
                  <font class="ren">单</font>
                  <div class="sxzrs">周期续约订单数</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--保洁周期复购-->
        <div class="bjzqfg" id="mainChart3"></div>
      </div>
    </el-card>

    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>复购明细查询</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card>
      <!-- 复购情况 -->
      <div class="module-wrapper">
        <el-form :inline="true" size="small" v-model="listQuery">
          <el-form-item label="城市">
            <el-select
              v-model="listQuery.cityName"
              multiple
              @change="cityChange2"
              clearable
              placeholder="请选择城市"
              filterable
            >
              <el-option
                v-for="(item, index) in cityList"
                :key="index"
                :label="item.cityName"
                :value="item.cityName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="加盟商">
            <el-select v-model="listQuery.fraName" clearable placeholder="请选择加盟商" filterable>
              <template v-for="(item, index) in fraList">
                <el-option :key="index" :label="item" :value="item" />
              </template>
            </el-select>
          </el-form-item>

          <el-form-item label="周期">
            <!-- <el-date-picker v-model="selectQuery.month" format="yyyy年 第 WW 周" type="week" value-format="yyyy-MM-dd"
            placeholder="选择周" @change="weekChange" :picker-options="weekOptions"></el-date-picker>-->
            <el-date-picker
              v-model="listQuery.month"
              type="month"
              value-format="yyyy-MM"
              placeholder="请选择月份"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="原订单类型">
            <el-select v-model="listQuery.orignalType" clearable placeholder="请选择原订单分类">
              <el-option label="单次" value="单次"></el-option>
              <el-option label="周期" value="周期"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否复购">
            <el-select v-model="listQuery.isRebuy" clearable placeholder="是否复购">
              <el-option label="是" :value="true"></el-option>
              <el-option label="否" :value="false"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="复购订单类型">
            <el-select v-model="listQuery.rebuyType" clearable placeholder="请选择复购订单分类">
              <el-option label="单次" value="单次"></el-option>
              <el-option label="周期" value="周期"></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"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="querySearch()">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-download" type="primary" @click="querySearch(true)">导出</el-button>
          </el-form-item>
          <!-- <el-form-item>
            <el-button icon="el-icon-attract" type="text" @click="toggleFilter">高级筛选</el-button>
          </el-form-item>-->
        </el-form>

        <!-- 订单维度 -->
        <div>
          <el-table :data="tableData" border>
            <!-- <el-table-column type="selection" width="55"></el-table-column> -->
            <el-table-column label="城市" prop="serviceCity" :key="Math.random()" />
            <el-table-column label="加盟商名称" prop="fraName" :key="Math.random()" />
            <el-table-column label="服务工单id" prop="serviceId" :key="Math.random()" />

            <el-table-column label="商品名称" prop="goodsName" :key="Math.random()" />
            <el-table-column label="工单状态" prop="status" :key="Math.random()" />
            <el-table-column label="原订单类型" prop="originalType" :key="Math.random()" />
            <el-table-column label="复购订单类型" prop="rebuyType" :key="Math.random()" />
            <el-table-column label="复购时间" prop="rebuyTime" :key="Math.random()" />
            <el-table-column label="预约时间" prop="bookDate" :key="Math.random()" />
            <el-table-column label="复购金额" prop="rebuyPrice" :key="Math.random()" />

            <el-table-column label="是否复购" prop :key="Math.random()">
              <template slot-scope="scope">
                <span :class="[scope.row.isRebuy ? 'is-level' : 'not-level']">
                  {{ scope.row.isRebuy==='是' ? '已复购' : '未复购'
                  }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <pagination
          :total="total"
          :page.sync="currentPage"
          :limit.sync="pageSize"
          @pagination="querySearch()"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";
import Pagination from "./../common/Pagination";
import url from "@/script/baseUrl.js";
import Service from "../../script/api/service";
import userAuthDataApi from "@/script/api/userAuthData.js";
import globalData from "@/components/common/globaldata/global.data.vue";

export default {
  name: "saleGmv",
  components: { Pagination },
  data() {
    return {
      exportSelfReBuyDetail:
        url.exportUrl +
        "/reportservice/selfreBuy/selfReBuyDetail?token=" +
        window.localStorage.getItem("token"),
      fraList: [],
      ticketDataList: [],
      showTicketDetail: false,
      data2Person: [],
      dialogTitle: "周期复购率走势",
      exportRebuyUrl:
        url.exportUrl +
        "/reportservice/reBuy/reBuyDetailExport?token=" +
        window.localStorage.getItem("token"),
      rebuy: {
        all: [],
        cycle: [],
        single: [],
        index: {
          total_rebuy_price: 0,
          rebuy_rate: "",
          rebuy_count: "",
          single_rebuy_price: 0,
          single_rebuy_rate: "",
          single_2_single_rate: "",
          single_2_single: "",
          ingle_2_cycle_rate: "",
          ingle_2_cycle: "",
          cycle_rebuy_price:0,
          cycle_rebuy_rate:'',
          cycle_2_single_rate: "",
          cycle_2_single: "",
          cycle_2_cycle_rate: "",
          cycle_2_cycle: ""
        }
      },
      calllogFormDialogVisible: false,
      calllogs: [],
      workerInfo: "",
      dialogShow: false,
      sellectId: "",
      cityList: [],
      postStationList: [],
      allStationList: [],
      total: 0,
      pageSize: 10,
      currentPage: 1, //当前页
      selectQuery: {
        cityName: [],
        fraName: "",
        month: moment().format("YYYY-MM")
      },
      listQuery: {
        cityName: [],
        fraName: "",
        month: moment().format("YYYY-MM"),
        orignalType: "",
        rebuyType: "",
        isRebuy: true,
        createTime: []
      },
      tableData: [],
      filterShow: true,
      // workerFilterArray: [],

      orderFilterArray: [],
      weekOptions: {
        firstDayOfWeek: 1
      },

      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]);
            }
          }
        ]
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.getUserAuthData();
    Service.$axiosGetDYFraList().then(res => {
      if (res.data.errno == 0) {
        this.fraList = res.data.data;
      }
    });

    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(new Date(currentTime));

    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 14)
    );
    // this.listQuery.createTime = [startDate, currentDate];

    this.queryReBuy();
    this.querySearch("");
  },
  methods: {
    weekChange(e) {
      if (e == null) {
        this.$message.warning("日期不能为空");
      } else {
      }
    },

    queryReBuy(workerNo) {
      if (this.selectQuery.month == null) {
        this.$message.warning("日期不能为空");
        return false;
      }
      let params = {
        // userId: globalData.userInfo.id,
        cityList: this.selectQuery.cityName.join(","),
        fraName: this.selectQuery.fraName,
        month: this.selectQuery.month
      };

      Service.$axiosSelfReBuyLine(params).then(res => {
        if (res.data.errno == 0) {
          this.rebuy = res.data.data.index;
          let rate1 = res.data.data.all;
          let rate2 = res.data.data.single;
          let rate3 = res.data.data.cycle;
          let citys = this.selectQuery.cityName;
          let month = res.data.data.months;
          this.rebuy = res.data.data;
          this.initMainChart("mainChart1", rate1, month, "", "");
          this.initMainChart("mainChart2", rate2, month, "", "");
          this.initMainChart("mainChart3", rate3, month, "", "");
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    downloadRebuy() {
      let params = `&isExport=${true}&userId=${globalData.userInfo.id}`;
      window.open(this.exportRebuyUrl + params);
    },
    querySearch(isExport) {
      let params = {
        // userId: globalData.userInfo.id,
        cityList: this.listQuery.cityName.join(","),
        fraName: this.listQuery.fraName,
        month: this.listQuery.month,
        orignalType: this.listQuery.orignalType,
        rebuyType: this.listQuery.rebuyType,
        isRebuy: this.listQuery.isRebuy,
        startDate:
          this.listQuery.createTime.length == 0
            ? ""
            : moment(this.listQuery.createTime[0]).format("YYYY-MM-DD"),
        endDate:
          this.listQuery.createTime.length == 0
            ? ""
            : moment(this.listQuery.createTime[1]).format("YYYY-MM-DD"),
        pageNo: this.currentPage,
        pageSize: this.pageSize
      };

      if (isExport) {
        params.isExport = true;
        Service.$axiosSelfReBuyDetailExport(params);
      } else {
        Service.$axiosSelfReBuyDetail(params)
          .then(res => {
            if (res.data.errno == 0) {
              this.total = res.data.data.total;
              this.tableData = res.data.data.list;
            } else {
              this.$message.warning(res.data.errmsg);
            }
          })
          .catch(err => {
            console.log(err);
            if (loading) {
              this.queryReBuy();
            }
          });
      }
    },

    initMainChart(dom, rate, week, level) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom);
      var option;
      var seriesList = [];
      var citys = [];
      rate.forEach((rate, index) => {
        for (let i in rate) {
          citys.push(i);
          var rateData = rate[i].map(dataobj => {
            return Number(dataobj * 100).toFixed(2);
          });
          let obj = {
            name: i,
            type: "line",
            data: rateData,
            showSymbol: false
            // markLine: {
            //   // 如图中红色标记线
            //   silent: true,
            //   symbol: false, // 不显示标记线两端端点符号
            //   lineStyle: {
            //     color: "#c37976"
            //   },
            //   data: [
            //     {
            //       yAxis: level
            //     }
            //   ],
            //   label: {
            //     show: false
            //   }
            // },
          };
          seriesList.push(obj);
        }
      });
      option = {
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            var relVal = params[0].name + "复购率";
            for (var i = 0, l = params.length; i < l; i++) {
              relVal +=
                "<br/>" + params[i].seriesName + " : " + params[i].value + "%";
            }
            return relVal;
          },
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: citys
        },
        //     toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            type: "category",
            data: week,

            splitArea: {
              show: true
            },
            boundaryGap: false,
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#7c8999"
              }
            },
            axisLabel: {
              color: "#333"
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",

            axisLabel: {
              color: "#7c8999",
              formatter: "{value}%"
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        visualMap: [
          // 分段标记，如图中折线红色部分
        ],
        series: seriesList
      };

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

    getUserAuthData() {
      userAuthDataApi.$ajaxGetUserAuthData().then(res => {
        console.log("用户权限", res.data);
        if (res.data.errno == 0) {
          this.cityList = res.data.data.city;
          this.postStationList = res.data.data.post;
          this.allStationList = res.data.data.station;
        }
      });
    },
   cityChange1(value){
     if(value.includes('全国')){
       this.selectQuery.cityName=['全国'];
     }
   },
   cityChange2(value){
     if(value.includes('全国')){
       this.listQuery.cityName=['全国'];
     }
   },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.isCurrent.kuang {
  background: rgba(135, 204, 255, 0.4);
  border: 2px solid #87ccff;
}

.isCurrent.kuang .shu {
  color: #409eff;
}

.isCurrent.kuang .sxzrs {
  color: #333;
}

.crumbs {
  margin: 0 0 10px 0;
}

.module-wrapper {
  margin-top: 50px;
}

.el-card {
  /* overflow-x: scroll; */
  min-width: 1800px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.blue-font {
  color: #409eff;
  background: #f2f6fc;
  border-radius: 4px;
}

.disable-font {
  color: #ccc;
}

.filter-line {
  display: flex;
  line-height: 30px;
  font-size: 13px;
  margin-bottom: 10px;
}

.filter-type {
  color: #666;
  margin-right: 10px;
  width: 100px;
}

.filter-item {
  width: 92px;
  text-align: center;
  margin-right: 12px;
  cursor: pointer;
}

.long-tag {
  width: 120px;
}

.zhibiao {
  background-color: #ebffff;
  padding: 20px 14px;
  border-radius: 10px;
  height: 300px;
  display: flex;
  /* width: 1450px; */
  /* overflow: scroll; */
}

.sdfg {
  /* float: left; */
  width: 120px;
  margin-right: 10px;
  /* margin-left :5px; */
  /* border: 1px solid red; */
}

.sdfgtu,
.zqfgtu,
.bjzqfg {
  /* float: left;
  width: 420px;
  border: 1px solid red; */
  flex: 1;
  height: 280px;
  min-width: 200px;
}

.zqfg,
.jcfg {
  /* float: left; */
  width: 260px;
  /* min-width: 220px; */
  /* border: 1px solid red; */
  margin: 0 10px;
}

.jcfg {
}

.zbsj {
  width: 130px;
  padding: 8px 4px;
  text-align: center;
  margin-bottom: 5px;
  background: linear-gradient(to left, #52c0fe, #52c0fe) left top no-repeat,
    linear-gradient(to bottom, #52c0fe, #52c0fe) left top no-repeat,
    linear-gradient(to left, #52c0fe, #52c0fe) right top no-repeat,
    linear-gradient(to bottom, #52c0fe, #52c0fe) right top no-repeat,
    linear-gradient(to left, #52c0fe, #52c0fe) left bottom no-repeat,
    linear-gradient(to bottom, #52c0fe, #52c0fe) left bottom no-repeat,
    linear-gradient(to left, #52c0fe, #52c0fe) right bottom no-repeat,
    linear-gradient(to left, #52c0fe, #52c0fe) right bottom no-repeat;
  background-size: 2px 10px, 10px 2px, 2px 10px, 10px 2px;
}

.zbsj .zi {
  background: #daf8ff;
  color: #42afff;
  padding: 4px 10px 4px 10px;
}

.kuang-wrapper {
  display: flex;
}

.kuang {
  width: 124px;
  height: 64px;
  border: 2px dashed #87ccff;
  margin-right: 0.2rem;
  margin-top: 0.3rem;
  float: left;
  text-align: left;
  cursor: pointer;
}

.kuang .shu {
  font-size: 18px;
  font-weight: bold;
  line-height: 50px;
  color: #66bbf9;
  margin-left: 14px;
}

.kuang .ren {
  font-size: 12px;
  color: #66bbf9;
}

.kuang .sxzrs {
  font-size: 12px;
  margin-top: -15px;
  color: #a4a4a4;
  margin-left: 14px;
}

.alt {
  color: red;
  margin-left: 10px;
  font-size: 14px;
}

.is-level {
  color: #409eff;
}

.not-level {
  color: red;
}

.dialog-chart {
  height: 500px;
}

.kuang .shu.warn-color {
  color: red;
}
</style>
