<style scoped>
  .departmentTreeStyleCont {
    padding-top: 20px;
    display: flex;
    height: 100%;
  }

  .departmentTreeStyleCont .departmentTreeStyle {
    background: #fff;
    padding: 20px;
    flex: 0 1 400px;
    min-height: 800px;
  }

  .departmentTreeStyleCont .departmentTreeStyle > p {
    font-size: 14px;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    border-left: 3px solid #E95252;
    text-indent: 20px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .spanIcon {
    padding-left: 20px;
    display: none
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content {
    height: 32px;
    line-height: 32px;
    font-size: 12px
  }

  .TreeSpan img {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    vertical-align: sub;
    margin-right: 3px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon {
    display: inline-block
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i {
    font-size: 14px !important;
    color: #999;
    margin-right: 2px;
  }

  .departmentTreeStyleCont .departmentTreeStyle .el-tree-node__content:hover .spanIcon i:hover {
    color: #E95252;
  }

  .departmentTreeStyleCont .departmentTreeLayer > p {
    font-size: 14px;
    margin-bottom: 15px;
    color: #333;
    font-weight: bold;
    height: 14px;
    line-height: 14px;
    border-left: 3px solid #E95252;
    text-indent: 20px;
  }

  .departmentTreeStyleCont .departmentTreeLayer {
    background: #fff;
    min-height: 300px;
    padding: 20px;
    margin-left: 20px;
    flex: auto
  }

  .departmentTreeStyleCont .el-date-editor.el-input,
  .departmentTreeStyleCont .el-date-editor.el-input__inner {
    width: auto !important;
  }
</style>
<template>
  <div class="flexOne">
    <div style="text-align:right;padding:10px">
        <input type="button" class="hollowFixedBtn" :value="$t('pub.addBtn')" @click="add"/>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading='loading'>
      <tr>
        <th>{{$t('fnc.jine')}}</th>     
        <th>返佣比例</th>
        <th>操作人姓名</th>
        <th>操作时间</th>
        <th>{{$t('system.table_operation')}}</th>
        
      </tr>
      <tr v-for="(item,index) in DataList" :key="index+500">
        <td>{{item.Money}}</td>
        <td>{{item.Ratio}}‰</td>
        <td>{{item.UpdateByName}}</td>
        <td>{{item.UpdateTime}}</td>
        <td>
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('pub.edit')"
              placement="top-start"
            >
              <el-button
                type="primary" icon="el-icon-edit"
                circle
                @click="Edit(item)"
              >
              </el-button>
            </el-tooltip>
             <el-tooltip
              class="item"
              effect="dark"
              :content="$t('system.table_delete')"
              placement="top-start"
            >
              <el-button @click="Delete(item)" type="danger" icon="el-icon-delete" circle></el-button>
            </el-tooltip>
        </td>
      </tr>
      <tr v-if='DataList.length==0'>
          <td colspan="6" align="center">{{$t('system.content_noData')}}</td>
      </tr>
    </table>
    <!-- <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                   layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
    </el-pagination> -->
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="400px">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item :label="$t('fnc.jine')" prop="Money">
            <el-input v-model="ruleForm.Money" @keyup.native="checkPrice(ruleForm,'Money')"></el-input>
        </el-form-item>
        <el-form-item label="返佣比例(‰)" prop="Ratio">
            <el-input v-model="ruleForm.Ratio" @keyup.native="checkPrice(ruleForm,'Ratio')"></el-input>
        </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">{{$t('pub.cancelBtn')}}</el-button>
    <el-button type="danger" @click="submitForm('ruleForm')">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible:false,
        loading: true,
        //分页
        total: 0,
        pageSize: '',
        currentPage:1,
        DataList:[],
        dateList:[],
        rules: {
          Money: [
            { required: true, message: '请输入金额', trigger: 'blur' },
          ],
          Ratio: [
            { required: true, message: '请输入返佣比例', trigger: 'blur' },
          ],
        },
        ruleForm:{
            Id:0,
            Money:"",
            Ratio:"",
        },
      }
    },
    created(){
    },
    mounted() {
      let userInfo = this.getLocalStorage();

      this.getList();
    },
    methods: {
        Delete(item){
            this.$confirm(this.$t('tips.shifoushanchu'),  this.$t('tips.tips'), {
					confirmButtonText: this.$t('pub.sureBtn'),
					cancelButtonText: this.$t('pub.cancelBtn'),
					type: 'warning'
				}).then(() => {
					this.apipost('customer_post_DelCustomerCommissionRatio', {Id:item.Id}, res => {
                    if (res.data.resultCode == 1) {
                        this.getList();
                        this.dialogVisible=false;
                        this.Success(res.data.message)
                    } else {
                            this.Success(res.data.message)
                    }
                    }, err => {
                    })
					 
				}).catch(() => {
				
				});
        },
        Edit(item){
            this.ruleForm={
                Id:item.Id,
                Money:item.Money,
                Ratio:item.Ratio,
            }
            this.dialogVisible=true; 
        },
        add(){
           this.ruleForm={
                Id:0,
                Money:"",
                Ratio:"",
            }
            this.dialogVisible=true; 
            
        },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost('customer_post_SetCustomerCommissionRatio', this.ruleForm, res => {
             if (res.data.resultCode == 1) {
            this.getList();
            this.dialogVisible=false;
            this.$refs["ruleForm"].resetFields();
            } else {
             }
            }, err => {
            })
          } else {
            
          }
        });
      },
      getList() { //获取数据
        this.loading = true;
        this.apipost('customer_post_GetCustomerCommissionRatioList', {}, res => {
          this.loading = false
          if (res.data.resultCode == 1) {
            this.DataList = res.data.data;
            this.total = res.data.data.count;
            
          } else {
          }
        }, err => {
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
    }
  }
</script>