<template>
  <div class="SalesReport">
    <!-- <div class="title">业绩达成报表(含退货)-产品确认单</div> -->
    <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" min-width="81">
      </el-table-column>
      <el-table-column label="本日金额" min-width="120" align="center">
        <el-table-column show-overflow-tooltip label="销售" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.dtotal | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="退款" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.thfee | toThousandFilter }}</span>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="本周金额" min-width="120" align="center">
        <el-table-column show-overflow-tooltip label="销售" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.wtotal | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="退款" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.wthfee | toThousandFilter }}</span>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column label="本月金额" min-width="120" align="center">
        <el-table-column show-overflow-tooltip label="销售指标" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.tips | toThousandFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column show-overflow-tooltip label="销售" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.total | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="销售完成率" min-width="95">
          <template slot-scope="scope">
            <span>{{ scope.row.rate }}%</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="退款" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.mthfee | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="净销售" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.thtotal | toThousandFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="净销售完成率" min-width="95">
          <template slot-scope="scope">
            <span>{{ scope.row.thrate }}%</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: "SalesReportRejectedSettlement",
  props: ["date"],
  mixins: [setHeight],
  watch: {
    date: function (val) {
      this.dataTime = val;
      if (val) {
        this.searchList();
      }
    },
  },
  data() {
    return {
      dataTime: this.date,
      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.qrdcptj({
        date: this.date ? this.date : "",
      });
      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>
