<template>
  <div class="Sheepcommission">
    <div class="query-box">
      <ul>
        <li>
          <span>
            <em>名称</em>
            <el-input type="text" v-model="msg.Name" :placeholder="$t('pub.pleaseImport')"></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>手机</em>
            <el-input type="text" v-model="msg.Moblie" :placeholder="$t('pub.pleaseImport')"></el-input>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <tr>
        <th>用户ID</th>
        <th>{{$t('hotel.hotel_nameOf')}}</th>
        <th>手机</th>
        <th>分销等级</th>
        <th>累计佣金</th>
        <th>可提现佣金</th>
        <th>待结算佣金</th>
        <th>已结算佣金</th>

      </tr>
      <tr v-for="(item,i) in dataList" :key="i">
        <td>{{item.UserId}}</td>
        <td>{{item.Name}}</td>
        <td>{{item.Moblie}}</td>
        <td>{{item.GradeName}}</td>
        <td>{{item.TotalCommission}}</td>
        <td>{{item.CommissionWithdrawal}}</td>
        <td>
          <span @click="goUrl(item)" class="underline point">{{item.WaitCommission}}</span>
        </td>
        <td>
          <span @click="goUrl(item)" class="underline point">{{item.Commission}}</span>
        </td>
      </tr>
      <tr v-if="dataList.length==0">
        <td colspan="15" align="center">{{$t('system.content_noData')}}</td>
      </tr>
    </table>
    <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,
          Name: '',
          Moblie: '',
        },
        dataList: [],
        loading: false
      };
    },
    created() {
      this.getList();
    },
    mounted() {},
    methods: {
      goUrl(item) {
        this.$router.push({
          name: "commissionSubsidiary",
          query: {
            UserId: item.UserId,
            blank: 'y'
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      getList() {
        this.loading = true;
        this.apipost('Financial_get_GetMallUserCommissionPageList', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.dataList = res.data.data.pageData;
          } else {
            this.$message.error(res.data.message);
          }
        }, err => {})
      },
    }
  };

</script>
<style>
  .Sheepcommission .underline {
    text-decoration: underline;
  }

  .Sheepcommission .point {
    cursor: pointer;
  }

</style>
