<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">{{$t('currencytype.currencyCode')}}：</span>
        <el-input v-model="query.currencyCode" placeholder="" class="filter-item input_item"   />
      </div>
      <div class="container_item">
        <span class="item_text">{{$t('currencytype.chineseName')}}：</span>
        <el-input v-model="query.chineseName" placeholder="" class="filter-item input_item"    />
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>
       <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-reset" @click="handleReset">
        {{ $t('table.reset') }}
      </el-button>
      <el-button v-if="permission.includes('currency_add')" v-waves class="filter-item" type="primary" icon="el-icon-my-add" @click="handleCreate">
        {{ $t('table.add') }}
      </el-button>
      <el-button v-if="permission.includes('currency_cache')" v-waves class="filter-item" type="primary" icon="el-icon-my-redis1" @click="handleRedis" :loading="redisAbled">
        {{ $t('table.cache') }} </el-button>
    </div>
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        fit
        stripe
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :max-height="tableHeight"
      >
        <el-table-column prop="currencyCode" :label="$t('currencytype.currencyCode')"  align="left"></el-table-column>
        <el-table-column prop="chineseName" :label="$t('currencytype.chineseName')" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="symbol" :label="$t('currencytype.symbol')" align="left" ></el-table-column>
        <el-table-column prop="countryCode" :label="$t('currencytype.countryCode')" align="left"></el-table-column>
        <el-table-column prop="countryExplain" :label="$t('currencytype.countryExplain')" align="left" show-overflow-tooltip>
          <template slot-scope="{row}">
              {{row.countryExplain ? row.countryExplain : '-'}}
          </template>
        </el-table-column>
        <el-table-column prop="rateDps" :label="$t('currencytype.rateDps')" align="left"></el-table-column>
        <el-table-column prop="abbrCode" :label="$t('currencytype.shortCode')" align="left"></el-table-column>
        <el-table-column prop="quotaDisplayStr" :label="$t('currencytype.quotaDisplay')" align="left"></el-table-column>
        <el-table-column :label="$t('table.actions')" align="left" width="120"  class-name="small-padding ">
          <template slot-scope="{row}">
              <div class="flex_d">
                    <el-button v-if="permission.includes('currency_update')" type="text" size="mini" icon="el-icon-my-modify" @click="handleUpdate(row)">
                    {{ $t('table.modify') }}
                    </el-button>
                    <el-button v-if="permission.includes('currency_del')" size="mini" type="text" icon="el-icon-my-del-y" @click="handleChangeDel(row)">
                    {{ $t('table.delete') }}
                    </el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
    <el-dialog
      :title="handleType==1?'新增':'修改'"
      :visible.sync="dialogFormVisible"
      v-el-drag-dialog
      :close-on-click-modal="false"
       width="960px">
        <div class="addflex">
            <div >
                <el-form ref="dataForm"  :model="temp" label-position="right" label-width="100px" >
                  <el-form-item :label="$t('currencytype.currencyCode')+'：'"  :class="handleType === 2 ? 'unabled':'require'">
                      <el-input v-model="temp.currencyCode" style="width:319px"
                      :disabled="handleType === 2" maxlength="6"
                      @input="changeVlaue"/>
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.chineseName')+'：'" class="require">
                      <el-input v-model="temp.chineseName" style="width:319px" maxlength="10" />
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.symbol')+'：'" class="require">
                      <el-input v-model="temp.symbol" style="width:319px"  maxlength="2" @input="changeVlaue"/>
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.countryCode')+'：'" class="require">
                      <el-input v-model="temp.countryCode" style="width:319px" maxlength="5"/>
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.countryExplain')+'：'">
                      <el-input v-model="temp.countryExplain"  style="width:319px" maxlength="10"/>
                  </el-form-item>
                   <el-form-item :label="$t('currencytype.rateDps')+'：'" class="require">
                      <el-input v-model="temp.rateDps"  style="width:319px" @input="valChange($event,'temp','rateDps')" />
                  </el-form-item>
                </el-form>
            </div>
            <div >
                <el-form ref="dataForm"  :model="temp" label-position="right" label-width="110px" >
                  <el-form-item :label="$t('currencytype.shortCode')+'：'" class="require">
                      <el-input v-model="temp.abbrCode"  style="width:319px"  maxlength="6"/>
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.quotaDisplay')+'：'" class="require" >
                     <el-switch v-model="temp.quotaDisplay" :class="temp.quotaDisplay ? 'open':'close'"></el-switch>
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.amountDps')+'：'" class="require">
                      <el-input v-model="temp.amountDps"  style="width:319px"
                      @input="valChange($event,'temp','amountDps')"
                      @blur="amoutBlur($event)"
                      maxlength="2"/>
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.sortLevel')+'：'" class="require">
                      <el-input v-model="temp.sortLevel"  style="width:319px"
                      @input="temp.sortLevel = temp.sortLevel.replace(/[^\d]/g,'')"
                      maxlength="5"/>
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.maintenanceuser')+'：'" class="unabled">
                      <el-input v-model="temp.updateUserName"   style="width:319px" disabled/>
                  </el-form-item>
                  <el-form-item :label="$t('currencytype.maintenancetime')+'：'" class="unabled">
                      <el-input v-model="temp.updateTime"   style="width:319px" disabled/>
                  </el-form-item>
                </el-form>
            </div>
        </div>
      <div slot="footer" class="dialog-footer" style="padding-right:26px">
        <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-tijiao" @click="sbumitData">
            {{ $t('table.sbumit') }}
        </el-button>
        <el-button v-waves class="filter-item flex_align" type="primary" icon="el-icon-my-quxiao" @click="dialogFormVisible=false">
            {{ $t('table.cancel') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from 'vuex'
import http from '@/api/http'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { validatenull } from '@/utils/validate.js'
export default {
  name: '',
  components: { Pagination },
  directives: { waves, elDragDialog },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      total: 0,
      query:{},
      tableData:[],
      pageSize:10,
      pageNum:1,
      form:{},
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      handleType:1,//1新增 2修改
      tableHeight: 0,
      chpwdVisible:false,
      pwdChangeData:{},
      multipleSelection:[],
      redisAbled: false
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 240
    })
  },
  methods: {

    handleRedis() {
      this.redisAbled = true
      http.post(`/share/currency/refresh`,{}).then(()=>{
        this.$message.success('缓存成功')
        this.redisAbled = false
      }).catch(() => { this.redisAbled = false })
    },
    getData() {
      http.post(`/share/currency/queryList`,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
          this.tableData = res.data.list;
          this.total = res.data.total || 0;
          this.tableData.forEach(item=>{
            item.quotaDisplayStr =  item.quotaDisplay === 1 ? '是' : '否'
            item.quotaDisplay =  item.quotaDisplay === 1 ? true : false
          })
      }).catch(err=>{});
    },

    // 金额有效位数
    amoutBlur(event){
      let _val = event.target.value
      if( _val && parseInt(_val) > 10){
        this.$message.error('金额有效位数值不能大于10')
        event.target.value = ''
      }
    },
    handleSearch(){
      this.pageNum = 1
      this.getData()
    },
    handleReset(){
      this.query = {}
      this.pageNum = 1
      this.getData()
    },
    refresh(){
      http.post(`/share/currency/refresh`).then(res=>{})
    },

    handleChangeDel(row){
       this.$confirm('是否删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: row.id
          }
          http.post(`/share/currency/delete`, params).then( res=>{
          this.$message.success(res.msg.info);
          this.getData()
          this.refresh()
          })
        }).catch(() => {});
    },

    handleCreate() {
      this.temp = {
        quotaDisplay:0,
        status:1 //币种状态1有效 0删除
      }
      this.handleType = 1 //1新增
      this.dialogFormVisible = true
    },
    sbumitData() {
      let {rateDps, sortLevel,amountDps,symbol,currencyCode} = this.temp
         if (validatenull(currencyCode)){
        this.$message.error('币种国际码不能为空，请输入');
        this.temp.currencyCode = ''
        console.log(this.temp,'参数值')
        return false
      }
       if (validatenull(symbol)){
        this.$message.error('符号不能为空，请输入');
        this.temp.symbol = ''
        return false
      }
      if (validatenull(rateDps)){
        this.$message.error('利率有效位数不能为空，请输入');
        this.temp.rateDps = ''
        return false
      }
      if (rateDps && parseInt(rateDps) > 10){
        this.$message.error('利率有效位不得大于10')
        this.temp.rateDps = ''
        return false
      }
      if (sortLevel && parseInt(sortLevel) > 1000){
        this.$message.error('排序最大不能超过10000，请重新输入');
        this.temp.sortLevel = ''
        return false
      }
      if (validatenull(amountDps)){
        this.$message.error('金额有效位数不能为空，请输入');
        this.temp.amountDps = ''
        return false
      }
      delete this.temp.quotaDisplayStr
      this.temp.quotaDisplay = this.temp.quotaDisplay === true ? 1 : 0
      if(this.handleType ===1){
        http.post(`/share/currency/create`,this.temp ).then((res)=>{
            this.$message.success('提交成功！');
            this.getData();
            this.dialogFormVisible = false;
        }).catch(err=>{});
      }else{
        http.post(`/share/currency/update`,this.temp).then((res)=>{
            this.$message.success('提交成功！');
            this.getData();
            this.dialogFormVisible = false;
        }).catch(err=>{});
      }
    },

    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.handleType = 2
      this.dialogFormVisible = true
    },

    headerStyle() {
      return 'tableStyle'
    },
    changeVlaue(){
      this.$forceUpdate()
    },
    valChange(event,temp,key){
      this[temp][key] = event.replace(/[^\d]/g,'')
      this.$forceUpdate()
    }
  }
}
</script>
<style scoped lang="scss">
  .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
  .addflex{
    display: flex;
    padding: 30px 30px 0px 30px;
    justify-content: center;
  }

</style>
