<template>
  <div>
    <a-modal
      centered
      wrapClassName="addbond-modal"
      :footer="null"
      :maskClosable="false"
      :title="titleText"
      v-model="isshow"
      @cancle="isshow=false"
      :width="650">
      <a-spin :spinning="spinning" tip="Loading...">
        <a-form-model
          id="addbond-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-row :gutter="24">
            <a-col :span="20">
              <a-form-model-item label="货架名称" prop="shelfSn" >
                <shelfList ref="shelfList" @change="shelfChange" v-if="!nowData" id="addbond-shelfName"></shelfList>
                <span v-if="nowData">{{ form.shelfName||'--' }}</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="20" v-if="form.shelfSn||nowData">
              <a-form-model-item label="配件经销商" prop="dealerSn" >
                <span>{{ dealerName||'' }}</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="20" v-if="form.shelfSn||nowData">
              <a-form-model-item label="汽车修理厂" prop="storeSn">
                <span>{{ storeName ||'' }}</span>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="20">
              <a-form-model-item label="保证金缴纳金额" prop="bondAmount" >
                <a-input-number
                  id="addbond-bondAmount"
                  v-model="form.bondAmount"
                  :precision="2"
                  :min="0.01"
                  :max="999999"
                  placeholder="请输入正数（最多允许两位小数）"
                  style="width: 100%;display: inline-block;" />
              </a-form-model-item>
            </a-col>
            <a-col :span="2"> <span style="display: inline-block; padding-top: 10px;">元</span></a-col>
          </a-row>
          <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="addbond-handleSubmit">保存</a-button>
            <a-button :style="{ marginLeft: '8px' }" @click="isshow=false" id="addbond-close">取消</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { STable, VSelect, Upload } from '@/components'
import { shelfDetail } from '@/api/shelf.js'
import { bondRecordDetail, saveBondRecord } from '@/api/boundRecord.js'
import dealerList from '@/views/common/dealerList.vue'
import storeList from '@/views/common/storeList.vue'
import shelfList from '@/views/common/shelfList.vue'
export default {
  name: 'Addbond',
  components: { STable, VSelect, Upload, dealerList, storeList, shelfList },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    nowData: {
      type: Object,
      default: function () {
        return null
      }
    }
  },

  data () {
    return {
      spinning: false,
      titleText: '新增保证金',
      isshow: this.visible,
      roleList: [],
      pageInfo: null,
      formItemLayout: {
        labelCol: { span: 10 },
        wrapperCol: { span: 14 }
      },
      dealerName: '',
      shelfName: '',
      storeName: '',
      form: {
        dealerSn: undefined, // 经销商sn
        bondAmount: '', // 保证金金额
        storeSn: undefined, // 汽车修理厂sn
        shelfSn: '' // 货架名称
      },
      rules: {
        shelfSn: [ { required: true, message: '请选择货架名称', trigger: 'change' } ],
        dealerSn: [ { required: true, message: '请选择配件经销商', trigger: 'change' } ],
        storeSn: [ { required: true, message: '请选择汽车修理厂', trigger: 'change' } ],
        bondAmount: [ { required: true, message: '请输入保证金金额', trigger: 'blur' } ]
      }
    }
  },
  methods: {
    // 过滤空格
    filterEmpty () {
      let str = this.form.name
      str = str.replace(/\ +/g, '')
      str = str.replace(/[ ]/g, '')
      str = str.replace(/[\r\n]/g, '')
      this.form.name = str
    },
    // 货架名称 change
    shelfChange (obj) {
      this.spinning = true
      this.form.shelfSn = obj.key || undefined
      if (this.form.shelfSn) {
        setTimeout(() => {
          this.getShelfDetail(this.form.shelfSn)
        }, 300)
      }
    },
    // 经销商 change
    dealerChange (obj) {
      this.form.dealerSn = obj.key || undefined
    },
    // 汽车修理厂 change
    storeChange (obj) {
      this.form.storeSn = obj.key || undefined
    },
    // 查询货架详情
    getShelfDetail (val) {
      this.spinning = true
      shelfDetail({ shelfSn: val }).then(res => {
        if (res.status == 200) {
          this.dealerName = res.data.dealerName
          this.shelfName = res.data.shelfName
          this.storeName = res.data.storeName
          this.form = Object.assign({}, res.data)
          console.log(this.dealerName, this.storeName, this.form, 'this.form ')
        } else {
          this.form = { }
        }
        this.spinning = false
      })
    },
    // 保证金详情
    getBoundDetail () {
      this.spinning = true
      bondRecordDetail({ bondRecordSn: this.nowData ? this.nowData.bondRecordSn : '' }).then(res => {
        if (res.status == 200) {
          this.dealerName = res.data.dealerName
          this.shelfName = res.data.shelfName
          this.storeName = res.data.storeName
          this.form.bondAmount = res.data.bondAmount
          this.form = Object.assign({}, res.data)
        } else {
        }
        this.spinning = false
      })
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(_this.form))
          params.id = _this.nowData && _this.nowData.id ? _this.nowData.id : null
          _this.spinning = true
          saveBondRecord(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 = {
          dealerSn: undefined, // 经销商sn
          bondAmount: '', // 保证金金额
          storeSn: undefined, // 汽车修理厂sn
          shelfSn: '' // 货架名称
        }
        this.dealerName = ''
        this.shelfName = ''
        this.storeName =
        this.$emit('close')
        this.$refs.ruleForm.resetFields()
        this.titleText = '新增保证金'
      }
    },
    nowData: {
      handler (newValue, oldValue) {
        if (this.isshow && newValue) {
          if (this.nowData.id) { //  编辑
            this.titleText = '编辑保证金'
            this.getBoundDetail()
          } else {
            this.titleText = '新增保证金'
          }
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="less">
.addGoodsShelve-modal{
  .ant-select-disabled .ant-select-selection{
    background-color: none !important;
  }
}
</style>
