<template>
  <div class="Overlap">
    <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">
      <template #header>
        <div class="card-header">
          <span>与本节目相关重叠度</span>
          <el-radio-group v-model="radio">
            <el-radio label="all_left">全部</el-radio>
            <el-radio label="same_left">同类型</el-radio>
          </el-radio-group>
        </div>
      </template>
      <pie-charts v-if="radio && ori[radio]" :list="ori[radio]" />
    </el-card>
    <br />
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>与其它节目相关重叠度</span>
          <el-radio-group v-model="radio1">
            <el-radio label="all_right">全部</el-radio>
            <el-radio label="same_right">同类型</el-radio>
          </el-radio-group>
        </div>
      </template>
      <pie-charts v-if="radio1 && ori[radio1]" :list="ori[radio1]" />
    </el-card>
  </div>
</template>

<script>
// @ is an alias to /src
import { overlapSearchTitle, epgAggregate,overlap } from "@/api/kuyun";
// import { ElNotification } from "element-plus";

import Programcom from "./components/programs.vue";
import pieCharts from "@/views/Country/components/pieCharts";
import config from "@/config/index";
export default {
  name: "Channel",
  data() {
    return {
      form: {
        program: "",
        programLi: [],
        region: -1,
      },
      radio: "all_left",
      radio1: "all_right",
      lmList: [],
      ori: {},
    };
  },
  mounted() {},
  computed: {
    region() {
      return config.region;
    },
  },
  methods: {
    change(li) {
      this.form.programLi = li || [];
    },
    onSubmit() {
        let programLi = this.form.programLi || [{}];
        console.log(programLi[0])
        // if (programLi.length !== 1)
        // return ElNotification({
        //   message: "请选择一个节目",
        //   title: "Warning",
        //   type: "warning",
        // });
        overlap('epg_ids=' + (programLi[0] ? programLi[0].epg_id : "") + '&area_id=' + this.form.region).then(r=>{
            console.log(r)
            this.ori = {
                same_right: r.same_right || [],   
                all_right: r.all_right || [],   
                same_left: r.same_left || [],   
                all_left: r.all_left || [],   
            }
        })
    },
    regionSelect(a) {
      this.selectAll(a, "region", -1);
    },
    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(",");
    },
    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);
      });
    },
  },
  components: { pieCharts, Programcom },
};
</script>

<style>
.Overlap {
  margin: 10px 15px;
}
.Overlap .nowrap .cell {
  white-space: nowrap;
}
.Overlap .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
