<template>
  <div class="Compete">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>传统媒体</el-breadcrumb-item>
      <el-breadcrumb-item>电视剧排播信息及表现（全国）</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form
        ref="form"
        :model="form"
        size="small"
        :inline="true"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-form-item label="节目">
          <el-autocomplete
            v-model="form.program"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入节目名"
            @select="handleSelect"
          />
        </el-form-item>
        <el-form-item label="节目选择">
          <Programcom @change="changePro" :list="lmList" />
        </el-form-item>
        <el-form-item label="区域">
          <el-cascader
            v-model="form.region"
            :options="region"
            :props="{ children: 'options' }"
          ></el-cascader>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="onExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <el-radio-group @change="onSubmit" v-model="radio">
        <el-radio :label="0">同时段频道 </el-radio>
        <el-radio :label="1">同时段节目 </el-radio>
        <el-radio :label="2">同时段多节目 </el-radio>
      </el-radio-group>

      <el-row style="margin: 1em 0;" v-if="radio === 2" :gutter="20">
        <el-col :span="6">
          <el-card>
            <div class="title">
              直播关注度
            </div>
            <div class="body">{{ format(total.tv_ratings) }}%</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="title">
              市占率
            </div>
            <div class="body">{{ format(total.market_ratings) }}%</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="title">
              平均到达率
            </div>
            <div class="body">{{ format(total.arrive) }}%</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="title">
              平均忠诚度
            </div>
            <div class="body">{{ format(total.loyal) }}%</div>
          </el-card>
        </el-col>
      </el-row>
      <el-select
        v-model="col"
        @change="change"
        class="m-2"
        placeholder="请选择"
        multiple
        collapse-tags
        v-if="radio === 2"
        style="float: right;"
      >
        <el-option
          v-for="item in cols"
          :key="item.type"
          :label="item.name"
          :value="item.type"
        >
        </el-option>
      </el-select>
      <el-table :data="tableList" style="width: 100%">
        <el-table-column
          :prop="item.type"
          :label="item.name"
          :type="item.colType"
          v-for="(item, i) in columns[radio] || []"
          :key="'col' + i"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  overlapSearchTitle,
  epgAggregate,
  summary,
  program,
  programs,
  summaryExport,
  programExport,
  programsExport
} from "@/api/kuyun";

// import lineCharts from "@/views/Country/components/lineCharts";
import Programcom from "./components/programs.vue";

import config from "@/config/index";
const three = [
  {
    type: "epg_name",
    name: "节目",
  },
  {
    type: "tv_name",
    name: "频道",
  },
  {
    type: "start_time:end_time",
    name: "播出时间",
  },
];
export default {
  name: "Channel",
  data() {
    return {
      form: {
        program: "",
        programLi: [],
        region: -1,
      },
      options: [],
      list: [],
      radio: 0,
      lmList: [],
      col: [],
      cols: [
        {
          type: "all_sametime-同时段全频道排名",
          name: "同时段全频道排名",
        },
        {
          type: "all_sametime_province_weishi-同时段省卫频道排名",
          name: "同时段省卫频道排名",
        },
        {
          type: "all_sametime_weishi-同时段卫视频道排名",
          name: "同时段卫视频道排名",
        },
        {
          type: "all_sametime_weishi_cctv1-同时段综合频道排名",
          name: "同时段综合频道排名",
        },
        {
          type: "all_sametime_jiemu-同时段全频道节目排名",
          name: "同时段全频道节目排名",
        },
        {
          type: "all_in_day-全天全频道节目排名",
          name: "全天全频道节目排名",
        },
        {
          type: "all_weishi-全天卫视频道节目排名",
          name: "全天卫视频道节目排名",
        },
        {
          type: "tv_ratings-直播关注度",
          name: "直播关注度",
        },
        {
          type: "market_ratings-市占率",
          name: "市占率",
        },
        {
          type: "arrive-到达率",
          name: "到达率",
        },
        {
          type: "loyal-忠诚度",
          name: "忠诚度",
        },
        {
          type: "column_remain-上期节目留存",
          name: "上期节目留存",
        },
        {
          type: "traction-用户牵引",
          name: "用户牵引",
        },
        {
          type: "tv_contribution-直播关注度贡献",
          name: "直播关注度贡献",
        },
      ],
      tableList: [],
      columns: [
        [
          {
            colType: "index",
            name: "排名",
          },
          {
            type: "tv_name",
            name: "频道",
          },
          {
            type: "time_range",
            name: "时段",
          },
          {
            type: "tv_ratings",
            name: "直播关注度",
          },
          {
            type: "market_ratings",
            name: "市占率",
          },
          {
            type: "epgs",
            name: "节目信息",
          },
        ],
        [
          {
            colType: "index",
            name: "排名",
          },
          {
            type: "epg_name",
            name: "节目",
          },
          {
            type: "tv_name",
            name: "频道",
          },
          {
            type: "start_time:end_time",
            name: "播出时间",
          },
          {
            type: "tv_ratings",
            name: "直播关注度",
          },
          {
            type: "market_ratings",
            name: "市占率",
          },
          {
            type: "arrive",
            name: "到达率",
          },
          {
            type: "loyal",
            name: "忠诚度",
          },
          {
            type: "column_remain",
            name: "节目留存",
          },
        ],
        [
          {
            type: "epg_name",
            name: "节目",
          },
          {
            type: "epg_play_date",
            name: "日期",
          },
          {
            type: "epg_play_time",
            name: "播出时间",
          },
        ],
      ],
      total: {
        arrive: 0,
        loyal: 0,
        market_ratings: 0,
        tv_ratings: 0,
      },
    };
  },
  mounted() {},
  computed: {
    region() {
      return config.region;
    },
    tableDate() {
      const obj = {};

      const b = [
        {
          key: "indicators_tv_ratings",
          name: "直播关注度",
        },
        {
          key: "indicators_market_ratings",
          name: "市占率",
        },
      ];
      for (let i = 0; i < this.tableData.length; i++) {
        const v = this.tableData[i];
        if (typeof obj[v.epg] !== "object") obj[v.epg] = {};
        obj[v.epg][v.minute] = v;
      }
      let li = [],
        keys = Object.keys(obj),
        dataLen = [];
      for (let i = 0; i < keys.length; i++) {
        const k = keys[i];
        dataLen.push(...Object.keys(obj[k]));
      }
      for (let i = 0; i < dataLen.length; i++) {
        let p = {};
        for (let o = 0; o < keys.length; o++) {
          const v = obj[keys[o]][dataLen[i]];
          if (!v) continue;

          b.map(k => {
            p[keys[o] + "_" + k.key] = v[k.key] || 0;
          });
        }
        li.push({
          date: dataLen[i],
          ...p,
        });
      }
      return li;
    },
    chartKeys() {
      const obj = {},
        li = [];
      for (let i = 0; i < this.tableData.length; i++) {
        const b = [
          {
            key: "indicators_tv_ratings",
            name: "直播关注度",
          },
          {
            key: "indicators_market_ratings",
            name: "市占率",
          },
        ];
        const v = this.tableData[i];
        if (obj[v.epg] === true) continue;
        obj[v.epg] = true;
        li.push(
          ...b.map(k => {
            k.key = v.epg + "_" + k.key;
            k.name = v.epg + "_" + k.name;
            return k;
          })
        );
      }
      return li;
    },
    tableKeys() {
      const obj = {},
        li = [];
      for (let i = 0; i < this.tableData.length; i++) {
        const b = [
          {
            key: "indicators_tv_ratings",
            name: "直播关注度",
          },
          {
            key: "indicators_market_ratings",
            name: "市占率",
          },
        ];
        const v = this.tableData[i];
        if (obj[v.epg] === true) continue;
        obj[v.epg] = true;
        li.push({
          name: v.epg,
          children: b.map(k => {
            k.key = v.epg + "_" + k.key;
            return k;
          }),
        });
      }
      return li;
    },
  },
  methods: {
    changePro(li) {
      this.form.programLi = li || [];
    },
    handleSelect(item) {
      epgAggregate("ca_id=" + item.id).then(res => {
        this.lmList = res || [];
      });
    },
    querySearchAsync(queryString, cb) {
      if (!queryString) {
        cb([]);
        return;
      }
      overlapSearchTitle("kw=" + queryString + "&ft=1").then(r => {
        let li = (r || []).map(v => {
          return {
            value: v.name,
            id: v.id,
          };
        });
        cb(li);
      });
    },
    onExport() {
      let programLi = this.form.programLi || [{}];
      const apis = [summaryExport, program, programs];
      const apistext = [summaryExport, programExport, programsExport];
      console.log(programLi[0]);
      let epg = "epg_id=" + +(programLi[0] ? programLi[0].epg_id : "");
      if (this.radio == 2)
        epg = "epg_ids=" + +(programLi[0] ? programLi[0].epg_id : "");
      apis[this.radio](
        epg + "&area_id=" + this.form.region+"&domain=pro.eye.kuyun.com%2F&download=csv&page_no=1&page_size=10000",
        "电视剧排播信息及表现（全国）-"+apistext[this.radio] + ".csv"
      );
    },
    onSubmit() {
      let programLi = this.form.programLi || [{}];
      const apis = [summary, program, programs];
      console.log(programLi[0]);
      // if (programLi.length !== 1)
      // return ElNotification({
      //   message: "请选择一个节目",
      //   title: "Warning",
      //   type: "warning",
      // });
      let epg = "epg_id=" + +(programLi[0] ? programLi[0].epg_id : "");
      if (this.radio == 2)
        epg = "epg_ids=" + +(programLi[0] ? programLi[0].epg_id : "");
      apis[this.radio](epg + "&area_id=" + this.form.region).then(r => {
        console.log(r);
        let li = r || {};
        this.tableList = li.list || [];
        this.total = {
          arrive: li.arrive || 0,
          loyal: li.loyal || 0,
          market_ratings: li.market_ratings || 0,
          tv_ratings: li.tv_ratings || 0,
        };
      });
    },
    change(v) {
      let ori = v || [];
      let l = JSON.parse(JSON.stringify(three));
      for (let i = 0; i < ori.length; i++) {
        const ol = ori[i];
        let li = (ol || "").split("-");
        let o = {
          type: li[0],
          name: li[1],
        };
        l.push(o);
      }
      this.columns[2] = l;
    },
    format(v) {
      return (v * 100).toFixed(4) - 0;
    },
  },
  components: { Programcom },
};
</script>

<style>
.Compete {
  margin: 10px 15px;
}
.Compete .nowrap .cell {
  white-space: nowrap;
}
.Compete .nowrap .cell {
  white-space: nowrap;
}
.Compete .title {
  box-sizing: border-box;
  font-size: 14px;
  color: #787b82;
  padding: auto 1em;
}
.Compete .body {
  width: 100%;
  height: 108px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  font-size: 30px;
  color: #53507b;
  font-weight: 700;
}
</style>
