<template>
  <alert @closeAlert="closeAlert" :AlertTitle="AlertTitle" v-if="showAlert">
    <ul class="form-list">
      <li class="clearfix">
        <div class="pull-left name"><span v-if="IslookOrUpdate !== 'look'">*</span>汇率</div>
        <div class="pull-left">
          <template v-if="IslookOrUpdate !== 'look'">
            <el-input placeholder="请输入汇率" v-model="chooseItem.rate" clearable class="input-text" maxlength="15">
            </el-input>
          </template>
          <template v-else>
            <div class="text">{{chooseItem.rate}}</div>
          </template>
        </div>
      </li>

      <li class="clearfix">
        <div class="pull-left name"><span v-if="IslookOrUpdate === 'add'">*</span>货币名称</div>

        <div class="pull-left select"  v-if="IslookOrUpdate === 'look' || IslookOrUpdate === 'update'">
          <el-input v-model="chooseItem.currencyName" :disabled="true">
          </el-input>
        </div>
        <div class="pull-left select" v-else>
          <el-select placeholder="请选择货币" v-model="chooseItem.currencyName" >
            <el-option v-for="item in moneyType" :label="item.curChinese" :value="item.curChinese" v-bind:key="item.id"></el-option>
          </el-select>
        </div>
      </li>
    </ul>
    <div class="control-btn">
      <template v-if="IslookOrUpdate !== 'look'">
        <div class="save" @click="closeAlert('save')">保存</div>
        <div class="cancel" @click="closeAlert()">取消</div>
      </template>
      <template v-else>
        <div class="save" @click="closeAlert()">关闭</div>
      </template>
    </div>
  </alert>
</template>

<script>
  import { Alert } from '@/components/common'
  export default {
    props: {
      IslookOrUpdate: {
        type: String,
        default: 'update'
      },
      AlertTitle: {
        type: String,
        default: '新增汇率'
      },
      chooseItem: {
        type: Object,
        default: {}
      }
    },
    computed: {
      moneyType() {
        return this.$store.state.exchange.currencyList.data.content
      }
    },
    components: {
      Alert
    },
    data() {
      return {
        showAlert: false
      }
    },
    methods: {
      closeAlert(_tp) {
        if (_tp) {
          if(!this.chooseItem.rate || this.chooseItem.rate.trim() === '') {
            this.$message({type: 'error',message: '请填写汇率'})
            return;
          }
          if(!this.chooseItem.currencyName) {
            this.$message({type: 'error',message: '请选择货币'})
            return;
          }
          let _ar = this.chooseItem.rate.split('.')
          if (!/^\d+(\.\d+)?$/.test(this.chooseItem.rate)) {
            this.$message.error('汇率数据格式不对，只能输入数字')
            return false
          }
          if (_ar.length > 2) {
            this.$message.error('汇率数据格式不对，只能有一位小数点')
            return false
          }
          if (_ar[1] && _ar[1].length > 6) {
            this.$message.error('汇率数据格式不对，只能保留6位小数')
            return false
          }
        }
        this.$emit('closeAlert', _tp, this.chooseItem)
      },
      hide() {
        this.showAlert = false
      },
      show() {
        this.showAlert = true
      }
    }
  }
</script>

<style lang="scss">

</style>
