<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="栏目">
          <Programcom @change="change" :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-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card class="box-card">
      <flow-charts
        :list="tableData"
        v-if="tableData.length"
        xName="time_stamp"
        :subsection="subsection"
        :keys="chartKeys"
      ></flow-charts>
    </el-card>
  </div>
</template>

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

import Programcom from "./components/programs.vue";

import flowCharts from "@/views/Country/components/flowCharts";

import config from "@/config/index";
export default {
  name: "Channel",
  data() {
    return {
      lmList: [],
      form: {
        program: "",
        programLi: [],
        region: -1,
      },
      tableData: [],
      subsection: [],
    };
  },
  mounted() {},
  computed: {
    chartKeys() {
      return [
        {
          key: "tv_ratings",
        },
      ];
    },
    region() {
      return config.region;
    },
  },
  methods: {
    change(li) {
      this.form.programLi = li || [];
    },
    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);
      });
    },
    handleSelect(item) {
      epgAggregate("ca_id=" + item.id).then(res => {
        this.lmList = res || [];
      });
    },
    onSubmit() {
      let programLi = this.form.programLi || [{}];
      console.log(programLi[0]);
      // if (programLi.length !== 1)
      // return ElNotification({
      //   message: "请选择一个节目",
      //   title: "Warning",
      //   type: "warning",
      // });
      singleProgram(
        "epg_ids=" +
          (programLi[0] ? programLi[0].epg_id : "") +
          "&area_id=" +
          this.form.region
      ).then(r => {
        console.log(r);
        const li = {
          high_low: r ? r.high_low || [] : [],
          list: r ? r.list || [] : [],
        };
        this.tableData = li.list;
        this.subsection = li.high_low;
      });
    },
    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: { flowCharts, Programcom },
};
</script>

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