<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>
        </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-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:'',
          ClientBankAccount:{
            ID:0,
            AccountClassify:2,
            OpenBankName:'',
            AccountHolder:'',
            CardNum:'',
            AccountAlias:'',
          },

        },
        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,
      }
    },
    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) {
            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.ClientBankAccount.ID = data.ClientBankAccount.ID;
            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;



          }else {
            this.Error(res.data.message);
          }
        })
      },
    },
  };
</script>

<style>
  .supplierEdit .discount .el-form-item__label{
    padding-right: 30px;
  }
  .supplierEdit .el-form-item .elzk{
    position: absolute;
    left: -25px;
    top:12px;
  }
</style>
