<template>
  <div class="wdOrder distributionOrder">
    <div class="head-title">
      订单列表
      <div style="float:right;">
        <el-button @click="getExport(1)" style="margin: -5px 0 0 20px;" size="small" type="primary">批量导出</el-button>
      </div>
    </div>
    <div class="content">
      <div>
        <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:15px">所属平台：</span>
        <el-select class="w120" @change="msg.pageIndex=1,getList()" style="margin-right: 10px;" v-model="msg.OrderSource" size="small" placeholder="请选择">
          <el-option label="全部平台" :value="0"></el-option>
          <el-option
            v-for="item in platList"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id">
          </el-option>
        </el-select>
        <span style="margin-left:15px">配送方式：</span>
        <el-select class="w120" @change="msg.pageIndex=1,getList()" style="margin-right: 10px;" v-model="msg.DeliveryMethod" size="small" placeholder="请选择">
          <el-option label="全部订单" :value="0"></el-option>
          <el-option
            v-for="item in deliveryList"
            :key="item.Id"
            :label="item.Name"
            :value="item.Id">
          </el-option>
        </el-select>
        <el-input @clear="msg.pageIndex=1,getList()"  @keyup.enter.native="msg.pageIndex=1,getList()" clearable style="margin-left:15px;width:300px" class="input-with-select" placeholder="请输入内容" v-model="msgVal" size="small">
          <el-select class="pendSelect" @change="ChangeId" v-model="msgId" slot="prepend" placeholder="请选择">
            <el-option
              v-for="item in option"
              :key="item.Id"
              :label="item.name"
              :value="item.Id">
            </el-option>
          </el-select>
        </el-input>
      </div>
      <div>
        <el-tabs style="margin-top:20px" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane :dataId="0" label="全部" name="first"></el-tab-pane>
          <el-tab-pane v-for="item in orderTypeList" :key="item.Id" :dataId="item.Id" :label="item.Name"></el-tab-pane>
        </el-tabs>
        <div class="app-order-title">
          <div style="width: 55%;">商品信息</div>
          <div style="width: 20%;">实付金额</div>
          <div style="width: 20%;">佣金状态</div>
          <div style="width: 20%;">佣金情况</div>
        </div>
        <div v-loading="loading" class="app-order-list">
          <el-card v-for="(item,index) in tableData" :key="index" class="app-order-item" shadow="never">
            <div slot="header" class="clearfix">
              <div flex="cross:center" class="app-order-head">
                <div class="app-order-time">{{item.CreateDate}}</div>
                <div class="app-order-user">
                  <span class="app-order-time">订单号：</span>{{item.OrderNo}}({{item.OrderId}})
                </div>
                <div flex="cross:center" class="app-order-user">
                  <img v-if="item.OrderSource==1" src="../../../assets/img/userman/wx.png" alt="">
                  <span>{{item.UserName}}({{item.UserId}})</span>
                </div>
                <div flex="dir:left wrap:wrap" class="app-order-offline">
                  <div v-if="item.DeliveryMethodName && item.DeliveryMethodName!=''" class="express-send-box">
                    <span class="el-tag el-tag--small el-tag--light">{{item.DeliveryMethodName}}</span>
                  </div>
                  <el-tag v-if="item.PaymentTime==''" style="margin-left:5px" size="small" type="warning">未付款</el-tag>
                  <el-tag v-else style="margin-left:5px" size="small" type="warning">已付款</el-tag>

                  <el-tag v-if="item.DeliveryTime=='' && item.ReceivingTime==''" style="margin-left:5px" size="small" type="success">未发货</el-tag>
                  <el-tag v-if="item.DeliveryTime!='' && item.ReceivingTime==''" style="margin-left:5px" size="small" type="success">待发货</el-tag>

                  <el-tag v-if="item.ReceivingTime!=''" style="margin-left:5px" size="small" type="success">已收货</el-tag>

                  <el-tag v-if="item.ReceivingTime!=''" style="margin-left:5px" size="small" type="success">已完成</el-tag>

                  <el-tag v-if="item.OrderStatus==7" style="margin-left:5px" size="small" type="danger">已取消</el-tag>

                </div>
              </div>
            </div>
            <div class="app-order-body">
              <div class="goods-item" style="width: 55%;">
                <div v-for="(list,index2) in item.DetailList" :key="index2" class="goods">
                  <!-- <img :src="getIconLink(list.CoverImagePath)" class="goods-image"> -->
                  <el-image :src="getIconLink(list.CoverImagePath)" class="goods-image" :preview-src-list="[getIconLink(list.CoverImagePath)]"></el-image>

                  <div flex="dir:left">
                    <div class="goods-info">
                      <div class="goods-name">
                        <div class="app-ellipsis">
                          <div class="vue-line-clamp" style="word-break: break-all; -webkit-line-clamp: 2;">
                                                        <span class="el-tag el-tag--warning el-tag--mini el-tag--light is-hit" style="margin-right: 5px;">
                                                            {{list.OrderTypeName}}
                                                        </span>
                            {{list.GoodsName}}
                          </div>
                        </div>
                      </div>
                      <div style="margin-bottom: 24px;">
                                                <span style="margin-right: 10px;">
                                                    规格：
                                                    <el-tag v-for="(item2,index2) in list.SpecificationList" :key="index2" style="top: 5px;position: relative;margin-right: 5px; max-width: 300px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" size="mini">
                                                        {{item2}}
                                                    </el-tag>
                                                </span>
                      </div>
                      <div class="app-order-goods-price">
                        <span>{{list.SmallShopsCommission.Remark}}</span>
                      </div>
                    </div>
                    <div flex="dir:left box:mean" style="width: 250px;">
                      <div flex="cross:center main:center">
                                                <span>小计：￥{{list.Final_Price}}
                                                </span>
                      </div>
                      <div flex="cross:center main:center">数量：x {{list.Number}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div flex="cross:center" class="app-order-info" style="width: 15%;">
                <div flex="dir:top">
                  <div>
                    <span style="font-size: 16px;">￥{{item.Income}}</span>
                    <el-popover
                      placement="bottom"
                      title=""
                      width="200"
                      trigger="hover"
                      :content="'商品小计 '+ item.Income">
                      <img slot="reference" src="../../../assets/img/userman/price.png" alt="">
                    </el-popover>
                  </div>
                  <div class="express-price"><span>
                                        <span style="color: rgb(144, 147, 153);">(含运费￥{{item.FreightMoney}})
                                        </span>
                                    </span></div>
                  <div><el-tag effect="dark" type="warning" size="mini">{{item.PaymentWayName}}</el-tag></div>
                </div>
              </div>

              <div class="goods-item" style="width: 10%;">
                <div v-for="(list,index2) in item.DetailList" :key="index2" class="goods"   flex="main:center cross:center" >

                  <div v-if="list.SmallShopsCommission.CommissionState==1&&list.SmallShopsCommission.Commission!=null && list.SmallShopsCommission.Commission!='' && list.SmallShopsCommission.Commission!=0">待结算</div>
                  <div v-if="list.SmallShopsCommission.CommissionState==2&&list.SmallShopsCommission.Commission!=null && list.SmallShopsCommission.Commission!='' && list.SmallShopsCommission.Commission!=0">已结算</div>

                </div>
              </div>

              <div class="goods-item" style="width: 20%;">
                <div v-for="(list,index2) in item.DetailList" :key="index2" class="goods">



                  <div class="share-title"  style="margin-bottom: 10px; font-size: 15px;" v-if="list.SmallShopsCommission.UserName!=null && list.SmallShopsCommission.UserName!=''">
                    <span style='color: #999999;margin-right: 10px;'>昵称:</span>
                    <span>{{list.SmallShopsCommission.UserName}}</span>
                  </div>
                  <div flex="dir:left cross:center" style="margin-bottom: 10px;" v-if="list.SmallShopsCommission.Name!=null && list.SmallShopsCommission.Name!='' " >
                    <span style='color: #999999;margin-right: 10px;'>微店:</span>
                    <div>{{list.SmallShopsCommission.Name}}</div>
                  </div>

                  <div flex="dir:left cross:center" class=" share-price"  style="margin-bottom: 10px;" v-if="list.SmallShopsCommission.Commission!=null && list.SmallShopsCommission.Commission!='' && list.SmallShopsCommission.Commission!=0 " >
                    <span style='color: #999999;margin-right: 10px;'>佣金:</span>
                    <div>￥{{list.SmallShopsCommission.Commission}}</div>
                    <img v-if='list.SmallShopsCommission.CommissionState==1'  @click="EditCommission(list)" style="margin-left:8px"
                         src="../../../assets/img/userman/edit1.png" alt="">
                  </div>

                </div>
              </div>
            </div>
            <div class="card-footer">
              <div>
                <div flex="dir:left">
                  <div class="address-box">收货人: {{item.Consignee}} 电话：{{item.Mobile}} 地址：{{item.ShoppingAddress}}</div>
                </div>
              </div>
              <div v-if="item.ReRemark && item.ReRemark!=''" class="seller-remark">商家备注：{{item.ReRemark}}</div>
            </div>
          </el-card>
          <el-card v-if="tableData.length==0" class="app-order-item" shadow="never">
            <div style="height:100px;line-height:100px;text-align:center">
              暂无订单信息
            </div>
          </el-card>
        </div>
        <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>
    </div>
    <!-- 选择导出信息 -->
    <el-dialog
      title="选择导出信息"
      :visible.sync="dialogVisible"
      width="960px">
      <el-form style="border: 1px solid #F0F2F7;" :model="addMsg" ref="addMsg" label-width="100px">
        <div style="box-sizing: border-box;background-color: #F3F5F6;width: 100%;padding-left: 20px;height: 50px;line-height: 50px;">
          <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        </div>
        <div style="margin: 15px 0;"></div>
        <div style="padding: 10px 25px 20px;">
          <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox style="margin-bottom:10px;width:135px" v-for="city in cities" :label="city.Id" :key="city.Name">{{city.Name}}</el-checkbox>
          </el-checkbox-group>
        </div>

      </el-form>
      <div style="text-align:right;margin-top:20px">
        <el-button size="small" v-if="commonNum==1" type="primary" @click="Export">导出</el-button>

      </div>
    </el-dialog>
    <el-dialog title="佣金修改" :visible.sync="priceDig" width="600px">
      <el-form :model="editCommissionMsg" ref="costMsg" label-width="80px">
        <el-form-item label="昵称">
          <span>{{editUserName}}</span>
        </el-form-item>
        <el-form-item label="佣金修改">
          <el-input size="small" v-model="editCommissionMsg.Commission" step="1"  min="0" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="priceDig = false">取 消</el-button>
                <el-button size="small" type="primary" @click="costForm()">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "wdOrder",
    data(){
      return{
        orderStatusList:[],
        checkAll: false,
        checkedCities: [],
        cities: [],
        cityOptions: [],
        addMsg:{},
        dialogVisible:false,

        activeName:'first',
        msgVal:'',
        dateList:[],
        msg:{
          pageIndex:1,
          pageSize:15,
          OrderSource:0,
          OrderType:0,
          DeliveryMethod:0,
          OrderId:0,
          StartTime:'',
          EndTime:'',
          OrderStatus:0,
          OrderNo:'',
          UserName:'',
          UserId:0,
          GoodsName:'',
          DistributionUserId:'',
        },
        platList:[],
        option:[
          {Id:1,name:'订单号'},
          {Id:2,name:'用户名'},
          {Id:3,name:'用户ID'},
          {Id:4,name:'商品名称'},
          {Id:5,name:'返佣用户id'}

        ],
        msgId:1,
        ExpressList:[],
        provinceList:[],
        cityList:[],
        areaList:[],
        tableData:[],
        total:0,
        deliveryList:[],
        orderTypeList:[],
        loading:false,
        checkfhList:[],
        moresendDig:false,
        moresendtips:'',
        hszDig:false,
        hszMsg:{},
        commonNum:0,
        editCommissionMsg:{
          OrderDetailId:0,
          Commission:0
        },
        editUserName:'',
        priceDig: false
      }
    },
    created(){
      if (this.$route.query.UserId) {//如果有UserId过来 查询显示用户id
        this.msg.UserId = this.$route.query.UserId;
        this.msgId = 3;
        this.msgVal =  this.msg.UserId
      }
      this.getList();
      this.getplat();
      // this.getDown();
      this.getOrderStatus();
      this.getDelivery();
      this.getOrderType();
    },
    mounted(){},
    methods:{
      ChangeId(val){
        let msgVal=this.msgVal;
        if(val==1){
          this.msg.OrderNo=msgVal;
          this.msg.UserName='';
          this.msg.UserId='';
          this.msg.GoodsName='';
          this.msg.DistributionUserId = 0
        }
        if(val==2){
          this.msg.OrderNo='';
          this.msg.UserName=msgVal;
          this.msg.UserId='';
          this.msg.GoodsName='';
          this.msg.DistributionUserId = 0
        }
        if(val==3){
          this.msg.OrderNo='';
          this.msg.UserName='';
          this.msg.UserId=msgVal;
          this.msg.GoodsName='';
          this.msg.DistributionUserId = 0
        }
        if(val==4){
          this.msg.OrderNo='';
          this.msg.UserName='';
          this.msg.UserId='';
          this.msg.GoodsName=msgVal;
          this.msg.DistributionUserId = 0
        }
        if(val==5){
          this.msg.OrderNo='';
          this.msg.UserName='';
          this.msg.UserId='';
          this.msg.GoodsName='';
          this.msg.DistributionUserId = msgVal
        }
      },
      //点击批量导出或粉象导出
      getExport(num){
        this.dialogVisible=true;
        this.commonNum=num;
        if(num==1){
          this.getDown();
        }

      },
      Export(){
        this.msg.ExcelEnumIds=this.checkedCities;
        let msg = JSON.parse(JSON.stringify(this.msg));
        this.GetLocalFile(
          "/api/order/GetSmallShopsOrdersToExcel",
          msg,
          "微店返佣订单.xls"
        );
      },
      getDown(){
        this.cityOptions=[];
        this.apipost("/api/order/GetSmallShopsOrdersExportEnumList",{}, res => {
          this.cities=res.data.data;
          let data=res.data.data;
          data.forEach(item=>{
            this.cityOptions.push(item.Id)
          })
        })
      },


      //显示更多
      showMoreDis(item){
        item.isShow=false;
        this.$forceUpdate();
      },
      //点击收起
      hideMoreDis(item){
        item.isShow=true;
        this.$forceUpdate();
      },
      handleCheckAllChange(val) {
        this.checkedCities = val ? this.cityOptions : [];
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
      },
      handleClick(val){
        let dataId=val.$attrs.dataId;
        this.msg.OrderType=dataId;
        this.msg.pageIndex=1
        this.getList();
      },

      //判断字段是否全为空格
      getPanduan(val){
        if(val.trim().length === 0){
          return false;
        }else{
          return true;
        }
      },

      getList(){
        this.ChangeId(this.msgId);
        if(!this.msgVal || this.msgVal==''){
          this.msg.OrderNo='';
          this.msg.UserName='';
          this.msg.UserId=0;
          this.msg.GoodsName='';
          this.msg.DistributionUserId = 0
        }
        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/GetSmallShopsOrdersPageList", this.msg, res => {
          this.loading=false;
          if(res.data.resultCode==1){
            this.total=res.data.data.count;
            let pageData=res.data.data.pageData;
            this.tableData=pageData;
            if(this.tableData){
              this.tableData.forEach(x=>{
                x.isShow=true;
              })
            }
          }

        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getOrderStatus(){
        this.apipost("/api/order/GetOrderStatusEnumList",{}, res => {
          this.orderStatusList=res.data.data;
        })
      },
      getDelivery(){
        this.apipost("/api/order/GetOrderDeliveryMethodEnumList",{}, res => {
          this.deliveryList=res.data.data;
        })
      },
      getOrderType(){
        this.apipost("/api/order/GetOrderTypeEnumList",{}, res => {
          this.orderTypeList=res.data.data;
        })
      },

      getplat(){
        this.apipost("/api/user/GetMemberUserSourceEnumList",{}, res => {
          this.platList=res.data.data;
        })
      },
      EditCommission(item){
        this.editCommissionMsg.OrderDetailId = item.Id;
        this.editCommissionMsg.Commission = item.SmallShopsCommission.Commission;
        this.editUserName= item.SmallShopsCommission.UserName;
        this.priceDig = true
      },
      costForm(){
        if(this.editCommissionMsg.Commission==''){
          this.Error('佣金不能为空');
          return
        }
        this.apipost("/api/order/SetSmallShopsOrdersCommission", this.editCommissionMsg, res => {
          this.priceDig = false
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
          } else {
            this.Error(res.data.message);
          }
        })
      }

    },
  };
</script>

<style>

  .wdOrder .pendSelect .el-input {
    width: 100px;
  }
  .hszDigClass .el-dialog__body{
    padding: 0 10px 20px 0;
  }
  .sendDigClass .el-dialog__body{
    padding: 0 10px 10px 0;
  }
  .app-order-list .card-footer .seller-remark {
    margin-top: 10px;
    color: #E6A23C;
  }
  .app-send .el-table__header-wrapper th {
    background-color: #f5f7fa;
  }
  .app-send .title-box .text {
    background-color: #FEFAEF;
    color: #E6A23C;
    padding: 6px;
  }
  .app-send .title-box {
    margin: 15px 0;
  }
  .app-order-list .app-order-item .el-button {
    padding: 0;
  }
  .app-order-list .card-footer .address-box {
    margin-right: 10px;
  }
  .app-order-list .card-footer {
    background: #F3F5F6;
    padding: 10px 20px;
  }
  .app-order-list .app-order-info > div {
    width: 100%;
  }
  .app-order-icon {
    margin-right: 5%;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .app-order-body {
    display: flex;
    flex-wrap: nowrap;
  }
  .app-order-list .app-order-info {
    display: flex;
    align-items: center;
    width: 15%;
    text-align: center;
    border-right: 1px solid #EBEEF5;
    justify-content: center;
  }
  .app-order-list .el-card__body {
    padding: 0;
  }
  .app-order-list .express-price {
    height: 30px;
    line-height: 30px;
  }
  .app-order-list .goods-item {
    border-right: 1px solid #EBEEF5;
  }
  .app-order-list .app-order-info {
    display: flex;
    align-items: center;
    width: 15%;
    text-align: center;
    border-right: 1px solid #EBEEF5;

  }
  .app-order-list .goods-item .goods .app-order-goods-price {
    height: 24px;
    margin-top: 10px;
    position: absolute;
    bottom: 20px;
    left: 125px;
  }
  .app-order-list .goods-item .goods-info .goods-name {
    margin-bottom: 5px;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .app-order-list .goods-item .goods-info {
    width: 50%;
    margin-top: 5px;
  }
  .app-order-list .goods-image {
    height: 90px;
    width: 90px;
    margin-right: 15px;
    float: left;
  }
  .app-order-list .goods-item .goods {
    position: relative;
    padding: 20px;
    min-height: 130px;
    border-top: 1px solid #EBEEF5;
  }
  .app-order-list .goods-item .goods:first-of-type {
    border-top: 0;
  }
  .wdOrder .app-order-list .app-order-item:hover .app-order-btnimg{
    display: block;
  }
  .wdOrder .app-order-list .app-order-item:hover{
    border: 1px solid #3399FF;
  }
  .wdOrder .app-order-btnimg {
    position: absolute;
    top: 20px;
    right:25px;
    color: #7C868D;
    font-size: 18px;
    padding: 0;
    display: none;
  }
  .wdOrder .app-order-offline {
    margin-left: 30px;
    margin-top: -2px;
  }
  .wdOrder .app-order-user img {
    height: 20px;
    width: 20px;
    display: block;
    float: left;
    border-radius: 50%;
    margin-right: 10px;
  }
  .wdOrder .app-order-list .app-order-time {
    color: #909399;
  }
  .wdOrder .app-order-user {
    margin-left: 30px;
  }
  .wdOrder  .app-order-list .app-order-time {
    color: #909399;
  }
  .wdOrder .app-order-list .app-order-item .el-card__header {
    padding: 0;
  }
  .wdOrder .app-order-list .app-order-item {
    margin-top: 20px;
    min-width: 750px;
  }
  .wdOrder .app-order-list .app-order-head {
    padding: 20px;
    background-color: #F3F5F6;
    color: #303133;
    min-width: 750px;
    display: flex;
    position: relative;
  }
  .wdOrder .app-order-title div {
    text-align: center;
  }
  .wdOrder .app-order-title {
    background-color: #F3F5F6;
    height: 40px;
    line-height: 40px;
    display: flex;
    min-width: 750px;
  }
  .wdOrder .content{
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
  .distri_more{
    color:#409EFF;
    margin-bottom:20px;
    cursor: pointer;
    display:block;
  }
</style>
