<style scoped lang="scss">
::v-deep a {
  color: #409eff;
  display: block;
  text-align: left;
  line-height: 30px;
}
.item-name-calss p {
  margin: 0;
  text-align: left;
  line-height: 30px;
}
.tableBox {
  width: 100%;
}
.prefix {
  display: inline-block;
  width: 3px;
  height: 15px;
  background: rgb(104, 163, 253);
  position: relative;
  top: 2px;
  margin-right: 5px;
}
.dh p {
  font-size: 14px;
}
.dh-data p {
  font-size: 16px;
}
.main-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
<template>
  <div class="app-container" id="loading" v-loading="loading" style="min-height: 600px">
    <el-card v-if="detailData">
      <div style="display: flex; width: 500px; margin-bottom: 30px">
        <div style="margin-right: 30px">
          <img :src="detailData.promoterUrl" alt="" style="width: 100px; height: auto" />
        </div>
        <div style="width: 60%" class="item-name-calss">
          <a
            style="
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              width: 100%;
            "
            :title="detailData.promoterNickName"
          >
            {{ detailData.promoterNickName }}
          </a>
          <p>达人Id:{{ detailData.promoterId }}</p>
          <p>{{ detailData.province }} | 粉丝:{{ detailData.fansNumber }}</p>
        </div>
      </div>
      <el-row class="top-sum" :gutter="24">
        <el-col :span="4">
          <el-card shadow="never" class="card-show">
            <!-- ringRatio: 0, -->
            <h4><span class="prefix"></span>带货内容</h4>
            <div style="width: 100%; height: 175px" class="item-name-calss dh">
              <p>品类要求：{{ detailData.categoryRequirement }}</p>
              <p>佣金要求：{{ detailData.commissionRequirement }}</p>
              <p>推广商品数：{{ dataList.promotedProductsNum }}</p>
              <p>总销售额：{{ detailData.totalSale }}</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card shadow="never" class="card-show">
            <h4><span class="prefix"></span>热销类目</h4>
            <el-table :data="dataList.hotSaleChannelInfo">
              <el-table-column label="类目" align="center" prop="hotSaleChannelName">
              </el-table-column>
              <el-table-column label="均价" align="center" prop="avgPrice" width="55">
              </el-table-column>
              <el-table-column label="销售额" align="center" prop="avgGmv">
              </el-table-column>
              <el-table-column
                label="佣金参考"
                align="center"
                prop="intervalCommissionRate"
              >
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="10">
          <el-card shadow="never" class="card-show">
            <h4><span class="prefix"></span>热销品牌</h4>
            <el-table :data="dataList.hotSaleBrandInfo">
              <el-table-column label="品牌" align="center" prop="hotSaleBrandTitle">
              </el-table-column>
              <el-table-column label="均价" align="center" prop="avgPrice">
              </el-table-column>
              <el-table-column label="销售额" align="center" prop="avgGmv">
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card v-if="dataList" style="margin-top: 20px">
      <h4>
        <span class="prefix"></span>直播带货数据
        <el-select
          v-model="zbType"
          placeholder="请选择类型"
          clearable
          style="width: 240px; float: right; padding: 3px 0"
          @change="changeEchartsType"
        >
          <el-option label="评论数" value="commentsCount" />
          <el-option label="点赞数" value="likesCount" />
          <el-option label="直播时长" value="liveMinuteDuration" />
          <el-option label="场观人数" value="liveVisitorCount" />
          <el-option label="在线人数峰值" value="maxVisitorCount" />
          <el-option label="分享数" value="sharesCount" />
        </el-select>
      </h4>
      <div class="main-box">
        <div style="width: 49%">
          <el-row class="top-sum" :gutter="15">
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>直播次数</p>
                <p>{{ dataList.promoteLiveCount }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>场均销售额</p>
                <p>{{ dataList.liveStreamGMV }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>进入直播间人数</p>
                <p>{{ dataList.liveStreamVisitorCount }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>直播GPM</p>
                <p>{{ dataList.liveStreamGPM }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>平均在线人数</p>
                <p>{{ dataList.avgVisitorOnlineCount }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>在线人数峰值</p>
                <p>{{ dataList.maxSameTimeVisitorCount }}</p>
              </div></el-col
            >
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>人均观看时长</p>
                <p>{{ dataList.avgViewTime }}</p>
              </div></el-col
            >
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>互动率</p>
                <p>{{ dataList.interactionRate }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="width: 49%">
          <div id="echart" ref="echart" style="height: 250px; width: 100%"></div>
        </div>
      </div>
    </el-card>
    <el-card v-if="dataList" style="margin-top: 20px">
      <h4>
        <span class="prefix"></span>短视频带货数据
        <el-select
          v-model="dspType"
          placeholder="请选择类型"
          clearable
          style="width: 240px; float: right; padding: 3px 0"
          @change="changeEchartsDspType"
        >
          <el-option label="分享数" value="shareCount" />
          <el-option label="播放数" value="videoWatchCount" />
          <el-option label="点赞数" value="likeCount" />
          <el-option label="评论数" value="commentCount" />
        </el-select>
      </h4>
      <div class="main-box">
        <div style="width: 49%">
          <el-row class="top-sum" :gutter="15">
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>视频数量</p>
                <p>{{ dataList.videoCount }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>视频播放量</p>
                <p>{{ dataList.videoWatchCount }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>带货视频销售额</p>
                <p>{{ dataList.totalSale }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>视频GPM</p>
                <p>{{ dataList.videoGPM }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>单视频平均销售额</p>
                <p>{{ dataList.avgVideoSales }}</p>
              </div>
            </el-col>
            <el-col :span="6">
              <div style="width: 100%; height: 100px" class="item-name-calss dh-data">
                <p>单视频平均观看人数</p>
                <p>{{ dataList.avgVideoViewers }}</p>
              </div></el-col
            >
            <el-col :span="6"> </el-col>
            <el-col :span="6"> </el-col>
          </el-row>
        </div>
        <div style="width: 49%">
          <div id="echartDsp" ref="echartDsp" style="height: 250px; width: 100%"></div>
        </div>
      </div>
    </el-card>
    <el-card v-if="dataList" style="margin-top: 20px">
      <h4><span class="prefix"></span>粉丝特性</h4>

      <el-tag
        v-for="(item, index) in dataList.fanCharacteristic"
        :key="index"
        style="margin: 10px"
        >{{ item.name }}/{{ item.roi }}</el-tag
      >
    </el-card>
    <el-card v-if="promoterLabelList" style="margin-top: 20px">
      <h4>
        <span class="prefix"></span>达人标签

        <a
          v-if="$store.getters.userId == detailData.userId"
          style="display: inline-block; margin-left: 15px"
          @click="getLabelList"
          >编辑</a
        >
      </h4>

      <el-tag
        v-for="(item, index) in promoterLabelList"
        :key="index"
        style="margin: 10px; color: black"
        :color="'#' + item.labelColour"
        >{{ item.labelName }}</el-tag
      >
    </el-card>
    <el-card style="margin-top: 20px">
      <h4>
        <span class="prefix"></span>跟进记录

        <a
          v-if="$store.getters.userId == detailData.userId&&followUpRecord"
          :class="!editDesc ? 'el-icon-edit' : 'el-icon-check'"
          @click="updateFollowUpRecords"
          style="color: deepskyblue; margin-left: 10px; display: inline"
        ></a>
      </h4>
      <div
        style="width: 100%; margin-bottom: 15px"
        class="item-name-calss dh-data"
        v-if="followUpRecord"
      >
        <!-- {{ itemInfo.partnerRecommendText }} -->
        <p v-if="!editDesc" v-html="followUpRecord.txt"></p>
        <el-input
          v-else
          type="textarea"
          :rows="2"
          v-model="followUpRecord.txt"
          placeholder="请输入内容"
          style="width: 100%"
          minlength="5"
        ></el-input>
      </div>

      <el-timeline :reverse="false" v-if="historyFollowUpRecord">
        <el-timeline-item
          v-for="(activity, index) in historyFollowUpRecord"
          :key="index"
          :timestamp="activity.updateTime.split('T').join(' ') + ' ' + activity.userName"
        >
          {{ activity.txt }}
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <el-dialog
      title="添加标签"
      :visible.sync="openAllocation"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="formBroadcast"
        :model="formBroadcast"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="标签" prop="labelId" style="width: 100%" class="entire-line">
          <el-select
            v-model="formBroadcast.labelId"
            filterable
            allow-create
            default-first-option
            placeholder="请选择标签"
            @change="selectLabel"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value + '@' + item.label + '@' + item.labelColour"
            >
            </el-option> </el-select
          ><br />
          <el-tag
            v-for="(item, index) in tagList"
            :color="'#' + item.color"
            :key="index"
            style="margin: 10px 10px 10px 0; color: black"
            size="medium"
            closable
            @close="handleClose(item)"
            >{{ item.label }}</el-tag
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormBroadcast" :loading="confirmLoading"
          >确 定</el-button
        >
        <el-button
          @click="
            confirmLoading = false;
            openAllocation = false;
            formBroadcast = {};
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPromoterDetail } from "@/api/promoter/promoter";
import {
  addLabel,
  getLabelList,
  deleteLabelById,
  updatePromoterLabel,
  updateFollowUpRecords,
} from "@/api/label";
import { Loading } from "element-ui";
var echarts = require("echarts");
export default {
  name: "promoter-detail",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      options: [],
      tagList: [],
      formBroadcast: {},
      editDesc: false,
      downLoadLoading: false,
      dialogTableVisible: false,
      logPage: {
        pageNum: 1,
        pageSize: 10,
      },
      logData: [],
      logTotal: 0,
      logLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 分配销售
      openAllocation: false,
      // 选择的销售id
      saleId: undefined,
      // 获取用户id
      userId: undefined,
      // 销售列表
      saleList: [],
      // 分配销售确定loading
      confirmLoading: false,
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        promoterId: undefined,
        promoterNickName: undefined,
        orderStartDate: undefined,
        orderEndDate: undefined,
      },
      uploadDate: [new Date(), new Date()],
      //查询参数所用下拉数据
      queryParamsList: {},
      detailData: null,
      dataList: null,
      zbType: "liveVisitorCount",
      dspType: "videoWatchCount",
      promoterLabelList: [],
      followUpRecord: undefined,
      historyFollowUpRecord: [],
    };
  },
  created() {
    if (this.$route && this.$route.query.id) {
      this.getItemDetail();
    }
  },
  mounted() {
    this.$nextTick(() => {
      //   this.getList();
      //   this.initEchart('echart', this.handlerEchartOption(res.result, 'cost'))
    });
  },
  methods: {
    getItemDetail() {
      this.loading = true;
      getPromoterDetail({
        id: this.$route.query.id,
      }).then((response) => {
        this.loading = false;
        this.detailData = response.data.promoterInfo;
        this.dataList = response.data.result;
        this.promoterLabelList = response.data.promoterLabelList
          ? response.data.promoterLabelList
          : [];
        this.followUpRecord = response.data.followUpRecord
          ? response.data.followUpRecord
          : undefined;
        this.historyFollowUpRecord = response.data.historyFollowUpRecord
          ? response.data.historyFollowUpRecord
          : [];
        this.$nextTick(() => {
          this.initEchart(
            "echart",
            this.handlerEchartOption(this.dataList.liveInfo, this.zbType, "zb")
          );
          this.initEchart(
            "echartDsp",
            this.handlerEchartOption(this.dataList.shortVideosInfo, this.dspType, "dsp")
          );
        });
      });
    },
    changeEchartsType(e) {
      console.log(e);
      if (!!e) {
        this.initEchart(
          "echart",
          this.handlerEchartOption(this.dataList.liveInfo, this.zbType, "zb")
        );
      } else {
        this.$message({
          message: "请选择类型",
          type: "error",
        });
      }
    },
    changeEchartsDspType(e) {
      console.log(e);
      if (!!e) {
        this.initEchart(
          "echartDsp",
          this.handlerEchartOption(this.dataList.shortVideosInfo, this.dspType, "dsp")
        );
      } else {
        this.$message({
          message: "请选择类型",
          type: "error",
        });
      }
    },
    /** 获取echart的值 */
    initEchart(idName, optionName) {
      let that = this;
      const chart = this.$refs[idName];
      if (chart) {
        const myChart = echarts.init(document.getElementById(idName));
        myChart.setOption(optionName);
        window.addEventListener("resize", function () {
          that.clientWidth = document.documentElement.clientWidth - 224;
          myChart.resize();
        });
      }
    },
    /** echarts数据展示 订单统计*/
    handlerEchartOption(data, typeShow, type) {
      var typeName;
      if (type == "zb") {
        switch (typeShow) {
          case "commentsCount":
            typeName = "评论数";
            break;
          case "likesCount":
            typeName = "点赞数";
            break;
          case "liveMinuteDuration":
            typeName = "直播时长";
            break;
          case "liveVisitorCount":
            typeName = "场观人数";
            break;
          case "maxVisitorCount":
            typeName = "在线人数峰值";
            break;
          case "sharesCount":
            typeName = "分享数";
            break;
        }
      } else {
        switch (typeShow) {
          case "shareCount":
            typeName = "分享数";
            break;
          case "videoWatchCount":
            typeName = "播放数";
            break;
          case "likeCount":
            typeName = "点赞数";
            break;
          case "commentCount":
            typeName = "评论数";
            break;
        }
      }

      let option = {
        noDataLoadingOption: {
          text: "暂无数据",
          effect: "bubble",
          effectOption: {
            effect: {
              n: 0,
            },
          },
        },
        tooltip: {
          trigger: "axis",
          // formatter: function(params) {
          // 	if(typeShow == 'play_duration_3s'){
          // 		return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
          // 	}else{
          // 		return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
          // 	}

          // },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          icon: "circle",
          top: "5%",
          right: "5%",
          itemWidth: 6,
          itemGap: 20,
          color: "rgb(16,79,255)",
          textStyle: {
            color: "rgb(16,79,255)",
          },
        },
        xAxis: {
          type: "category",
          data: data.map((item) => {
            return item.date;
          }),
          boundaryGap: false,
          // 坐标轴线
          axisLine: {
            show: false,
            lineStyle: {
              color: "#999",
            },
          },
          // 分割线
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#e5e5e5",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#999",
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#e5e5e5",
            },
          },
        },
        series: [
          {
            smooth: true,
            name: typeName,

            type: "line",
            stack: "总量",
            data: data.map((item) => {
              return item[typeShow];
            }),
            symbol: "circle",
            symbolSize: 2,
            symbolColor: "rgb(16,79,255)",
            lineStyle: {
              normal: {
                width: 5,
                color: "rgb(16,79,255)",
              },
            },
            itemStyle: {
              borderColor: "#ffffff",
              borderWidth: 2,
              color: "rgb(16,79,255)",
            },
          },
        ],
      };
      return option;
    },
    /** 查询字典类型列表 */
    getList() {
      this.loading = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.confirmLoading = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.dateFile = null;
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getItemDetail();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
    },
    handleClose(item) {
      var index = this.tagList.findIndex((v) => v.value == item.value);
      this.tagList.splice(index, 1);
    },
    getLabelList() {
      this.openAllocation = true;
      getLabelList({ pageNum: 1, pageSize: 1000 }).then((res) => {
        this.options = res.rows.map((item) => {
          return {
            ...item,
            value: item.id,
            label: item.labelName,
          };
        });
        this.tagList = this.promoterLabelList.map((item) => {
          return {
            value: item.labelId,
            label: item.labelName,
            color: item.labelColour,
          };
        });
      });
    },
    selectLabel(value) {
      if (value.split("@").length > 1) {
        var index = this.tagList.findIndex((item) => item.value == value.split("@")[0]);
        if (index > -1) {
        } else {
          this.tagList.push({
            value: value.split("@")[0],
            label: value.split("@")[1],
            color: value.split("@")[2],
          });
        }

        this.$set(this.formBroadcast, "labelId", undefined);
      } else {
        addLabel({
          labelLevel: "1",
          labelName: value,
          labelType: "1",
        }).then((res) => {
          this.tagList.push({
            value: res.result.id,
            label: res.result.labelName,
            color: res.result.labelColour,
          });
          getLabelList({ pageNum: 1, pageSize: 1000 }).then((res) => {
            this.options = res.rows.map((item) => {
              return {
                ...item,
                value: item.id,
                label: item.labelName,
              };
            });
          });
          this.$set(this.formBroadcast, "labelId", undefined);
        });
      }
    },
    submitFormBroadcast: function () {
      this.$refs["formBroadcast"].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;

          updatePromoterLabel({
            promoterId: this.detailData.promoterId,
            userId: this.detailData.userId,
            ids: this.tagList.map((item) => {
              return item.value;
            }),
          }).then((res) => {
            this.getItemDetail();
            this.confirmLoading = false;
            this.openAllocation = false;
          });
        }
      });
    },
    updateFollowUpRecords() {
      if (!this.editDesc) {
        this.editDesc = true;
      } else {
        updateFollowUpRecords({
          promoterId: this.detailData.promoterId,
          userId: this.detailData.userId,
          txt: this.followUpRecord.txt,
          id: this.followUpRecord.id,
        }).then((res) => {
          this.editDesc = false;
          this.$message.success("修改成功");
        });
      }
    },
  },
};
</script>
