<template>
  <Head />
  <div class="BackLook_main">
    <el-form style="border-bottom: 1px solid #ccc" label-width="120px">
      <el-form-item label="类别:">
        <div
          @click="() => changeTypeFunc(0)"
          :class="{ BKTag: true, BKTag_act: search.type === 0 }"
        >
          频道
        </div>
        <div
          @click="() => changeTypeFunc(1)"
          :class="{ BKTag: true, BKTag_act: search.type === 1 }"
        >
          频率
        </div>
      </el-form-item>
      <el-form-item label="频率频道:">
        <div
          :class="{ BKTag: true, BKTag_act: search.plpd === item.channelId }"
          v-for="(item, index) in pvpd[search.type]"
          :key="index + 'plpd'"
          v-text="item.title"
          @click="() => changePlpdFunc(item.channelId)"
        ></div>
      </el-form-item>
      <el-form-item label="模式:">
        <div
          @click="() => changeModeFunc(0)"
          :class="{ BKTag: true, BKTag_act: search.mode === 0 }"
        >
          匹配模式
        </div>
        <div
          @click="() => changeModeFunc(1)"
          :class="{ BKTag: true, BKTag_act: search.mode === 1 }"
        >
          节目单模式
        </div>
      </el-form-item>
      <el-form-item v-if="DateList.length && search.mode === 1" label="日期:">
        <div
          :class="{ BKTag: true, BKTag_act: search.date === index }"
          v-for="(item, index) in DateList"
          :key="index + 'plpd'"
          @click="() => changeDateFunc(index)"
        >
          <p class="text" v-text="item.dt"></p>
          <p class="text" v-text="'(' + item.week + ')'"></p>
        </div>
      </el-form-item>
      <!-- <el-form-item v-if="search.mode === 0" label="时间:">
        <div>
          <el-date-picker
            v-model="search.daterange"
            @change="pickerChange"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="-"
            :disabled-date="disabledDate"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </div>
      </el-form-item> -->
      <el-form-item v-if="search.mode === 0">
        <el-button type="primary" @click="() => showAddFunc()"
          >新增匹配</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      v-if="DateList[search.date]"
      :data="DateList[search.date].list"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="title" label="节目" />
      <el-table-column prop="startTime" label="播出时间" />
      <el-table-column prop="address" label="禁用回看">
        <template #default="scope">
          <el-switch
            v-model="scope.row.statusShow"
            @change="key => changeEPG(key, scope.row, scope.$index)"
            class=""
          />
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-else-if="DatePPList"
      :data="DatePPList"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="program" label="节目名称" />
      <el-table-column prop="address" label="生效周期">
        <template #default="scope">
          {{
            scope.row.startTime !== scope.row.endTime
              ? scope.row.startTime + ' 至 ' + scope.row.endTime
              : scope.row.endTime
          }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="禁用回看">
        <template #default="scope">
          <el-switch
            v-model="scope.row.statusShow"
            @change="key => changeKeywords(key, scope.row, scope.$index)"
            class=""
          />
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-pagination
      v-if="search.mode === 0"
      background
      @current-change="chagnepage"
      layout="prev, pager, next"
      :page-size="pageSize"
      :current-page="currentPage"
      :total="total || 0"
    />

    <el-dialog v-model="showAdd" :title="changeItem.id ? '编辑' : '新增'">
      <el-form :model="changeItem" label-width="120px">
        <el-form-item label="匹配名称">
          <el-input v-model="changeItem.title" />
        </el-form-item>
        <el-form-item label="生效周期">
          <el-date-picker
            v-model="changeItem.daterange"
            @change="pickerChange"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="-"
            :disabled-date="disabledDate"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">创建</el-button>
          <el-button @click="() => showAddFunc()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';

import Head from '@/components/head.vue';
import { ref, nextTick } from 'vue';
import {
  getFM,
  getTV,
  getAllEpg,
  getKeywords,
  createData,
  disableEPG,
  disableKeywords,
} from '@/api/index';
import dayjs from 'dayjs';
document.title = '回看配置';
const search = ref({
  type: 0,
  plpd: 0,
  date: 0,
  mode: 0,
  //   daterange: [],
});
const currentPage = ref(1);
const pageSize = ref(10);
const showAdd = ref(false);
const changeItem = ref({
  title: '',
  daterange: [],
});
const pvpd = ref([]);
const DateList = ref([]);
const DatePPList = ref([]);
const total = ref(0);

Promise.all([getFM({}), getTV({})]).then(li => {
  pvpd.value = li || [];
  search.value.plpd =
    li[search.value.type] && li[search.value.type][0]
      ? li[search.value.type][0].channelId
      : undefined;

  nextTick(() => getData());
});

function changeTypeFunc(type) {
  search.value = {
    type,
    plpd:
      pvpd.value[type] && pvpd.value[type][0]
        ? pvpd.value[type][0].channelId
        : undefined,
    date: 0,
    mode: 0,
  };
  nextTick(() => getData());
}
function changePlpdFunc(plpd) {
  search.value.plpd = plpd;
  nextTick(() => getData());
}
function changeDateFunc(date) {
  search.value.date = date;
}
function changeModeFunc(mode) {
  search.value.mode = mode;
  DateList.value = [];
  nextTick(() => getData());
}
function showAddFunc(item) {
  showAdd.value = !showAdd.value;
  changeItem.value = item || {
    title: '',
    daterange: [],
  };
}
function getData() {
  DateList.value = [];
  DatePPList.value = [];
  if (search.value.mode === 1)
    return getAllEpg(search.value.plpd).then(r => {
      const list = r || [];
      let week = ['日', '一', '二', '三', '四', '五', '六'];
      const DateListValue = [];
      for (let i = 0; i < list.length; i++) {
        const v = list[i];
        const day = dayjs(v.date);
        DateListValue.push({
          dt: day.format('YYYY-MM-DD'),
          week: '星期' + week[day.day()],
          list: v.epg.map(item => {
            item.statusShow = item.status === 1;
            return item;
          }),
        });
      }
      DateList.value = DateListValue;
    });

  getKeywords({
    channelId: search.value.plpd,
    page: currentPage.value,
    pageSize: pageSize.value,
  }).then(r => {
    const Data = r || {};
    Data.records = Data.records.map(item => {
      item.statusShow = item.status === 1;
      return item;
    });
    DatePPList.value = Data.records;
    total.value = Data.total || 0;
  });
}
function onSubmit() {
  if (!changeItem.value.title || !changeItem.value.daterange) {
    ElMessage({
      message: '匹配名称或生效周期不能为空',
      type: 'warning',
    });
    return;
  }
  createData({
    channelId: search.value.plpd,
    program: changeItem.value.title,
    startTime: changeItem.value.daterange[0],
    endTime: changeItem.value.daterange[1],
  }).then(r => {
    showAddFunc();
    getData();
  });
}
function chagnepage(p) {
  currentPage.value = p;
  getData();
}

function disabledDate(time) {
  // return time.getTime() > Date.now() - 86400000;
  return false;
}
function pickerChange() {}

function changeEPG(key, item, index) {
  if (key === item.status) return;
  disableEPG({
    title: item.title,
    channelId: search.value.plpd,
    startTime: item.startTime,
    status: item.statusShow ? 1 : 0,
  }).then(() => {
    // getData();
    DateList.value[search.value.date].list[index].status = DateList.value[
      search.value.date
    ].list[index].statusShow
      ? 1
      : 0;
  });
}
function changeKeywords(key, item, index) {
  if (key === item.status) return;
  disableKeywords({
    id: item.id,
    status: item.statusShow ? 1 : 0,
  }).then(() => {
    DatePPList.value[index].status = DatePPList.value[index].statusShow ? 1 : 0;
  });
}
</script>

<style scoped>
.BackLook_main {
  padding: 1em;
  height: calc(100% - 56px);
  overflow-y: auto;
}
.BackLook_main .BKTag {
  padding: 0 1em;
  cursor: pointer;
}
.BackLook_main .BKTag_act {
  color: #539fe7;
}
.BackLook_main .text {
  line-height: 1.3em;
  text-align: center;
}

.BackLook_main .cell {
  color: #000 !important;
}
</style>
