<template>
  <div class="app-container">
    <div class="mb20 fl-r">
      <div class="fw600 mr20">直播主题: {{ detail.title }}</div>
      <div class="mr20">主播：{{ detail.advisorBasic.name }}</div>
      <div>
        直播时间:{{
          detail.liveStatus === 2 ? detail.startTime : detail.realStartTime
        }}
        <span v-if="detail.liveStatus !== 2"
          >直播时长: {{ viewData.hours }}</span
        >
      </div>
    </div>
    <div class="mb10">
      <div class="mb10">营销人员所属数据</div>
      <div class="mb10 title-box">
        <div
          class="fl-c mr20 pd10 item-box"
          v-for="(item, index) in coreList"
          :key="index"
        >
          <div class="mb10 lable">{{ item.label }}</div>
          <div class="item" v-if="item.unitType === 1">
            {{ behaviorDetail[item.value] ? behaviorDetail[item.value] : "0" }}
          </div>
          <div class="item" v-if="item.unitType === 2">
            {{
              behaviorDetail[item.value]
                ? (behaviorDetail[item.value] / 100).toFixed(2)
                : "0"
            }}
          </div>
          <div class="item" v-if="item.unitType === 3">
            {{
              behaviorDetail[item.value]
                ? (behaviorDetail[item.value] * 100).toFixed(2) + "%"
                : "--"
            }}
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="客户统计" name="客户统计"></el-tab-pane>
    </el-tabs>

    <div class="mb10">
      <el-button
        @click="selected(index)"
        :class="{ selected: selectedButton === index }"
        v-for="(item, index) in buttonText"
        plain
        >{{ item }}</el-button
      >
    </div>
    <div class="mb10">
      <el-input
        class="w260 mb10 mr20"
        v-model="reqData.nickName"
        placeholder="昵称"
        clearable
      />
      <el-input
        class="w260 mb10 mr20"
        v-model="reqData.userId"
        :placeholder="settingToC ? '客户账号' : '客户手机号'"
        clearable
      />
      <el-select
        class="mb10 mr20"
        v-model="reqData.isSpeak"
        filterable
        clearable
        placeholder="是否参与评论"
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-select
        class="mb10 mr20"
        v-model="reqData.hasGotCoupon"
        filterable
        clearable
        placeholder="是否领取了优惠券"
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-select
        class="mb10 mr20"
        v-model="reqData.isOrder"
        filterable
        clearable
        placeholder="是否提交了订单"
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-select
        class="mb10 mr20"
        v-model="reqData.hasBoughtPro"
        filterable
        clearable
        placeholder="是否订阅了产品"
      >
        <el-option label="是" :value="1"></el-option>
        <el-option label="否" :value="2"></el-option>
      </el-select>
      <el-button plain @click="queryList()">查询</el-button>
      <el-button type="primary" :loading="downloadLoading" @click="toExport()"
        >导出</el-button
      >
    </div>
    <div class="mb10" v-if="activeName === '客户统计'">
      <el-table :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"
        >
        </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="readHours" label="观看时长" width="180">
          <template #default="scope">
            {{
              scope.row.readHours
                ? timeFormat(scope.row.readHours * 1000)
                : 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="name" 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>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="reqData.current"
        :page-size="reqData.size"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import {
  behaviorStatistic,
  infoGet,
  behaviorUser,
  dataOverview
} from "@/api/videoLive";
import { string } from "clipboard";
import { mapGetters, mapState } from "vuex";
import { timeFormat } from "@/utils/index";
import dayjs from "dayjs";
export default {
  data() {
    return {
      reqData: {
        hasBoughtPro: null,
        hasGotCoupon: null,
        isOrder: null,
        isSpeak: null,
        nickName: "",
        type: 1,
        userId: null,
        current: 1,
        size: 10,
        userType: 2
      },
      total: 1,
      detail: {
        advisorBasic: {
          name: ""
        }
      },
      loading: false,
      behaviorDetail: {},
      coreList: [
        {
          value: "invitePeopleCount",
          label: "邀约观看人数",
          unitType: 1
        },
        {
          value: "msgCount",
          label: "评论数",
          unitType: 1
        },
        {
          value: "shareCount",
          label: "分享数",
          unitType: 1
        },
        {
          value: "favorCount",
          label: "点赞数",
          unitType: 1
        },
        {
          value: "msgRate",
          label: "互动率",
          unitType: 3
        },
        {
          value: "completeRate",
          label: "完播率",
          unitType: 3
        },
        {
          value: "productClickCount",
          label: "产品点击数",
          unitType: 1
        },
        {
          value: "hasGotCouponPeopleNum",
          label: "领券人数",
          unitType: 1
        },
        {
          value: "videoOrderCount",
          label: "直播订单数",
          unitType: 1
        },
        {
          value: "videoOrderAmount",
          label: "直播订单金额",
          unitType: 2
        },
        {
          value: "videoSaleCount",
          label: "直播成交数",
          unitType: 1
        },
        {
          value: "videoSaleAmount",
          label: "直播成交金额",
          unitType: 2
        },
        {
          value: "subTransRate",
          label: "签约转化率",
          unitType: 3
        }
      ],
      tableData: [],
      tableDataTwo: [],
      buttonText: ["直播观看用户数榜单", "直播订单数榜单", "直播订单金额榜单"],
      selectedButton: 0,
      dialogTableVisible: false,
      activeName: "客户统计",
      buttonText: [
        "全部观看客户",
        "完整观看客户",
        "参与互动客户",
        "点击产品客户",
        "提交订单未付款",
        "领券未使用客户",
        "订阅产品客户"
      ],
      id: null, //视频id
      type: 1, // 1 投顾 2管理
      downloadLoading: false,
      viewData: {}
    };
  },
  computed: {
    ...mapState({
      settingToC: state => state.settings.settingToC
    })
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = Number(this.$route.query.id);
      this.type = Number(this.$route.query.type);
      this.getDetail();
      this.getBehaviorStatistic();
      this.getDataOverview();
      this.queryList();
    }
  },

  methods: {
    timeFormat,
    dayjs,
    getDataOverview() {
      dataOverview({ videoId: this.id }).then(res => {
        if (res.code === 0) {
          this.viewData = res.data;
        }
      });
    },
    selected(index) {
      this.selectedButton = index;
      this.queryList();
    },
    openProduct() {
      this.dialogTableVisible = !this.dialogTableVisible;
    },
    getDetail() {
      infoGet({ id: this.id }).then(res => {
        this.detail = res.data;
      });
    },
    getBehaviorStatistic() {
      behaviorStatistic({ id: this.id, userType: 2 }).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();
    },
    queryList() {
      this.reqData.type = this.selectedButton + 1;
      this.reqData.videoId = this.id;
      behaviorUser(this.reqData).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    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 = [
            "昵称",
            "客户账号",
            "在线状态",
            "观看时长",
            "互动评论数",
            "点赞数",
            "是否分享直播",
            "是否领取了优惠券",
            "优惠券名称",
            "是否点击产品",
            "点击产品名称",
            "是否提交订单",
            "提交订单产品名称",
            "是否订阅产品",
            "订阅产品名称"
          ];
          const filterVal = [
            "nickName",
            "userId",
            "isOnline",
            "readHours",
            "messCount",
            "favorCount",
            "isShare",
            "hasGotCoupon",
            "couponName",
            "hasSeenCart",
            "cartName",
            "isOrder",
            "orderProName",
            "hasBoughtPro",
            "hasBoughtProName"
          ];
          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 === "hasBoughtPro") {
            return v[j] === 1 ? "是" : "否";
          } else if (j === "isOnline") {
            return v[j] === 1 ? "在线" : "离线";
          } else if (j === "readHours") {
            return v[j] ? timeFormat(v[j] * 1000) : v[j];
          } else {
            return v[j];
          }
        })
      );
    }
  }
};
</script>

<style scoped lang="scss">
.mb10 {
  margin-bottom: 10px;
}
.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%;
}
.selected {
  background-color: #409eff !important;
  color: #ffffff !important;
}
.w260 {
  width: 260px;
}
.selected {
  background-color: #409eff !important;
  color: #ffffff !important;
}
.w260 {
  width: 260px;
}
.mr20 {
  margin-right: 20px;
}
.pd10 {
  padding: 10px;
}
.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: rgb(102, 177, 255);
  border-radius: 4px;
  .lable {
    color: #ffffff;
  }
  .item {
    color: #ffffff;
  }
}
.mb20 {
  margin-bottom: 20px;
}
.title-box {
  display: inline-flex;
  flex-wrap: wrap;
  .item-box {
    width: 15%;
    margin-bottom: 20px;
  }
}
</style>
