<template>
  <div class="txtSize">
    <div class="title">
      <span>今日销售</span>
    </div>
    <ul class="xs">
      <li>
        <p>{{999999 | getNum}}</p>
        <p>销售金额</p>
      </li>
      <li>
        <p>{{999999 | getNum_noPrice}}</p>
        <p>订单数</p>
      </li>
      <li>
        <p>{{999999 | getNum_noPrice}}</p>
        <p>商品数</p>
      </li>
    </ul>

    <div class="title">
      <span>今日采购</span>
    </div>
    <ul class="cg">
      <li>
        <p>{{999999 | getNum_noPrice}}</p>
        <p>竞价中标数</p>
      </li>
      <li>
        <p>{{999999 | getNum_noPrice}}</p>
        <p>反馈商品数</p>
      </li>
      <li>
        <p>{{999999 | getNum_noPrice}}</p>
        <p>订单数</p>
      </li>
      <li>
        <p>{{999999 | getNum_noPrice}}</p>
        <p>商品数</p>
      </li>
    </ul>

    <div class="title">
      <span>今日结算</span>
    </div>
    <el-table
      :header-cell-style="{ background: 'oldlace' }"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column prop="name" label="待处理" min-width="100">
      </el-table-column>
      <el-table-column prop="date" label="单数（单）" min-width="100">
        <template slot-scope="scope">
          <div>
            {{scope.row.date | getNum_noPrice}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="金额（元）" min-width="100">
        <template slot-scope="scope">
          <div>
            {{scope.row.address | getNum}}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "222222",
          name: "待开票",
          address: "567890",
        },
        {
          date: "3333333",
          name: "待回款",
          address: "45678",
        },
        {
          date: "44444",
          name: "待回票",
          address: "456789",
        },
        {
          date: "55555",
          name: "待付款",
          address: "4567890",
        },
      ],
    };
  },
  methods: {
    getNum(num) {
      num = Number(num);
      if (!num) return "0.00";
      if (num > 10000 || num < -10000) {
        const moneys = num / 10000;
        const realVal = parseFloat(moneys).toFixed(2);
        return realVal + "万";
      } else {
        return num.toFixed(2);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.txtSize {
  // font-size: 0px;
}
.title {
  font-size: 18px;
  margin: 35px 0;
}
.title:first-child {
  margin: 20px 0 35px;
}
.xs {
  display: flex;
  justify-content: space-between;

  li {
    padding: 5px;
    box-sizing: border-box;
    width: 28%;
    border: 1px solid #ccc;
    background: oldlace;
    border-radius: 10px;
    p {
      width: 100%;
      text-align: center;
    }
  }
  li:first-child {
    width: 40%;
  }
}
.cg {
  display: flex;
  justify-content: space-between;

  li {
    padding: 5px;
    box-sizing: border-box;
    width: 23%;
    border: 1px solid #ccc;
     background: oldlace;
    border-radius: 10px;
    p {
      width: 100%;
      text-align: center;
    }
  }
}
/deep/.el-table tr{
  background: #f0f9eb;
}
</style>