<template>
  <div class="SalesReport">
    <el-table
      :data="tableData"
      v-loading="loading"
      border
      stripe
      :max-height="maxHeight"
      :size="'mini'"
      style="width: 100%"
    >
      <el-table-column prop="p" label="业绩类型" fixed="left" width="81">
      </el-table-column>
      <el-table-column show-overflow-tooltip label="本日完成额" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.dtotal | toThousandFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="本周完成额" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.wtotal | toThousandFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="本月" align="center">
        <el-table-column
          show-overflow-tooltip
          label="指标"
          width="120"
          align="left"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.tips | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          label="完成额"
          width="120"
          align="left"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.total | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="完成率(%)" width="80" align="left">
          <template slot-scope="scope">
            <span>{{ scope.row.rate }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import asyncRequest from "@/api/index";
import setHeight from "@/mixins/index";
export default {
  name: "SalesReport",
  mixins: [setHeight],
  data() {
    return {
      loading: false,
      maxHeight: "0",
      tableData: [],
    };
  },
  async created() {
    window.onresize = () => {
      this.getHeight();
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
    this.searchList();
  },
  methods: {
    async searchList() {
      this.loading = true;
      this.tableData = [];
      const res = await asyncRequest.list({});
      if (res.code === 0 && res.data && res.data.length > 0) {
        this.tableData = res.data;
      } else {
        this.tableData = [];
      }
      this.getHeight();
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.SalesReport {
}
</style>
