<script setup>
import { pauseReportAll, pauseReport, setStopReport } from "@/api/modules/reportupdateApi.js";
import { ElMessage } from "element-plus";
import { computed, reactive, ref, watch } from "vue";
import setPause from './components/setVarietyPause.vue';

const pageState = reactive({
  default_tab: 'stop',
  statisticList: [
    { label: '暂停更新', day: [], week: [] },
    { label: '永久停更', day: [], week: [] },
  ],
  dataLoading: false,
  dayList: [],
  checkedDay: [],

  weekList: [],
  checkedWeek: [],

  showSetDialog: false,
  setArr: [],//要设置的数组
  setType: ''
})

const checkDayAll = computed(() => {
  return pageState.dayList.length === pageState.checkedDay.length ? true : false
})
const checkWeekAll = computed(() => {
  return pageState.weekList.length == pageState.checkedWeek.length ? true : false
})
watch(
  () => pageState.default_tab,
  () => {
    getPauseList()
  }
)

function initPage() {
  getStatistic();
  getPauseList()
}
initPage()

/* 获取统计 */
async function getStatistic() {
  const res = await pauseReportAll();
  if (res.Ret !== 200) return

  const { DisableDay, DisableWeek, StopDay, StopWeek } = res.Data;
  pageState.statisticList = [
    { label: '暂停更新', day: StopDay, week: StopWeek },
    { label: '永久停更', day: DisableDay, week: DisableWeek },
  ]
}

/* 获取暂停的报告品种 */
async function getPauseList() {
  pageState.dataLoading = true;
  pageState.checkedDay = [];
  pageState.checkedWeek = [];
  const res = await pauseReport({ StopType: pageState.default_tab });
  pageState.dataLoading = false
  if (res.Ret !== 200) return

  const { Day, Week } = res.Data;
  pageState.dayList = Day || [];
  Day && Day.forEach((item) => {
    if (pageState.default_tab === 'stop' && item.IsSet === 1) pageState.checkedDay.push(item.ReportChapterTypeId);
    if (pageState.default_tab === 'disable' && !item.Enabled) pageState.checkedDay.push(item.ReportChapterTypeId);
  });

  pageState.weekList = Week || [];
  Week && Week.forEach((item) => {
    if (pageState.default_tab === 'stop' && item.IsSet === 1) pageState.checkedWeek.push(item.ReportChapterTypeId);
    if (pageState.default_tab === 'disable' && !item.Enabled) pageState.checkedWeek.push(item.ReportChapterTypeId);
  });
}

function handleDayCheckAllChange() {
  let arr = [];
  pageState.dayList.forEach(item => {
    arr.push(item.ReportChapterTypeId);
  });
  if (pageState.checkDayAll) {
    pageState.checkedDay = [];
  } else {
    pageState.checkedDay = arr;
  }
}

function handleWeekCheckAllChange() {
  let arr = [];
  pageState.weekList.forEach(item => {
    arr.push(item.ReportChapterTypeId);
  });
  if (pageState.checkWeekAll) {
    pageState.checkedWeek = [];
  } else {
    pageState.checkedWeek = arr;
  }
}

/* 设置暂停日期 */
function setPauseDate(type) {
  if ((type === 'day' && !pageState.checkedDay.length)
    || (type === 'week' && !pageState.checkedWeek.length)) return ElMessage.warning('请至少选择一个品种！');

  pageState.setType = type;
  pageState.setArr = type === 'day'
    ? pageState.dayList.filter(_ => pageState.checkedDay.includes(_.ReportChapterTypeId))
    : pageState.weekList.filter(_ => pageState.checkedWeek.includes(_.ReportChapterTypeId));
  pageState.showSetDialog = true;
}


async function handleSave() {
  const { Ret, Msg } = await setStopReport({
    DayReportChapterTypeId: pageState.checkedDay.join(','),
    WeekReportChapterTypeId: pageState.checkedWeek.join(',')
  })
  if (Ret !== 200) return

  ElMessage.success(Msg);
  getStatistic();
  getPauseList();
}




</script>

<template>
  <div class="report-update">
    <div style="margin-bottom: 30px; font-size: 16px">更新规则</div>
    <ul class="top-section">
      <li class="section-li" v-for="item in pageState.statisticList" :key="item.label">
        <div class="header">{{ item.label }}</div>
        <div class="cont">
          <div class="list">
            晨报：
            <span
              class="tag"
              v-for="report in item.day"
              :key="report.ReportChapterTypeId"
              >{{ report.ReportChapterTypeName }}</span
            >
          </div>
          <div class="list">
            周报：
            <span
              class="tag"
              v-for="report in item.week"
              :key="report.ReportChapterTypeId"
              >{{ report.ReportChapterTypeName }}</span
            >
          </div>
        </div>
      </li>
    </ul>
    <div style="margin-top: 20px">
      <el-tabs v-model="pageState.default_tab" type="card" @tab-click="changeTab">
        <el-tab-pane label="暂停更新" name="stop"></el-tab-pane>
        <el-tab-pane label="永久停更" name="disable"></el-tab-pane>
      </el-tabs>
      <div class="section-wrap" v-loading="pageState.dataLoading">
        <section class="section">
          <div>
            <span class="label">晨报品种</span>
          </div>
          <div class="list-box">
            <el-checkbox
              style="margin-bottom: 20px"
              :indeterminate="pageState.checkedDay.length && !pageState.checkDayAll"
              v-model="pageState.checkDayAll"
              @change="handleDayCheckAllChange"
              >全选</el-checkbox
            >
            <el-checkbox-group v-model="pageState.checkedDay">
              <el-checkbox
                style="margin-bottom: 15px"
                v-for="item in pageState.dayList"
                :label="item.ReportChapterTypeId"
                :key="item.ReportChapterTypeId"
              >
                {{ item.ReportChapterTypeName }}
                <el-tooltip
                  style="display: inline-block"
                  effect="dark"
                  :content="`暂停日期：${item.PauseStartTime}至${item.PauseEndTime}`"
                  placement="top-start"
                  v-if="item.IsSet"
                >
                  <span
                    style="
                      width: 7px;
                      height: 7px;
                      background: #f00;
                      border-radius: 50%;
                    "
                  ></span>
                </el-tooltip>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <el-button
            type="primary"
            v-show="pageState.default_tab === 'stop'"
            @click="setPauseDate('day')"
            >设置暂停日期</el-button
          >
        </section>
        <section class="section">
          <div>
            <span class="label">周报品种</span>
          </div>
          <div class="list-box">
            <el-checkbox
              style="margin-bottom: 20px"
              :indeterminate="pageState.checkedWeek.length && !pageState.checkWeekAll"
              v-model="pageState.checkWeekAll"
              @change="handleWeekCheckAllChange"
              >全选</el-checkbox
            >
            <el-checkbox-group v-model="pageState.checkedWeek">
              <el-checkbox
                style="margin-bottom: 15px"
                v-for="item in pageState.weekList"
                :label="item.ReportChapterTypeId"
                :key="item.ReportChapterTypeId"
              >
                {{ item.ReportChapterTypeName }}
                <el-tooltip
                  style="display: inline-block"
                  effect="dark"
                  :content="`暂停日期：${item.PauseStartTime}至${item.PauseEndTime}`"
                  placement="top-start"
                  v-if="item.IsSet"
                >
                  <span
                    style="
                      width: 7px;
                      height: 7px;
                      background: #f00;
                      border-radius: 50%;
                    "
                  ></span>
                </el-tooltip>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <el-button
            type="primary"
            v-show="pageState.default_tab === 'stop'"
            @click="setPauseDate('week')"
            >设置暂停日期</el-button
          >
        </section>
      </div>
    </div>

    <div class="bottom-btn" v-if="pageState.default_tab === 'disable'">
      <el-button type="primary" style="width: 100px" @click="handleSave"
        >保存</el-button
      >
      <!-- <el-button
        style="width: 100px;"
        @click="handleSave"
        >取消</el-button
      > -->
    </div>

    <set-pause
      :model-value="pageState.showSetDialog"
      :setArr="pageState.setArr"
      :type="pageState.setType"
      @successBack="
        getStatistic();
        getPauseList();
      "
      @close="pageState.showSetDialog=false"
    />
  </div>
</template>


<style lang="scss" scoped>
.report-update {
  border: 1px solid #ececec;
  padding: 30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  .top-section {
    display: flex;
    .section-li {
      width: 50%;
      border: 1px solid #dcdfe6;
      box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      &:first-child {
        margin-right: 20px;
      }
      .header {
        background-color: #d1e8ff;
        padding: 14px 20px;
        font-size: 16px;
      }
      .cont {
        padding: 20px;
        .list {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          text-indent: -40px;
          margin-left: 40px;
          &:first-child {
            margin-bottom: 5px;
          }
          .tag {
            margin: 5px 0;
            color: #666;
            text-indent: 10px;
          }
        }
      }
    }
  }
  .section {
    padding: 20px;
    border: 1px solid #dcdfe6;
    &:first-child {
      border-bottom: none;
    }
    .label {
      font-size: 16px;
      margin-right: 30px;
    }
    .list-box {
      border-radius: 4px;
      margin: 20px 0;
    }
  }
  .bottom-btn {
    margin: 50px 0 20px 0;
    display: flex;
    justify-content: center;
  }
}
</style>

<style lang="scss">
.report-update {
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    background-color: #409eff;
    color: #fff;
  }
  .el-tabs--card > .el-tabs__header {
    border-bottom: none;
    margin: 0;
  }
}
</style>
