<template>
  <el-popover
    placement="bottom"
    :visible="visible"
    :width="800"
    trigger="click"
  >
    <template #reference>
      <div
        v-text="program || '请选择节目'"
        class="el-input__inner"
        @click="visible = !visible"
        style="height: 33px;line-height: 33px;min-width: 220px;cursor: pointer;"
      ></div>
    </template>
    <el-form :inline="true" size="small" :model="form" class="demo-form-inline">
      <el-form-item label="">
        <el-date-picker
          v-model="form.data"
          type="daterange"
          @change="dateChange"
          range-separator="-"
          :disabled-date="disabledDate"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </el-form-item>
      <el-form-item label="">
        <local-popver
          placeholder="请选择频道"
          @changeEvent="changeChannel"
          :list="channelList"
        />
      </el-form-item>
      <el-form-item label="">
        <local-popver
          placeholder="请选择时间"
          @changeEvent="changeTime"
          :list="timeList"
        />
      </el-form-item>
      <el-form-item label="">
        <local-popver
          placeholder="请选择星期"
          @changeEvent="changeWeek"
          :list="weeks"
        />
      </el-form-item>
      <el-form-item label="">
        <el-select
          v-model="form.times"
          @change="changeTimes"
          style="width: 120px;"
          class="programsinput"
          placeholder="请选择频次"
        >
          <el-option
            v-for="item in firstFrequency"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table
      ref="table"
      @selection-change="handleSelectionChange"
      :data="tableList"
      height="300"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        property="epg_name"
        show-overflow-tooltip
        label="节目"
      ></el-table-column>
      <el-table-column
        property="tv_name"
        show-overflow-tooltip
        label="频道"
      ></el-table-column>
      <el-table-column
        property="weekday"
        show-overflow-tooltip
        label="星期"
      ></el-table-column>
      <el-table-column
        property="start_time"
        show-overflow-tooltip
        label="时间"
        width="300"
      >
        <template #default="scope">
          {{ scope.row.start_time.replace(/:00$/, "") }} -
          {{ scope.row.end_time.replace(/:00$/, "") }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage="page"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
    <div class="progtamsfooter">
      <el-row class="mb-4">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-row>
    </div>
  </el-popover>
</template>

<script>
// @ is an alias to /src

import config from "@/config/index";

import localPopver from "./popver.vue";
import { ElNotification } from "element-plus";
let selectTable = [];
export default {
  name: "Channel",
  data() {
    return {
      form: {
        times: 0,
      },
      program: "",
      li: [],
      page: 1,
      visible: false,
      size: 10,
    };
  },
  props: ["list"],
  emits: ["change"],
  watch: {
    list() {
      if (!this.list || !this.list.length) return;
      this.li = this.list;
    },
  },
  mounted() {
      selectTable = [];
  },
  computed: {
    channelList() {
      return this.li.map(v => {
        return {
          name: v.tv_name,
          id: v.tv_id,
        };
      });
    },
    tableList() {
      let l = [],
        n = 0,
        channel = (this.form.channel || []).join(",") + ",",
        data = this.form.data || [],
        time = this.form.time || [],
        week = this.form.week || [],
        rtmes = this.form.times || 0;
      if (channel === ",") channel = "";
      for (let i = 0; i < this.li.length; i++) {
        const v = this.li[i],
          exg = new RegExp(v.tv_name + ",", "g");
        if (channel && !exg.test(channel)) continue;
        for (let o = 0; o < (v.epg_list || []).length; o++) {
          const item = (v.epg_list || [])[o];
          if (data.length && !this.At(item.start_time, item.end_time, data))
            continue;
          if (time.length && !this.Attime(item.start_time, item.end_time, time))
            continue;
          if (week.length && !this.Atweek(item.weekday)) continue;
          if (rtmes != 0 && item.is_live != rtmes ) continue;
          ++n;
          if (n <= this.page * this.size - this.size) continue;
          if (n > this.page * this.size) break;
          l.push(item);
        }
      }
      return l;
    },
    total() {
      let t = 0,
        channel = (this.form.channel || []).join(",") + ",",
        data = this.form.data || [],
        time = this.form.time || [],
        week = this.form.week || [],
        rtmes = this.form.times || 0;
      if (channel === ",") channel = "";
      for (let i = 0; i < this.li.length; i++) {
        const v = this.li[i],
          exg = new RegExp(v.tv_name + ",", "g");
        if (channel && !exg.test(channel)) continue;
        for (let o = 0; o < (v.epg_list || []).length; o++) {
          const item = (v.epg_list || [])[o];
          if (data.length > 0 && !this.At(item.start_time, item.end_time, data))
            continue;
          if (time.length && !this.Attime(item.start_time, item.end_time, time))
            continue;
          if (week.length && !this.Atweek(item.weekday)) continue;
          if (rtmes != 0 && item.is_live != rtmes ) continue;
          t++;
        }
      }
      return t;
    },

    timeList() {
      let li = new Array(24);
      li.fill(0);
      for (let i = 0; i < 24; i++) {
        li[i] = {
          name: i,
          id: i,
        };
      }
      return li;
    },
    weeks() {
      return config.weeks.map(v => {
        return {
          name: v.label,
          id: v.value,
        };
      });
    },
    firstFrequency() {
      return config.frequency;
    },
  },
  methods: {
    handleSelectionChange(val) {
      selectTable = val || [];
    },
    onSubmit() {
      if (selectTable.length > 1)
        return ElNotification({
          message: "请选择一个节目",
          title: "Warning",
          type: "warning",
        });
      this.visible = false;
      this.program = selectTable[0].epg_name
      this.$emit("change", selectTable);
    },
    disabledDate(time) {
      return time.getTime() > Date.now();
    },
    handleCurrentChange(p) {
      this.page = p;
    },
    dateChange() {
      this.page = 1;
    },
    changeChannel(li) {
      this.page = 1;
      this.form.channel = li;
    },
    changeTime(li) {
      this.page = 1;
      this.form.time = li;
    },
    changeWeek(li) {
      this.page = 1;
      this.form.week = li;
    },
    changeTimes(li) {
      this.page = 1;
      console.log(li);
    },
    At(sT, eT, rang) {
      if (!rang.length) return false;
      let s = new Date(sT.split(" ")[0] + " 00:00:00");
      let e = new Date(eT.split(" ")[0] + " 00:00:00");
      let start = s <= rang[1] - 0 && s >= rang[0] - 0;
      let end = e <= rang[1] - 0 && e >= rang[0] - 0;
      return start || end;
    },
    Attime(sT, eT, rang) {
      let out = false;
      if (!rang.length) return out;
      let s = sT.split(" ")[1].split(":");
      let e = eT.split(" ")[1].split(":");
      for (let i = 0; i < rang.length; i++) {
        const v = rang[i];
        if (v === s[0] - 0 || v === e[0] - 0) {
          out = true;
          break;
        }
      }
      return out;
    },
    Atweek(w) {
      const exg = new RegExp(w + ",", "g"),
        weeks = (this.form.week || []).join(",") + ",";
      return exg.test(weeks);
    },
  },
  components: { localPopver },
};
</script>

<style>
.programsinput .el-input__inner {
  border: none;
}
.progtamsfooter {
  padding: 10px 0;
  text-align: center;
}
</style>
