<template>
  <div class="OrderProfitLossList">
    <div class="el-card__header">
      <span>损益核算</span>
      <div style="display: flex;flex-direction: row;align-items: center">
        <!---->
        <el-button type="primary" class="el-button--small" @click="Export">导出全部</el-button>
      </div>
    </div>

    <div class="content">
      <div style="display: flex;flex-direction: row;align-items: center">
        <span>供应商</span>
        <el-select class="w150" style="margin-left: 10px;" v-model="msg.SupplierId" filterable size="small" placeholder="请选择"
          @change="msg.pageIndex=1,getDateList()">
          <el-option :key="0" :value="0" label="全部"></el-option>
          <el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
          </el-option>
        </el-select>
        <div class="block" style="margin-left: 10px;">
          <el-date-picker style="padding: 3px 10px;width: 380px;height: 32px" v-model="value" type="daterange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
            @change="change" align="right">
          </el-date-picker>
        </div>
      </div>
    </div>
    <div style="padding: 20px;background: #fff;margin-top: 10px">
      <el-table :data="tableData" v-loading="loading" header-cell-class-name="headClass" style="width: 100%" border>
        <el-table-column label="商品信息" align="center">
          <el-table-column label="订单号" prop="OrderNo" width="150" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column label="规格" width="100" :show-overflow-tooltip='true'>
            <template slot-scope="scope">
              {{scope.row.GoodsName}}{{scope.row.Specification}}
              <!--<p v-for="(item,index) in scope.row.Specification " :key="index">{{item}}</p>-->
            </template>
          </el-table-column>
          <el-table-column label="单价" prop="Unit_Price"  width="70"></el-table-column>
          <el-table-column label="数量" prop="Number"  width="70"></el-table-column>
          <el-table-column label="供应商" prop="SupplierName" width="150" :show-overflow-tooltip='true'></el-table-column>
        </el-table-column>

        <el-table-column label="营业收入" align="center" >
          <el-table-column label="结算款" prop="Final_Price"  width="70"></el-table-column>
          <el-table-column label="运费" prop="FreightMoney"  width="70"></el-table-column>
          <el-table-column label="已收" prop="AllPrice"  width="70"></el-table-column>
          <el-table-column label="未收款"  width="70">
            <!--结算款-已收-->
            <!--暂时写为0-->
            <template slot-scope="scope">
              <!--<p>{{scope.row.Final_Price - scope.row.FreightMoney}}</p>-->
              <p>0</p>
            </template>
          </el-table-column>
          <el-table-column label="合计数" prop="AllPrice"  width="70"></el-table-column>
        </el-table-column>
        <el-table-column label="营业成本" align="center">
          <el-table-column label="采购成本" prop="CostMoney"  width="70"></el-table-column>
          <el-table-column label="包装费摊销" prop="PackingMoney"  width="70"></el-table-column>
          <el-table-column label="快递费" prop="CostFreight"  width="70"></el-table-column>
          <el-table-column label="商品运费摊销" prop="GoodsFreight"  width="70"></el-table-column>
          <el-table-column label="一级返佣" prop="OneCommission"  width="70"></el-table-column>
          <el-table-column label="二级返佣" prop="TwoCommission"  width="70"></el-table-column>
          <el-table-column label="其他" prop="OtherPrice"  width="70"></el-table-column>
          <el-table-column label="合计" prop="ALLCommission"  width="70"></el-table-column>
        </el-table-column>

        <el-table-column prop="Paid" label="已付"></el-table-column>
        <el-table-column prop="NoPaid" label="应付"></el-table-column>
        <el-table-column prop="GrossProfit" label="毛利"></el-table-column>
        <el-table-column prop="GrossProfitRate" label="毛利率"></el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize"
        layout="prev, pager, next" :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "OrderProfitLossList",
    data() {
      return {
        value: '',
        msg: {
          pageIndex: 1,
          pageSize: 10,
          SupplierId: 0,
          StartDate: '',
          EndDate: '',
        },
 
        options: [],
        tableData: [],
        count: 0,
        loading: false,
      }
    },
    created() {
      this.getDateList()
      this.getSupplierList()

    },
    methods: {
      getDateList() {
        if (this.value != '' && this.value != null) {
          this.msg.StartDate = this.value[0];
          this.msg.EndDate = this.value[1];
        }
        this.loading = true;
        this.apipost("/api/Statistics/GetOrderProfitLossList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.tableData = res.data.data.pageData;
            this.count = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }

        })
      },
      getSupplierList() { //获取供应商接口
        this.apipost("/api/Supplier/GetSupplierAllList", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.options = res.data.data;
          }
        });
      },
      Export() {
        let msg = {
          SupplierId: this.msg.SupplierId,
          StartDate: this.msg.StartDate,
          EndDate: this.msg.EndDate,
        }
        msg = JSON.parse(JSON.stringify(msg));
        this.GetLocalFile(
          "/api/Statistics/GetOrderProfitLossExcel",
          msg,
          "损益核算.xls"
        );
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getDateList();
      },
      change(val) {
        if (val == null) {
          this.value = '';
          this.msg.StartDate = '';
          this.msg.EndDate = '';
        }
        this.msg.pageIndex=1;
        this.getDateList();
      },
    }
  }

</script>

<style>
  .OrderProfitLossList .el-card__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 18px 20px;
  }

  .OrderProfitLossList .el-button--small {
    padding: 9px 15px;
  }

  .OrderProfitLossList .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-left: 20px;
  }

  .OrderProfitLossList .content .searchInput .el-input__inner {
    border: none;
    outline: none;
    height: 30px;
    line-height: 30px;
  }

  .OrderProfitLossList .content .searchInput {
    line-height: normal;
    display: inline-table;
    border-collapse: separate;
    border-spacing: 0;
    width: 250px;
    margin-right: 20px;
  }

  .OrderProfitLossList .content {
    background: #fff;
    margin-top: 10px;
    padding: 15px;
    box-sizing: border-box;
  }

  .OrderProfitLossList .el-icon-date {
    line-height: 24px;
  }

  .OrderProfitLossList .el-range-separator {
    line-height: 24px;
  }

  .OrderProfitLossList .just {
    color: rgb(104, 207, 61)
  }

  .OrderProfitLossList .negative {
    color: red
  }

  .OrderProfitLossList .el-input__icon {
    line-height: 24px;
  }
.OrderProfitLossList .el-table td, .el-table th{
  padding: 3px 0;
}
.OrderProfitLossList .el-table{
  font-size: 13px;
}
</style>
