<template>
  <div>
    <a-modal
      centered
      wrapClassName="setSHModal-modal"
      :footer="null"
      :maskClosable="false"
      title="设置结算账户"
      v-model="isshow"
      @cancle="close"
      :width="550">
      <a-spin :spinning="spinning" tip="Loading...">
        <a-alert :message="message" type="info" />
        <a-form-model
          id="setSHModal-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :labelCol="{span:6}"
          :wrapperCol="{span:16}"
        >
          <a-form-model-item label="配件经销商" >
            <span>{{ form.dealerName||'--' }}</span>
          </a-form-model-item>
          <a-form-model-item label="平台商户号" prop="merchantNo" >
            <a-input id="setSHModal-merchantNo" allowClear v-model.trim="form.merchantNo" placeholder="请输入平台商户号"/>
          </a-form-model-item>
          <a-form-model-item label="结算账户名" prop="bankAccount">
            <a-input id="setSHModal-bankAccount" allowClear v-model.trim="form.bankAccount" placeholder="请输入结算账户名"/>
          </a-form-model-item>
          <a-form-model-item label="结算账户号" prop="bankCard">
            <a-input id="setSHModal-bankCard" allowClear v-model.trim="form.bankCard" placeholder="请输入结算账户号"/>
          </a-form-model-item>
          <a-form-model-item label="开户银行" prop="bankName">
            <a-input id="setSHModal-bankName" allowClear v-model.trim="form.bankName" placeholder="请输入开户银行"/>
          </a-form-model-item>
          <a-form-model-item :label-col="{span: 0}" :wrapper-col="{span: 24}" style="text-align: center;">
            <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '8px' }" id="setSHModal-handleSubmit">保存</a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="close" id="setSHModal-close">取消</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { saveMerchantAccount, merchantAccountDetail } from '@/api/merchantAccount.js'
export default {
  name: 'SetSHModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    nowData: {
      type: Object,
      default: function () {
        return null
      }
    }
  },

  data () {
    return {
      spinning: false,
      isshow: this.visible,
      message: '以下结算账户信息需要与进件时填写的资料保持一直否则将无法体现成功',
      pageInfo: null,
      form: {
        dealerName: '',
        bankName: '', // 开户行
        bankAccount: '', // 账户名
        bankCard: '', // 账户号
        merchantNo: '' // 商户号
      },
      rules: {
        merchantNo: [ { required: true, message: '请输入保证金金额', trigger: 'blur' } ],
        bankName: [ { required: true, message: '请输入开户银行', trigger: 'blur' } ],
        bankAccount: [ { required: true, message: '请输入结算账户名', trigger: 'blur' } ],
        bankCard: [ { required: true, message: '请输入结算账户号', trigger: 'blur' } ]
      }
    }
  },
  methods: {
    close (e) {
      this.form = {
        dealerName: '',
        bankName: '', // 开户行
        bankAccount: '', // 账户名
        bankCard: '', // 账户号
        merchantNo: '' // 保证金金额
      }
      this.$refs.ruleForm.resetFields()
      this.$emit('close')
    },
    // 详情
    getMerchantAccountDetail () {
      this.spinning = true
      merchantAccountDetail({ merchantSn: this.nowData.merchantSn, merchantType: this.nowData.merchantType }).then(res => {
        if (res.status == 200) {
          this.form.merchantNo = res.data.merchantNo
          this.form.dealerName = res.data.dealerName
          this.form.bankName = res.data.merchantBankAccountEntity.bankName
          this.form.bankAccount = res.data.merchantBankAccountEntity.bankAccount
          this.form.bankCard = res.data.merchantBankAccountEntity.bankCard
          this.pageInfo = Object.assign({}, res.data)
        } else {
        }
        this.spinning = false
      })
    },
    // 保存提交
    handleSubmit () {
      console.log('保存', 'handleSubmit')
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        console.log(valid, 'console.log(valid)')
        if (valid) {
          const params = JSON.parse(JSON.stringify(_this.pageInfo))
          console.log(params, 'params')
          if (params) {
            params.merchantBankAccountEntity.bankName = _this.form.bankName
            params.merchantBankAccountEntity.bankAccount = _this.form.bankAccount
            params.merchantBankAccountEntity.bankCard = _this.form.bankCard
            // params.dealerEntity.dealerName = _this.form.dealerEntity.dealerName
            params.merchantNo = _this.form.merchantNo
          }
          console.log(params, 'params')
          params.id = _this.nowData && _this.nowData.id ? _this.nowData.id : null
          params.dealerEntity.dealerSn = _this.nowData && _this.nowData.dealerEntity ? _this.nowData.dealerEntity.dealerSn : null
          _this.spinning = true
          console.log(params, 'params')
          saveMerchantAccount(params).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('refresh')
              setTimeout(function () {
                _this.isshow = false
                _this.spinning = false
              }, 300)
            } else {
              _this.spinning = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (!newValue) {
        this.form = {
          dealerEntity: {
            dealerName: ''
          },
          bankName: '', // 开户行
          bankAccount: '', // 账户名
          bankCard: '', // 账户号
          merchantNo: '' // 保证金金额
        }
        this.$refs.ruleForm.resetFields()
        this.close()
      } else {
        this.getMerchantAccountDetail()
      }
    },
    nowData: {
      handler (newValue, oldValue) {
        if (this.isshow && newValue) {
          if (this.nowData.id) { //  编辑

          }
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="less">
</style>
