<template>
  <div id="">
    <a-layout id="dxdcListMain" style="padding:5px 20px;">
      <a-tabs v-model="currentViewId" type="card" @tabClick="tabClick">
        <a-tab-pane disabled>
          <template #tab="text">
            <!-- <span>基础数据：</span>
            <a-select v-model:value="flag" style="width: 150px;">
              <a-select-option value="1">28号数据</a-select-option>
              <a-select-option value="2">月底数据</a-select-option>
            </a-select> -->
            <span>月份：</span>
            <a-month-picker v-model="selectDate" placeholder="选择年" @change="changeDate" :disabled-date="disabledDate" :allow-clear="false"/>
          </template>
        </a-tab-pane>
        <a-tab-pane
          v-for="(option, index) in options"
          :tab="option.label"
          :key="option.value">
          <a-col :span="24" ref="elm">
            <keep-alive>
              <component
                v-if="showTable"
                :is="option.value"
                :ref="option.value"
                :flag="flag"
                name=""
                :selectDate="selectDate"
                :year="year"
                :month="month"/>
            </keep-alive>
          </a-col>
        </a-tab-pane>
      </a-tabs>
    </a-layout>
  </div>
</template>

<script>
import moment from 'moment';
import report_month_mend1 from './report_month_mend1.vue';
import report_month_mend2 from './report_month_mend2.vue';
import report_month_mend3 from './report_month_mend3.vue';
import report_month_mend4 from './report_month_mend4.vue';
import report_month_mend5 from './report_month_mend5.vue';
import report_month_mend6 from './report_month_mend6.vue';
import report_month_mend7 from './report_month_mend7.vue';
import report_month_mend8 from './report_month_mend8.vue';
import report_month_mend9 from './report_month_mend9.vue';
import report_month_mend10 from './report_month_mend10.vue';
export default {
  props: ['name'],
  components: {
    report_month_mend1,
    report_month_mend2,
    report_month_mend3,
    report_month_mend4,
    report_month_mend5,
    report_month_mend6,
    report_month_mend7,
    report_month_mend8,
    report_month_mend9,
    report_month_mend10,
  },
  data() {
    return {
      moment,
      options: [
        {
          value: 'report_month_mend1',
          label: '水利监督发现问题总体情况汇总表',
        },
        // {
        //   value: 'report_month_mend2',
        //   label: '检查情况统计表'
        // },
        // {
        //   value: 'report_month_mend3',
        //   label: '本期调度问题整改进展情况明细表'
        // },
        // {
        //   value: 'report_month_mend5',
        //   label: '到期未提交销号材料问题明细表'
        // },
        // {
        //   value: 'report_month_mend6',
        //   label: '本期同意延期问题明细表'
        // },
        // {
        //   value: 'report_month_mend7',
        //   label: '上月提交本月不同意销号'
        // },
        // {
        //   value: 'report_month_mend8',
        //   label: '上期申请销号本月仍未完成审核'
        // },
        // {
        //   value: 'report_month_mend9',
        //   label: '上月提交本月不同意延期'
        // },
        // {
        //   value: 'report_month_mend10',
        //   label: '上期申请延期本月仍未完成审核'
        // },
        // {
        //   value: 'report_month_mend4',
        //   label: '月报基础数据'
        // }
      ],
      value: '',
      currentViewId: 'report_month_mend1',
      showTable: true,
      currentNodeType: '',
      dxdcMainHeight: window.innerHeight - 180,
      dxdcAsideHeight: window.innerHeight - 180,
      windowHeight: window.innerHeight - 200,
      windowWidth: window.innerWidth - 350,
      flag: '2',
      selectDate: '',
      year: '',
      month: '',
      now: '',
    };
  },
  created() {
    var date = new Date().setMonth(new Date().getMonth() - 1);
    this.year = new Date(date).getFullYear();
    this.month = new Date(date).getMonth() + 1;
    this.selectDate = moment(new Date(date), 'YYYY-MM');
    this.now = moment(new Date(date), 'YYYY-MM');
  },
  mounted() {
    //debugger
    setTimeout(() => {
      this.$refs['report_month_mend1'][0].searchExecl();
    }, 800);
  },
  methods: {
    tabClick(e) {
      setTimeout(() => {
        this.$refs[e][0].searchExecl();
      }, 800);
    },
    changeDate(date, val) {
      if (val) {
        this.year = val.split('-')[0];
        this.month = val.split('-')[1];
      } else {
        this.year = '';
        this.month = '';
      }
    },
    disabledDate(current) {
      if (moment(current).format('DD') >= 29) {
        return current && current > moment().endOf('day');
      } else {
        return current && current > moment(this.now).endOf('day');
      }
    },
  },
  computed: {
    persId() {
      return localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096';
    },
  },
};
</script>

<style lang='less' scoped>

</style>
