<template>
  <div class="full-box">
    <div class="data-box" style="padding-bottom: 20px;">
      <div class="row items-center" style="margin-bottom: 20px;">
        <div class="page-title col">平台数据</div>
        <div class="row items-center">
          <el-select v-model="parameters.CusType" style="width:100px; margin-right: 20px;height:40px" @change="handleDateChange()">
            <el-option v-for="(x,i) in platforms" :key="i" :label="x.Name" :value="x.Id" ></el-option>
          </el-select>
          <template v-if="userInfo.RB_Branch_id==0||userInfo.RB_Branch_id==49">
            <el-select
              v-model="parameters.branchId"
              style="margin-right: 20px;height:40px"
              @change="getDepartment(),parameters.RB_Department_Id=null,getEmpList(),parameters.empIdList=[],handleDateChange()"
            >
              <el-option
                v-for="(x, i) in branchs"
                :key="i"
                :label="x.BName"
                :value="x.Id"
              ></el-option>
            </el-select>
          </template>
          <treeselect style="margin-right: 20px;width:200px;" class="radius-input" :options="departmentList" v-model="parameters.RB_Department_Id"
              :label="$t('pub.unlimitedSel')" :normalizer="normalizer"  @select="changeDepart" placeholder="请选择部门" />
          <el-select
            v-model="parameters.empId"
            style="margin-right: 20px;height: 40px;"
            @change="handleDateChange()"
            filterable
            clearable
            @clear="handleDateChange()"
          >
            <el-option
              v-for="(x, i) in empList"
              :key="i"
              :label="x.name"
              :value="x.empId"
            ></el-option>
          </el-select>
          
          <el-date-picker
            v-model="parameters.dateRange"
            type="daterange"
            align="right"
            unlink-panels
            @change="handleDateChange()"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :clearable="false"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="card rounded row items-center">
        <div
          class="menu-item"
          :class="{ active: i == active }"
          v-for="(x, i) in menus"
          :key="i"
          @click="handleClick(i)"
        >
          {{ x.title }}
        </div>
      </div>
      <div class="sub-title q-my-md">今日实时数据  </div>
      <div class="card rounded big">
        <div style="margin: 0 12px;">
          <div class="sub-title">今日客户数据</div>
          <div class="">
            <span class="dot"></span>
            <span class="text-info">数据更新：实时</span>
          </div>
        </div>
        <div class="q-mt-md row items-center">
          <div class="data-items col NumCursorP" @click="goUrl(1)">
            <div>客户总数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum" style="">
                  <template v-if="customerObj">
                    {{ customerObj.TotalCustomerCount }}
                  </template>
              </span>
              <span ></span>
              <span>个</span>
            </div>
            <div class="text-info">&nbsp;</div>
          </div>
          <el-divider
            direction="vertical"
            style="margin: 0 12px;height: 80%;"
          ></el-divider>
          <div class="data-items col NumCursorP" @click="goUrl(2)">
            <div>今日新增客户</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">
                <template v-if="customerObj">
                  {{ customerObj.TodayCustomerCount }}
                </template>
              </span>
              <span>个</span>
            </div>
            <div class="text-info">
              <span>较昨日</span>
              <template v-if="customerObj">
                <template v-if="customerObj.CustomerPercent > 0">
                  <span class="green" style="margin:0 12px 0 5px;">
                    {{ customerObj.CustomerPercent }}%</span
                  >
                </template>
                <template v-else>
                  <span class="red" style="margin-left: 5px;"
                    >{{ customerObj.CustomerPercent }}%</span
                  >
                </template>
              </template>
            </div>
          </div>
          <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
          <div class="data-items col NumCursorP" @click="goUrl(3)">
            <div>小程序激活数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">
                <template v-if="customerObj">
                  {{ customerObj.TotalActivationCount }}
                </template></span
              >
              <span>个</span>
            </div>
            <div class="text-info">&nbsp;</div>
          </div>

          <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
          <div class="data-items col NumCursorP" @click="goUrl(4)">
            <div>今日激活数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum"
                ><template v-if="customerObj">
                  {{ customerObj.TodayActivationCount }}
                </template></span
              >
              <span>个</span>
            </div>
            <div class="text-info">
              <span>较昨日</span>
              <template v-if="customerObj">
                <template v-if="customerObj.ActivationPrecent > 0">
                  <span class="green" style="margin:0 12px 0 5px;">
                    {{ customerObj.ActivationPrecent }}%</span
                  >
                </template>
                <template v-else>
                  <span class="red" style="margin-left: 5px;">
                    {{ customerObj.ActivationPrecent }}%</span
                  >
                </template>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="card rounded big q-mt-md">
        <div style="margin: 0 12px;">
          <div class="sub-title">客户数据走势</div>
          <div class="">
            <span class="dot"></span>
            <span class="text-info">{{ parameters.dateRange.join("-") }}</span>
          </div>
        </div>
        <div style="height: 320px;">
          <Customer :chartData="customerObj"  v-if="customerObj" :cusType="parameters.CusType"></Customer>
        </div>
      </div>
      <div class="sub-title q-my-md green">交易核心数据</div>
      <div class="card rounded big">
        <div class="row items-center">
          <div style="margin: 0 12px;" class="col">
            <div class="sub-title">客户交易数据</div>
            <div class="">
              <span class="dot"></span>
              <span class="text-info">{{
                parameters.dateRange.join(" - ")
              }}</span>
            </div>
          </div>
        </div>
        <div class="q-mt-md row items-center">
          <div class="data-items col NumCursorP" @click="goUrl(5)">
            <div>交易金额</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">
                <template v-if="customerObj">
                    {{customerObj.OrderTotalPreferPrice}}
                </template>
              </span>
              <span>元</span>
            </div>
          </div>
          <el-divider
            direction="vertical"
            style="margin: 0 12px;height: 80%;"
          ></el-divider>
          <div class="data-items col NumCursorP" @click="goUrl(6)">
            <div>收客人数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">
                 <template v-if="customerObj">
                    {{customerObj.OrderTotalGuestNum}}
                </template>
              </span>
              <span>人</span>
            </div>
          </div>
          <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
          <div class="data-items col NumCursorP" @click="goUrl(7)">
            <div>订单数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">
                  <template v-if="customerObj">
                    {{customerObj.OrderTotalCount}}
                </template>
              </span>
              <span>个</span>
            </div>
          </div>
          <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
          <div class="data-items col NumCursorP" @click="goUrl(8)">
            <div>用券订单数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">     <template v-if="customerObj">
                    {{customerObj.OrderTotalUseCoupinCount}}
                </template></span>
              <span>个</span>
            </div>
          </div>
        </div>
      </div>
      <div class="card rounded big q-mt-md">
        <div style="margin: 0 12px;">
          <div class="sub-title">交易趋势图</div>
          <div class="">
            <span class="dot"></span>
            <span class="text-info">{{
              parameters.dateRange.join(" - ")
            }}</span>
          </div>
        </div>
        <div style="height: 320px;">
          <Tradecount :chartData="customerObj" v-if="customerObj" :cusType="parameters.CusType"></Tradecount>
        </div>
      </div>

      <div class="sub-title q-my-md green">访问核心数据</div>
      <div class="card rounded big">
        <div style="margin: 0 12px;">
          <div class="sub-title">用户活跃概况</div>
          <div class="">
            <span class="dot"></span>
            <span class="text-info"
              >数据更新：{{ parameters.dateRange[1] }}</span
            >
          </div>
        </div>
        <div class="q-mt-md row items-center">
          <div class="data-items col">
            <div>小程序累计用户数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">{{ baseWechatData.Visit_Total }}</span>
              <span>人</span>
            </div>
            <div class="text-info">
              <span>较昨日</span>
              <span
                :class="{
                  red: baseWechatData.Visit_TotalYRate < 0,
                  green: baseWechatData.Visit_TotalYRate >= 0
                }"
                style="margin:0 12px 0 5px;"
                >{{ baseWechatData.Visit_TotalYRate > 0 ? "+" : "" }}
                {{ baseWechatData.Visit_TotalYRate }}%</span
              >
              <span>较七日前</span>
              <span
                :class="{
                  red: baseWechatData.Visit_TotalSRate < 0,
                  green: baseWechatData.Visit_TotalSRate >= 0
                }"
                style="margin:0 12px 0 5px;"
                >{{ baseWechatData.Visit_TotalSRate > 0 ? "+" : "" }}
                {{ baseWechatData.Visit_TotalSRate }}%</span
              >
            </div>
          </div>
          <el-divider
            direction="vertical"
            style="margin: 0 12px;height: 80%;"
          ></el-divider>
          <div class="data-items col">
            <div>日访问人数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">{{ baseWechatData.Visit_UV }}</span>
              <span>人</span>
            </div>
            <div class="text-info">
              <span>较昨日</span>
              <span
                :class="{
                  red: baseWechatData.Visit_UVYRate < 0,
                  green: baseWechatData.Visit_UVYRate >= 0
                }"
                style="margin:0 12px 0 5px;"
                >{{ baseWechatData.Visit_UVYRate > 0 ? "+" : "" }}
                {{ baseWechatData.Visit_UVYRate }}%</span
              >
              <span>较七日前</span>
              <span
                :class="{
                  red: baseWechatData.Visit_UVSRate < 0,
                  green: baseWechatData.Visit_UVSRate >= 0
                }"
                style="margin:0 12px 0 5px;"
                >{{ baseWechatData.Visit_UVSRate > 0 ? "+" : "" }}
                {{ baseWechatData.Visit_UVSRate }}%</span
              >
            </div>
          </div>
          <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
          <div class="data-items col">
            <div>日打开次数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">{{ baseWechatData.Session_CNT }}</span>
              <span>人</span>
            </div>
            <div class="text-info">
              <span>较昨日</span>
              <span
                :class="{
                  red: baseWechatData.Session_CNTYRate < 0,
                  green: baseWechatData.Session_CNTYRate >= 0
                }"
                style="margin:0 12px 0 5px;"
                >{{ baseWechatData.Session_CNTYRate > 0 ? "+" : "" }}
                {{ baseWechatData.Session_CNTYRate }}%</span
              >
              <span>较七日前</span>
              <span
                :class="{
                  red: baseWechatData.Session_CNTSRate < 0,
                  green: baseWechatData.Session_CNTSRate >= 0
                }"
                style="margin:0 12px 0 5px;"
                >{{ baseWechatData.Session_CNTSRate > 0 ? "+" : "" }}
                {{ baseWechatData.Session_CNTSRate }}%</span
              >
            </div>
          </div>

          <el-divider direction="vertical" style="margin: 0 12px;"></el-divider>
          <div class="data-items col">
            <div>日转发人数</div>
            <div class="num" style="margin: 6px 0;">
              <span class="datanum">{{ baseWechatData.Share_UV }}</span>
              <span>人</span>
            </div>
            <div class="text-info">
              <span>较昨日</span>
              <span
                :class="{
                  red: baseWechatData.Share_UVYRate < 0,
                  green: baseWechatData.Share_UVYRate >= 0
                }"
                style="margin:0 12px 0 5px;"
                >{{ baseWechatData.Share_UVYRate > 0 ? "+" : "" }}
                {{ baseWechatData.Share_UVYRate }}%</span
              >
              <span>较七日前</span>
              <span
                :class="{
                  red: baseWechatData.Share_UVSRate < 0,
                  green: baseWechatData.Share_UVSRate >= 0
                }"
                style="margin:0 12px 0 5px;"
                >{{ baseWechatData.Share_UVSRate > 0 ? "+" : "" }}
                {{ baseWechatData.Share_UVSRate }}%</span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="q-mt-md row items-center">
        <div class="card rounded big col q-mr-md">
          <div style="margin: 0 12px;">
            <div class="sub-title">新增用户概况</div>
            <div class="">
              <span class="dot"></span>
              <span class="text-info">数据更新：{{ parameters.dateRange[1] }}</span>
            </div>
          </div>
          <div class="q-mt-md row items-center">
            <div class="data-items col">
              <div>日新增用户</div>
              <div class="num" style="margin: 6px 0;">
                <span class="datanum">{{ baseWechatData.Visit_UV_New }}</span>
                <span>人</span>
              </div>
              <div class="text-info">
                <span>较昨日</span>
                <span
                  :class="{
                    red: baseWechatData.Visit_UV_NewYRate < 0,
                    green: baseWechatData.Visit_UV_NewYRate >= 0
                  }"
                  style="margin:0 12px 0 5px;"
                  >{{ baseWechatData.Visit_UV_NewYRate > 0 ? "+" : "" }}
                  {{ baseWechatData.Visit_UV_NewYRate }}%</span
                >
                <span>较七日前</span>
                <span
                  :class="{
                    red: baseWechatData.Visit_UV_NewSRate < 0,
                    green: baseWechatData.Visit_UV_NewSRate >= 0
                  }"
                  style="margin:0 12px 0 5px;"
                  >{{ baseWechatData.Visit_UV_NewSRate > 0 ? "+" : "" }}
                  {{ baseWechatData.Visit_UV_NewSRate }}%</span
                >
              </div>
            </div>
            <el-divider
              direction="vertical"
              style="margin: 0 12px;height: 80%;"
            ></el-divider>
            <div class="data-items col">
              <div>人均停留时长</div>
              <div class="num" style="margin: 6px 0;">
                <span class="datanum">{{ baseWechatData.Stay_Time_UV }}</span>
                <span>秒</span>
              </div>
              <div class="text-info">
                <span>较昨日</span>
                <span
                  :class="{
                    red: baseWechatData.Stay_Time_UVYRate < 0,
                    green: baseWechatData.Stay_Time_UVYRate >= 0
                  }"
                  style="margin:0 12px 0 5px;"
                  >{{ baseWechatData.Stay_Time_UVYRate > 0 ? "+" : "" }}
                  {{ baseWechatData.Stay_Time_UVYRate }}%</span
                >
                <span>较七日前</span>
                <span
                  :class="{
                    red: baseWechatData.Stay_Time_UVSRate < 0,
                    green: baseWechatData.Stay_Time_UVSRate >= 0
                  }"
                  style="margin:0 12px 0 5px;"
                  >{{ baseWechatData.Stay_Time_UVSRate > 0 ? "+" : "" }}
                  {{ baseWechatData.Stay_Time_UVSRate }}%</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="card rounded big col">
          <div style="margin: 0 12px;">
            <div class="sub-title">小程序留存概况</div>
            <div class="">
              <span class="dot"></span>
              <span class="text-info"
                >数据更新： {{ parameters.dateRange[1] }}</span
              >
            </div>
          </div>
          <div class="q-mt-md row items-center">
            <div class="data-items col">
              <div>新增用户留存</div>
              <div class="num" style="margin: 6px 0;">
                <span class="datanum">{{ baseWechatData.NewVisitUV }}</span>
                <span>人</span>
              </div>
              <div class="text-info">
                <span>较昨日</span>
                <span
                  :class="{
                    red: baseWechatData.NewVisitUVYRate < 0,
                    green: baseWechatData.NewVisitUVYRate >= 0
                  }"
                  style="margin:0 12px 0 5px;"
                  >{{ baseWechatData.NewVisitUVYRate > 0 ? "+" : "" }}
                  {{ baseWechatData.NewVisitUVYRate }}%</span
                >
                <span>较七日前</span>
                <span
                  :class="{
                    red: baseWechatData.NewVisitUVSRate < 0,
                    green: baseWechatData.NewVisitUVSRate >= 0
                  }"
                  style="margin:0 12px 0 5px;"
                  >{{ baseWechatData.NewVisitUVSRate > 0 ? "+" : "" }}
                  {{ baseWechatData.NewVisitUVSRate }}%</span
                >
              </div>
            </div>
            <el-divider
              direction="vertical"
              style="margin: 0 12px;height: 80%;"
            ></el-divider>
            <div class="data-items col">
              <div>活跃用户留存数</div>
              <div class="num" style="margin: 6px 0;">
                <span class="datanum">{{ baseWechatData.VisitUV }}</span>
                <span>人</span>
              </div>
              <div class="text-info">
                <span>较昨日</span>
                <span
                  :class="{
                    red: baseWechatData.VisitUVYRate < 0,
                    green: baseWechatData.VisitUVYRate >= 0
                  }"
                  style="margin:0 12px 0 5px;"
                  >{{ baseWechatData.VisitUVYRate > 0 ? "+" : "" }}
                  {{ baseWechatData.VisitUVYRate }}%</span
                >
                <span>较七日前</span>
                <span
                  :class="{
                    red: baseWechatData.VisitUVSRate < 0,
                    green: baseWechatData.VisitUVSRate >= 0
                  }"
                  style="margin:0 12px 0 5px;"
                  >{{ baseWechatData.VisitUVSRate > 0 ? "+" : "" }}
                  {{ baseWechatData.VisitUVSRate }}%</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card rounded big q-mt-md">
        <div style="margin: 0 12px; " class="row items-center">
          <div class="col">
            <div class="sub-title">访问核心指标趋势</div>
            <div class="">
              <span class="text-info">{{
                parameters.dateRange.join(" - ")
              }}</span>
            </div>
          </div>
          <el-select v-model="coreId" style="width: 140px; text-align: right;" @change="formatCoreTrend()">
            <el-option
              v-for="(x, i) in coreLists"
              :key="i"
              :label="x.Name"
              :value="x.Id"
              
            ></el-option>
          </el-select>
        </div>
        <div class="text-small q-my-md" style="padding:0 12px;" v-if="currentCoreObj">平均：{{ currentCoreObj.avg }}{{ currentCoreObj.unit }}</div>
        <div style="height: 320px; padding:0 12px">
          <Coreview :chart-data="currentCoreObj" v-if="currentCoreObj"></Coreview>
        </div>
      </div>

      <div class="q-mt-md row">
        <div class="card rounded big col">
          <div style="margin: 0 12px; " class="row items-center">
            <div class="col">
              <div class="sub-title">页面访问Top10</div>
              <div class="">
                <span class="text-info">{{
                  parameters.dateRange.join(" - ")
                }}</span>
              </div>
            </div>
            <el-select v-model="metricsId" style="width: 140px;" @change="formatPageData">
              <el-option
                v-for="(x, i) in metrics"
                :key="i"
                :label="x.name"
                :value="x.id"
              ></el-option>
            </el-select>
          </div>
          <div style="height: 320px; padding:0 12px;" class="q-mt-md">
            <Pagecount :chart-data="currentPageObj" v-if="currentPageObj"></Pagecount>
          </div>
        </div>
        <div class="card rounded big col q-ml-md">
          <div style="margin: 0 12px; " class="row items-center">
            <div class="col">
              <div class="sub-title">客户分布占比</div>
              <div class="">
                <span class="text-info">{{
                  parameters.dateRange.join(" - ")
                }}</span>
              </div>
            </div>
            <el-select v-model="areaId" style="width: 140px;" @change="formatAreaData">
              <el-option
                v-for="(x, i) in areas"
                :key="i"
                :label="x.Name"
                :value="x.Id"
              ></el-option>
            </el-select>
          </div>
          <div style="height: 320px; padding:0 12px;" class="q-mt-md">
            <Citiescount v-if="currentAreaObj" :chart-data="currentAreaObj"></Citiescount>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Customer from "./components/customer.vue";
import Coreview from "./components/coreview.vue";
import Pagecount from "./components/pagecount.vue";
import Citiescount from "./components/citiescount.vue";
import Tradecount from "./components/tradecount.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
    Customer,
    Coreview,
    Pagecount,
    Citiescount,
    Tradecount,
    Treeselect,
  },
  data() {
    return {
      active: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 8);
              end.setTime(end.getTime());
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
              end.setTime(end.getTime());
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
              end.setTime(end.getTime());
              picker.$emit("pick", [start, end]);
            }
          }
        ],
        disabledDate(time) {
          return time.getTime() > new Date(Date.now() );
        }
      },
      menus: [
        {
          title: "客户数据",
          path: "coreData"
        },
        {
          title: "交易数据",
          path: "realTimeData"
        },
        {
          title: "访问分析",
          path: "accessAnalysis"
        },
        {
          title: "产品统计",
          path: "productStatistics"
        }
      ],
      branchs: [],
      parameters: {
        branchId: -1,
        dateRange: [],
        StartDate: "",
        EndDate: "",
        RB_Department_Id:null,
        empIdList:[],
        empId:"",
        CusType:0,//客户类型(0-同行(旅小友小程序)，1-直客(和平国旅小程序))
      },
      normalizer(node) {
        var obj = {
          id: node.DepartmentId,
          label: node.DepartmentName,
        };
        if (node.ChildList != null && node.ChildList.length > 0) {
          obj.children = node.ChildList;
        }
        return obj;
      },
      departmentList:[],//部门列表
      empList:[],//员工列表
      coreId: 1,
      coreLists: [
        {
          Id: 1,
          value: "Visit_Total",
          Name: "累计用户数",
          Unit:'人'
        },
        {
          Id: 2,
          value:"Visit_UV",
          Name: "日访问人数",
          Unit:'人'
        },
        {
          Id: 3,
          value: "Session_CNT",
          Name: "日打开次数",
          Unit:'次'
        },
        {
          Id: 4,
          value: "Share_UV",
          Name: "转发人数",
          Unit:'人'
        },
        {
          Id: 5,
          value: "Visit_UV_New",
          Name: "日新增用户",
          Unit:'人'
        },
        {
          Id: 9,
          value: "VisitUV",
          Name: "活跃日留存",
          Unit:'人'
        },
        {
          Id: 10,
          value: "NewVisitUV",
          Name: "新增日留存",
          Unit:'人'
        },
        {
          Id: 11,
          value: "Stay_Time_UV",
          Name: "人均停留时长",
          Unit:'秒'
        },
        {
          Id: 12,
          value: "Share_UV",
          Name: "转发次数",
          Unit:'次'
        },
        {
          Id: 13,
          value: "Visit_Depth",
          Name: "平均访问深度",
          Unit:'层'
        },
        {
          Id: 14,
          value: "Stay_Time_Session",
          Name: "次均停留时长",
          Unit:'秒'
        },
      ],
      metrics: [
        {
          id: 1,
          name: "访问次数",
          value: "PageVisitPV",
          unit:'次'
        },
        {
          id: 2,
          name: "访问人数",
          value: 'PageVisitUV',
          unit:'人'
        },
        {
          id: 3,
          name: "次均停留时长",
          value: "PageStaytimePv",
          unit:'秒'
        },
        {
          id: 4,
          name: "进入页次数",
          value:'EntrypagePv',
          unit:'次'
        },
        {
          id: 5,
          name: "退出页次数",
          value:'ExitpagePv',
          unit:'次'
        },
        {
          id: 6,
          name: "转发次数",
          value: 'PageSharePv',
          unit:'次'
        },
        {
          id: 7,
          name: "转发人数",
          value:'PageShareUV',
          unit:'人'
        }
      ],
      metricsId: 2,
      areas: [
        {
          Id: 1,
          Name: "省份",
          Value: 'province'
        },
        {
          Id: 2,
          Name: "城市",
          Value: 'city'
        }
      ],
      platforms: [
        {
          Id: 0,
          Name: "同业"
        },
        {
          Id: 1,
          Name: "直客"
        }
      ],
      platformId: 1,
      areaId: 1,
      customerObj: null,
      baseWechatData: {},
      trendData:{},
      currentCoreObj:null,
      pageData:{},
      currentPageObj:null,
      areaData:{},
      currentAreaObj:null,
      userInfo:{},
    };
  },
  created() {
    this.userInfo=this.getLocalStorage();
    if(this.userInfo.RB_Branch_id!=0&&this.userInfo.RB_Branch_id!=49)
    {
       this.parameters.branchId=this.userInfo.RB_Branch_id;
    }
    this.getCompanyList();
    this.getDepartment();
    this.getEmpList();
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    end.setTime(end.getTime());
    this.parameters.dateRange = [
      start.toLocaleString().split(" ")[0],
      end.toLocaleString().split(" ")[0]
    ];
    this.getHomeChat();
    this.getCustomerStatic();
    this.getPageData()
    this.getAreaData()
  },
  mounted() {},
  methods: {
    goUrl(type) {
      if(this.parameters.CusType==1&&(type==1||type==2))  {
      
      var CStartTime="";
       var CEndDate="";
        if(type==2){
          // 创建当前日期对象
const today = new Date();
// 获取年份、月份和日期，并补零处理
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
const day = String(today.getDate()).padStart(2, '0');

// 组合成YYYY-MM-DD格式
const formattedDate = `${year}/${month}/${day}`;

console.log(this.parameters.dateRange[0],"66666"); // 输出例如：2023-10-05
          var CStartTime=formattedDate;//this.parameters.dateRange[0];
        var CEndDate=formattedDate;//this.parameters.dateRange[1];
        }
        let query=  {
                        CStartTime: CStartTime,
                        CEndDate: CEndDate,
                      // EnterTime:this.parameters,
                        BranchId: this.parameters.branchId+"",
                       // RB_Department_Id:this.parameters.RB_Department_Id,
                        EnterID:this.parameters.empId,
                        blank: "y",
                    }
                   
                    this.OpenNewPage('/directCustomerList',query);
      }
      else{
        let query=  {
                CStartDate: this.parameters.dateRange[0],
                CEndDate: this.parameters.dateRange[1],
                BranchId: this.parameters.branchId,
                RB_Department_Id:this.parameters.RB_Department_Id,
                EmployeeId:this.parameters.empId,
                blank: "y",
            }
            if(this.parameters.CusType==0){
                this.OpenNewPage('/salesVolumeRank',query);
            }
      }
    },
    changeDepart(node, instanceId){
      this.parameters.RB_Department_Id=node.DepartmentId;
      this.parameters.empIdList=[];
      this.parameters.empId="";
      this.getEmpList();
      this.handleDateChange();
    },
    //获取部门列表
   getDepartment() {
     let postMsg = {
          RB_Group_Id: this.userInfo.RB_Group_id,
          RB_Branch_Id: "-1",
          Status: "0",
        };
        this.departmentList=[];
        postMsg.RB_Branch_Id=this.parameters.branchId;
        this.apipost(
          "admin_Get_GetDepartmentTreeForReceiveQuery",
          postMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.departmentList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
        });
    },
    getEmpList(){
        this.empList=[];
        let userMsg = {
          RB_Group_id: this.userInfo.RB_Group_id,
          RB_Branch_id: "-1",
          departmentId: "0",
          IsLeave: "-1",
        };
        if(this.parameters.RB_Department_Id){
          userMsg.departmentId=this.parameters.RB_Department_Id;
        }
        userMsg.RB_Branch_id=this.parameters.branchId;
        this.apipost(
          "app_get_employeeInfo_v2", userMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.empList = res.data.data;
            }
        });
    },
    handleDateChange() {
      this.getCustomerStatic();
      this.getHomeChat();
      this.getPageData()
      this.getAreaData()
    },
    handleCompanyChange() {
      this.getCustomerStatic();
    },
    getCustomerStatic() {
      if (this.parameters.dateRange && this.parameters.dateRange.length == 2) {
        var tempArray = this.parameters.dateRange;
        this.parameters.StartDate = tempArray[0];
        this.parameters.EndDate = tempArray[1];
      }
      var that = this;
      that.apipost("erp_post_GetCustomerStatic", that.parameters, res => {
        if (res.data.resultCode == 1) {
          this.customerObj = res.data.data;
        } else {
          that.Error(res.data.message);
        }
      });
    },
    handleClick(index) {
      this.active = index;
    },
    getCompanyList() {
      const userInfo = this.getLocalStorage();
      const RB_Group_id = userInfo.RB_Group_id;
      const msg = {
        Status: 0,
        is_show: 0,
        RB_Group_Id: RB_Group_id
      };
      this.apipost(
        "admin_get_BranchGetList",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.branchs = [
              {
                Id: -1,
                BName: "全部"
              }
            ];
            this.branchs = this.branchs.concat(res.data.data);
          }
        },
        err => {}
      );
    },
    getHomeChat() {
      const msg = {
        StartDate: this.parameters.dateRange[0],
        EndDate: this.parameters.dateRange[1],
        WechatType:this.parameters.CusType
      };
      this.apipost(
        "wechatstatistics_post_HomeWechatStatisticsList",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.baseWechatData = res.data.data;
            this.getTrendWechatData()
          }
        },
        err => {}
      );
    },
    getTrendWechatData(){
        const msg = {
            StartDate: this.parameters.dateRange[0],
            EndDate: this.parameters.dateRange[1],
            WechatType:this.parameters.CusType,
        };
        this.apipost(
            "wechatstatistics_post_WechatStatisticsList",
            msg,
            res => {
            if (res.data.resultCode == 1) {
                this.trendData = res.data.data;
                this.formatCoreTrend()
            }
            },
            err => {}
        );
    },
    getPageData(){
        const msg = {
            StartDate: this.parameters.dateRange[0],
            EndDate: this.parameters.dateRange[1],
            WechatType:this.parameters.CusType
        };
        this.apipost(
            "wechatstatistics_post_PageVisitStatisticsList",
            msg,
            res => {
                if (res.data.resultCode == 1) {
                    this.pageData = res.data.data;
                    this.formatPageData()
                }
            },
            err => {}
        );
    },
    getAreaData(){
        const msg = {
            StartDate: this.parameters.dateRange[0],
            EndDate: this.parameters.dateRange[1],
            WechatType:this.parameters.CusType
        };
        this.apipost(
            "wechatstatistics_post_UserPortraitStatisticsList",
            msg,
            res => {
                if (res.data.resultCode == 1) {
                    this.areaData = res.data.data;
                    this.formatAreaData()
                }
            },
            err => {}
        );
    },
    formatAreaData(){
        if(!this.areaData) return
        const filed = this.areas.find(x=>x.Id == this.areaId)
        let seriesData = this.areaData[filed.Value].map(x=> {
            return {
                name:x.DateStr,
                value:x.UserPortraitValue
            }
        })
        this.currentAreaObj = {
            name:filed.Name+"分布占比",
            pieData:seriesData
        }

    },
    formatPageData(){
        if(!this.pageData) return
        const filed = this.metrics.find(x=>x.id == this.metricsId)
        const unit = filed.unit
        let xAxisData = this.pageData[filed.value].map(x=>x.DateStr)
        let seriesData = this.pageData[filed.value].map(x=>x[filed.value])
        this.currentPageObj = {
            unit:unit,
            xAxisData:xAxisData,
            barData:{
                name:filed.name,
                data:seriesData
            }
        }
    },
    formatCoreTrend(){
        if(!this.trendData) return
        const filed = this.coreLists.find(x=>x.Id == this.coreId)
        const avg = this.trendData[filed.value]
        const unit = filed.Unit
        const xAxisData = this.trendData.List.map(x=>x.CreateDayStr)
        const seriesData = this.trendData.List.map(x=>x[filed.value])
        if(!xAxisData || !seriesData) return
        this.currentCoreObj = {
            avg:avg,
            unit:unit,
            xAxisData:xAxisData,
            lineData:{
                name:filed.Name,
                data:seriesData
            }
        }
    }
  }
};
</script>
<style>
.NumCursorP {
  cursor: pointer;
}
.full-box {
  width: 100%;
  height: 100%;
  background: #f7f7f7;
  padding: 20px;
  box-sizing: border-box;
}

.full-box .dot {
  color: #00ce8b;
  amination: realtime 2s infinite;
  -webkit-animation: realtime 2s infinite;
  font-size: 27px;
  vertical-align: 3px;
  width: 4px;
  height: 4px;
  background-color: #00ce8b;
  display: inline-block;
  border-radius: 50%;
  margin-right: 3px;
}

.full-box .text-info {
  display: inline-block;
  vertical-align: baseline;
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.3);
  font-family: Avenir, "PingFang SC Regular";
}

.full-box .red {
  color: #fa5151;
}

.full-box .green {
  color: #00ce8b !important;
}

.full-box .el-divider {
  height: 60px !important;
  margin: 0 12px;
  background: #f7f7f7;
}

.full-box .num {
  font-family: Avenir;
}

.full-box .q-mt-md {
  margin-top: 20px;
}

.full-box .q-mb-md {
  margin-bottom: 20px;
}

.full-box .q-ml-md {
  margin-left: 20px;
}

.full-box .q-mr-md {
  margin-right: 20px;
}

.full-box .q-mx-md {
  margin-right: 20px;
  margin-left: 20px;
}

.full-box .q-my-md {
  margin-top: 20px;
  margin-bottom: 20px;
}

.full-box .page-title {
  color: rgba(0, 0, 0, 0.9);
  font-size: 24px;
  font-weight: 500;
}

.full-box .data-box {
  max-width: 1366px;
  margin: 0 auto;
}

.full-box .card {
  background: #fff;
  padding: 16px 20px;
}

.full-box .card.big {
  padding: 32px 20px;
}

.full-box .menu-item {
  margin-right: 30px;
  font-size: 17px;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 400;
  cursor: pointer;
}

.full-box .menu-item.active,
.full-box .sub-title {
  font-family: PingfangSC-Medium, Helvetica;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
  font-size: 17px;
}

.full-box .data-items {
  background-color: #fff;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  /* font-weight: 400; */
  color: rgba(0, 0, 0, 0.9);
  font-family: PingFang SC Regular;
}

.full-box .text-small {
  font-size: 12px;
  /* font-weight: 400; */
  color: rgba(0, 0, 0, 0.9);
  font-family: PingFang SC Regular;
}

.full-box .data-items:hover {
  background-color: #f7f7f7;
}

.full-box .data-items .datanum {
  font-size: 24px;
  font-weight: 500;
}

.full-box .rounded {
  border-radius: 12px;
}

.full-box .row {
  display: flex;
}

.full-box .items-center {
  align-items: center;
}

.full-box .col {
  flex: 1;
}

.full-box .justify-between {
  justify-content: space-between;
}

.full-box .juesify-center {
  justify-content: center;
}

.full-box .el-input__inner {
  color: rgba(0, 0, 0, 0.9) !important;
  border-radius: 12px !important;
  border: none !important;
  height: 40px;
}

.full-box .el-date-editor .el-range-separator {
  width: 18px !important;
}

.full-box .el-input__icon {
  color: rgba(0, 0, 0, 0.9) !important;
  font-weight: bolder;
}
.radius-input .vue-treeselect__control{
  height: 40px;
  border-radius: 12px !important;
  border:none !important;
  overflow: hidden;

}
.radius-input .vue-treeselect__single-value{
  height: 40px;
  line-height: 40px;
}
@keyframes realtime {
  0% {
    opacity: 1;
    /* 初始状态，元素完全不透明 */
  }

  50% {
    opacity: 0.2;
    /* 动画进行到一半时，元素接近透明 */
  }

  100% {
    opacity: 1;
    /* 动画结束时，元素恢复完全不透明 */
  }
}
</style>
