<template>
<div>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item v-bind:error="tagValue[2].s1" :required="pattern.status=='M' || tagValue[1]?true:false">
        <el-date-picker size="small" v-model="tagValue[0].s1" format="yyMMdd" value-format="yyMMdd" style="width: 100%" @change="handleChange"
        :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s1') !== -1"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item v-bind:error="tagValue[2].s2">
        <el-date-picker size="small" v-model="tagValue[0].s2" format="MMdd" value-format="MMdd" style="width: 100%" @change="handleChange"
        :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s2') !== -1"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <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="D/C Mark" style="width: 100%"
        @change="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s3') !== -1">
          <el-option  value="C">C</el-option>
          <el-option  value="D">D</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-input size="small" v-model="tagValue[0].s4" placeholder="Amount" :maxlength="16" style="width: 100%"
        @blur="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s4') !== -1"></c-input>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="Transaction Type" v-bind:error="tagValue[2].s6"  :required="pattern.status=='M' || tagValue[1]?true:false">
        <c-select size="small" v-model="tagValue[0].s6" placeholder="Transaction Type" style="width: 100%"
        @change="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s6') !== -1">
          <el-option  value="S">S</el-option>
          <el-option  value="N">N</el-option>
          <el-option  value="F">F</el-option>
        </c-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="Identification Code" v-bind:error="tagValue[2].s7"  :required="pattern.status=='M' || tagValue[1]?true:false">
        <c-select size="small" v-model="tagValue[0].s7" placeholder="Identification Code" style="width: 100%"
        @change="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s7') !== -1">
          <el-option  value="BNK">BNK</el-option>
          <el-option  value="BOE">BOE</el-option>
          <el-option  value="BRF">BRF</el-option>
          <el-option  value="CAR">CAR</el-option>
          <el-option  value="CAS">CAS</el-option>
          <el-option  value="CHG">CHG</el-option>
          <el-option  value="CHK">CHK</el-option>
          <el-option  value="CLR">CLR</el-option>
          <el-option  value="CMI">CMI</el-option>
          <el-option  value="CMN">CMN</el-option>
          <el-option  value="CMP">CMP</el-option>
          <el-option  value="CMS">CMS</el-option>
          <el-option  value="CMT">CMT</el-option>
          <el-option  value="CMZ">CMZ</el-option>
          <el-option  value="COL">COL</el-option>
          <el-option  value="COM">COM</el-option>
          <el-option  value="CPN">CPN</el-option>
          <el-option  value="DCR">DCR</el-option>
          <el-option  value="DDT">DDT</el-option>
          <el-option  value="DIS">DIS</el-option>
          <el-option  value="DIV">DIV</el-option>
          <el-option  value="EQA">EQA</el-option>
          <el-option  value="EXT">EXT</el-option>
          <el-option  value="FEX">FEX</el-option>
          <el-option  value="INT">INT</el-option>
          <el-option  value="LBX">LBX</el-option>
          <el-option  value="LDP">LDP</el-option>
          <el-option  value="MAR">MAR</el-option>
          <el-option  value="MAT">MAT</el-option>
          <el-option  value="MGT">MGT</el-option>
          <el-option  value="MSC">MSC</el-option>
          <el-option  value="NWI">NWI</el-option>
          <el-option  value="ODC">ODC</el-option>
          <el-option  value="OPT">OPT</el-option>
          <el-option  value="PCH">PCH</el-option>
          <el-option  value="POP">POP</el-option>
          <el-option  value="PRN">PRN</el-option>
          <el-option  value="REC">REC</el-option>
          <el-option  value="RED">RED</el-option>
          <el-option  value="RIG">RIG</el-option>
          <el-option  value="RTI">RTI</el-option>
          <el-option  value="SAL">SAL</el-option>
          <el-option  value="SEC">SEC</el-option>
          <el-option  value="SLE">SLE</el-option>
          <el-option  value="STO">STO</el-option>
          <el-option  value="STP">STP</el-option>
          <el-option  value="SUB">SUB</el-option>
          <el-option  value="SWP">SWP</el-option>
          <el-option  value="TAX">TAX</el-option>
          <el-option  value="TCK">TCK</el-option>
          <el-option  value="TCM">TCM</el-option>
          <el-option  value="TRA">TRA</el-option>
          <el-option  value="TRF">TRF</el-option>
          <el-option  value="TRN">TRN</el-option>
          <el-option  value="UWC">UWC</el-option>
          <el-option  value="VDA">VDA</el-option>
          <el-option  value="WAR">WAR</el-option>
        </c-select>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="Reference for the Account Owner" v-bind:error="tagValue[2].s8" :required="pattern.status=='M' || tagValue[1]?true:false">
        <c-input size="small" v-model="tagValue[0].s8" placeholder="Reference for the Account Owner" :maxlength="16"
        style="width: 100%" @blur="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s8') !== -1"></c-input>
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="Reference of the Account Servicing Institution" v-bind:error="tagValue[2].s9">
        <c-input size="small" v-model="tagValue[0].s9" placeholder="Reference of the Account Servicing Institution" :maxlength="16" style="width: 100%"
        @blur="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s9') !== -1">
          <template slot="prepend">//</template>
        </c-input>
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="Supplementary Details" v-bind:error="tagValue[2].s10">
        <c-input size="small" v-model="tagValue[0].s10" placeholder="Supplementary Details" :maxlength="34"
        style="width: 100%" @blur="handleChange" :disabled="pattern.tagFlag && pattern.tagFlag.indexOf('s10') !== -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: '',
        s6: '',
        s7: '',
        s8: '',
        s9: '',
        s10: ''
      },
      '',
      {
        s1: '',
        s2: '',
        s3: '',
        s4: '',
        s6: '',
        s7: '',
        s8: '',
        s9: '',
        s10: ''
      }],
      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 temp = FormatAmount(obj.s5);
      let mval = `${obj.s1||''}${obj.s2||''}${obj.s3||''}${temp||''}${obj.s6||''}${obj.s7||''}${obj.s8||''}${obj.s9?`//${obj.s9}`:''}${obj.s10?`\r\n${obj.s10}`:''}`
      this.pattern.tagValue[1] = mval
      this.$emit('validate')
    }
  }
}
</script>