<template>
  <div class="Sheepcommission">
      <div class="query-box">
      <ul>
        <li>
            <span>
                <em>{{$t('objFill.orderid')}}</em>
                <el-input type="text" v-model="msg.OrderId" :placeholder="$t('pub.pleaseImport')"></el-input>
            </span>
        </li>
        <li>
            <span>
                <em>{{$t('hotel.order_Number')}}</em>
                <el-input type="text" v-model="msg.OrderNo" :placeholder="$t('pub.pleaseImport')"></el-input>
            </span>
        </li>
        <li>
            <span>
                <em>{{$t('admin.admin_status')}}</em>
                <el-select v-model="msg.CommissionState" filterable clearable>
                    <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
                    <el-option :label="$t('objFill.v101.FinancialModule.daijies')" :value="1"></el-option>
                    <el-option :label="$t('objFill.v101.FinancialModule.yifangyo')" :value="2"></el-option>
                </el-select>
            </span>
        </li>
        <li>
            <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()" />
        </li>
      </ul>
    </div>
    <div style="background:#fff;font-size:14px;padding:20px">
      <div class="app-order-title">
          <div style="width: 50%;">{{$t('objFill.v101.FinancialModule.shangpixx')}}</div>
          <div style="width: 20%;">{{$t('objFill.v101.FinancialModule.dengjims')}}</div>
          <div style="width: 15%;">{{$t('objFill.v101.administrative.yongjin')}}</div>
          <div style="width: 15%;">{{$t('admin.admin_status')}}</div>
          <div style="width: 15%;">{{$t('pub.pubRemark')}}</div>
      </div>
      <div v-loading="loading" class="app-order-list">
        <el-card style="margin-top:20px" 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">{{$t('hotel.order_Number')}}：</span>{{item.OrderNo}}
                    </div>
                    <div style="margin:0 15px" class="app-order-user">
                        <span class="app-order-time">{{$t('objFill.yonghuming')}}：</span>{{item.UserName}}
                    </div>
                    <div class="app-order-user">
                        <span class="app-order-time">{{$t('system.table_phone')}}：</span>{{item.Mobile}}
                    </div>
                </div>
            </div>
            <div class="app-order-body">
                <div class="goods-item" style="width: 50%;">
                    <div v-for="(list,index2) in item.DetailList" :key="index2" class="goods">
                        <img :src="list.CoverImagePath" class="goods-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;">
                                        {{$t('objFill.v101.FinancialModule.guge')}}：
                                        <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>{{$t('objFill.v101.FinancialModule.huohao')}}：{{list.ProductCode}}</span>
                                </div>
                            </div>
                            <div flex="dir:left box:mean" style="width: 250px;">
                                <div flex="cross:center main:center">
                                    <span>{{$t('ground.xiaoji')}}：￥{{list.Final_Price}}
                                    </span>
                                </div>
                                <div flex="cross:center main:center">{{$t('restaurant.res_Number')}}：x {{list.Number}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div flex="cross:center" class="app-order-info" style="width: 20%;">
                    <div flex="dir:top">
                       {{item.GradeDescription}}
                    </div>
                </div>
                <div flex="main:center cross:center" class="app-box-info" style="width: 15%;border-right: 1px solid #EBEEF5;">
                    <div>{{item.Commission}}</div>
                </div>
                <div flex="main:center cross:center" class="app-order-info" style="border-right: 1px solid #EBEEF5; width: 15%;">
                    <span v-if="item.CommissionState==1">{{$t('objFill.v101.FinancialModule.daifanyong')}}</span>
                    <span v-if="item.CommissionState==2">{{$t('objFill.v101.FinancialModule.yifanyong')}}</span>
                </div>
                <div flex="main:center cross:center" class="app-order-info" style="border-right: 0px; width: 15%;">
                    {{item.Remark}}
                </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">
                {{$t('objFill.v101.FinancialModule.zhanwuxinx')}}
           </div>
        </el-card>
    </div>
    </div>
    <el-pagination background @current-change="handleCurrentChange"
      layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total='total'>
    </el-pagination>

  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Feedback",
  data() {
    return {
      total: 0,
      msg: {
        pageIndex: 1,
        pageSize: 10,
        UserId: "",
        OrderId: "",
        OrderNo: "",
        CommissionState:0,
      },
      tableData: [],
      loading: false
    };
  },
  created() {
    if (this.$route.query.UserId) {
      this.msg.UserId = this.$route.query.UserId;
    }
    this.getList();
  },
  mounted() {},
  methods: {
    handleCurrentChange(val) {
      this.msg.pageIndex = val;
      this.getList();
    },
    getList() {
      this.loading = true;
      this.apipost(
        "Financial_get_GetMallUserOrderCommissionPageList",
        this.msg,
        res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.tableData = res.data.data.pageData;
          } else {
            this.$message.error(res.data.message);
          }
        },
        err => {}
      );
    }
  }
};
</script>
<style>
.app-order-list .app-order-item:hover {
    border: 1px solid #3399FF;
}
.app-order-list .app-order-item .el-card__header {
    padding: 0!important;
}
.app-order-list .app-order-time {
    color: #909399;
}
.app-order-list .app-order-head {
    padding:7px 20px;
    background-color: #F3F5F6;
    color: #303133;
    min-width: 750px;
    display: flex;
    position: relative;
}
.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;
}
.Sheepcommission .app-order-title div {
    text-align: center;
}
.Sheepcommission .app-order-title {
    background-color: #F3F5F6;
    height: 40px;
    line-height: 40px;
    display: flex;
    min-width: 750px;
}
.Sheepcommission .underline {
  text-decoration: underline;
}
.Sheepcommission .point {
  cursor: pointer;
}
[flex] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[flex] > * {
  display: block;
}
[flex] > [flex] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
[flex~="dir:left"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
[flex~="dir:right"] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: end;
}
[flex~="dir:top"] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
[flex~="dir:bottom"] {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  -webkit-box-pack: end;
}
[flex~="main:left"] {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
[flex~="main:right"] {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}
[flex~="main:justify"] {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
[flex~="main:center"] {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
[flex~="cross:top"] {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
[flex~="cross:bottom"] {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}
[flex~="cross:center"] {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
[flex~="cross:baseline"] {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
[flex~="cross:stretch"] {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
[flex~="box:mean"] > *,
[flex~="box:first"] > *,
[flex~="box:last"] > *,
[flex~="box:justify"] > * {
  width: 0;
  height: auto;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
[flex~="box:first"] > :first-child,
[flex~="box:last"] > :last-child,
[flex~="box:justify"] > :first-child,
[flex~="box:justify"] > :last-child {
  width: auto;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
[flex~="dir:top"][flex~="box:mean"] > *,
[flex~="dir:top"][flex~="box:first"] > *,
[flex~="dir:top"][flex~="box:last"] > *,
[flex~="dir:top"][flex~="box:justify"] > *,
[flex~="dir:bottom"][flex~="box:mean"] > *,
[flex~="dir:bottom"][flex~="box:first"] > *,
[flex~="dir:bottom"][flex~="box:last"] > *,
[flex~="dir:bottom"][flex~="box:justify"] > * {
  width: auto;
  height: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
[flex~="dir:top"][flex~="box:first"] > :first-child,
[flex~="dir:top"][flex~="box:last"] > :last-child,
[flex~="dir:top"][flex~="box:justify"] > :first-child,
[flex~="dir:top"][flex~="box:justify"] > :last-child,
[flex~="dir:bottom"][flex~="box:first"] > :first-child,
[flex~="dir:bottom"][flex~="box:last"] > :last-child,
[flex~="dir:bottom"][flex~="box:justify"]
  > :first-child
  [flex~="dir:bottom"][flex~="box:justify"]
  > :last-child {
  height: auto;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
[flex-box="0"] {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
[flex-box="1"] {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-negative: 1;
  flex-shrink: 1;
}
[flex-box="2"] {
  -webkit-box-flex: 2;
  -webkit-flex-grow: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  -webkit-flex-shrink: 2;
  -ms-flex-negative: 2;
  flex-shrink: 2;
}
[flex-box="3"] {
  -webkit-box-flex: 3;
  -webkit-flex-grow: 3;
  -ms-flex-positive: 3;
  flex-grow: 3;
  -webkit-flex-shrink: 3;
  -ms-flex-negative: 3;
  flex-shrink: 3;
}
[flex-box="4"] {
  -webkit-box-flex: 4;
  -webkit-flex-grow: 4;
  -ms-flex-positive: 4;
  flex-grow: 4;
  -webkit-flex-shrink: 4;
  -ms-flex-negative: 4;
  flex-shrink: 4;
}
[flex-box="5"] {
  -webkit-box-flex: 5;
  -webkit-flex-grow: 5;
  -ms-flex-positive: 5;
  flex-grow: 5;
  -webkit-flex-shrink: 5;
  -ms-flex-negative: 5;
  flex-shrink: 5;
}
[flex-box="6"] {
  -webkit-box-flex: 6;
  -webkit-flex-grow: 6;
  -ms-flex-positive: 6;
  flex-grow: 6;
  -webkit-flex-shrink: 6;
  -ms-flex-negative: 6;
  flex-shrink: 6;
}
[flex-box="7"] {
  -webkit-box-flex: 7;
  -webkit-flex-grow: 7;
  -ms-flex-positive: 7;
  flex-grow: 7;
  -webkit-flex-shrink: 7;
  -ms-flex-negative: 7;
  flex-shrink: 7;
}
[flex-box="8"] {
  -webkit-box-flex: 8;
  -webkit-flex-grow: 8;
  -ms-flex-positive: 8;
  flex-grow: 8;
  -webkit-flex-shrink: 8;
  -ms-flex-negative: 8;
  flex-shrink: 8;
}
[flex-box="9"] {
  -webkit-box-flex: 9;
  -webkit-flex-grow: 9;
  -ms-flex-positive: 9;
  flex-grow: 9;
  -webkit-flex-shrink: 9;
  -ms-flex-negative: 9;
  flex-shrink: 9;
}
[flex-box="10"] {
  -webkit-box-flex: 10;
  -webkit-flex-grow: 10;
  -ms-flex-positive: 10;
  flex-grow: 10;
  -webkit-flex-shrink: 10;
  -ms-flex-negative: 10;
  flex-shrink: 10;
}
[flex~="wrap:nowrap"] {
  flex-wrap: nowrap;
}
[flex~="wrap:wrap"] {
  flex-wrap: wrap;
}
[flex~="wrap:wrap-reverse"] {
  flex-wrap: wrap-reverse;
}
</style>