<!--
 * @Descripttion: 指标列表
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-11-09 09:36:51
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-09 10:31:17
-->

<template>
  <div class="common-app-right" style="padding: 0">
    <div v-loading="loading">
      <el-tabs v-model="activeName" @tab-click="getData">
        <el-tab-pane label="业绩指标" name="1"></el-tab-pane>
        <el-tab-pane label="新增会员指标" name="2"></el-tab-pane>
      </el-tabs>

      <div class="list-content">
        <el-select v-model="search.date" @change="getData">
          <el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
        </el-select>

        <el-table
          :data="tableData"
          style="width: 100%;margin-top: 20px">

          <el-table-column prop="performanceYm" label="月份"></el-table-column>
          <el-table-column prop="storeCount" label="门店总数"></el-table-column>
          <el-table-column prop="totalPerformanceValue" label="总业绩指标"></el-table-column>

          <el-table-column label="业绩指标">
            <template slot-scope="{row}">
              {{ row.noPerfectCount }} 未完善；{{ row.prefectCount }} 已完善
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="{row}">
              <el-button type="text" @click="$router.push({ path: '/target-store', query: { tab: activeName, performanceYm: row.performanceYm, applicationId } })">查看门店</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>

import fetch from '@/api/target-manage-app.js';
const { getTargetList, getYearList } = fetch;
// import showMsg from '@/common/js/showmsg.js';
export default {
  name: 'TargetList',
  components: {},
  props: {
    brandId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      haoban: {},
      tableData: [],
      activeName: '1', // 1业绩，2新增
      search: {
        date: new Date().getFullYear()
      },
      yearList: [],
      loading: false
    };
  },
  created() {
    const { tab, applicationId } = this.$route.query;
    this.applicationId = applicationId;
    this.activeName = tab || '1';
    const { staffId, wxEnterpriseId } = JSON.parse(localStorage.getItem('haoBanUser'));
    this.haoban = { staffId, wxEnterpriseId };
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    const that = this;
    that.$emit('showTab', '/target-list');
    that.$emit('change-nav', [ { name: '指标管理' } ]);
    that.getYearList();
    if (!!that.brandId) {
      that.getData();
    }
  },
  // methods
  methods: {
    /**
     * @description: 获取会员卡数据
     * @author: 无尘
     */
    getData() {
      this.loading = true;
      const that = this;
      const para = {
        ...that.haoban,
        enterpriseId: that.brandId,
        performanceType: that.activeName,
        performanceYear: that.search.date
      };
      getTargetList(para, { headers: { sign: that.brandId } })
        .then(res => {
          that.tableData = res.result || [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getYearList() {
      getYearList('', { headers: { sign: this.brandId } }).then(res => {
        this.yearList = res.result || [];
      });
    }

  },
  watch: {
    brandId(val) {
      const that = this;
      if (val) {
        that.getData();
      }
    }
  }
};
</script>
<style lang='less' scoped>
  .font-22 {
    font-size: 22px;
  }
  .common-bottom-border {
    cursor: pointer;
    padding-bottom: 2px;
    border-bottom: 1px dashed #2f54eb;
    &.table-title {
      font-size: 14px;
      line-height: 20px;
      font-weight: 600;
      color: #303133;
    }
  }
  .list-content {
    padding: 5px 20px 20px;
  }
</style>
