<template>
  <section>
    <common-detail-top :topMenuData="topMenuData" :activeId="activeId"></common-detail-top>
    <div class="m-20">
      <el-select v-model="year" class="m-b-23">
        <el-option v-for="(v, i) in yearList" :key="i" :value="v" :label="v"></el-option>
      </el-select>
      <el-table :data="tableList" style="width: 100%">
        <el-table-column v-for="(v, i) in tabelHeader" :key="i" :label="v.label" :prop="v.prop"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="$router.push('/quota/quotaDay')">门店月指标</el-button>
            <el-button type="text" @click="$router.push('/quota/quotaDay')">商户日权重</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </section>
</template>

<script>
import { apiYearList, apiMonthPerformanceList } from '@/api/enterpriseApp/quota.js';
import commonDetailTop from '@/components/app/common-detail-top.vue';
export default {
  components: {
    commonDetailTop
  },
  props: {
    brandId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      activeId: '2',
      topMenuData: [
        {
          id: '1',
          name: '指标管理',
          path: '/quota'
        },
        {
          id: '2',
          name: '月指标',
          path: ''
        }
      ],
      yearList: [],
      year: '',
      tableList: [],
      tabelHeader: [{ prop: 'yearMonth', label: '月份' }, { prop: 'totalPerformance', label: '月指标累计' }, { prop: 'totalStore', label: '门店总数' }, { prop: 'totalComplete', label: '门店指标完善数' }]
    };
  },
  watch: {
    brandId(val) {
      if (val) this.getYearList();
    }
  },
  methods: {
    async getYearList() {
      let res = await apiYearList({ brandId: this.brandId });
      this.yearList = res.data.result || [];
      if (this.yearList.length) {
        this.year = this.yearList[0];
        this.apiMonthPerformanceList();
      }
    },
    async apiMonthPerformanceList() {
      let res = await apiMonthPerformanceList({ brandId: this.brandId, year: this.year });
      this.tableList = res.data.result || [];
    }
  }
};
</script>
