<template>
  <div class="LiveOrder">
    <div class="head-title">
      直播订单
      <el-button style="float:right;margin-top:-5px;" size="small" @click="creatDanju" type="primary">生成单据
      </el-button>
      <el-button style="float:right;margin:-5px 10px; 0 0" size="small" @click="batchUpPeople()" type="primary">批量修改人数
      </el-button>
      <el-button style="float:right;margin-top:-5px;" size="small" @click="batchUpMoney()" type="primary">批量修改金额
      </el-button>
    </div>
    <div class="content">
      <div style="margin-bottom:20px">
        <span>单据状态</span>
        <el-select class="w100" style="margin-right: 10px;" @change="msg.pageIndex=1,getList()"
          v-model="msg.FinanceStatus" 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>
        <el-button type="primary" size="mini" @click="getList()" style="margin-left:10px;position:relative;top:-1px;">查询</el-button>
      </div>
      <el-table :data="tableData" ref="multipleTable" v-loading="loading" border style="width: 100%">
        <!-- <el-table-column type="selection" width="55">
        </el-table-column> -->
        <el-table-column width="55">
          <template slot="header" slot-scope="scope">
            <el-checkbox v-model="isCheckAll" @change="getCheckAll(tableData)"></el-checkbox>
          </template>
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isChecked" :disabled="scope.row.isCanCheck" @change="getSingleCheck(tableData,scope.row)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="OrderNo" label="订单号/订单Id" width="200">
          <template slot-scope="scope">
            <div>{{scope.row.OrderId}}</div>
            <div>{{scope.row.OrderNo}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="GoodsName" label="商品名称" min-width="300">
        </el-table-column>
        <el-table-column prop="SpecificationList" label="规格" width="280">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.SpecificationList" :key="index">{{item}}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" width="150">
          <template slot-scope="scope">
            <div>单价：{{scope.row.Unit_Price}}</div>
            <div>数量：{{scope.row.Number}}</div>
            <div>总价：{{scope.row.Final_Price}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="LiveCommission" label="直播返佣" width="80">
        </el-table-column>
        <el-table-column prop="LivePeopleNum" label="主播数量" width="80">
        </el-table-column>
        <el-table-column prop="LiveFinanceIds" label="绑定财务单据" width="150">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <img @click="updateInfo(scope.row)" v-if="scope.row.LiveFinanceIds==''" class="operatImg"
              src="../../assets/img/userman/edit.png" alt="">
          </template>
        </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-form label-width="80px">
        <el-form-item label="直播日期">
          <el-date-picker v-model="finMsg.LiveTime" size="small" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="账户类型">
          <el-radio v-model="finMsg.IsPublic" :label="0">私账</el-radio>
          <el-radio v-model="finMsg.IsPublic" :label="1">公账</el-radio>
        </el-form-item>
        <el-form-item label="账户">
          <el-select size="small" filterable placeholder="请选择" v-for="(item,index) in checkedDan" :key="index"
            v-model="item.AccountIds">
            <el-option label="请选择" :value="0"></el-option>
            <el-option v-for="item in AccountList" :key="item.ID"
              :label="item.AccountHolder+'('+item.AccountAlias+' '+item.CardNum+' '+item.OpenBankName+')'"
              :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <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>
    <!-- 修改金额人数弹窗 -->
    <el-dialog title="修改" :visible.sync="updateDialog" width="400px">
      <el-form label-width="50px">
        <el-form-item label="数量" v-if="updateMsg.Type==1||updateMsg.Type==2">
          <el-input size="small" @keyup.native="checkInteger(updateMsg,'LivePeopleNum')" v-model="updateMsg.LivePeopleNum"></el-input>
        </el-form-item>
        <el-form-item label="金额" v-if="updateMsg.Type==1||updateMsg.Type==3">
          <el-input size="small" @keyup.native="checkPrice(updateMsg,'LiveCommission')" v-model="updateMsg.LiveCommission"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="updateDialog=false">取消</el-button>
        <el-button type="primary" size="small" @click="saveOrder()">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        //选择公账弹窗
        choiceFin: false,
        msg: {
          pageIndex: 1,
          pageSize: 50,
          FinanceStatus: 0, //单据状态 0-不限 1-已制单 2-未制单
          StartTime: '', //下单开始时间
          EndTime: '', //下单结束时间
          GoodsName: '', //商品名称
          OrderNo: '' //订单号
        },
        dateList: [], //日期
        total: 0,
        tableData: [], //列表数据
        finMsg: {
          IsPublic: 0, //0-私账1-公账
          AccountIds: [], //账户id列表
          OrderDetailIds: [], //订单明细列表
          ERPEmpId: 0, //erp用户id
          LiveTime: '' //直播日期
        },
        ERPEmpId: 0,

        updateDialog: false,
        //修改信息
        updateMsg: {
          Ids: '',
          Type: 0, //1更新人数和金额 2更新人数 3更新金额
          LivePeopleNum: 0, //主播人数
          LiveCommission: 0, //主播返佣总金额
        },
        ComCheckedArr: [], //公用选中数组
        isSingleCheck: false, //有过单选
        firstPeoNum: -1,
        AccountList: [], //账户下拉
        checkedDan: [], //选中数

        isCheckAll: false, //全选
        findRow:{},

      }
    },
    created() {
      let currentUser = this.getLocalStorage()
      this.ERPEmpId = currentUser.ERPEmpId
    },
    mounted() {
      //默认当天
      var now = new Date();
      var year = now.getFullYear(); //年
      var month = now.getMonth() + 1; //月
      var day = now.getDate(); //日
      this.finMsg.LiveTime = year + '-' + month + '-' + day

      this.getList();
      this.getAccountList();
    },
    methods: {
      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/order/GetLiveGoodsOrderPageList", this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            var myData = res.data.data.pageData;
            myData.forEach(x => {
              x.isChecked = false;
              x.isCanCheck=false;
            })
            this.tableData = JSON.parse(JSON.stringify(myData));
          } else {
            this.Error(res.data.message);
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      //修改
      updateInfo(item) {
        this.updateDialog = true;
        this.updateMsg.Ids = item.OrderDetailId;
        this.updateMsg.Type = 1;
        this.updateMsg.LivePeopleNum = item.LivePeopleNum;
        this.updateMsg.LiveCommission = item.LiveCommission;
      },
      //保存修改
      saveOrder() {
        this.apipost("/api/Order/UpdateOrderDetailLive", this.updateMsg, res => {
          if (res.data.resultCode == 1) {
            this.updateDialog = false;
            this.getList();
            this.Success(res.data.message);
            this.ComCheckedArr = [];
            this.findRow={};
          } else {
            this.Error(res.data.message);
          }
        })
      },
      //点击生成单据
      creatDanju() {
        if (this.ComCheckedArr == 0) {
          this.Error('请选择需要生成单据');
        } else {
          this.choiceFin = true;
          this.checkedDan = [];
          for (var i = 0; i < this.ComCheckedArr[0].LivePeopleNum; i++) {
            var obj = {
              AccountIds: 0
            }
            this.checkedDan.push(obj);
          }
        }
      },
      //自定义单选
      getSingleCheck(tableData,row){
        this.ComCheckedArr=[];
        this.findRow = tableData.find(eItem => eItem.isChecked == true);
        if(this.findRow){
          tableData.forEach(x=>{
              if(x.LivePeopleNum!=this.findRow.LivePeopleNum){
                x.isCanCheck=true;
              }
              if(x.isChecked){
                this.ComCheckedArr.push(x);
              }
          })
        }else{
          tableData.forEach(x=>{
            x.isCanCheck=false;
          })
          this.isCheckAll=false;
          this.findRow={};
        }
      },
      //自定义多选
      getCheckAll(tableData){
        this.ComCheckedArr=[];
        if(this.isCheckAll){
          //有过单选
          if(JSON.stringify(this.findRow) != "{}"){
            this.findRow = tableData.find(eItem => eItem.isChecked == true);
            tableData.forEach(x=>{
              if(x.LivePeopleNum==this.findRow.LivePeopleNum){
                x.isChecked=true;
                this.ComCheckedArr.push(x);
              }else{
                x.isCanCheck=true;
              }
            })
          }else{
            if(tableData.length>0){
              var firstData = tableData[0];
              tableData.forEach(x=>{
                if(x.LivePeopleNum==firstData.LivePeopleNum){
                  x.isChecked=true;
                  this.ComCheckedArr.push(x);
                }else{
                  x.isCanCheck=true;
                }
              })
            }
          }
        }else{
          tableData.forEach(x=>{
              x.isChecked=false;
              x.isCanCheck=false;
          })
          this.findRow={};
        }
      },

      //点击批量修改金额
      batchUpMoney() {
        if (this.ComCheckedArr == 0) {
          this.Error('请选择需要修改订单');
          return
        }
        this.updateDialog = true;
        this.updateMsg.Type = 3;
        var arr = [];
        this.ComCheckedArr.forEach(x => {
          arr.push(x.OrderDetailId);
        })
        this.updateMsg.Ids = arr.toString();
      },
      //批量修改人员
      batchUpPeople() {
        if (this.ComCheckedArr == 0) {
          this.Error('请选择需要修改订单');
          return
        }
        this.updateDialog = true;
        this.updateMsg.Type = 2;
        var arr = [];
        this.ComCheckedArr.forEach(x => {
          arr.push(x.OrderDetailId);
        })
        this.updateMsg.Ids = arr.toString();
      },
      //设置单据
      setFince() {
        this.finMsg.OrderDetailIds = [];
        this.finMsg.AccountIds = [];
        if (this.checkedDan.length > 0) {
          this.checkedDan.forEach((x, index) => {
            this.finMsg.AccountIds.push(x.AccountIds);
          })
        }
        var _index = this.finMsg.AccountIds.indexOf(0);
        if (_index > -1) {
          this.Error('请选择第' + (_index+1) + '个账户');
          return;
        }
        if (this.ComCheckedArr.length > 0) {
          this.ComCheckedArr.forEach(x => {
            this.finMsg.OrderDetailIds.push(x.OrderDetailId);
          })
        }
        this.finMsg.ERPEmpId = this.ERPEmpId;
        const loading = this.$loading({
          lock: true,
          text: '生成单据中...',
          spinner: 'el-icon-loading',
        });

        this.apipost("/api/order/SetLiveGoodsOrderFinance", this.finMsg, res => {
          this.choiceFin = false;
          loading.close();
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.getList();
          } else {
            this.Error(res.data.message)
          }
          this.ComCheckedArr = [];
          this.$refs.multipleTable.clearSelection();
        })
      },
      //获取账户下拉
      getAccountList() {
        this.apipost("/api/Supplier/GetClientBankAccountList", {}, res => {
          if (res.data.resultCode == 1) {
            this.AccountList = res.data.data;
          } else {
            this.Error(res.data.message)
          }
        })

      }
    }
  };

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

</style>
