<template>
  <div class="SalesReportRejectedNew" v-loading="loading">
    <el-table :data="tableData" size="mini" border>
      <el-table-column label="空返订单状态">
        <template slot-scope="scope">
          {{ (statusOptions.find(({id}) => String(id) === scope.row.status)|| {}).label || '--'}}
        </template>
      </el-table-column>
      <el-table-column label="竞价单空返数量" prop="num" />
    </el-table>
  </div>
</template>

<script>
import asyncRequest from "@/api/newReport";
import setHeight from "@/mixins/index";
import { addition } from "./_utils";
export default {
  name: "Consult",
  mixins: [setHeight],
  props: ['date'],
  watch: {
    date: function(val) {
      if (val && val.length === 2) {
        this.searchList();
      }
    }
  },
  data() {
    return {
      tableData:[],
      loading:false,
      statusOptions: [
        { id: '0', label: '待发布竞标' },
        { id: '1', label: '招标进行中' },
        { id: '2', label: '招标已结束' },
        { id: '3', label: '待选择商品' },
        { id: '4', label: '已选商品待下单' },
        { id: '5', label: '已成功转单' },
        { id: '6', label: '已取消转单' },
        { id: '7', label: '招标已暂停' },
        { id: '10086', label: '合计' },
      ]
    };
  },
  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.bidsFail({
        start: this.date[0],
        end: this.date[1]
      });

      if (res.code === 0 && res.data && res.data.result) {
        this.tableData = Object.keys(res.data.result  || {}).map(key => {
          const { status, num } = res.data.result[key]
          return { status, num }
        })

        this.tableData.push({
          status:'10086',
          num:this.tableData.reduce((prev, {num}) => addition(prev, num),0)
        })
      } else {
        this.tableData = [];
      }

      this.getHeight();
      this.loading = false;
    }
  }
};
</script>
