<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 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="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="dataLoading">
				<section class="section">
					<div>
						<span class="label">晨报品种</span>
					</div>
					<div class="list-box">
						<el-checkbox
							style="margin-bottom: 20px"
							:indeterminate="checkedDay.length && !checkDayAll"
							v-model="checkDayAll"
							@change="handleDayCheckAllChange"
							>全选</el-checkbox>
						<el-checkbox-group v-model="checkedDay">
							<el-checkbox
								style="margin-bottom: 15px"
								v-for="item in 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="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="checkedWeek.length && !checkWeekAll"
							v-model="checkWeekAll"
							@change="handleWeekCheckAllChange"
							>全选</el-checkbox
						>
						<el-checkbox-group v-model="checkedWeek">
							<el-checkbox
                style="margin-bottom: 15px"
                v-for="item in 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="default_tab==='stop'" @click="setPauseDate('week')">设置暂停日期</el-button>
				</section>
			</div>
    </div>

    <div class="bottom-btn" v-if="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
      :isOpenDialog.sync="showSetDialog"
      :setArr="setArr"
      :type="setType"
      @successBack="getStatistic();getPauseList();"
    />
  </div>
</template>

<script>
import {
  pauseReportAll,
  pauseReport,
  setStopReport
} from "@/api/modules/reportupdateApi.js";
import setPause from './components/setVarietyPause.vue';
export default {
  components: { setPause },
  computed: {
    checkDayAll() {
      return this.dayList.length === this.checkedDay.length ? true : false
    },
    checkWeekAll() {
      return this.weekList.length == this.checkedWeek.length ? true : false
    },
  },
  watch: {
    default_tab() {
      this.getPauseList();
    }
  },
  data() {
    return {
			default_tab: 'stop',
      statisticList:[
        { label: '暂停更新',day: [],week: [] },
        { label: '永久停更',day: [],week: [] },
      ],
      dataLoading: false,
      dayList: [],
      checkedDay: [],

      weekList: [],
      checkedWeek: [],

      showSetDialog: false,
      setArr:[],//要设置的数组
      setType:''
      
    };
  },
  created() {
    this.getStatistic();
    this.getPauseList();
  },
  methods: {

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

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

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

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

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

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

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

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

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

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

      this.$message.success(Msg);
      this.getStatistic();
      this.getPauseList();
    }
  },
};
</script>

<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>
