<template>
<div v-if="mty=='fmt985'">
  <el-form-item :label="pattern.label" v-bind:error="tagValue[2].s1" :required="pattern.status == 'M'"  label-position="left" label-width="150px">
    <el-input size="small" v-model="tagValue[0].s1" :placeholder="pattern.label" :maxlength="11" @blur="handleChange">
      <el-button slot="append" icon="el-icon-search" size="mini" @click="handleOpenDialog"></el-button>
    </el-input>
  </el-form-item>
  <m-ybic :visible.sync="dialogVisible" @close="handleClose" @rowselect="handleRowSelect"></m-ybic>
</div>
<div v-else>
  <el-form-item v-bind:error="tagValue[2].s1">
    <el-input size="small" v-model="tagValue[0].s1" placeholder="Party Identifier" :maxlength="34" @blur="handleChange"
    :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s1') !== -1">
      <template slot="prepend">/</template>
    </el-input>
  </el-form-item>
  <el-form-item  v-bind:error="tagValue[2].s2" :required="pattern.status=='M' || tagValue[1]?true:false">
    <el-row>
      <el-col :span="22">
        <c-input-format size="small" v-model="tagValue[0].s2" :maxRows="4" :maxCols="35" placeholder="Name and Address" @blur="handleChange"
        :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s2') !== -1">
        </c-input-format>
      </el-col>
      <el-col :span="2">
        <el-button icon="el-icon-search" size="mini" style="height: 88px; width: 100%" @click="handleOpenDialog"></el-button>
      </el-col>
    </el-row>
  </el-form-item>
  <m-ybic :visible.sync="dialogVisible" @close="handleClose" @rowselect="handleRowSelect"></m-ybic>
</div>
</template>
<script>
import YBIC from './YBIC'
export default {
  components: {
    'm-ybic': YBIC
  },
  props: {
    tag: {
      type: String,
      default: ''
    },
    mty: {
      type: String,
      default: ''
    },
    pattern: {
      type: Object,
      default: () => {}
    }
  },
  data: function () {
    if (this.mty == 'fmt985') {
      return {
        dialogVisible: false,
        tagValue: [{
          s1: '',
        },
        '',
        {
          s1: '',
        }]
      }
    }
    return {
      dialogVisible: false,
      tagValue: [{
        s1: '',
        s2: ''
      },
      '',
      {
        s1: '',
        s2: ''
      }]
    }
  },
  created: function () {
    if (this.pattern.tagValue == undefined || JSON.stringify(this.pattern.tagValue) == '[{},null]') {
      this.pattern.tagValue = this.tagValue
    } else {
      this.tagValue = this.pattern.tagValue
    }
  },
  methods: {
    handleChange: function () {
      // 触发校验
      if (this.mty == 'fmt985') {
        let obj = this.pattern.tagValue[0]
        let mval = ""
        if(obj.s1) {
          mval =obj.s1
        }
          
        this.pattern.tagValue[1] = mval
      } else {
        let obj = this.pattern.tagValue[0]
        let mval = ""
        if(obj.s1)
          mval = `/${obj.s1}\r\n${obj.s2}`
        else 
          mval = obj.s2
        this.pattern.tagValue[1] = mval
      }
      
      this.$emit('validate')
    },
    handleOpenDialog: function () {
      this.dialogVisible = true
    },
    handleClose: function () {
      this.dialogVisible = false
    },
    handleRowSelect: function (row) {
      if (this.mty == 'fmt985') {
        this.pattern.tagValue[0].s1 = row.BIC
      } else {
        this.pattern.tagValue[0].s2 = row.NAM1
      }
     
      this.handleChange()
    }
  }
}
</script>