<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 >

        <span>商品分类</span>
        <el-select style="margin:0 10px" class="w100" @change="msg.pageIndex=1,getList()" v-model="msg.OrderClassify" size="small"
                   placeholder="请选择">
          <el-option v-for="item in OrderClass" :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.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>
        <span style="margin-left: 5px">商品名称</span>
        <div class="searchInput" style="width:250px">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:225px;height:30px"
                    placeholder="请输入商品名称搜索"
                    v-model="msg.GoodsName"
                    @clear="msg.pageIndex=1,getList()"
                    size="small"
                    clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>

      </div>
      <div style="margin-bottom:20px;margin-top: 5px">
        <span >订单号</span>
        <div class="searchInput" style="width:200px">
          <el-input @keyup.enter.native="msg.pageIndex=1,getList()" style="display:inline-block;width:175px;height:30px"
                    placeholder="请输入订单号搜索"
                    v-model="msg.OrderNo"
                    @clear="msg.pageIndex=1,getList()"
                    size="small"
                    clearable>
          </el-input>
          <span @click="msg.pageIndex=1,getList()" class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span>
        </div>
      </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="CostFinanceId" label="成本单据" width="100">
        </el-table-column>
        <el-table-column prop="FreightCostMoney" label="快递成本" width="80" v-if="msg.OrderClassify==0">
        </el-table-column>
        <el-table-column prop="FreightFinanceId" label="运费成本单据" width="120" v-if="msg.OrderClassify==0">
        </el-table-column>
        <el-table-column prop="InsuranceCostMoney" label="保险成本" width="80" v-if="msg.OrderClassify==1">
        </el-table-column>
        <el-table-column prop="InsuranceFinanceId" label="保险成本单据" width="120" v-if="msg.OrderClassify==1">
        </el-table-column>

      </el-table>
      <el-pagination style="text-align:right" background @current-change="handleCurrentChange" :page-size="msg.pageSize" :current-page.sync="msg.pageIndex"
                     :page-sizes="[15, 30, 45, 60,75,90]"
                     @size-change="handleSizeChange"
        layout="sizes,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,
          GoodsName:'',
          OrderNo:'',
          OrderClassify:0,
        },
        SupplierData: [], //供应商data
        MakingType:[
          {Id:0,Name:'全部'},
          {Id:1,Name:'成本'},
          {Id:2,Name:'运费'},
          {Id:3,Name:'保险'},
        ],
        OrderClass:[
          {Id:0,Name:'商品订单'},
          {Id:1,Name:'司导订单'},

        ],
        dateList: [], //日期
        total: 0,
        tableData: [], //列表数据
        finMsg: {
          SupplierId: 0,
          IsFinance: 0,
          IdList: [],
          IsPublic: '0', //0-私账1-公账
          IsSelectAll:0,
        },
        ERPEmpId:0,
      }
    },
    created() {
       let currentUser = this.getLocalStorage()
      this.ERPEmpId =  currentUser.ERPEmpId
    },
    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();
      },
      handleSizeChange(val){
        this.msg.pageIndex = 1;
        this.msg.pageSize = 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.finMsg.OrderClassify = this.msg.OrderClassify;
        this.finMsg.FinanceCreateBy = this.ERPEmpId;
        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>