<template>
  <div class="buyRecords">
    <div class="head-title">
      操作记录
    </div>
    <div class="content">
      <div>
        <div style="margin-bottom:20px">
          <span>类型</span>
          <el-select class="w100" style="margin-right: 10px;" @change="msg.pageIndex=1,getList()"
                     v-model="msg.Type" 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-input @clear="msg.pageIndex=1,getList()" @keyup.enter.native="msg.pageIndex=1,getList()" clearable
                    style="width:200px;margin-right:10px;" class="input-with-select" placeholder="请输入商品名称" v-model="msg.GoodsName"
                    size="small">
          </el-input>
          <span>订单号</span>
          <el-input @clear="msg.pageIndex=1,getList()" @keyup.enter.native="msg.pageIndex=1,getList()" clearable
                    style="width:200px;margin-right:10px;" class="input-with-select" placeholder="请输入订单号" v-model="msg.OrderNo"
                    size="small">
          </el-input>
          <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>
        <div style="margin-top: 20px">
          <span>下单时间</span>
          <el-date-picker v-model="OrderdateList" @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>
          <el-button type="primary" size="mini" @click="msg.pageIndex=1,getList()" style="margin-left:10px;position:relative;top:-1px;">查询</el-button>
        </div>
      </div>
      <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0;color:#303133">
        <el-table-column prop="GoodsName" label="商品名称" width="500">
        </el-table-column>
        <el-table-column prop="OrderNo" label="订单号">
        </el-table-column>
        <el-table-column prop="Type" label="类型" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.Type==0" >全部</span>
            <span v-if="scope.row.Type==1" >商品成本</span>
            <span v-if="scope.row.Type==2" >运费成本</span>
          </template>
        </el-table-column>
        <el-table-column prop="OldCostPrice" label="修改之前的价格" width="130">
        </el-table-column>
        <el-table-column prop="NewCostPrice" label="修改后的价格" width="130">
        </el-table-column>
        <el-table-column prop="EmpName" label="修改人" width="120">
        </el-table-column>

        <el-table-column prop="CreateDateStr" 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="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          StartDate:'',
          EndDate:"",
          OrderStartDate:'',
          OrderEndDate:'',
          OrderNo:'',
          GoodsName:'',
          Type:0,
        },
        dateList: [], //操作日期
        OrderdateList: [], //下单日期

        total: 0,
      };
    },
    components: {},
    created() {

    },
    methods: {
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.StartDate = this.dateList[0];
          this.msg.EndDate = this.dateList[1];
        } else {
          this.msg.StartDate = '';
          this.msg.EndDate = '';
        }

        if (this.OrderdateList && this.OrderdateList.length > 0) {
          this.msg.OrderStartDate = this.OrderdateList[0];
          this.msg.OrderEndDate = this.OrderdateList[1];
        } else {
          this.msg.OrderStartDate = '';
          this.msg.OrderEndDate = '';
        }
        this.loading=true;
        this.apipost("/api/order/GetOrderGoodsLogPageList", this.msg, res => {
          this.loading=false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {
            this.Info(res.data.message);
          }
        })
      },
    },
    mounted() {
      this.getList();
    }
  };

</script>
<style>
  .buyRecords .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .buyRecords .content .searchInput {
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

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

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

</style>
