<template>
    <div class="mod-config">
      <el-tabs v-model="merchantType" type="card" @tab-click="changeTab">
        <el-tab-pane label="众妙之门" name="order" />
        <el-tab-pane label="灵枢教育科技" name="lsorder" />
      </el-tabs>
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item>
          <div class="block">
            <el-date-picker
              v-model="currentYear"
              type="year"
              format="yyyy"
              value-format="yyyy" :picker-options="pickerOptions"
              placeholder="选择年份"
              @change="handleYearChange"
            />
          </div>
        </el-form-item>
      
        <el-button 
          type="primary"
          size="small"
          @click=" handleYearChange()"
        >刷新</el-button>
      </el-form>
    
      <FullYearCalendar :urlList="urlList" ref="refCalendar" :selectYear="Number(currentYear)" :marks="markedDates" :merchantType="orderType" v-if="currentYear" />
    </div>
  </template>
 
  <script>
  import FullYearCalendar from "./FullYearCalendarEntity.vue";
  export default {
    data() {
      return {
        urlList:{
          list:'/master/statistics/getPhysicalBuyOrderInfoTotal',
          export:'/master/statistics/exportPhysicalBuyOrderInfo',
        },
        currentYear: '',
        merchantType:'order',
        orderType:'order',
        dataForm:{},
        pickerOptions: {
          disabledDate(time) {
            // 禁用今年以后的年份
            return time.getFullYear() > new Date().getFullYear()
          }
        },
        markedDates: {
          "2019-01-01": "red",
          "2019-02-14": "blue",
          "2019-03-12": "yellow",
          "2019-05-20": "blue",
          "2019-06-10": "yellow"
        }
      };
    },
    components: { FullYearCalendar },
    activated() {
      this.currentYear = new Date().getFullYear().toString();
      this.handleYearChange();
    },
    
    methods: {
      handleYearChange() {
        this.$nextTick(() => {
          this.$refs.refCalendar.init();
        })
      },
      changeTab(tab) {
        if (tab.name === this.orderType) {
          return;
        }
        this.orderType = tab.name;
        this.handleYearChange();
      }
      
     
    }
  };
  </script>
  <style scoped>
  /deep/ .mod-config .el-table .el-table__cell {
    padding: 4px 0 !important;
    box-sizing: border-box;
  }
  /deep/ .mod-config .el-table .cell,
  .el-table th div {
    padding: 0 !important;
    box-sizing: border-box;
  }
  /deep/ .el-form .el-form-item{
margin-bottom:10px !important;
  }
  </style>
  