<template>
  <div class="app-container">
    <div class="mb10 fl-r header-box">
      <div class="img-box"><img :src="detail.imgUrl" alt="" /></div>
      <div class="header-box-title">
        <div class="fw600 mr20">
          直播主题: {{ detail.title }}
          <span class="styleType" :class="styleType[detail.liveStatus]">{{
            liveStatusList[detail.liveStatus]
          }}</span>
        </div>
        <div class="mr20">直播简介：{{ detail.viewPoint }}</div>
        <div>
          直播时间:{{detail.liveStatus === 2 ?  detail.startTime : detail.realStartTime }}
          <span v-if="detail.liveStatus !== 2">直播时长: {{ viewData.hours }}</span>
          <el-button
            style="margin-left: 10px;"
            type="primary"
            size="mini"
            @click="toDetail()"
            >大屏</el-button
          >
        </div>
      </div>
    </div>
    <div class="mb10">
      <div class="mb10 fw600">数据概况</div>
      <div class="mb10 overview-box">
        <div
          v-for="(item, index) in overviewList"
          :key="index"
          class="mr20 pd5 overview-item"
        >
          <div class="overview-title">{{ item.name }}</div>
          <div class="value-item">
            <div v-for="(v, i) in valueList[item.value]" :key="i" class="value-item__v" :style="{'width':item.value !== 'three' ? '50%':'33%'}">
              <div class="v-name">{{ v.name }}</div>
                <div v-if="v.type === 1 ">{{ viewData && viewData[v.value] ? viewData[v.value] : 0 }}</div>
                <div v-if="v.type === 2 ">{{ viewData && viewData[v.value] ? timeFormatTwo(viewData[v.value] * 60) : '00:00:00' }}</div>
                <div v-if="v.type === 3 ">{{ viewData && viewData[v.value] ? (viewData[v.value] / 100).toFixed(2) : 0 }}</div>
                <div v-if="v.type === 4 ">{{ viewData && viewData[v.value] ? (viewData[v.value] * 100).toFixed(2) + '%' : '--' }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mb20" style="padding: 20px 0;">
      <div class="mb20 fw600">实时趋势</div>
      <!-- <div class="mb20">
        <div class="charts-line"> <div class="title">推送产品 </div>
          <lineCharts ref="charts" />
        </div>
        <div class="charts-line"><div class="title">发优惠券 </div>
          <lineChartsTwo ref="chartsTwo" />
        </div>
      </div> -->

      <PortfolioChart
          ref="lineCharts"
          height="500px"
          width="100%"
          :label="lineCharts.label"
          :x-date="lineCharts.xDate"
          :data="lineCharts.data"
        />
    </div>
    <!-- 列表 梯田图 -->
    <div class="mb20 pb20">
      <div class="data-chart-wrap">
        <div class="title fw600">
          带货分析
        </div>
        <div class="data-chart-content">
          <div class="data-chart">
            <div class="data-item">
              <h3>观看直播用户</h3>
              <p>{{ funnelDataObj.totalReadUserCount || 0 }}</p>
              <div class="trapezoid-wrap trapezoid-wrap1">
                <div class="trapezoid trapezoid1"></div>
                <span>直播间用户</span>
              </div>
            </div>
            <div class="data-item">
              <h3>点击产品用户</h3>
              <p>{{ funnelDataObj.totalReadCartUserCount || 0 }}</p>
              <div class="trapezoid-wrap trapezoid-wrap2">
                <div class="trapezoid trapezoid2"></div>
                <span>访问产品</span>
              </div>
            </div>
            <div class="data-item flex">
              <div>
                <h3>下单用户数</h3>
                <p>{{ funnelDataObj.orderUserCount || 0 }}</p>
              </div>
              <div>
                <h3>下单订单数</h3>
                <p>{{ funnelDataObj.orderCount || 0 }}</p>
              </div>
              <div>
                <h3>订单金额</h3>
                <p>{{ funnelDataObj.orderAmount ? (funnelDataObj.orderAmount / 100).toFixed(2) : '0.00' }}</p>
              </div>
              <div class="trapezoid-wrap trapezoid-wrap3">
                <div class="trapezoid trapezoid3"></div>
                <span>下单</span>
              </div>
            </div>
            <div class="data-item flex">
              <div>
                <h3>成交用户数</h3>
                <p>{{ funnelDataObj.paidUserCount || 0 }}</p>
              </div>
              <div>
                <h3>成交订单数</h3>
                <p>{{ funnelDataObj.paidOrderCount || 0 }}</p>
              </div>
              <div>
                <h3>成交金额</h3>
                <p>{{ funnelDataObj.paidAmount ? (funnelDataObj.paidAmount/ 100).toFixed(2) : '0.00' }}</p>
              </div>
              <div class="trapezoid-wrap trapezoid-wrap4">
                <div class="trapezoid trapezoid4"></div>
                <span>成交</span>
              </div>
            </div>
          </div>
          <div class="trans">
            <div class="trans-content">
              <p>访问成交转化率</p>
              <p>{{funnelDataObj.totalReadUserCount ? (funnelDataObj.paidUserCount *100 / funnelDataObj.totalReadUserCount).toFixed(2) : 0}}%</p>
            </div>
          </div>
        </div>
      </div>
      <el-table :data="detail.cartVOList" border>
        <el-table-column
          type="index"
          label="序号"
          width="120"
        ></el-table-column>
        <el-table-column
          property="productName"
          label="产品名称"
        ></el-table-column>
        <el-table-column property="productType" label="产品类型">
          <template slot-scope="scope">
            {{ productTypeList[scope.row.productType] }}
          </template>
        </el-table-column>
        <el-table-column label="投顾名称">
          <template slot-scope="scope">
            {{ scope.row.advisorBasic ? scope.row.advisorBasic.name : "" }}
          </template>
        </el-table-column>
        <el-table-column property="riskLevel" label="风险等级">
          <template slot-scope="scope">
            {{ riskLevelList[scope.row.riskLevel] }}
          </template>
        </el-table-column>
        <el-table-column
          property="count"
          label="本场直播点击数"
        ></el-table-column>
        <el-table-column
          property="readUserCount"
          label="本场直播点击人数"
        ></el-table-column>
        <!-- <el-table-column
          property="subCount"
          label="本场直播订阅数"
        ></el-table-column>
        <el-table-column
          property="subAmount"
          label="本场直播订阅金额"
        >
        <template slot-scope="scope">
            {{ (scope.row.subAmount / 100).toFixed(2) }}
          </template>
      </el-table-column>
        <el-table-column
          property="refAmount"
          label="退款金额"
        >
        <template slot-scope="scope">
            {{ (scope.row.refAmount / 100).toFixed(2) }}
          </template>
      </el-table-column> -->
      </el-table>
    </div>
    <!-- 占比 -->
    <div class="mb10 center-box">
      <div class="one">
        <div class="mb10 fw600">用户占比</div>
        <div class="progress-box">
          <div class="progress-box_flex">
            <div>
              新用户
              <span
                class="fw600"
                style="margin-left: 5px;"
                >{{ detail.newUserCount ? progressNum : 0 }}%</span>
            </div>
            <div>
              <span
                class="fw600"
                style="margin-right: 5px;"
                >{{ detail.oldUserCount ? (100 - progressNum).toFixed(2) : 0 }}%</span>
              老用户
            </div>
          </div>
          <el-progress
            :show-text="false"
            :stroke-width="25"
            :percentage="progressNum"
            define-back-color="#FACD91"
            color="#8080ff"
          ></el-progress>
          <div class="progress-box_flex">
            <span>{{ detail.newUserCount }}</span>
            <span>{{ detail.oldUserCount }}</span>
          </div>
        </div>
      </div>
      <!-- 观众来源 -->
      <div class="mb10 fw600 two">
        <div>观众来源</div>
        <PieChart></PieChart>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick()">
      <el-tab-pane label="客户观看详细数据" name="客户观看详细数据"></el-tab-pane>
      <el-tab-pane
        label="营销人员榜单"
        name="营销人员榜单"
      ></el-tab-pane>
    </el-tabs>
    <div v-if="activeName === '客户观看详细数据'" class="mb10">
      <el-button
        v-for="(item, index) in buttonText"
        :class="{ selected: selectedButton === index }"
        plain
        @click="selected(index)"
        >{{ item }}</el-button>
    </div>
    <div v-if="activeName === '客户观看详细数据'" class="mb10">
      <el-input
        v-model="reqData.nickName"
        class="w260 mb10 mr20"
        placeholder="昵称"
        clearable
      />
      <el-input
        v-model="reqData.userId"
        class="w260 mb10 mr20"
        :placeholder="settingToC ? '客户账号': '客户手机号'"
        clearable
      />
      <el-select
        v-model="reqData.isSpeak"
        class="mb10 mr20"
        filterable
        placeholder="是否参与评论"
        clearable
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-select
        v-model="reqData.hasGotCoupon"
        class="mb10 mr20"
        filterable
        placeholder="是否领取了优惠券"
        clearable
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-select
        v-model="reqData.isOrder"
        class="mb10 mr20"
        filterable
        placeholder="是否提交了订单"
        clearable
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-select
        v-model="reqData.hasBoughtPro"
        class="mb10 mr20"
        filterable
        placeholder="是否订阅了产品"
        clearable
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-select
        v-model="reqData.isAnswer"
        class="mb10 mr20"
        filterable
        placeholder="是否完成了问券"
        clearable
        v-if="selectedButton !== 7"
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-button plain @click="queryList(1)">查询</el-button>
      <el-button type="primary" :loading="downloadLoading" @click="toExport()">导出</el-button>
    </div>
    <div v-if="activeName === '营销人员榜单'" class="mb10">
      <el-input
        v-model="reqDataTwo.userName"
        class="w260 mb10 mr20"
        placeholder="员工名称"
        clearable
      />
      <el-input
        v-model="reqDataTwo.staffNo"
        class="w260 mb10 mr20"
        placeholder="员工编号"
        clearable
      />
      <!-- <el-select
        class="mb10 mr20"
        v-model="reqDataTwo.comId"
        filterable
        placeholder="请选择分公司"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <el-select
        v-model="reqDataTwo.deptId"
        class="mb10 mr20"
        filterable
        clearable
        placeholder="请选择营业部"
      >
      <el-option
            v-for="item in deptList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
      </el-select>
      <el-button plain @click="queryListTwo(1)">查询</el-button>
      <el-button type="primary" :loading="downloadLoadingTwo" @click="toExportTwo()">导出</el-button>
      </br>
      <el-button
      v-for="(item, index) in marketingText"
        style="margin-top:10px"
        :class="{ selected: selectedButtonMarketing === index }"
        plain
        @click="selectedMarketing(index)"
        >{{ item }}</el-button>

    </div>
    <div v-show="activeName === '客户观看详细数据'" class="mb10">
      <el-table :key="tamptime" :data="tableData" border class="mb10" style="width: 100%">
        <el-table-column label="序号" type="index" fixed width="180">
        </el-table-column>
        <el-table-column prop="nickName" label="昵称" width="180">
          <template #default="scope">
            <el-link type="primary">{{ scope.row.nickName | formatPhone }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="userId" :label="settingToC ? '客户账号': '客户手机号'" width="180">
          <template #default="scope">
            {{ scope.row.userId | formatPhone }}
          </template>
        </el-table-column>
        <el-table-column prop="isOnline" label="在线状态" width="180">
          <template #default="scope">
            {{ scope.row.isOnline === 1 ? '在线' : '离线'}}
          </template>
        </el-table-column>
        <el-table-column prop="saleUserName" label="营销经理" width="180">
        </el-table-column>
        <el-table-column prop="saleUserId" label="营销经理ID" width="180">
        </el-table-column>
        <el-table-column prop="readHours" label="观看时长" width="180">
          <template #default="scope">
            {{ scope.row.readHours? timeFormatTwo(scope.row.readHours) : scope.row.readHours }}
          </template>
        </el-table-column>
        <el-table-column prop="messCount" label="互动评论数" width="180">
        </el-table-column>
        <el-table-column prop="favorCount" label="点赞数" width="180">
        </el-table-column>
        <el-table-column prop="isShare" label="是否分享直播" width="180">
          <template slot-scope="scope">
            {{ scope.row.isShare === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="hasGotCoupon" label="是否领取了优惠券" width="180">
          <template slot-scope="scope">
            {{ scope.row.hasGotCoupon === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="couponName" label="优惠券名称" width="180">
        </el-table-column>
        <el-table-column prop="hasSeenCart" label="是否点击产品" width="180">
          <template slot-scope="scope">
            {{ scope.row.hasSeenCart === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column prop="cartName" label="点击产品名称" width="180">
        </el-table-column>
        <el-table-column prop="isOrder" label="是否提交订单" width="180">
          <template slot-scope="scope">
            {{ scope.row.isOrder === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderProName"
          label="提交订单产品名称"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="hasBoughtPro" label="是否订阅产品" width="180">
          <template slot-scope="scope">
            {{ scope.row.hasBoughtPro === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="hasBoughtProName"
          label="订阅产品名称"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="isAnswer" label="是否完成了问券" width="180">
          <template slot-scope="scope">
            {{ scope.row.isAnswer === 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column  label="问券名称" width="180">
          <template slot-scope="scope">
            {{ scope.row.questionName ? scope.row.questionName : "--" }}
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="reqData.total"
        :current-page="reqData.current"
        :page-size="reqData.size"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div v-show="activeName === '营销人员榜单'" class="mb10">
      <el-table :key="tamptime" :data="tableDataTwo" border class="mb10" style="width: 100%">
        <el-table-column label="序号" type="index" fixed width="180">
        </el-table-column>
        <el-table-column prop="name" label="员工姓名" width="180">
          <template slot-scope="scope">
            {{ scope.row.saleUserName }}
          </template>
        </el-table-column>
        <el-table-column prop="staffNo" label="员工编号" width="180">
          <template slot-scope="scope">
            {{ scope.row.staffNo  }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="comName" label="分公司" width="180">
        </el-table-column> -->
        <el-table-column prop="deptName" label="营业部" width="180">
          <template slot-scope="scope">
            {{ scope.row.deptName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="subscribeUserCount"
          label="邀约观看人数"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="getCouponCount"
          label="领取优惠券人数"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="getCouponNotUseCount"
          label="领券未使用人数"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="browseProPeopleCount"
          label="点击产品人数"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="orderButNotPayPeopleCount"
          label="提交订单未付款人数"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="subPeopleCount" label="订阅产品人数" width="180">
        </el-table-column>
        <el-table-column prop="subAmount" label="订阅金额(元)" width="180">
          <template slot-scope="scope">
            {{ (scope.row.subAmount / 100).toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="subTransRate" label="签约转化率" width="180">
          <template slot-scope="scope">
            {{ (scope.row.subTransRate * 100).toFixed(2) }}%
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
          :total="reqDataTwo.total"
          :current-page="reqDataTwo.current"
          :page-size="reqDataTwo.size"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChangeTwo"
          @current-change="handleCurrentChangeTwo"
          />
    </div>
  </div>
</template>
<script>
import {
  // behaviorStatistic,
  infoGet,
  behaviorUser,
  behaviorStaff,
  dataOverview,
  nowTrend,
  deptColumnList
} from '@/api/videoLive'
import { getTimeToNum, getNumToDate } from '@/utils/portfolio'
import PieChart from './PieChart'
import PortfolioChart from '../echarts/PortfolioCharts'
import dayjs from 'dayjs'
import { liveFunnelStatistic, liveOperationStatistic } from '@/api/index'
import { timeFormatTwo } from "@/utils/index"
import { mapGetters,mapState } from "vuex";
export default {
  components: {
    PieChart,
    PortfolioChart
  },
  data() {
    return {
      queryParams: {
        current: 1,
        size: 10
      },
      tamptime: new Date().valueOf(),
      reqDataTwo: {
        staffNo: '',
        userName: '',
        deptId: null,
        comId: null,
        current: 1,
        size: 10,
        total: 1
      },
      deptList: [],
      reqData: {
        hasBoughtPro: null,
        hasGotCoupon: null,
        isOrder: null,
        isSpeak: null,
        nickName: '',
        type: 1,
        userId: null,
        isAnswer: null,
        current: 1,
        size: 10,
        total: 1
      },
      downloadLoading: false,
      downloadLoadingTwo: false,
      detail: {
        advisorBasic: {
          name: ''
        }
      },
      loading: false,
      // behaviorDetail: {},
      overviewList: [{ name: '观看', value: 'one' }, { name: '回放', value: 'two' }, { name: '互动', value: 'three' }, { name: '带货', value: 'four' }],
      coreList: [
        {
          value: 'videoSaleAmount',
          label: '直播销售额'
        },
        {
          value: 'videoSaleCount',
          label: '直播销量'
        },
        {
          value: 'productClickCount',
          label: '商品点击数'
        },
        {
          value: 'readCount',
          label: '观看人次'
        },
        {
          value: 'completeRate',
          label: '完播率'
        },
        {
          value: 'likeRate',
          label: '转粉率（新增粉丝数 /观看人次）'
        },
        {
          value: 'mgsRate',
          label: '互动率（点赞数+评论数+分享数）/观看人次'
        },
        {
          value: 'subTransRate',
          label: '签约转化率'
        }
      ],
      coreListTwo: [
        {
          value: 'msgCount',
          label: '评论数'
        },
        {
          value: 'shareCount',
          label: '分享数'
        },
        {
          value: 'likeCount',
          label: '点赞数'
        },
        {
          value: 'subscribeCount',
          label: '预约（人）'
        }
      ],

      options: [
        {
          value: '1',
          label: '黄金糕'
        },
        {
          value: '2',
          label: '双皮奶'
        },
        {
          value: '3',
          label: '蚵仔煎'
        },
        {
          value: '4',
          label: '龙须面'
        },
        {
          value: '5',
          label: '北京烤鸭'
        }
      ],
      tableData: [],
      tableDataTwo: [],
      // buttonText: ["直播观看用户数榜单", "直播订单数榜单", "直播订单金额榜单"],
      selectedButton: 0,
      dialogTableVisible: false,
      activeName: '客户观看详细数据',
      selectedButtonMarketing: 0,
      marketingText: [
        '邀请观看榜单',
        '订阅人数榜单',
        '签约转化榜单'
      ],
      buttonText: [
        '全部观看客户',
        '完整观看客户',
        '参与互动客户',
        '点击产品客户',
        '提交订单未付款客户',
        '领券未下单客户',
        '订阅产品客户',
        '完成问卷客户',
      ],
      id: null, // 视频id
      type: 1, // 1 投顾 2管理
      funnelDataObj: {},
      productTypeList: {
        1: '观点包',
        21:'自定义'
      },
      riskLevelList: {
        1: '低风险',
        2: '中低风险',
        3: '中风险',
        4: '中高风险',
        5: '高风险'
      },
      styleType: ['', 'one-state', 'two-state', 'three-state', 'four-state'],
      liveStatusList: ['', '直播中', '未开始', '已暂停', '已结束'],
      valueList: {
        'one': [{ name: "直播观看人次", value: "readNum",type:1 }, { name: "直播观看人数", value: "readPeopleNum",type:1 }, { name: "在线人数峰值", value: "onlineMostNum",type:1 }, { name: "人均观看时长", value: "readDurationAvg",type:2 }],
        'two': [{ name: "回放观看人次", value: "reReadNum",type:1 }, { name: "回放观看人数", value: "reReadPeopleNum",type:1 }, { name: "回放观看总时长", value: "reReadDuration",type:2 }, { name: "回放人均观看时长", value: "reReadDurationAvg",type:2 }],
        'three': [{ name: "评论数", value: "messCount",type:1 }, { name: "点赞数", value: "favorCount",type:1 }, { name: "分享数", value: "shareCount",type:1 }, { name: "互动率", value: "msgRate",type:4 }, { name: "新增粉丝数", value: "newFollowCount",type:1 }],
        'four': [{ name: "点击产品数", value: "browseProCount",type:1 }, { name: "提交订单未付款数", value: "orderButNotPayCount",type:1 }, { name: "成交订单数", value: "subCount",type:1 }, { name: "成交金额", value: "subAmount",type:3 }],
      },
      viewData: {},
      lineCharts: {
        // 折线数据
        data: [],
        // 折线类别
        label: ['进场人数', '离场人数', '在线人数', '销量'],
        // x轴时间
        xDate: []
      }
    }
  },
  computed: {
    progressNum() {
      if (this.detail.newUserCount && this.detail.oldUserCount) {
        const allNum = this.detail.newUserCount + this.detail.oldUserCount
        const percentageNum = ((this.detail.newUserCount / allNum) * 100).toFixed(2)
        if ((this.detail.oldUserCount / this.detail.newUserCount) >= 100) {
          return 1
        } else {
          return Number(percentageNum)
        }
      } else if (this.detail.newUserCount && !this.detail.oldUserCount) {
        return 100
      } else if (!this.detail.newUserCount && this.detail.oldUserCount) {
        return 0
      }
    },
    ...mapState({
      settingToC: state => state.settings.settingToC
    })
  },
  async mounted() {
    this.getColumnList()
    if (this.$route.query.id) {
      this.id = Number(this.$route.query.id)
      this.type = Number(this.$route.query.type)
      let ret = await this.getDetail()
      if(!ret) return
      // this.getBehaviorStatistic()
      this.queryList()
      this.getLiveFunnelStatistic()
      this.getDataOverview()
      this.getNowTrend()
      if(this.detail.playType === 2) {
        this.valueList.one = [{ name: "直播观看人次", value: "reReadNum",type:1 }, { name: "直播观看人数", value: "reReadPeopleNum",type:1 }, { name: "在线人数峰值", value: "reReadDuration",type:1 }, { name: "人均观看时长", value: "reReadDurationAvg",type:2 }]
        this.valueList.two = [{ name: "回放观看人次", value: "readNum",type:1 }, { name: "回放观看人数", value: "readPeopleNum",type:1 }, { name: "回放观看总时长", value: "readDuration",type:2 }, { name: "回放人均观看时长", value: "readDurationAvg",type:2 }]
      }
    }
  },

  methods: {
    timeFormatTwo,
    getTimeToNum,
    getNumToDate,
    dayjs,
    getColumnList() {
        deptColumnList({ type: 2 }).then(res => {
          if (res.code === 0) {
            this.deptList = res.data
          }
        })
      },
    getNowTrend() {
      nowTrend({ videoId: this.id }).then((res) => {
        if (res.code === 0) {
          this.lineCharts.xDate = res.data.map(item => item.time)
          const onlineNumList = res.data.map(item => item.onlineNum)
          const leaveNumList = res.data.map(item => item.leaveNum)
          const attendNumList = res.data.map(item => item.attendNum)
          const saleNumList = res.data.map(item => item.saleNum)
          const chartsData = []
          const chartsDataTwo = []
          for (let index = 0; index < res.data.length; index++) {
            if (res.data[index].hasSendCoupon=== 1) {
              let data = {
                symbolOffset: [0, -90],
                value:[res.data[index].time, 1]
              }

              chartsData.push(data)
            }
            if (res.data[index].isRecommendPro === 1) {
              let data = {
                symbolOffset: [0, -45],
                value:[res.data[index].time, 1]
              }
              chartsDataTwo.push(data)
            }
          }

          this.lineCharts.data = [
            { name: '在线人数', type: 'line', data: onlineNumList },
            { name: '离场人数', type: 'line', data: leaveNumList },
            { name: '进场人数', type: 'line', data: attendNumList },
            { name: '销量', type: 'line', data: saleNumList },
            { name: '发放优惠券',data:chartsData,
              xAxisIndex: 1,
              yAxisIndex: 1,
              symbolSize: 10,
              type: 'scatter'
            },
            { name: '推送产品',
              data:chartsDataTwo,
              xAxisIndex: 2,
              yAxisIndex: 2,
              symbolSize: 10,
              type: 'scatter'
            }
          ]

          if (this.lineCharts.data.length) {
            this.$refs.lineCharts.drawLineChart(this.lineCharts)
          } else {
            this.$refs.lineCharts.testLineChart()
          }
        }
      })
    },
      // 获取x轴时间
      getAllDate(list) {
      const allDate = []
      for (let i = 0; i < list.length; i++) {
        const value = list[i]
        if (value.date) {
          allDate.push(value.date)
        }
      }
      // console.log(allDate)
      this.lineCharts.xDate = allDate
    },
    getDataOverview() {
      dataOverview({ videoId: this.id }).then(res => {
        if (res.code === 0) {
          this.viewData = res.data
        }
      })
    },
    async getLiveFunnelStatistic() {
      const ret = await liveFunnelStatistic({ videoId: this.id, type: 2, advisorId: this.detail.advisorBasic.id,userType:1 })
      if (ret.code === 0 && ret.data) {
        this.funnelDataObj = ret.data
      }
    },
    selected(index) {
      this.selectedButton = index
      this.queryList()
    },
    selectedMarketing(index) {
      this.selectedButtonMarketing = index
      this.queryListTwo()
    },
    openProduct() {
      this.dialogTableVisible = !this.dialogTableVisible
    },
    handleClick() {
      if (this.activeName === '客户观看详细数据') {
        this.tableData = []
        this.tableDataTwo = []
        this.queryList()
      } else {
        this.tableData = []
        this.tableDataTwo = []
        this.queryListTwo()
      }
    },
    async getDetail() {
      let res = await infoGet({ id: this.id })
      if(res && res.code === 0) {
        this.detail = res.data
        if(this.detail.advisorBasic.deptName !== this.$store.state.user.user.user.deptName && this.$store.state.user.user.user.deptId !== '1') {
          // 不是一个部门的不让查看 总部的可以查看所有
          this.$alert('暂无查看权限！', '', {
            confirmButtonText: '确定',
            callback: action => {
              this.$router.go(-1)
            }
          });
          return false
        }
        return true
      }
      return false
    },
    // getBehaviorStatistic() {
    //   behaviorStatistic({ id: this.id, userType: 1 }).then(res => {
    //     if (res.code === 0) {
    //       this.behaviorDetail = res.data
    //     }
    //   })
    // },
    handleSizeChange(val) {
      this.$set(this.reqData, 'size', val)
      this.$set(this.reqData, 'current', 1)
      this.queryList()
    },
    handleCurrentChange(val) {
      this.$set(this.reqData, 'current', val || 1)
      this.queryList()
    },
    handleSizeChangeTwo(val) {
      this.$set(this.reqDataTwo, 'size', val)
      this.$set(this.reqDataTwo, 'current', 1)
      this.queryListTwo()
    },
    handleCurrentChangeTwo(val) {
      this.$set(this.reqDataTwo, 'current', val || 1)
      this.queryListTwo()
    },
    queryList(val) {
      this.reqData.type = this.selectedButton + 1
      this.reqData.videoId = this.id
      if(val){
        this.reqData.current = 1
      }
      let params = {}
      Object.assign(params, this.reqData, {isAnswer: this.selectedButton === 7?'' : this.reqData.isAnswer })
      behaviorUser(params).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.reqData.total = res.data.total
        }
      })
    },
    queryListTwo(val) {
      if(val){
        this.reqDataTwo.current = 1
      }
      this.reqDataTwo.videoId = this.id
      this.reqDataTwo.type = this.selectedButtonMarketing + 1
      behaviorStaff(this.reqDataTwo).then(res => {
        if (res.code === 0) {
          this.tableDataTwo = res.data.list
          this.reqDataTwo.total = res.data.total
        }
      })
    },
    toDetail() {
      window.open(`${location.origin +
          location.pathname}#/largeScreen/index?videoId=${this.id}&type=${this.type}`)
    },
    async toExport() {
      this.downloadLoading = true
      this.reqData.type = this.selectedButton + 1
      this.reqData.videoId = this.id
      const params = JSON.parse(JSON.stringify(this.reqData))

      params.size = 9999
      const { data, code, message } = await behaviorUser(params)

      if (code === 0) {
        import('@/utils/export2Excel').then(excel => {
          const tHeader = [
            '昵称',
            '客户账号',
            "在线状态",
            '营销经理名称',
            '营销经理ID',
            '观看时长',
            '互动评论数',
            '点赞数',
            '是否分享直播',
            '是否领取了优惠券',
            '优惠券名称',
            '是否点击产品',
            '点击产品名称',
            '是否提交订单',
            '提交订单产品名称',
            '是否订阅产品',
            '订阅产品名称',
            '是否完成了问券'
          ]
          const filterVal = [
            'nickName',
            'userId',
            "isOnline",
            'saleUserName',
            'saleUserId',
            'readHours',
            'messCount',
            'favorCount',
            'isShare',
            'hasGotCoupon',
            'couponName',
            'hasSeenCart',
            'cartName',
            'isOrder',
            'orderProName',
            'hasBoughtPro',
            'hasBoughtProName',
            'isAnswer'
          ]
          const excelData = this.formatJson(filterVal, data.list)
          excel.export_json_to_excel({
            header: tHeader,
            data: excelData,
            filename: `客户观看详细数据(${dayjs().format("YYYY-MM-DD HH:mm:ss")})`
          })
          console.log('list=>', data.list)
        })
      } else {
        this.$message.error(message)
      }
      this.downloadLoading = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'isShare') {
            return v[j] === 1 ? '是' : '否'
          } else if (j === 'hasGotCoupon') {
            return v[j] === 1 ? '是' : '否'
          } else if (j === 'hasSeenCart') {
            return v[j] === 1 ? '是' : '否'
          } else if (j === 'isOrder') {
            return v[j] === 1 ? '是' : '否'
          } else if (j === "isOnline") {
            return v[j] === 1 ? "在线" : "离线";
          }  else if (j === 'hasBoughtPro') {
            return v[j] === 1 ? '是' : '否'
          } else if (['nickName', 'userId'].includes(j)) {
            if (!v[j]) return v[j]
            if (typeof v[j] === 'number') {
              v[j] = v[j].toString()
            }
            return v[j].replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
          } else if(j === 'readHours') {
            return v[j] ? timeFormatTwo(v[j]) : v[j]
          } else if (j === "isAnswer") {
            return v[j] === 1 ? "是" : "否";
          } else {
            return v[j]
          }
        })
      )
    },
    async toExportTwo() {
      this.downloadLoadingTwo = true
      this.reqDataTwo.type = this.selectedButtonMarketing + 1
      this.reqDataTwo.videoId = this.id
      const params = JSON.parse(JSON.stringify(this.reqDataTwo))

      params.size = 9999
      const { data, code, message } = await behaviorStaff(params)

      if (code === 0) {
        import('@/utils/export2Excel').then(excel => {
          const tHeader = [
            '员工姓名',
            '员工编号',
            '营业部',
            '邀约观看人数',
            '领取优惠券人数',
            '领券未使用人数',
            '点击产品人数',
            '提交订单未付款人数',
            '订阅产品人数',
            '订阅金额(元)',
            '签约转化率'
          ]
          const filterVal = [
            'saleUserName',
            'staffNo',
            'deptName',
            'subscribeUserCount',
            'getCouponCount',
            'getCouponNotUseCount',
            'browseProPeopleCount',
            'orderButNotPayPeopleCount',
            'subPeopleCount',
            'subAmount',
            'subTransRate'
          ]
          const excelData = this.formatJsonTwo(filterVal, data.list)
          excel.export_json_to_excel({
            header: tHeader,
            data: excelData,
            filename: '营销人员榜单'
          })
          console.log('list=>', data.list)
        })
      } else {
        this.$message.error(message)
      }
      this.downloadLoadingTwo = false
    },
    formatJsonTwo(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'subAmount') {
            return (v[j] / 100).toFixed(2)
          } else if (j === 'subTransRate') {
            return (v[j] * 100).toFixed(2) + '%'
          } else {
            return v[j]
          }
        })
      )
    }
  }
}
</script>

<style scoped lang="scss">
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.pb20 {
  padding-bottom: 20px;
}
.flex-box {
  display: inline-flex;
  flex-direction: row;
  &_item {
    display: inline-flex;
    flex-direction: column;
    margin-right: 10px;
    cursor: pointer;
    background-color: rgb(255, 255, 255);
    align-self: center;
    div {
      padding: 5px 0;
      display: inline-flex;
      align-self: center;
    }
  }
}
.charts-box {
  padding: 20px;
  width: 60%;
}

.w260 {
  width: 260px;
}
.mr20 {
  margin-right: 20px;
}
.pd5 {
  padding: 5px;
}
.fl-r {
  display: inline-flex;
  flex-direction: row;
}
.fw600 {
  font-weight: 600;
  font-size: 16px;
}
.fl-c {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgba(153, 153, 153, 0.5);
  color: rgba(0, 0, 0, 0.5);
}
.center-box {
  display: flex;
  flex-direction: row;
  width: 100%;
  .one {
    width: 40%;
    .progress-box {
      width: 100%;
      border: 1px solid #dcdfe6;
      padding: 15px 30px;
      &_flex {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: 20px 0;
      }
    }
  }
  .two {
    width: 50%;
    padding-left: 20px;
  }
}
.data-chart-wrap {
  margin-bottom: 50px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    h2 {
      margin: 0;
      font-size: 24px;
    }
    p {
      margin: 0;
    }
  }
  .data-chart-content{
    position: relative;
  }
  .data-chart {
    & > div:nth-child(1) {
      background: #edf4fe;
    }
    & > div:nth-child(2) {
      background: #edd9ff;
    }
    & > div:nth-child(3) {
      background: #f3fcf9;
    }
    & > div:nth-child(4) {
      background: #fbf1ec;
    }

    .data-item {
      position: relative;
      padding: 10px 30px 10px;
      margin-bottom: 10px;
      &.flex {
        display: flex;
        & > div {
          margin-right: 50px;
        }
      }
      h3 {
        margin: 0;
        line-height: 40px;
        font-size: 20px;
      }
      p {
        margin: 0;
        font-weight: 900;
        font-size: 20px;
        line-height: 40px;
      }
    }
    .trapezoid-wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      text-align: center;
      span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        color: #fff;
        font-size: 18px;
      }
      &.trapezoid-wrap1 {
        right: 120px;
      }
      &.trapezoid-wrap2 {
        right: 170px;
      }
      &.trapezoid-wrap3 {
        right: 170px;
      }
      &.trapezoid-wrap4 {
        right: 220px;
      }
    }
    .trapezoid1 {
      border-top: 100px solid #5a8af6;
      border-left: 45px solid transparent;
      border-right: 45px solid transparent;
      width: 440px;
      line-height: 100px;
    }
    .trapezoid2 {
      border-top: 100px solid #64cbba;
      border-left: 45px solid transparent;
      border-right: 45px solid transparent;
      width: 340px;
      line-height: 100px;
    }
    .trapezoid3 {
      border-top: 100px solid #f5c277;
      border-left: 45px solid transparent;
      border-right: 45px solid transparent;
      width: 240px;
      line-height: 100px;
    }
    .trapezoid4 {
      border-top: 100px solid #f77736;
      border-left: 35px solid transparent;
      border-right: 35px solid transparent;
      width: 140px;
      line-height: 100px;
    }
  }
  .trans {
    background: url(../../../../assets/images/transBg.png) no-repeat center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    width: 260px;
    .trans-content{
      position: absolute;
      right: 0;
      top: 50%;
      transform:  translateY(-50%);
      text-align: center;
      font-size: 16px;
      font-weight: 800;
    }
  }
}
.header-box {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  .img-box {
    margin-right: 20px;
    img {
      width: 200px;
      height: 120px;
    }
  }
}
.header-box-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  div {
    margin-bottom: 10px;
  }
}
.styleType {
  padding: 3px 6px;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  margin-left: 5px;
}
.one-state {
  background-color: #f56c6c;
}
.two-state {
  background-color: #409eff;
}
.three-state {
  background-color: #e6a23c;
}
.four-state {
  background-color: #909399;
}
.overview-box {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  .overview-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    .overview-title{
      background-color: #409eff;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      display: flex;
      height: 40px;
      justify-content: center;
      align-items: center;
    }
  }
}
.value-item{
  padding: 30px 0 20px 0;
  border: 1px solid #DCDFE6;
  display: inline-flex;
  flex-wrap: wrap;
  .value-item__v{
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
  }
}
.v-name{
  margin-bottom: 10px;
}
.v-value{
  font-weight: 500;
  font-size: 16px;
}
.charts-line{
  display:flex;
  flex-direction:row;
  .title{
    padding-top:12px;
    width:100px;
  }
}
.selected {
  background-color: #409eff !important;
  color: #ffffff !important;
}
</style>
