<template>
  <div class="CostManagement">
    <div class="head-title">
      成本管理
      <el-button style="float:right" size="small" @click="creatDanju" type="primary">生成单据
      </el-button>
    </div>
    <div class="content">
      <div style="margin-bottom:20px">
        <span>供应商</span>
        <el-select style="margin:0 10px" class="w100" @change="msg.pageIndex=1,getList()" v-model="msg.SupplierId" size="small"
          placeholder="请选择">
          <el-option label="不限" :value="0"></el-option>
          <el-option v-for="item in SupplierData" :key="item.Id" :label="item.Name" :value="item.ID">
          </el-option>
        </el-select>
        <span>制单类型</span>
        <el-select style="margin:0 10px" class="w100" @change="msg.pageIndex=1,getList()" v-model="msg.IsSelectAll" size="small"
          placeholder="请选择">
          <el-option v-for="item in MakingType" :key="item.Id" :label="item.Name" :value="item.Id">
          </el-option>
        </el-select>
        <span>是否制单</span>
        <el-select class="w100" style="margin-right: 10px;" @change="msg.pageIndex=1,getList()" v-model="msg.IsFinance" size="small"
          placeholder="请选择">
          <el-option label="全部" :value="0"></el-option>
          <el-option label="已制单" :value="1"></el-option>
          <el-option label="未制单" :value="2"></el-option>
        </el-select>
        <span>日期</span>
        <el-date-picker v-model="dateList" @change="msg.pageIndex=1,getList()" size="small" type="datetimerange" range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" style="text-align:center;">
        </el-table-column>
        <el-table-column prop="OrderNo" label="订单号" width="220">
        </el-table-column>
        <el-table-column prop="GoodsName" label="商品名称">
        </el-table-column>
        <el-table-column prop="Original_Price" label="金额" width="80">
        </el-table-column>
        <el-table-column prop="CostMoney" label="成本" width="80">
        </el-table-column>
        <el-table-column prop="FreightCostMoney" label="快递成本" width="80">
        </el-table-column>
        <el-table-column prop="FreightFinanceId" label="运费成本" width="80">
        </el-table-column>
        <el-table-column prop="CostFinanceId" label="成本单据" width="100">
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize" :current-page.sync="msg.pageIndex"
        layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <!-- 选择是否公账 -->
    <el-dialog title="请选择" :visible.sync="choiceFin" width="400px">
      <el-radio v-model="finMsg.IsPublic" label="0">私账</el-radio>
      <el-radio v-model="finMsg.IsPublic" label="1">公账</el-radio>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="choiceFin=false">取消</el-button>
        <el-button type="primary" size="small" @click="setFince()">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        //选择公账弹窗
        choiceFin: false,
        msg: {
          pageIndex: 1,
          pageSize: 15,
          SupplierId: 0, //供应商
          IsFinance: 0, //是否制单 0-全部 1-已制单 2-未制单
          StartTime: '',
          EndTime: '',
          IsSelectAll:0,
        },
        SupplierData: [], //供应商data
        MakingType:[
          {Id:0,Name:'全部'},
          {Id:1,Name:'成本'},
          {Id:2,Name:'运费'},
        ],
        dateList: [], //日期
        total: 0,
        tableData: [], //列表数据
        finMsg: {
          SupplierId: 0,
          IsFinance: 0,
          IdList: [],
          IsPublic: '0', //0-私账1-公账
          IsSelectAll:0,
        },
      }
    },
    created() {},
    mounted() {
      this.getAllSupplier();
      this.getList();
    },
    methods: {
      //获取供应商
      getAllSupplier() {
        this.apipost("/api/Supplier/GetSupplierAllList", {}, res => {
          if (res.data.resultCode == 1) {
            this.SupplierData = res.data.data;
          }
        })
      },
      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.StartTime = this.dateList[0];
          this.msg.EndTime = this.dateList[1];
        } else {
          this.msg.StartTime = '';
          this.msg.EndTime = '';
        }
        this.loading = true;
        this.apipost("/api/Supplier/GetSupplierGoodsList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.tableData = res.data.data.pageData;
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //点击生成单据
      creatDanju() {
        if (this.finMsg.IdList.length == 0) {
          this.Info('请选择单据');
        } else {
          this.choiceFin = true;
        }
      },
      handleSelectionChange(val) {
        var selectRow = JSON.parse(JSON.stringify(val));
        this.finMsg.IdList = [];
        if (selectRow.length > 0) {
          selectRow.forEach(x => {
            this.finMsg.IdList.push(x.Id);
          });
        }
      },
      //设置单据
      setFince() {
        this.finMsg.SupplierId = this.msg.SupplierId;
        this.finMsg.IsFinance = this.msg.IsFinance;
        this.finMsg.IsSelectAll = this.msg.IsSelectAll;
        this.apipost("/api/Supplier/PayCostFinance", this.finMsg, res => {
          if (res.data.resultCode == 1) {
            this.Success('设置成功');
            this.choiceFin = false;
          }else {
            this.Error(res.data.message)
            this.choiceFin = false;
          }
        })
      }

    }
  };

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

</style>
