<template>
  <div class="app-container">
    <div class="setting_title">销售统计</div>
    <el-divider></el-divider>

    <div class="mytabs-container">
      <el-tabs v-model="activeTabs" type="card" @tab-click="changeTabs">
        <el-tab-pane label="当天" name="day"></el-tab-pane>
        <el-tab-pane label="月度" name="month"></el-tab-pane>
        <el-tab-pane label="年度" name="year"></el-tab-pane>
      </el-tabs>
    </div>

    <div class="mymain-container">
      <div class="table">
        <el-table ref="multipleTable" v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe height="68vh">
          <el-table-column align="center" label="网点基础信息">
            <el-table-column align="center" label="区域名称" prop="zoneName" min-width="100"></el-table-column>
            <el-table-column align="center" label="网点编号" prop="websitNumber" min-width="100"></el-table-column>
            <el-table-column align="center" label="网点名称" prop="websitName" min-width="220" show-overflow-tooltip></el-table-column>
          </el-table-column>
          <el-table-column align="center" :label="tabsName + '销售情况'">
            <el-table-column align="center" label="销售总金额" prop="saleTotalAmount" min-width="100"></el-table-column>
            <el-table-column align="center" label="目标" prop="target" min-width="100" v-if="activeTabs !== 'day'"></el-table-column>
            <el-table-column align="center" label="任务完成进度" prop="targetProgress" min-width="110" v-if="activeTabs !== 'day'"></el-table-column>
            <el-table-column align="center" label="排名" prop="ranking" min-width="100" v-if="activeTabs !== 'day'"></el-table-column>
            <el-table-column align="center" label="开单人数" prop="billNum" min-width="100"></el-table-column>
            <el-table-column align="center" label="线上金额" prop="saleOnlineAmount" min-width="100"></el-table-column>
            <el-table-column align="center" label="线上占比" prop="saleOnlinePercent" min-width="100"></el-table-column>
            <el-table-column align="center" label="线下零售金额" prop="saleOfflineSaleAmount" min-width="110"></el-table-column>
            <el-table-column align="center" label="线下零售占比" prop="saleOfflineSalePercent" min-width="110"></el-table-column>
            <el-table-column align="center" label="线下工程金额" prop="saleOfflineProAmount" min-width="110"></el-table-column>
            <el-table-column align="center" label="线下工程占比" prop="saleOfflineProPercent" min-width="110"></el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
import { getYearList, getMonthList, getDayList } from "@/api/offline";

export default {
  data() {
    return {
      dataList: null, // 列表数据
      listLoading: true, // 列表加载loading
      activeTabs: 'day',
    }
  },
  created() {
    this.getList();
  },
  computed: {
    tabsName() {
      let tabMap = {
        day: '当天',
        month: '月度',
        year: '年度',
      }
      return tabMap[this.activeTabs];
    }
  },
  methods: {
    // 查询按钮权限
    checkBtnRole(value) {
      // let btnRole = this.$route.meta.roles;
      // if(!btnRole) {return true}
      // let index = btnRole.indexOf(value);
      // return index >= 0;
      return true;
    },

    // 获取列表
    getList() {
      this.listLoading = true;

      if(this.activeTabs === 'day') {
        getDayList().then(res => {
          this.dataList = res.data;
          this.listLoading = false;
          this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
          });
        })
      }
      if(this.activeTabs === 'month') {
        getMonthList().then(res => {
          this.dataList = res.data;
          this.listLoading = false;
          this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
          });
        })
      }
      if(this.activeTabs === 'year') {
        getYearList().then(res => {
          this.dataList = res.data;
          this.listLoading = false;
          this.$nextTick(() => {
            this.$refs.multipleTable.doLayout();
          });
        })
      }
    },

    // 切换tabs
    changeTabs(tab, event) {
      this.getList();
    },

  }
}
</script>

<style lang="scss">
  .mytabs-container {
    .el-tabs__header {
      margin-bottom: 0;
    }
  }
</style>
