<template>
<div>
  <el-row :gutter="20">
    <el-col :span="4">
      <el-form-item v-bind:error="tagValue[2].s1"  :required="pattern.status=='M' || tagValue[1]?true:false">
        <c-select size="small" v-model="tagValue[0].s1" placeholder="Day/Month" style="width: 100%" @change="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s1') !== -1">
          <el-option label="D" value="D"></el-option>
          <el-option label="M" value="M"></el-option>
        </c-select>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-form-item v-bind:error="tagValue[2].s2" :required="pattern.status=='M' || tagValue[1]?true:false">
        <c-input size="small" v-model="tagValue[0].s2" placeholder="Days/Months" :maxlength="3" style="width: 100%" @blur="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s2') !== -1"></c-input>
      </el-form-item>
    </el-col>
    <el-col :span="4">
      <el-form-item v-bind:error="tagValue[2].s3"  :required="pattern.status=='M' || tagValue[1]?true:false">
        <c-select size="small" v-model="tagValue[0].s3" placeholder="Code" style="width: 100%" @change="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s3') !== -1">
          <el-option value="BE" label="BE">BE</el-option>
          <el-option value="CC" label="CC">CC</el-option>
          <el-option value="FD" label="FD">FD</el-option>
          <el-option value="FP" label="FP">FP</el-option>
          <el-option value="GA" label="GA">GA</el-option>
          <el-option value="ID" label="ID">ID</el-option>
          <el-option value="ST" label="ST">ST</el-option>
          <el-option value="TD" label="TD">TD</el-option>
          <el-option value="XX" label="XX">XX</el-option>
        </c-select>
      </el-form-item>
    </el-col>
     <el-col :span="6">
      <el-form-item v-bind:error="tagValue[2].s4"  :required="pattern.status=='M' || tagValue[1]?true:false">
        <c-select size="small" v-model="tagValue[0].s4" placeholder="Currency" style="width: 100%" @change="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s4') !== -1">
          <el-option v-for="item in code" :label="item" :value="item" :key="item"></el-option>
        </c-select>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item v-bind:error="tagValue[2].s5" :required="pattern.status=='M' || tagValue[1]?true:false">
        <c-input size="small" v-model="tagValue[0].s5" placeholder="Amount" :maxlength="16" style="width: 100%" @blur="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s5') !== -1"></c-input>
      </el-form-item>
    </el-col>
  </el-row>
</div>
</template>
<script>
import {Currency, FormatAmount} from "./Utils"
export default {
  props: {
    tag: {
      type: String,
      default: ''
    },
    pattern: {
      type: Object,
      default: () => {}
    }
  },
  data: function () {
    return {
      tagValue: [{
        s1: '',
        s2: '',
        s3: '',
        s4: '',
        s5: ''
      },
      '',
      {
        s1: '',
        s2: '',
        s3: '',
        s4: '',
        s5: ''
      }],
      code: Currency
    }
  },
  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 () {
      // 触发校验
      let obj = this.pattern.tagValue[0]
      let mval = ''
      if(obj.s1 || obj.s2  || obj.s3 || obj.s4 || obj.s5) {
        let temp = FormatAmount(obj.s3);
        mval = `${obj.s1}${obj.s2}${obj.s3}${obj.s4}${temp}`.replace(/\//g,'')
      }
      this.pattern.tagValue[1] = mval
      this.$emit('validate')
    }
  }
}
</script>