<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 label-width="60px">
        <el-row>
          <el-form-item label="城市">
            <el-select v-model="selectQuery.cityId" multiple @change="selectCity" clearable placeholder="请选择城市"
              filterable>
              <el-option v-for="(item, index) in cityList" :key="index" :label="item.cityName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="驿站">
            <el-select ref="yza" v-model="selectQuery.postStationId" @change="selectPost" multiple clearable
              placeholder="请选择驿站" filterable>
              <template v-for="(item, index) in postStationList">
                <el-option :key="index" v-if="checkpost(item)" :label="item.postStationName" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="服务站">
            <el-select v-model="selectQuery.stationCode" multiple clearable placeholder="请选择服务站" filterable>
              <template v-for="(item, index) in allStationList">
                <el-option :key="index" v-if="checkstation(item)" :label="item.stationName" :value="item.stationCode" />
              </template>
            </el-select>
          </el-form-item>
          <el-form-item label="周期">
            <!-- format="yyyy 第 WW 周" -->
            <el-date-picker v-model="selectQuery.weekday" format="yyyy年 第 WW 周" type="week" value-format="yyyy-MM-dd"
              placeholder="选择周" @change="weekChange" :picker-options="weekOptions"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="searchAll()">查询</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" @click="findDatas(1)" :class="[sellectId == 1 ? 'isCurrent' : '']">
                <font
                  :class="[rebuy.index.single_t7_transfer_cycle_rate < Number(rebuy.single_t7_warn_line) ? 'warn-color' : '', 'shu']">
                  {{ ((rebuy.index.single_t7_transfer_cycle_rate) * 100).toFixed(2) }}</font>
                <font class="ren">%</font>
                <!-- <font class="alt">15%</font><br /> -->
                <div class="sxzrs">履约T+7转周期</div>
              </div>
              <div class="kuang" @click="findDatas(2)" :class="[sellectId == 2 ? 'isCurrent' : '']">
                <font class="shu">{{ rebuy.index.single_count }}</font>
                <font class="ren">单</font>
                <br />
                <div class="sxzrs">单次新客履约数</div>
              </div>
              <div class="kuang" @click="findDatas(3)" :class="[sellectId == 3 ? 'isCurrent' : '']">
                <font class="shu">{{ rebuy.index.single_t7_rebuy_count }}</font>
                <font class="ren">单</font>
                <br />
                <div class="sxzrs">履约T+7复购</div>
              </div>
              <div class="kuang" @click="findDatas(4)" :class="[sellectId == 4 ? 'isCurrent' : '']">
                <font :class="[rebuy.index.not_standard_rate > Number(rebuy.single_rebuy_no_standard_warn_line
                ) ? 'warn-color' : '', 'shu']">{{ ((rebuy.index.not_standard_rate) * 100).toFixed(2) }}</font>
                <font class="ren">%</font>
                <!-- <font class="alt">15%</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" @click="findDatas(5)" :class="[sellectId == 5 ? 'isCurrent' : '']">
                  <font
                    :class="[rebuy.index.cycle_rebuy_rate < Number(rebuy.cycle_rebuy_warn_line) ? 'warn-color' : '', 'shu']">
                    {{
                      ((rebuy.index.cycle_rebuy_rate) * 100).toFixed(2)
                    }}</font>
                  <font class="ren">%</font>
                  <!-- <font class="alt">15%</font><br /> -->
                  <div class="sxzrs">周期复购率</div>
                </div>
                <div class="kuang" @click="findDatas(7)" :class="[sellectId == 7 ? 'isCurrent' : '']">
                  <font class="shu">{{ rebuy.index.cycle_last_fulfillment_count }}</font>
                  <font class="ren">单</font>
                  <br />
                  <div class="sxzrs">最后一单履约数</div>
                </div>
                <div class="kuang" @click="findDatas(8)" :class="[sellectId == 8 ? 'isCurrent' : '']">
                  <font class="shu">{{ rebuy.index.cycle_last_t30_fulfillment_count }}</font>
                  <font class="ren">单</font>
                  <br />
                  <div class="sxzrs">最后履约T+30复购</div>
                </div>
                <div class="kuang" @click="findDatas(9)" :class="[sellectId == 9 ? 'isCurrent' : '']">
                  <font :class="[rebuy.index.cycle_not_standard_rate > Number(rebuy.cycle_rebuy_no_standard_warn_line
                  ) ? 'warn-color' : '', 'shu']">{{ ((rebuy.index.cycle_not_standard_rate) * 100).toFixed(2) }}</font>
                  <font class="ren">%</font>
                  <!-- <font class="alt">15%</font><br /> -->
                  <div class="sxzrs">复购不达标比率</div>
                </div>
              </div>
              <div class="list-kuang">
                <div class="kuang" @click="findDatas(6)" :class="[sellectId == 6 ? 'isCurrent' : '']">
                  <font class="shu">{{ rebuy.index.cycle_rebuy_count }}</font>
                  <font class="ren">单</font>
                  <!-- <font class="alt">15%</font><br /> -->
                  <div class="sxzrs">整体复购数</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--散单复购-->
        <div class="zqfgtu" id="mainChart2"></div>

        <!--交叉复购指标-->
        <div class="jcfg">
          <div class="dv">
            <el-row>
              <div class="zbsj">
                <span class="zi">交叉复购</span>
              </div>
            </el-row>
            <el-row>
              <div class="kuang" @click="findDatas(10)" :class="[sellectId == 10 ? 'isCurrent' : '']">
                <font class="shu">{{ rebuy.index.cross_rebuy_count }}</font>
                <font class="ren">单</font>
                <br />
                <div class="sxzrs">交叉复购数</div>
              </div>
              <div class="kuang" @click="findDatas(11)" :class="[sellectId == 11 ? 'isCurrent' : '']">
                <font :class="[rebuy.index.cross_rebuy_rate < Number(rebuy.cross_rebuy_warn_line
                ) ? 'warn-color' : '', 'shu']">{{ ((rebuy.index.cross_rebuy_rate) * 100).toFixed(2) }}</font>
                <font class="ren">%</font>
                <!-- <font class="alt">15%</font><br /> -->
                <div class="sxzrs">交叉复购率</div>
              </div>
            </el-row>
          </div>
        </div>
      </div>
      <!-- </el-card>





      <el-card shadow="hover">-->
      <!-- 复购情况 -->
      <div class="module-wrapper">
        <el-form :inline="true" size="small" v-model="listQuery">
          <el-form-item>
            <el-input v-model="listQuery.workerName" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item >
            <el-select v-model="listQuery.type" clearable placeholder="请选择复购订单分类">
              <el-option  label="保洁散单"  value="保洁"></el-option>
              <el-option  label="保洁周期"  value="品类"></el-option>
              <el-option  label="品类"  value="品类"></el-option>
              <el-option  label="保姆体验"  value="品类"></el-option>
              <el-option  label="保姆周期"  value="品类"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item >
            <el-select v-model="listQuery.db" clearable placeholder="是否达标">
              <el-option  label="已达标"  value="保洁"></el-option>
              <el-option  label="未达标"  value="品类"></el-option>

            </el-select>
          </el-form-item>-->

          <!-- <el-form-item>
            <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  type="primary" plain >生成工单</el-button>
          </el-form-item>-->

          <!-- <el-form-item>
            <el-button  type="primary" plain icon="el-icon-refresh-left" v-if="listQuery.showType==2">切换订单维度</el-button>
          </el-form-item>
           <el-form-item>
            <el-button  type="primary" plain icon="el-icon-refresh-left" v-if="listQuery.showType==1">切换服务者维度</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 class="filter-module" v-if="filterShow">
          <div v-for="(item, index) in  filterArray" :key="index" class="filter-line">
            <div class="filter-type">{{ item.type }}:</div>
            <div class="filter-item" v-for="(item1, index1) in  item.list" :key="index1"
              :class="[item1.isChecked ? 'blue-font' : '', item1.isLong ? 'long-tag' : '', item1.isDisabled ? 'disable-font' : '']"
              @click="filterItem(index, item, index1, item1)">{{ item1.name }}
            </div>
          </div>
        </div>
        <div v-if="listQuery.showType == 2">
          <el-table :data="tableData" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="城市" prop="city" :key="Math.random()"></el-table-column>
            <el-table-column label="驿站" prop="post_name" :key="Math.random()"></el-table-column>
            <el-table-column label="服务站" prop="station" :key="Math.random()"></el-table-column>
            <el-table-column label="商家运营" prop="worker_manager" :key="Math.random()"></el-table-column>
            <el-table-column label="商家" prop="worker_name" :key="Math.random()">
              <template slot-scope="scope">
                <el-button type="text" @click="showChart(scope.row)">{{ scope.row.worker_name }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="手机号" prop="worker_tel" :key="Math.random()"></el-table-column>
            <el-table-column label="复购率" prop="rebuy_rate" :key="Math.random()">
              <template slot-scope="scope">
                <span>{{ ((scope.row.rebuy_rate) * 100).toFixed(2) + '%' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="上线时间" prop="entry_time" :key="Math.random()"></el-table-column>
            <el-table-column label="服务单量" prop="total_count" :key="Math.random()"></el-table-column>
            <el-table-column label="复购量" prop="rebuy_count" :key="Math.random()"></el-table-column>
            <el-table-column label="标签" prop="tag" :key="Math.random()">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="计算时间范围：保洁单次新客为近7天、近14天、近21天，保洁周期为近一个月和近两月"
                  placement="top-end">
                  <el-tag
                    :type="scope.row.tag === '正常' ? 'success' : new RegExp('一月|警告').test(scope.row.tag) ? 'warning' : new RegExp('替换准备').test(scope.row.tag) ? 'info' : 'danger'">
                    {{ scope.row.tag }}
                  </el-tag>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="是否达标" prop :key="Math.random()">
              <template slot-scope="scope">
                <span :class="[scope.row.is_ok == '1' ? 'is-level' : 'not-level']">{{ scope.row.is_ok == '1' ? '已达标' :
                  '未达标'
                }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 订单维度 -->
        <div v-if="listQuery.showType == 1">
          <el-table :data="tableData" border>
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="城市" prop="city" :key="Math.random()"></el-table-column>
            <el-table-column label="驿站" prop="jz_station" :key="Math.random()"></el-table-column>
            <el-table-column label="服务站" prop="hm_station" :key="Math.random()"></el-table-column>

            <el-table-column label="服务项" prop="trade_goods_type" :key="Math.random()"></el-table-column>
            <el-table-column label="订单类型" prop="trade_type" :key="Math.random()"></el-table-column>
            <el-table-column label="最后履约时间" prop="begin_date" :key="Math.random()"></el-table-column>
            <el-table-column label="服务工单号" prop="book_trade_no" :key="Math.random()">
              <template slot-scope="scope">
                <span class="is-level" style="cursor:pointer" @click="showTicket(scope.row.book_trade_no)">
                  {{ scope.row.book_trade_no }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="商家运营" prop="worker_manager" :key="Math.random()"></el-table-column>
            <el-table-column label="最后一次服务商家" prop="worker_name" :key="Math.random()"></el-table-column>
            <el-table-column label="实际开单者" prop="rebuy_worker" :key="Math.random()"></el-table-column>

            <el-table-column label="是否最后一单" prop="is_last" :key="Math.random()" v-if="listQuery.orignGoodType === '1'">
              <template slot-scope="scope">
                <span>{{ scope.row.is_last ? '是' : '否' }}</span>
              </template>
            </el-table-column>


            <el-table-column label="是否复购" prop :key="Math.random()">
              <template slot-scope="scope">
                <span :class="[scope.row.is_rebuy ? 'is-level' : 'not-level']">{{ scope.row.is_rebuy ? '已复购' : '未复购'
                }}</span>
              </template>
            </el-table-column>

            <el-table-column label="复购服务项" prop="rebuy_goods" :key="Math.random()"></el-table-column>

            <!-- <el-table-column label="操作" prop="rebuy_goods">
              <template slot-scope="scope"> 
                <el-button icon="el-icon-attract" type="text" @click="handleCallLog(scope.row)">跟进记录</el-button>
              </template>
            </el-table-column> -->


          </el-table>
        </div>
        <!-- 分页 -->
        <pagination :total="total" :page.sync="currentPage" :limit.sync="pageSize" @pagination="querySearch()" />
      </div>
    </el-card>

    <!-- 弹框折线图 -->
    <el-dialog :title="dialogTitle + '(' + workerInfo.worker_name + ')'" :visible.sync="dialogShow" width="700px"
      :close-on-click-modal="false" center>
      <p>驿站：{{ workerInfo.post_name }}</p>
      <p>服务站：{{ workerInfo.station }}</p>
      <div class="dialog-chart" id="dialogChart"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">关闭</el-button>
        <!-- <el-button type="primary" @click="importConfirm7" >确 定</el-button> -->
      </span>
      <el-table :data="data2Person">
        <el-table-column prop="weekDesc" label="周"></el-table-column>
        <el-table-column prop="singleTotal" label="单次新客履约数"></el-table-column>
        <el-table-column prop="singleRebuy" label="单次新客T+7复购数"></el-table-column>
        <el-table-column prop="cycleTotal" label="最后一单履约数(周期)"></el-table-column>
        <el-table-column prop="cycleRebuy" label="最后履约T+30复购数(周期)"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="工单跟进过程" :visible.sync="showTicketDetail" :close-on-click-modal="false" width="800px" center>
      <el-table :data="ticketDataList">
        <el-table-column prop="任务" label="任务"></el-table-column>
        <el-table-column prop="跟进人" label="跟进人"></el-table-column>
        <el-table-column prop="跟进时间" label="跟进时间"></el-table-column>
        <el-table-column prop="电访结果" label="电访结果"></el-table-column>
        <el-table-column prop="电访备注" label="电访备注"></el-table-column>
        <el-table-column prop="工单编号" label="工单编号"></el-table-column>
        <el-table-column prop="工单描述" label="工单描述"></el-table-column>
      </el-table>
    </el-dialog>
 

  </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 {
      ticketDataList: [],
      showTicketDetail: false,
      data2Person: [],
      dialogTitle: '周期复购率走势',
      exportRebuyUrl:
        url.exportUrl +
        "/reportservice/reBuy/reBuyDetailExport?token=" +
        window.localStorage.getItem("token"),
      rebuy: {
        single_t7_transfer_cycle_rate: [],
        index: {
          single_t7_transfer_cycle_rate: "", //履约T+7转周期
          // total_man_count: "", //散单总数
          single_count: "",//散单总数
          single_t7_rebuy_count: "", //履约T+7复购
          not_standard_rate: "", // 复购不达标占比
          cycle_rebuy_rate: "", //整体复购率
          cycle_last_fulfillment_count: "", //最后一单履约数 单
          cycle_last_t30_fulfillment_count: "", //最后履约T+30复购 单
          cycle_not_standard_rate: "", //复购不达标比率
          // cycle_buy_count: "", //整体复购数 单
          cycle_rebuy_count: "", //整体复购数 单
          cross_rebuy_count: "", //交叉复购数
          cross_rebuy_rate: "" //交叉复购率
        }
      },
      calllogFormDialogVisible:false,
      calllogs:[],
      workerInfo: "",
      dialogShow: false,
      sellectId: "",
      cityList: [],
      postStationList: [],
      allStationList: [],
      total: 0,
      pageSize: 10,
      currentPage: 1, //当前页
      selectQuery: {
        cityId: [],
        postStationId: [],
        stationCode: [],
        // weekday: '',
        weekday: new Date()
      },
      listQuery: {
        workerName: "",
        // createTime: "",
        showType: "2", //展示维度，1订单 2 服务者 默认 2
        isExport: false,
        custType: "", //客户类型 1:新客 2:老客
        isOk: "", //1:达标 2:未达标 仅在展示维度为服务者时有效
        orignGoodType: "1", // 原工单商品类型 1周期 2单次 3品类 4收纳
        reBuyType: "", //复购时间维度 1:t+0 2:t+7 3:t+14 4:最后一次前 5:最后一次后 6：最后一次后t+30 7:t+4 8:t+30 仅在订单维度下有效
        // reBuyGoodType: "1", //复购商品类型 1周期 3品类 4收纳
        // rebuyCategory: "1" //复购分类 1 交叉复购 2单次复购 3周期复购
      },
      tableData: [],
      filterShow: true,
      // workerFilterArray: [],
      filterArray: [
        {
          type: "展示纬度",
          typeValue: "showType",
          list: [
            {
              name: "服务者纬度",
              isChecked: true,
              value: "2"
            },
            {
              name: "订单纬度",
              isChecked: false,
              value: "1"
            }
          ]
        },

        {
          type: "原工单商品类型",
          typeValue: "orignGoodType",
          list: [
            {
              name: "全部",
              isChecked: false,
              value: "",
              isDisabled: true
            },
            {
              name: "保洁周期",
              isChecked: true,
              value: "1"
            },
            {
              name: "保洁单次",
              isChecked: false,
              value: "2"
            },
            {
              name: "品类",
              isChecked: false,
              value: "3"
            },

          ]
        },
        // {
        //   type: "复购商品类型",
        //   typeValue: "reBuyGoodType",
        //   list: [
        //     {
        //       name: "全部",
        //       isChecked: false,
        //       value: "",
        //       isDisabled: true
        //     },
        //     {
        //       name: "保洁周期",
        //       isChecked: true,
        //       value: "1"
        //     },
        //     {
        //       name: "保洁单次",
        //       isChecked: false,
        //       value: "2"
        //     },
        //     {
        //       name: "品类",
        //       isChecked: false,
        //       value: "3"
        //     },
        //
        //   ]
        // },
        {
          type: "复购时间维度",
          typeValue: "reBuyType",
          list: [
            {
              name: "全部",
              isChecked: true,
              value: ""
            },
            {
              name: "履约前复购",
              isChecked: false,
              value: "10"
            },
            {
              name: "履约当日复购",
              isChecked: false,
              value: "9"
            },
            {
              name: "T+0",
              isChecked: false,
              value: "1"
            },
            {
              name: "T+4",
              isChecked: false,
              value: "7"
            },
            {
              name: "T+7",
              isChecked: false,
              value: "2"
            },
            {
              name: "T+14",
              isChecked: false,
              value: "3"
            },
            {
              name: "T+30",
              isChecked: false,
              value: "8"
            }
          ]
        },

        {
          type: "客户标签",
          typeValue: "custType",
          list: [
            {
              name: "全部",
              isChecked: true,
              value: ""
            },
            {
              name: "保洁新客",
              isChecked: false,
              value: "1"
            },
            {
              name: "保洁老客",
              isChecked: false,
              value: "2"
            },
            {
              name: "品类新客",
              isChecked: false,
              value: "2"
            },
            {
              name: "品类老客",
              isChecked: false,
              value: "2"
            }
          ]
        },
        {
          type: "是否达标",
          typeValue: "isOk",
          list: [
            {
              name: "全部",
              isChecked: true,
              value: ""
            },
            {
              name: "已达标",
              isChecked: false,
              value: "1"
            },
            {
              name: "未达标",
              isChecked: false,
              value: "2"
            }
          ]
        }
      ],
      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.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));
    this.getUserAuthData();

    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.filterArray = this.workerFilterArray;
    // this.initMainChart('mainChart1');
    // this.initMainChart('mainChart2');
    this.querySearch('', true);
    //  this.queryReBuy();
  },
  methods: {
    showTicket(book_trade_no) {
      this.showTicketDetail = true;
      Service.$axiosReBuBookTradeOrderHistory({ bookTradeOrder: book_trade_no }).then(res => {
        if (res.data.errno == "0") {
          this.ticketDataList = res.data.data;
          console.log(this.ticketDataList);
        }
      })
    },
    handleCallLog(row){//工单跟进过程显示

    },
    weekChange(e) {
      console.log(e);
      if (e == null) {
        this.$message.warning('日期不能为空')
      } else {
        this.searchAll();
      }
    },
    searchAll() {
      // this.queryReBuy()
      this.querySearch('', true);
    },
    queryReBuy(workerNo) {
      if (this.selectQuery.weekday == null) {
        this.$message.warning('日期不能为空');
        return false;
      }
      let params = {
        userId: globalData.userInfo.id,
        cityIds:
          this.selectQuery.cityId == [0]
            ? ""
            : this.selectQuery.cityId.join(","),
        postIds: this.selectQuery.postStationId.join(","),

        stationIds: this.selectQuery.stationCode.join(","),
        startTime: moment(this.selectQuery.weekday).format("YYYY-MM-DD")
      };
      if (workerNo) {
        params.workerNo = workerNo;
      }

      Service.$axiosReBuyLine(params).then(res => {
        if (res.data.errno == "0") {
          console.log(res);

          let rate1 = res.data.data.single_t7_transfer_cycle_rate;
          let rate2 = res.data.data.cycle_rebuy_rate;
          let citys = res.data.data.citys;
          let week_desc = res.data.data.week_desc;
          let level1 = (Number(res.data.data.single_t7_warn_line) * 100).toFixed(2);
          let level2 = (Number(res.data.data.cycle_rebuy_warn_line) * 100).toFixed(2);
          console.log("rate1====>" + rate1);
          //如果rate1 和rate2 是一个二维数组，在进行处理
          if (rate1.length > 0 && rate1[0].length > 0) {
            var newRate1 = [];
            //newRate1 是一个二维数组，将rate1中的数字转成百分比放入newRate1
            for (var i = 0; i < rate1.length; i++) {
              newRate1[i] = [];
              for (var j = 0; j < rate1[i].length; j++) {
                newRate1[i][j] = (Number(rate1[i][j]) * 100).toFixed(2);
              }
            }
            rate1 = newRate1;
          } else {
            rate1 = rate1.map(item => {
              return (Number(item) * 100).toFixed(2);
            });
          }

          //rate2 同样处理
          if (rate2.length > 0 && rate2[0].length > 0) {
            var newRate2 = [];
            for (var i = 0; i < rate2.length; i++) {
              newRate2[i] = [];
              for (var j = 0; j < rate2[i].length; j++) {
                newRate2[i][j] = (Number(rate2[i][j]) * 100).toFixed(2);
              }
            }
            rate2 = newRate2;
          } else {
            rate2 = rate2.map(item => {
              return (Number(item) * 100).toFixed(2);
            });
          }

          if (workerNo) {
            console.log(workerNo);
            this.data2Person = res.data.data.data2Person;
            if (this.sellectId == 5 || this.listQuery.orignGoodType == 1) {
              // 周期复购
              this.dialogTitle = '周期复购率走势';
              this.initMainChart("dialogChart", rate2, week_desc, level2, citys);

            } else if (this.listQuery.orignGoodType == 2) {
              this.dialogTitle = '单次新客履约T+7复购率走势';
              this.initMainChart("dialogChart", rate1, week_desc, level1, citys);
            } else {

            }
          } else {
            this.rebuy = res.data.data;
            this.initMainChart("mainChart1", rate1, week_desc, level1, citys);
            this.initMainChart("mainChart2", rate2, week_desc, level2, citys);
          }

        } else {

          this.$message.warning(res.data.errmsg);
        }
      });
    },
    downloadRebuy() {
      let params = `&isExport=${true}&userId=${globalData.userInfo.id}`;
      window.open(this.exportRebuyUrl + params);
    },
    querySearch(isExport, loading) {
      // ReBuyDetailVo {
      // cityIds (string, optional): 城市id ,
      // custType (integer, optional): 客户类型 1:新客 2:老客 ,
      // endTime (string, optional): 查询结束日期 yyyy-MM-dd ,
      // isExport (boolean, optional): 是否是要导出 ,
      // isOk (integer, optional): 是否达标 1:达标 2:未达标 仅在展示维度为服务者时有效 ,
      // orignGoodType (integer, optional): 原工单商品类型 1周期 2单次 3品类 4收纳 ,
      // pageNo (integer, optional): 开启页 ,
      // pageSize (integer, optional): 每页条数 ,
      // postIds (string, optional): 驿站id ,
      // reBuyGoodType (integer, optional): 复购商品类型 1周期 3品类 4收纳 ,
      // reBuyTime (Array[string], optional): 复购时间 ,
      // reBuyType (integer, optional): 复购时间维度 1:t+0 2:t+7 3:t+14 4:最后一次前 5:最后一次后 6：最后一次后t+30 7:t+4 8:t+30 仅在订单维度下有效 ,
      // rebuyCategory (integer, optional): 1 交叉复购 2单次复购 3周期复购 ,
      // showType (integer, optional): 展示维度，1订单 2 服务者 默认 2 ,
      // startTime (string, optional): 查询开始日期 yyyy-MM-dd ,
      // stationIds (string, optional): 服务站id ,
      // userId (integer, optional),
      // workerName (string, optional): 服务者姓名 ,
      // workerNo (string, optional): 阿姨工号
      // }

      let params = {
        userId: globalData.userInfo.id,
        cityIds:
          this.selectQuery.cityId == [0]
            ? ""
            : this.selectQuery.cityId.join(","),
        postIds: this.selectQuery.postStationId.join(","),
        stationIds: this.selectQuery.stationCode.join(","),
        startTime: moment(this.selectQuery.weekday).format("YYYY-MM-DD"),
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        // reBuyTime: this.listQuery.createTime,
        showType: this.listQuery.showType,
        // isExport:this.listQuery.isExport,
        workerName: this.listQuery.workerName,
        custType: this.listQuery.custType,
        isOk: this.listQuery.isOk,
        orignGoodType: this.listQuery.orignGoodType,
        reBuyGoodType: this.listQuery.reBuyGoodType,
        reBuyType: this.listQuery.reBuyType,
        // rebuyCategory: this.listQuery.rebuyCategory
      };
      if (this.sellectId == 7 || this.sellectId == 8 || (this.listQuery.showType == 2 && this.listQuery.orignGoodType == 1)) {
        params.isLast = 1;
      }


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


    },
    findDatas(id) {
      this.sellectId = id;
      if (id <= 3 || (id >= 5 && id <= 8)) {
        this.listQuery.showType = 1;
        let temp = this.filterArray[0];
        temp.list.map(a => a.value == 1 ? a.isChecked = 1 : a.isChecked = 0);
      } else if (id == 4 || id == 9) {
        this.listQuery.showType = 2;
        let temp = this.filterArray[0]
        temp.list.map(a => a.value == 2 ? a.isChecked = 1 : a.isChecked = 0);
      }

      if (id == 1 || id == 2 || id == 3 || id == 4) {
        this.listQuery.orignGoodType = "2";
        if (this.listQuery.showType == 2) {
          this.filterArray[1] = {
            type: "原工单商品类型",
            typeValue: "orignGoodType",
            list: [
              {
                name: "全部",
                isChecked: false,
                value: "",
                isDisabled: true
              },
              {
                name: "保洁周期",
                isChecked: false,
                value: "1"
              },
              {
                name: "保洁单次",
                isChecked: true,
                value: "2"
              },
              {
                name: "品类",
                isChecked: false,
                value: "3"
              }

            ]
          };
        } else {
          this.filterArray[1] = {
            type: "原工单商品类型",
            typeValue: "orignGoodType",
            list: [
              {
                name: "全部",
                isChecked: false,
                value: "",
                isDisabled: false
              },
              {
                name: "保洁周期",
                isChecked: false,
                value: "1"
              },
              {
                name: "保洁单次",
                isChecked: true,
                value: "2"
              },
              {
                name: "品类",
                isChecked: false,
                value: "3"
              }

            ]
          };

        }


        // // 复购商品类型
        // if (id == 1 || id == 3) {
        //   this.listQuery.reBuyGoodType = "1";
        //   if (this.listQuery.showType == 2) {
        //     this.filterArray[2] = {
        //       type: "复购商品类型",
        //       typeValue: "reBuyGoodType",
        //       list: [
        //         {
        //           name: "全部",
        //           isChecked: false,
        //           value: "",
        //           isDisabled: true
        //         },
        //         {
        //           name: "保洁周期",
        //           isChecked: true,
        //           value: "1"
        //         },
        //         {
        //           name: "保洁单次",
        //           isChecked: false,
        //           value: "2"
        //         },
        //         {
        //           name: "品类",
        //           isChecked: false,
        //           value: "3"
        //         },
        //
        //       ]
        //     }
        //   } else {
        //     this.filterArray[2] = {
        //       type: "复购商品类型",
        //       typeValue: "reBuyGoodType",
        //       list: [
        //         {
        //           name: "全部",
        //           isChecked: false,
        //           value: "",
        //           isDisabled: false
        //         },
        //         {
        //           name: "保洁周期",
        //           isChecked: true,
        //           value: "1"
        //         },
        //         {
        //           name: "保洁单次",
        //           isChecked: false,
        //           value: "2"
        //         },
        //         {
        //           name: "品类",
        //           isChecked: false,
        //           value: "3"
        //         },
        //
        //       ]
        //     }
        //   }
        //
        // } else {
        //
        //   if (this.listQuery.showType == 2) {
        //     this.listQuery.reBuyGoodType = "1";
        //     this.filterArray[2] = {
        //       type: "复购商品类型",
        //       typeValue: "reBuyGoodType",
        //       list: [
        //         {
        //           name: "全部",
        //           isChecked: false,
        //           value: "",
        //           isDisabled: true
        //         },
        //         {
        //           name: "保洁周期",
        //           isChecked: true,
        //           value: "1"
        //         },
        //         {
        //           name: "保洁单次",
        //           isChecked: false,
        //           value: "2"
        //         },
        //         {
        //           name: "品类",
        //           isChecked: false,
        //           value: "3"
        //         },
        //
        //       ]
        //     }
        //   } else {
        //     this.listQuery.reBuyGoodType = "";
        //     this.filterArray[2] = {
        //       type: "复购商品类型",
        //       typeValue: "reBuyGoodType",
        //       list: [
        //         {
        //           name: "全部",
        //           isChecked: true,
        //           value: "",
        //           isDisabled: false
        //         },
        //         {
        //           name: "保洁周期",
        //           isChecked: false,
        //           value: "1"
        //         },
        //         {
        //           name: "保洁单次",
        //           isChecked: false,
        //           value: "2"
        //         },
        //         {
        //           name: "品类",
        //           isChecked: false,
        //           value: "3"
        //         },
        //
        //       ]
        //     }
        //   }
        //
        // }
        //  复购时间维度


        if (id == 2) {
          this.listQuery.reBuyType = "";
          this.filterArray[2].list = [
            {
              name: "全部",
              isChecked: true,
              value: ""
            },
            {
              name: "履约前复购",
              isChecked: false,
              value: "10"
            },
            {
              name: "履约当日复购",
              isChecked: false,
              value: "9"
            },
            {
              name: "T+0",
              isChecked: false,
              value: "1"
            },
            {
              name: "T+4",
              isChecked: false,
              value: "7"
            },
            {
              name: "T+7",
              isChecked: false,
              value: "2"
            },
            {
              name: "T+14",
              isChecked: false,
              value: "3"
            },
            {
              name: "T+30",
              isChecked: false,
              value: "8"
            }
          ]
        } else {
          // id为1.3和4
          this.listQuery.reBuyType = "2";
          this.filterArray[2].list = [
            {
              name: "全部",
              isChecked: false,
              value: ""
            },
            {
              name: "履约前复购",
              isChecked: false,
              value: "10"
            },
            {
              name: "履约当日复购",
              isChecked: false,
              value: "9"
            },
            {
              name: "T+0",
              isChecked: false,
              value: "1"
            },
            {
              name: "T+4",
              isChecked: false,
              value: "7"
            },
            {
              name: "T+7",
              isChecked: true,
              value: "2"
            },
            {
              name: "T+14",
              isChecked: false,
              value: "3"
            },
            {
              name: "T+30",
              isChecked: false,
              value: "8"
            }
          ]
        }


        // 客户标签
        this.listQuery.custType = "1";
        this.filterArray[3].list = [
          {
            name: "全部",
            isChecked: false,
            value: ""
          },
          {
            name: "保洁新客",
            isChecked: true,
            value: "1"
          },
          {
            name: "保洁老客",
            isChecked: false,
            value: "2"
          },
          {
            name: "品类新客",
            isChecked: false,
            value: "2"
          },
          {
            name: "品类老客",
            isChecked: false,
            value: "2"
          }
        ];

        // 是否达标
        if (this.listQuery.showType == 2) {
          if (id == 1 || id == 2 || id == 3) {
            this.listQuery.isOk = "";
            this.filterArray[4] = {
              type: "是否达标",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: true,
                  value: ""
                },
                {
                  name: "已达标",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未达标",
                  isChecked: false,
                  value: "2"
                }]
            };
          } else {
            this.listQuery.isOk = "2";
            this.filterArray[4] = {
              type: "是否达标",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: false,
                  value: ""
                },
                {
                  name: "已达标",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未达标",
                  isChecked: true,
                  value: "2"
                }]
            };
          }
        } else {
          if (id == 1 || id == 2 || id == 3) {
            this.listQuery.isOk = "";
            this.filterArray[4] = {
              type: "是否复购",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: true,
                  value: ""
                },
                {
                  name: "已复购",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未复购",
                  isChecked: false,
                  value: "2"
                }]
            };
          } else {
            this.listQuery.isOk = "2";
            this.filterArray[4] = {
              type: "是否复购",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: false,
                  value: ""
                },
                {
                  name: "已复购",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未复购",
                  isChecked: true,
                  value: "2"
                }]
            };
          }
        }
      } else if (id == 5 || id == 6 || id == 7 || id == 8 || id == 9) {

        this.listQuery.orignGoodType = "1";
        if (this.listQuery.showType == 2) {
          this.filterArray[1] = {
            type: "原工单商品类型",
            typeValue: "orignGoodType",
            list: [
              {
                name: "全部",
                isChecked: false,
                value: "",
                isDisabled: true
              },
              {
                name: "保洁周期",
                isChecked: true,
                value: "1"
              },
              {
                name: "保洁单次",
                isChecked: false,
                value: "2"
              },
              {
                name: "品类",
                isChecked: false,
                value: "3"
              }

            ]
          };
        } else {
          this.filterArray[1] = {
            type: "原工单商品类型",
            typeValue: "orignGoodType",
            list: [
              {
                name: "全部",
                isChecked: false,
                value: "",
                isDisabled: false
              },
              {
                name: "保洁周期",
                isChecked: true,
                value: "1"
              },
              {
                name: "保洁单次",
                isChecked: false,
                value: "2"
              },
              {
                name: "品类",
                isChecked: false,
                value: "3"
              }

            ]
          };

        }

        // // 复购商品类型
        // if (id == 5 || id == 6 || id == 8) {
        //   this.listQuery.reBuyGoodType = "1";
        //   if (this.listQuery.showType == 2) {
        //     this.filterArray[2] = {
        //       type: "复购商品类型",
        //       typeValue: "reBuyGoodType",
        //       list: [
        //         {
        //           name: "全部",
        //           isChecked: false,
        //           value: "",
        //           isDisabled: true
        //         },
        //         {
        //           name: "保洁周期",
        //           isChecked: true,
        //           value: "1"
        //         },
        //         {
        //           name: "保洁单次",
        //           isChecked: false,
        //           value: "2"
        //         },
        //         {
        //           name: "品类",
        //           isChecked: false,
        //           value: "3"
        //         },
        //
        //       ]
        //     }
        //   } else {
        //     this.filterArray[2] = {
        //       type: "复购商品类型",
        //       typeValue: "reBuyGoodType",
        //       list: [
        //         {
        //           name: "全部",
        //           isChecked: false,
        //           value: "",
        //           isDisabled: false
        //         },
        //         {
        //           name: "保洁周期",
        //           isChecked: true,
        //           value: "1"
        //         },
        //         {
        //           name: "保洁单次",
        //           isChecked: false,
        //           value: "2"
        //         },
        //         {
        //           name: "品类",
        //           isChecked: false,
        //           value: "3"
        //         },
        //
        //       ]
        //     }
        //   }
        // } else {
        //
        //   if (this.listQuery.showType == 2) {
        //     this.listQuery.reBuyGoodType = "1";
        //     this.filterArray[2] = {
        //       type: "复购商品类型",
        //       typeValue: "reBuyGoodType",
        //       list: [
        //         {
        //           name: "全部",
        //           isChecked: false,
        //           value: "",
        //           isDisabled: true
        //         },
        //         {
        //           name: "保洁周期",
        //           isChecked: true,
        //           value: "1"
        //         },
        //         {
        //           name: "保洁单次",
        //           isChecked: false,
        //           value: "2"
        //         },
        //         {
        //           name: "品类",
        //           isChecked: false,
        //           value: "3"
        //         },
        //
        //       ]
        //     }
        //   } else {
        //     this.listQuery.reBuyGoodType = "";
        //     this.filterArray[2] = {
        //       type: "复购商品类型",
        //       typeValue: "reBuyGoodType",
        //       list: [
        //         {
        //           name: "全部",
        //           isChecked: true,
        //           value: "",
        //           isDisabled: false
        //         },
        //         {
        //           name: "保洁周期",
        //           isChecked: false,
        //           value: "1"
        //         },
        //         {
        //           name: "保洁单次",
        //           isChecked: false,
        //           value: "2"
        //         },
        //         {
        //           name: "品类",
        //           isChecked: false,
        //           value: "3"
        //         },
        //
        //       ]
        //     }
        //   }
        // }
        //  复购时间维度

        if (id == 5 || id == 8) {
          this.listQuery.reBuyType = "8";
          this.filterArray[2].list = [
            {
              name: "全部",
              isChecked: false,
              value: ""
            },
            {
              name: "履约前复购",
              isChecked: false,
              value: "10"
            },
            {
              name: "履约当日复购",
              isChecked: false,
              value: "9"
            },
            {
              name: "T+0",
              isChecked: false,
              value: "1"
            },
            {
              name: "T+4",
              isChecked: false,
              value: "7"
            },
            {
              name: "T+7",
              isChecked: false,
              value: "2"
            },
            {
              name: "T+14",
              isChecked: false,
              value: "3"
            },
            {
              name: "T+30",
              isChecked: true,
              value: "8"
            }
          ]
        } else {

          this.listQuery.reBuyType = "";
          this.filterArray[2].list = [
            {
              name: "全部",
              isChecked: true,
              value: ""
            },
            {
              name: "履约前复购",
              isChecked: false,
              value: "10"
            },
            {
              name: "履约当日复购",
              isChecked: false,
              value: "9"
            },
            {
              name: "T+0",
              isChecked: false,
              value: "1"
            },
            {
              name: "T+4",
              isChecked: false,
              value: "7"
            },
            {
              name: "T+7",
              isChecked: false,
              value: "2"
            },
            {
              name: "T+14",
              isChecked: false,
              value: "3"
            },
            {
              name: "T+30",
              isChecked: false,
              value: "8"
            }
          ]
        }


        // 客户标签
        this.listQuery.custType = "";
        this.filterArray[3].list = [
          {
            name: "全部",
            isChecked: true,
            value: ""
          },
          {
            name: "保洁新客",
            isChecked: false,
            value: "1"
          },
          {
            name: "保洁老客",
            isChecked: false,
            value: "2"
          },
          {
            name: "品类新客",
            isChecked: false,
            value: "2"
          },
          {
            name: "品类老客",
            isChecked: false,
            value: "2"
          }
        ];

        // 是否达标
        if (this.listQuery.showType == 2) {
          if (id == 5 || id == 6 || id == 7 || id == 8) {
            this.listQuery.isOk = "";
            this.filterArray[4] = {
              type: "是否达标",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: true,
                  value: ""
                },
                {
                  name: "已达标",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未达标",
                  isChecked: false,
                  value: "2"
                }]
            };
          } else {
            this.listQuery.isOk = "2";
            this.filterArray[4] = {
              type: "是否达标",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: false,
                  value: ""
                },
                {
                  name: "已达标",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未达标",
                  isChecked: true,
                  value: "2"
                }]
            };
          }
        } else {
          if (id == 5 || id == 6 || id == 7 || id == 8) {
            if (id == 6) {
              this.listQuery.isOk = "1";
              this.filterArray[4] = {
                type: "是否复购",
                typeValue: "isOk",
                list: [
                  {
                    name: "全部",
                    isChecked: false,
                    value: ""
                  },
                  {
                    name: "已复购",
                    isChecked: true,
                    value: "1"
                  },
                  {
                    name: "未复购",
                    isChecked: false,
                    value: "2"
                  }]
              };
            } else {
              this.listQuery.isOk = "";
              this.filterArray[4] = {
                type: "是否复购",
                typeValue: "isOk",
                list: [
                  {
                    name: "全部",
                    isChecked: true,
                    value: ""
                  },
                  {
                    name: "已复购",
                    isChecked: false,
                    value: "1"
                  },
                  {
                    name: "未复购",
                    isChecked: false,
                    value: "2"
                  }]
              };
            }


          } else {
            this.listQuery.isOk = "2";
            this.filterArray[4] = {
              type: "是否复购",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: false,
                  value: ""
                },
                {
                  name: "已复购",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未复购",
                  isChecked: true,
                  value: "2"
                }]
            };

          }
        }
      } else if (id == 10 || id == 11) {
        if ((this.listQuery.showType == 2)) {

          this.listQuery.orignGoodType = "1";
          //  服务者维度选周期
          this.filterArray[1] = {
            type: "原工单商品类型",
            typeValue: "orignGoodType",
            list: [
              {
                name: "全部",
                isChecked: false,
                value: "",
                isDisabled: true
              },
              {
                name: "保洁周期",
                isChecked: true,
                value: "1"
              },
              {
                name: "保洁单次",
                isChecked: false,
                value: "2"
              },
              {
                name: "品类",
                isChecked: false,
                value: "3"
              }

            ]
          };
        } else {

          // 订单维度选全部
          this.listQuery.orignGoodType = "";
          this.filterArray[1] = {
            type: "原工单商品类型",
            typeValue: "orignGoodType",
            list: [
              {
                name: "全部",
                isChecked: true,
                value: "",
                isDisabled: false
              },
              {
                name: "保洁周期",
                isChecked: false,
                value: "1"
              },
              {
                name: "保洁单次",
                isChecked: false,
                value: "2"
              },
              {
                name: "品类",
                isChecked: false,
                value: "3"
              }

            ]
          };
        }

        // // 复购商品类型
        //
        // if (this.listQuery.showType == 2) {
        //   this.listQuery.reBuyGoodType = "1";
        //   this.filterArray[2] = {
        //     type: "复购商品类型",
        //     typeValue: "reBuyGoodType",
        //     list: [
        //       {
        //         name: "全部",
        //         isChecked: false,
        //         value: "",
        //         isDisabled: true
        //       },
        //       {
        //         name: "保洁周期",
        //         isChecked: true,
        //         value: "1"
        //       },
        //       {
        //         name: "保洁单次",
        //         isChecked: false,
        //         value: "2"
        //       },
        //       {
        //         name: "品类",
        //         isChecked: false,
        //         value: "3"
        //       },
        //
        //     ]
        //   }
        // } else {
        //   this.listQuery.reBuyGoodType = "";
        //   this.filterArray[2] = {
        //     type: "复购商品类型",
        //     typeValue: "reBuyGoodType",
        //     list: [
        //       {
        //         name: "全部",
        //         isChecked: true,
        //         value: "",
        //         isDisabled: false
        //       },
        //       {
        //         name: "保洁周期",
        //         isChecked: false,
        //         value: "1"
        //       },
        //       {
        //         name: "保洁单次",
        //         isChecked: false,
        //         value: "2"
        //       },
        //       {
        //         name: "品类",
        //         isChecked: false,
        //         value: "3"
        //       },
        //
        //     ]
        //   }
        // }
        //  复购时间维度

        this.listQuery.reBuyType = "";
        this.filterArray[2].list = [
          {
            name: "全部",
            isChecked: true,
            value: ""
          },
          {
            name: "履约前复购",
            isChecked: false,
            value: "10"
          },
          {
            name: "履约当日复购",
            isChecked: false,
            value: "9"
          },
          {
            name: "T+0",
            isChecked: false,
            value: "1"
          },
          {
            name: "T+4",
            isChecked: false,
            value: "7"
          },
          {
            name: "T+7",
            isChecked: false,
            value: "2"
          },
          {
            name: "T+14",
            isChecked: false,
            value: "3"
          },
          {
            name: "T+30",
            isChecked: false,
            value: "8"
          }
        ];

        // 客户标签
        this.listQuery.custType = "";
        this.filterArray[3].list = [
          {
            name: "全部",
            isChecked: true,
            value: ""
          },
          {
            name: "保洁新客",
            isChecked: false,
            value: "1"
          },
          {
            name: "保洁老客",
            isChecked: false,
            value: "2"
          },
          {
            name: "品类新客",
            isChecked: false,
            value: "2"
          },
          {
            name: "品类老客",
            isChecked: false,
            value: "2"
          }
        ];


        // 是否达标
        if (this.listQuery.showType == 2) {
          this.listQuery.isOk = "";
          this.filterArray[4] = {
            type: "是否达标",
            typeValue: "isOk",
            list: [
              {
                name: "全部",
                isChecked: true,
                value: ""
              },
              {
                name: "已达标",
                isChecked: false,
                value: "1"
              },
              {
                name: "未达标",
                isChecked: false,
                value: "2"
              }]
          };

        } else {
          this.listQuery.isOk = "";
          this.filterArray[4] = {
            type: "是否复购",
            typeValue: "isOk",
            list: [
              {
                name: "全部",
                isChecked: true,
                value: ""
              },
              {
                name: "已复购",
                isChecked: false,
                value: "1"
              },
              {
                name: "未复购",
                isChecked: false,
                value: "2"
              }]
          };

        }
      }

      this.currentPage = 1;
      this.querySearch();
    },
    initMainChart(dom, rate, week, level, citys) {
      var chartDom = document.getElementById(dom);
      var myChart = this.$echarts.init(chartDom);
      var option;
      var seriesList = [];
      if (citys.length > 1) {
        rate.forEach((item, index) => {
          let obj =
          {
            name: citys[index],
            type: "line",
            data: item,
            showSymbol: false,
            markLine: {
              // 如图中红色标记线
              silent: true,
              symbol: false, // 不显示标记线两端端点符号
              lineStyle: {
                color: "#c37976"
              },
              data: [
                {
                  yAxis: level
                }
              ],
              label: {
                show: false
              }
            },
          };
          seriesList.push(obj);

        });
      } else {
        let rateName = citys[0];
        if (dom == 'dialogChart') {
          rateName = '';
        }
        seriesList = [
          {
            name: rateName,
            type: "line",
            data: rate,
            showSymbol: false,
            markLine: {
              // 如图中红色标记线
              silent: true,
              symbol: false, // 不显示标记线两端端点符号
              lineStyle: {
                color: "#c37976"
              },
              data: [
                {
                  yAxis: level
                }
              ],
              label: {
                show: false
              }
            },
          }
        ]
      }


      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
      };
      console.log(seriesList);
      if (dom == 'dialogChart') {
        option.legend = {
          data: [],
        }
      }
      myChart.setOption(option, true);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    toggleFilter() {
      this.filterShow = !this.filterShow;
    },
    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;
        }
      });
    },
    selectPost(e) {
      if (e.length == 0) {
        this.selectQuery.stationCode = [];
      }
    },
    selectCity(e) {
      console.log(e);
      if (e.length == 0) {
        this.getUserAuthData();
        this.selectQuery.postStationId = [];
        this.selectQuery.stationCode = [];
        return;
      }
      if (e.includes(0)) {
        //0是全国
        this.selectQuery.cityId = [0];
        this.postStationList = [];
        this.selectQuery.postStationId = [];
        this.allStationList = [];
        this.selectQuery.stationCode = [];
      }
    },
    checkpost(item) {
      if (
        this.selectQuery.cityId.length == 0 ||
        this.selectQuery.cityId.includes(0)
      ) {
        return true;
      }
      return this.selectQuery.cityId.includes(item.cityId);

    },
    checkstation(item) {
      if (this.selectQuery.postStationId.length == 0) {
        return true;
      }
      console.log(this.selectQuery.postStationId.includes(item.postStationId));

      return this.selectQuery.postStationId.includes(item.postStationId);

    },
    showChart(row) {
      if (this.listQuery.orignGoodType == 3 || this.sellectId == 10 || this.sellectId == 11) {
        this.$message.warning("交叉复购率走势开发中，敬请期待");
      } else {
        console.log(row);
        this.workerInfo = row;
        this.dialogShow = true;
        this.dialogTitle = '';
        let workerNo = row.worker_no;
        this.$nextTick(() => {
          this.queryReBuy(workerNo);
          // this.initMainChart('dialogChart');
        });
      }

    },
    filterItem(index, item, index1, item1) {
      console.log(index, item, index1, item1);

      if (!item1.isChecked && !item1.isDisabled) {
        if (item.typeValue == "showType") {
          this.listQuery.showType = item1.value;
          // this.filterArray =
          //   this.listQuery.showType == 2
          //     ? this.workerFilterArray
          //     : this.orderFilterArray;
          // if (this.listQuery.showType == 2) {
          //   this.listQuery.orignGoodType = 1;
          // } else {
          //   this.listQuery.orignGoodType = "";
          // }
          if (this.listQuery.showType == 2) {
            this.listQuery.isOk = '';
            this.listQuery.orignGoodType = '1';
            // this.listQuery.reBuyGoodType = '1';
            this.filterArray[4] = {
              type: "是否达标",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: true,
                  value: ""
                },
                {
                  name: "已达标",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未达标",
                  isChecked: false,
                  value: "2"
                }]
            };
            this.filterArray[1] = {
              type: "原工单商品类型",
              typeValue: "orignGoodType",
              list: [
                {
                  name: "全部",
                  isChecked: false,
                  value: "",
                  isDisabled: true
                },
                {
                  name: "保洁周期",
                  isChecked: true,
                  value: "1"
                },
                {
                  name: "保洁单次",
                  isChecked: false,
                  value: "2"
                },
                {
                  name: "品类",
                  isChecked: false,
                  value: "3"
                }

              ]
            };
            // this.filterArray[2] = {
            //   type: "复购商品类型",
            //   typeValue: "reBuyGoodType",
            //   list: [
            //     {
            //       name: "全部",
            //       isChecked: false,
            //       value: "",
            //       isDisabled: true
            //     },
            //     {
            //       name: "保洁周期",
            //       isChecked: true,
            //       value: "1"
            //     },
            //     {
            //       name: "保洁单次",
            //       isChecked: false,
            //       value: "2"
            //     },
            //     {
            //       name: "品类",
            //       isChecked: false,
            //       value: "3"
            //     },
            //
            //   ]
            // }

          } else {
            this.listQuery.isOk = '';
            this.listQuery.orignGoodType = '';
            this.listQuery.reBuyGoodType = '';
            this.filterArray[1] = {
              type: "原工单商品类型",
              typeValue: "orignGoodType",
              list: [
                {
                  name: "全部",
                  isChecked: true,
                  value: "",
                  isDisabled: false
                },
                {
                  name: "保洁周期",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "保洁单次",
                  isChecked: false,
                  value: "2"
                },
                {
                  name: "品类",
                  isChecked: false,
                  value: "3"
                }

              ]
            };
            // this.filterArray[2] = {
            //   type: "复购商品类型",
            //   typeValue: "reBuyGoodType",
            //   list: [
            //     {
            //       name: "全部",
            //       isChecked: true,
            //       value: "",
            //       isDisabled: false
            //     },
            //     {
            //       name: "保洁周期",
            //       isChecked: false,
            //       value: "1"
            //     },
            //     {
            //       name: "保洁单次",
            //       isChecked: false,
            //       value: "2"
            //     },
            //     {
            //       name: "品类",
            //       isChecked: false,
            //       value: "3"
            //     },
            //
            //   ]
            // }

            this.filterArray[4] = {
              type: "是否复购",
              typeValue: "isOk",
              list: [
                {
                  name: "全部",
                  isChecked: true,
                  value: ""
                },
                {
                  name: "已复购",
                  isChecked: false,
                  value: "1"
                },
                {
                  name: "未复购",
                  isChecked: false,
                  value: "2"
                }]
            };

          }
          console.log(this.listQuery);
        } else {
          this.listQuery[item.typeValue] = item1.value;
          console.log(this.listQuery);
        }

        let current = this.filterArray;
        current[index].list.map(item => {
          item.isChecked = false;
        });
        this.filterArray = current;
        let obj = this.filterArray[index].list[index1];

        this.$set(obj, "isChecked", true);
        this.sellectId = '';
        this.currentPage = 1;
        this.querySearch();
      }
    }
  }
};
</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: 1300px;
  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: 15px;
  border-radius: 10px;
  height: 390px;
  display: flex;
  /* width: 1450px; */
  /* overflow: scroll; */
}

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

.sdfgtu,
.zqfgtu {
  /* float: left;
  width: 420px;
  border: 1px solid red; */
  flex: 1;
  height: 370px;
}

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

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

.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>
