<template>
  <div>
    <div class="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>资金结算分账管理</a-breadcrumb-item>
        <a-breadcrumb-item>分账比例设置</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div class="body">
      <div class="query">
        <a-row  justify="space-between" >
          <a-col :lg="8" :xl="8" :xxl="6" class="query_item">
            <span>规则名称：</span>
            <a-input v-model="query.rule_name"/>
          </a-col>
          <a-col :lg="8" :xl="8" :xxl="6" class="query_item" >
            <span>创建人员：</span>
            <a-select   v-model="query.user_id">
              <a-select-option :value="item.id" v-for="(item,index) in userList" :key="index">
                {{item.account_name}}
              </a-select-option>
            </a-select>
          </a-col>

          <a-col :lg="8" :xl="8" :xxl="6" class="query_item">
            <span>使用状态：</span>
            <a-select  default-value="" v-model="query.status">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">禁用</a-select-option>
              <a-select-option value="1">启用</a-select-option>
            </a-select>
          </a-col>
          <a-col :lg="12" :xl="12" :xxl="6" class="query_item query_item2">
            <span>创建时间：</span>
            <a-range-picker v-model="query.createtime" valueFormat="YYYY-MM-DD"/>
          </a-col>
          <a-col :lg="12" :xl="12" :xxl="24" class="query_item query_item1">
            <a-space :size="21">
              <a-button type="primary" class="query_button" @click="getList(1)">查 询</a-button>
              <a-button class="query_button" @click="resetQurey">重 置</a-button>
            </a-space>
          </a-col>
        </a-row>
      </div>
      <div class="table">
        <div class="table_title">
          <span>查询结果</span>
          <a-button type="primary" class="query_button" @click="visible2=true">创 建</a-button>
        </div>
        <a-table :columns="columns" :data-source="data" bordered :pagination="false">
          <template slot="status" slot-scope="status">
            <span >{{status==0?'禁用':'启用'}}</span>
          </template>
          <template slot="operation" slot-scope="item">
            <a-space :size="24">
              <span class="table_operation" @click="ratioStatus(item.id)">{{item.status==0?'启用':'禁用'}}</span>
              <span class="table_operation" @click="ratioDetail(item.id)">查看</span>
            </a-space>
          </template>
        </a-table>
        <a-pagination
        class="pagination"
        size="small"
        :total="total"
        v-model="page"
        :page-size="limit"
        :show-total="total => `第 ${startTotal} - ${endTotal} 条 / 总共 ${total} 条`"
        :page-size-options="pageSizeOptions"
        @showSizeChange="onShowSizeChange"
        @change="changePage"
        show-size-changer >
          <template slot="buildOptionText" slot-scope="props">
            <span >{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <!-- 创建规则 -->
    <a-modal  v-model="visible2" title="创建规则" width="1186px" :bodyStyle="modeStyle">
      <div >
        <div class="query_item rule_item rule_item2">
          <!-- <a-col :span="5" > -->
            <span>规则名称：</span>
            <a-input v-model="query1.rule_name"/>
          <!-- </a-col> -->
        </div>
        <a-row  justify="space-between" class="modal_select" v-for="(item,index) in query1.ratio" :key="index">
          <a-col :span="5" class="query_item rule_item">
            <span>角色名称：</span>
            <a-select    v-model="item.role_type">
              <a-select-option value="1">授权方</a-select-option>
              <a-select-option value="2">被授权方</a-select-option>
              <a-select-option value="3">平台方</a-select-option>
              <!-- <a-select-option value="4">区域中心</a-select-option>
              <a-select-option value="5">第三方服务机构</a-select-option> -->
            </a-select>
          </a-col>
          <a-col :span="6" class="query_item rule_item">
            <span>费用名称：</span>
            <a-select    v-model="item.cost_type">
              <!-- <a-select-option value="1">委托服务费用</a-select-option>
              <a-select-option value="2">交易服务费用</a-select-option>
              <a-select-option value="3">认证服务费用</a-select-option> -->
              <a-select-option value="1">{{item.role_type==2?'交易佣金':'交易结算'}}</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="7" class="query_item rule_item">
            <span>计算方式：</span>
            <a-select    v-model="item.calculate">
              <!-- <a-select-option value="2">固定</a-select-option> -->
              <a-select-option value="1">比例</a-select-option>
            </a-select>
            <a-input v-model="item.amount" v-if="item.calculate==2"/>
            <a-input v-model="item.ratio" v-if="item.calculate==1"/>
            <span class="rule_item_span">%</span>
          </a-col>
          <!-- <a-col :span="6" class="query_item rule_item" >
            <span>结算周期：</span>
            <a-select default-value="1"   v-model="query1.show">
              <a-select-option value="1">3天</a-select-option>
              <a-select-option value="2">5天</a-select-option>
              <a-select-option value="3">7天</a-select-option>
              <a-select-option value="4">10天</a-select-option>
              <a-select-option value="5">14天</a-select-option>
              <a-select-option value="6">15天</a-select-option>
              <a-select-option value="7">20天</a-select-option>
              <a-select-option value="8">30天</a-select-option>
            </a-select>
          </a-col> -->
        </a-row>
        <!-- <div class="caozuo">
          <img src="../../../assets/img/add.svg" alt="">
          <img src="../../../assets/img/jian.svg" alt="">
        </div> -->
      </div>
      <template slot="footer">
        <div>
          <a-button type="white" @click="visible2=false">返 回</a-button>
          <a-button type="primary" @click="addRule">创 建</a-button>
        </div>
      </template>
    </a-modal>
    <!-- 查看规则 -->
    <a-modal  v-model="visible" title="查看规则" width="570px" :bodyStyle="{'height':'300px'}">
      <div class="rule_item1" v-for="(item,i) in ruleList" :key="i">
        <span>{{item.role_type==1?'授权方':item.role_type==2?'被授权方':'平台方'}}：</span>
        <span class="rule_item1_span">{{item.role_type==2?'交易佣金':'交易结算'}}（{{item.calculate==1?'比例':'固定'}}）</span>
        <span v-if="item.calculate==1">{{item.ratio}}%</span>
        <span v-if="item.calculate==2">{{item.amount}}%</span>
      </div>
      <template slot="footer">
        <div>
          <a-button type="white" @click="visible=false">返 回</a-button>
        </div>
      </template>
    </a-modal>
  </div>

</template>
<script>
import Operation from '../../Operation.vue'
import {ratioList,getUser,ratioStatus,setRatio,ratioDetail}from '../../../api/index'
export default {
  data() {
    return{
      query1:{
        ratio:[
          {role_type:'2',cost_type:'1',calculate:'1',amount:'',ratio:null,},
          {role_type:'1',cost_type:'1',calculate:'1',amount:'',ratio:null,},
          {role_type:'3',cost_type:'1',calculate:'1',amount:'',ratio:null,},
        ],
        rule_name:''
      },
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      //一页多少条
      pageSize:10,
      total:500,
      startTotal:1,
      endTotal:10,
      limit:10,
      // 当前页数
      page:1,
      query:{
        rule_name:'',
        user_id:'',
        status:'',
        createtime:[],
        type:''
      },
      visible:false,
      visible2:false,
      modeStyle:{
        'height':'240px'
      },
      data:[],
      columns:[
        // {
        //   title: '序号',
        //   dataIndex: 'id',
        //   width:'65px',
        //   align:'center'
        // },
        {
          title: '创建时间',
          dataIndex: 'createtime',
          // align:'center'
        },
        {
          title: '规则名称',
          dataIndex: 'rule_name',
          // align:'center'
        },
        {
          title: '使用状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          // align:'center'
        },
        {
          title: '创建人员',
          dataIndex: 'username',
          // align:'center'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'operation' },
          // align:'center'
        },
      ],
      userList:[],
      ruleList:[]
    }
  },
  components:{
    Operation
  },
  created(){
    this.getList()
    this.getUser()
  },
  methods:{
    ratioDetail(val){
      let data={id:val}
      ratioDetail(data).then(res=>{
        if(res.code==200){
          this.visible=true
          this.ruleList=res.data
          this.ruleList.splice(
            1,
            1,
            ...this.ruleList.splice(1 - 1, 1, this.ruleList[1])
          );

        }else{
          this.$message.error(res.msg);
        }
      })
    },
    ratioStatus(val){
      let data={id:val}
      ratioStatus(data).then(res=>{
        if(res.code==200){
          this.$message.success('修改状态成功！');
          this.getList()
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 获取用户
    getUser(){
      getUser().then(res=>{
        if(res.code==200){
          this.userList=res.data
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    getList(type){
      let data=this.query
      data.limit=this.limit
      if(type==1){
        data.page=1
        this.page=1
      }else{
        data.page=this.page
      }
      ratioList(data).then(res=>{
        if(res.code==200){
          this.data=res.data.data
          this.startTotal=res.data.start
          this.endTotal=res.data.end
          this.total=res.data.total
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 重置query
    resetQurey(){
      Object.assign(this.query, this.$options.data().query)
      this.getList()
    },
    // 重置query
    resetQurey1(){
      for(let i=0;i<this.query1.ratio.length;i++){
        this.query1.ratio[i].ratio=''
      }
      this.query1.rule_name=''
    },
    addRule(){
      if(parseFloat(this.query1.ratio[0].ratio)+parseFloat(this.query1.ratio[2].ratio)!=100){
        this.$message.error('授权方和平台方的加起来比列要等于100');
        return
      }
      let data=this.query1
      setRatio(data).then(res=>{
        if(res.code==200){
          this.$message.success('创建成功！');
          this.getList()
          this.resetQurey1()
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    // 切换一页显示多少条
    onShowSizeChange(current, pageSize){
      this.limit = pageSize;
      this.getList()
    },
    // 切换页数
    changePage(page, pageSize){
      this.page=page
      this.getList()
    },
  }
}
</script>
<style scoped>
  .rule_item >span{
    min-width: 80px;
  }
  .rule_item .ant-input{
    width: 60px;
    margin-left: 15px;
  }
  .rule_item .ant-select{
    width: 140px;
  }
  .caozuo{
    margin-top: 5px;
  }
  .caozuo img{
    margin-right: 10px;
  }
  /deep/ .ant-modal-header{
    border-bottom: none;

  }
  /deep/ .ant-modal-footer{
    border-top: none;
    padding: 10px 16px;
  }
  /deep/ .ant-modal-body{
    padding: 12px 24px;
  }
  .rule_item1{
    margin-bottom: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(153, 153, 153);
  }
  .rule_item1 span{
    display: inline-block;
  }
  .rule_item1 span:first-child{
    min-width:140px;
  }
  .rule_item1_span{
    margin-left: 80px;
    margin-right: 70px;
  }
  .rule_item_span{
    display: inline-block;
    margin-left: 10px;
    min-width: auto !important;
  }
  .rule_item2 .ant-input{
    margin-left: 0;
    width: auto;
  }
</style>
