<template>
  <div class="SingleDay">
    <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="日期">
          <el-date-picker
            v-model="form.date"
            type="daterange"
            :disabled-date="time => disabledDate(time)"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="对比频道">
          <el-select
            v-model="form.vs"
            placeholder="请选择时段"
            multiple
            collapse-tags
            filterable
            clearable
            :multiple-limit="4"
          >
            <el-option
              v-for="item in tvList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </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" :loading="loading" @click="onSubmit">查询</el-button>
          <el-button type="primary" :loading="loading1" @click="onExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <line-charts
        :list="tableDate"
        v-if="tableDate.length"
        xName="timestamp"
        :keys="chartKeys"
      ></line-charts>
    </el-card>
  </div>
</template>

<script>
// @ is an alias to /src
import { overlapSearchTitle, tvvscountry, tvlist,tvlistexport } from "@/api/kuyun";

import lineCharts from "@/views/Country/components/lineCharts1";

import config from "@/config/index";
export default {
  name: "Channel",
  data() {
    return {
      form: {
        channel: 0,
        date: [],
        vs: [],
        region: -1,
      },
      tvList: [],
      tableDate: [],
      loading: false,
      loading1: false,
    };
  },
  mounted() {
    const d = new Date(Date.now() - 86400000);
    let Y = d.getFullYear(),
      M = d.getMonth() + 1,
      D = d.getDate();
    M > 9 ? "" : (M = "0" + M);
    D > 9 ? "" : (D = "0" + D);
    this.form.date = [[Y - 1, M, D].join("-"), [Y, M, D].join("-")];
    tvlist().then(r => {
      this.tvList = r || [];
    });
  },
  computed: {
    chartKeys() {
      const obj = {},
        li = [];
      for (let i = 0; i < this.tableDate.length; i++) {
        const b = [
          {
            key: "tv_ratings",
            name: "直播关注度",
          },
        ];
        const v = this.tableDate[i][0];
        if (obj[v.channel] === true) continue;
        obj[v.channel] = true;
        li.push(
          ...b.map(k => {
            k.name = v.channel + "_" + k.name;
            return k;
          })
        );
      }
      console.log(li);
      return li;
    },
    region() {
      return config.region;
    },
  },
  methods: {
    handleSelect(item) {
      this.form.tv_id = item.id || "";
    },
    querySearchAsync(queryString, cb) {
      if (!queryString) {
        cb([]);
        return;
      }
      overlapSearchTitle("kw=" + queryString).then(r => {
        let li = (r || []).map(v => {
          return {
            value: v.name,
            id: v.id,
          };
        });
        cb(li);
      });
    },
    onExport() {
      if (!this.form.date.length || !this.form.vs.length) return;
      let vs = (this.form.vs || []).join(",");
      this.loading1=  true;
        tvlistexport('start=' +
          this.form.date[0] +'+00:00:00&end=' +
          this.form.date[1] +'+00:00:00&tv_id=48&area_id=' +
          this.form.tv_id +'&vs=' +
          vs +'&domain=pro.eye.kuyun.com&download=csv', '平均频道点分钟.csv', ()=>{
              this.loading1 = false
          })
    },
    disabledDate(time) {
      return time.getTime() > Date.now() - 86400000;
    },
    onSubmit() {
      console.log(this.form);
      if (!this.form.date.length || !this.form.vs.length) return;
      let vs = (this.form.vs || []).join(",");
      let vsname = [];
      for (let i = 0; i < (this.form.vs || []).length; i++) {
        const v = (this.form.vs || [])[i];
        const item = this.tvList.filter(o => o.id === v);
        vsname.push(...item);
      }

      tvvscountry(
        "start=" +
          this.form.date[0] +
          "+00:00:00&end=" +
          this.form.date[1] +
          "+00:00:00&tv_id=" +
          this.form.tv_id +
          "&area_id=9&vs=" +
          vs
      ).then(r => {
        const li = r || { list: [], vs: [] },
          l = [];
        l.push(
          li.list.map(v => {
            v.channel = this.form.program;
            return v;
          })
        );
        vsname.map((v, i) => {
          let list = li.vs[i] || [];
          l.push(
            list.map(item => {
              item.channel = v.name;
              return item;
            })
          );
        });
        console.log(l);
        this.tableDate = l;
      });
    },
    matrer(row, column, cellValue) {
      return (cellValue * 100).toFixed(4) - 0 + "%";
    },
    selectAll(a, key, val) {
      if (!a.length) return;
      let select = a[a.length - 1];
      if (select === val) this.form[key] = [val];
      else
        this.form[key] = (a.join(",") + ",")
          .replace(val + ",", "")
          .replace(/,$/, "")
          .split(",");
    },
  },
  components: { lineCharts },
};
</script>

<style>
.SingleDay {
  margin: 10px 15px;
}
.SingleDay .nowrap .cell {
  white-space: nowrap;
}
</style>
