<template>
  <div class="RecomBillDetail">
    <div class="head-title">
      账单明细
      <el-button @click="goBackList" style="float:right;margin: -5px 0 0 5px;"
        size="small" type="primary">
        返回
      </el-button>
    </div>
    <div class="content">
      <div class="Tongji_info">
        <span>总金额：{{dataList.TotalMoney}}</span>
        <span>用户名称：{{dataList.UserName}}</span>
        <span>供应商名称：{{dataList.SupplierName}}</span>
      </div>
      <el-table :data="dataList.RList" v-loading="loading" border style="width: 100%;margin:20px 0">
        <el-table-column prop="OrderNo" label="订单号" width="200">
        </el-table-column>
        <el-table-column prop="CoverImage" label="封面图" width="130">
          <template slot-scope="scope">
            <img :src="scope.row.CoverImage" style="width:90px;height:90px;" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="GoodsName" label="商品名称" min-width="300">
        </el-table-column>
        <el-table-column prop="SpecificationList" label="商品规格" width="200">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.SpecificationList" :key="index">{{item}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="Number" label="数量" width="100">
        </el-table-column>
        <el-table-column prop="Final_Price" label="价格" width="120">
        </el-table-column>
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <span style="color:red;" v-if="scope.row.OrderIntroduction.CommissionState==1">未结算</span>
            <span style="color:green;" v-if="scope.row.OrderIntroduction.CommissionState==2">已结算</span>
          </template>
        </el-table-column>
        <el-table-column label="佣金" width="100">
          <template slot-scope="scope">
            {{scope.row.OrderIntroduction.Commission}}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        dataList: [],
        msg: {
          BillId: 0
        },
      };
    },
    created() {

    },
    methods: {
      //获取数据
      getList() {
        this.loading = true;
        this.apipost("/api/user/GetRecommendOrdersBillDetailList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //返回列表
      goBackList(){
        this.$router.push({
          name: 'RecommendBill',
          query: {
            blank: "y"
          }
        });
      }
    },
    mounted() {
      this.msg.BillId = this.$route.query.BillId;
      this.getList();
    }
  };

</script>
<style>
  .RecomBillDetail .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

  .RecomBillDetail .Tongji_info span {
    margin-right: 30px;
  }

</style>
