<style>
  .fxCommission .fxCommTable {
    width: 100%;
    border-collapse: collapse;
  }

  .fxCommission .fxCommTable tr th {
    height: 48px;
    font-size: 14px;
    color: #909399;
    border: 1px solid #EBEEF5;
    font-weight: bold;
  }

  .fxCommission .fxCommTable tr {
    background: #fff;
    text-align: center;
    height: 50px;
  }

  .fxCommission .fxCommTable tr td {
    font-size: 14px;
    border: 1px solid #EBEEF5;
  }

  .fxCommission .fx_inner:hover td {
    background-color: #F5F7FA;
  }

  .fxCommission .fxCommTable td {
    transition: background-color .25s ease;
  }

  .fxCommission .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }

</style>
<template>
  <div class="fxCommission">
    <div class="head-title">
      粉象返佣
      <el-button @click="saveData" style="float:right;margin-top: -5px;" size="small" type="primary">
        保存
      </el-button>
    </div>
    <div class="content">
      <table class="fxCommTable" v-loading="loading" v-if="dataList.length>0">
        <tr>
          <th>级别标准</th>
          <th v-for="(item,index) in titleList" :key="index">{{item.GradeName}}</th>
        </tr>
        <tr class="fx_inner" v-for="(item,index) in dataList" :key="index">
          <td>{{item.GradeName}}</td>
          <td v-for="(subItem,subIndex) in item.FXCommissionList" :key="subIndex">
            <el-input style="width:120px;" @keyup.native="checkPrice(subItem,'CommissionPrice')" v-model="subItem.CommissionPrice"></el-input>
          </td>
        </tr>
      </table>
      <table class="fxCommTable" v-else>
        <tr>
          <th>暂无数据</th>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false,
        //横向data
        dataList: [],
        titleList: [],
      };
    },
    created() {},
    methods: {
      getList() {
        this.loading = true;
        this.apipost("/api/User/GetFXFxCommissionList", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.resultList;
            this.titleList = res.data.data.titleList;
          }
        })
      },
      //保存数据
      saveData(){
        this.apipost("/api/User/SetFXFxCommissionInfo", this.dataList, res => {
          if (res.data.resultCode == 1) {
            this.getList();
            this.Success(res.data.message);
          }else{
            this.Error(res.data.message);
          }
        })
      }
    },
    mounted() {
      this.getList();
    }
  };

</script>
