<template>
  <div v-loading="pageloading" class="supplierEdit">
    <div class="head-title">
      <span @click="CommonJump('supplierManage')" class="blue point">供应商</span> / 供应商编辑
    </div>
    <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px">
      <el-card shadow="never" style="margin-top:10px" class="box-card">
        <el-form-item class="commonLabel discount" label="供应商名称" prop="Name">
          <el-input v-model="addMsg.Name" style="width:690px" size="small">
          </el-input>
        </el-form-item>
        <el-form-item class="commonLabel discount" label="电话" prop="Mobile">
          <el-input v-model="addMsg.Mobile" style="width:690px" size="small" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
          </el-input>
        </el-form-item>
        <el-form-item class="commonLabel discount" label="地址" >
          <el-input v-model="addMsg.Address" style="width:690px" size="small">
          </el-input>
        </el-form-item>



        <el-form-item class="commonLabel discount" label="账户分类" prop="ClientBankAccount.AccountClassify">
          <el-select class="w150"  style="margin-right: 10px;" v-model="addMsg.ClientBankAccount.AccountClassify" size="small" placeholder="请选择" @change='changeTitle'>
            <el-option
              v-for="item in options"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="commonLabel discount" :label="nameA" prop="ClientBankAccount.OpenBankName" v-if="addMsg.ClientBankAccount.AccountClassify!=3 && addMsg.ClientBankAccount.AccountClassify!=4">
          <el-input v-model="addMsg.ClientBankAccount.OpenBankName" style="width:690px" size="small">
          </el-input>
        </el-form-item>
        <el-form-item class="commonLabel discount" :label="nameB" prop="ClientBankAccount.AccountHolder"  v-if='addMsg.ClientBankAccount.AccountClassify!=3 && addMsg.ClientBankAccount.AccountClassify!=4'>
          <el-input v-model="addMsg.ClientBankAccount.AccountHolder" style="width:690px" size="small">
          </el-input>
        </el-form-item>
        <el-form-item class="commonLabel discount" :label="nameC" prop="ClientBankAccount.CardNum" >
          <!-- <el-input v-model="addMsg.ClientBankAccount.CardNum" style="width:690px" size="small" onkeyup="this.value= this.value.match(/\d+(\d{0,2})?/) ? this.value.match(/\d+(\d{0,2})?/)[0] : ''"> -->
          <el-input v-model="addMsg.ClientBankAccount.CardNum" style="width:690px" size="small" >
          </el-input>
        </el-form-item>
        <el-form-item class="commonLabel discount" :label="nameD" prop="ClientBankAccount.AccountAlias">
          <el-input v-model="addMsg.ClientBankAccount.AccountAlias" style="width:690px" size="small">
          </el-input>
        </el-form-item>
        <el-form-item class="commonLabel discount" label="供应商关联人">
          <el-select size="small" v-model="addMsg.Introducer" @change="getSpecification" :filter-method="ChangeListName" filterable clearable
              style="display:inline-block;width:690px;"
                placeholder="请选择">
                <el-option v-for="item in IntroducerList" :key="item.UserId" :label="item.MemberUserName" :value="item.UserId">
                </el-option>
              </el-select>
        </el-form-item>
        <el-form-item class="commonLabel discount commissionStyle" label="供应商返佣比例" v-if="addMsg.Introducer!='' || addMsg.Introducer !=0">
            <span style="color: #ff4544">注：按照毛利百分比，设定结算比例</span>
            <div class="content">
              <table class="fxCommTable" v-if="addMsg.SupplierCommissionList.length>0">
                <tr>
                  <th>毛利率</th>
                  <th v-for="(item,index) in addMsg.SupplierCommissionList" :key="index">{{item.CommissionType}}0%</th>
                </tr>
                <tr>
                  <td>返佣比例</td>
                  <td v-for="(subItem,subIndex) in addMsg.SupplierCommissionList" :key="subIndex">
                    <el-input style="width:100px;" v-model="subItem.CommissionRate" :min='0' size="small" type='number'><template slot="append">%</template></el-input>
                  </td>
                </tr>
              </table>
              <table class="fxCommTable" v-else>
                <tr>
                  <th>暂无数据</th>
                </tr>
              </table>
          </div>
        </el-form-item>



      </el-card>
    </el-form>
    <div style="padding:20px;background:#fff;margin-top:10px">
      <el-button @click="Save('addMsg')" size="small" type="primary">保存</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "supplierEdit",
    data(){
      return{
        pageloading:false,
        addMsg:{
          ID:0,
          Name:'',
          Mobile:'',
          Address:'',
          Introducer:'',//关联人
          ClientBankAccount:{
            ID:0,
            AccountClassify:2,
            OpenBankName:'',
            AccountHolder:'',
            CardNum:'',
            AccountAlias:'',
          },
          SupplierCommissionList:[
            {ID:0,CommissionType:1,CommissionRate:0},
            {ID:0,CommissionType:2,CommissionRate:0},
            {ID:0,CommissionType:3,CommissionRate:0},
            {ID:0,CommissionType:4,CommissionRate:0},
            {ID:0,CommissionType:5,CommissionRate:0},
            {ID:0,CommissionType:6,CommissionRate:0},
            {ID:0,CommissionType:7,CommissionRate:0},
            {ID:0,CommissionType:8,CommissionRate:0},
            {ID:0,CommissionType:9,CommissionRate:0},
            {ID:0,CommissionType:10,CommissionRate:0},
          ]

        },
        nameA:'开户支行',
        nameB:'开户人',
        nameC:'卡号',
        nameD:'账户别名',

        options:[
          // {Id:1,Name:"平台"},
          {Id:2,Name:"银行"},
          {Id:3,Name:"虚拟账户"},
          {Id:4,Name:"微信支付宝"},
        ],
        rules:{
          Name: [
            { required: true, message: '请输入供应商名称', trigger: 'blur' },
          ],
          Mobile: [
            { required: true, message: '请输入电话', trigger: 'blur' },
          ],

         'ClientBankAccount.AccountClassify' : [
            { required: true, message: '请输入服务名称', trigger: 'blur' },
          ],
          'ClientBankAccount.OpenBankName': [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          'ClientBankAccount.AccountHolder': [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          'ClientBankAccount.CardNum': [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          'ClientBankAccount.AccountAlias': [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],

        },
        supplierId:-1,
        search:{
          Name:''
        },
        IntroducerList:[],
      }
    },
    created(){
      if(this.$route.query.supplierId){
        this.supplierId=this.$route.query.supplierId;
        this.getData()
      }
    },
    methods:{
      changeTitle(){
        if(this.addMsg.ClientBankAccount.AccountClassify==3){
            this.nameC='平台账户';
            this.nameD='账户别名';

        }else if(this.addMsg.ClientBankAccount.AccountClassify==4){
          this.nameC='账号';
          this.nameD='名称';
        }
        this.addMsg.ClientBankAccount.OpenBankName='';
        this.addMsg.ClientBankAccount.AccountHolder='';
        this.addMsg.ClientBankAccount.CardNum='';
        this.addMsg.ClientBankAccount.AccountAlias='';
      },
      
      Save(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            
            if(this.addMsg.Introducer == ''){
              this.addMsg.Introducer = 0
            }
            if(this.addMsg.Introducer == 0){
              this.addMsg.SupplierCommissionList = []
            }
            this.apipost('/api/Supplier/SetSupplier',this.addMsg,
              res => {
                if (res.data.resultCode === 1) {
                  this.CommonJump('supplierManage')
                  this.Success(res.data.message)

                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
          } else {
            return false;
          }
        });
      },
    
      getData(){
        this.pageloading=true;
        this.apipost("/api/Supplier/GetSupplierDetail",{ID:this.supplierId}, res => {
          this.pageloading=false;
          if(res.data.resultCode==1){
            let data = res.data.data
            this.addMsg.ID = data.ID;
            this.addMsg.Name = data.Name;
            this.addMsg.Mobile = data.Mobile;
            this.addMsg.Address = data.Address;
            this.addMsg.Introducer = data.Introducer;
            this.addMsg.ClientBankAccount.ID = data.ClientBankAccount.ID;
            if( data.SupplierCommissionList.length!=0){
               this.addMsg.SupplierCommissionList = data.SupplierCommissionList;
            }
           
            this.addMsg.ClientBankAccount.AccountClassify = data.ClientBankAccount.AccountClassify;
            this.addMsg.ClientBankAccount.OpenBankName = data.ClientBankAccount.OpenBankName;
            this.addMsg.ClientBankAccount.AccountHolder = data.ClientBankAccount.AccountHolder;
            this.addMsg.ClientBankAccount.CardNum = data.ClientBankAccount.CardNum;
            this.addMsg.ClientBankAccount.AccountAlias = data.ClientBankAccount.AccountAlias;
            this.search.Name = data.IntroducerName;
            if(data.IntroducerName !=''){
              this.getDistributorInfoList()
            }
            
               if(this.addMsg.Introducer == 0){
                  this.addMsg.Introducer = ''
                }
          }else {
            this.Error(res.data.message);
          }
        })
      },
      ChangeListName(val){
        this.search.Name = val
        this.getDistributorInfoList()
      },
      getDistributorInfoList(){
        this.pageloading=true;
         this.apipost('/api/Supplier/GetDistributorInfoList',this.search,
              res => {
                this.pageloading=false;
                if (res.data.resultCode === 1) {
                  this.IntroducerList = res.data.data
                } else {
                  this.Error(res.data.message);
                }
              },
              null
            );
      },
 
      getSpecification(){

      }
    },
  };
</script>

<style>
  .supplierEdit .discount .el-form-item__label{
    padding-right: 30px;
  }
  .supplierEdit .el-form-item .elzk{
    position: absolute;
    left: -25px;
    top:12px;
  }
    .supplierEdit .fxCommTable {
    width: 100%;
    border-collapse: collapse;
  }

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

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

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

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

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

  .supplierEdit .content {
    background: #fff;
    margin-top: 10px;
    /* padding: 20px; */
    box-sizing: border-box;
  }
  .supplierEdit .el-input-group__append{
    padding:0 5px
  }
  .supplierEdit .commissionStyle .el-input__inner{
      padding: 0px 0px 0 10px;
  }
</style>