<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules" inline label-position="top">
      <el-form-item label="备注(可用于密码提示)" prop="alias">
        <el-input v-model="form.alias"/>
      </el-form-item>
      <el-form-item label="密码" prop="key">
        <el-input v-model="form.key" type="password"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmKey">
        <el-input v-model="confirmKey" type="password"/>
      </el-form-item>
      <el-form-item label="数量" prop="num">
        <el-input-number v-model="form.num"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue';
import { makeAddress }                                           from '@/apis/address';
import md5                                                       from 'js-md5/build/md5.min';
import { ElMessage }                                             from "element-plus";

export default defineComponent( {
  name  : 'TronAddressEdit',
  emits : ['fetch-data'],
  setup ( props, { emit } ) {
    const { proxy } = getCurrentInstance();

    const state = reactive( {
      formRef           : null,
      confirmKey        : '',
      form              : {
        coin_type : 'tron',
        alias     : '',
        key       : '',
        num       : 1,
      },
      rules             : {
        alias : [{ required : true, trigger : 'blur', message : '请输入别名' }],
        key   : [{ required : true, trigger : 'blur', message : '请输入密码' }],
        confirmKey : [{
          validator  : ( rule, value, callback ) => {
            if ( state.confirmKey !== state.form.key ) {
              callback( new Error( '密码不一致！' ) );
            } else {
              callback();
            }
          }, trigger : 'blur'
        }],
        num   : [{ required : true, trigger : 'blur', message : '请输入数量' }],
      },
      title             : '',
      dialogFormVisible : false,
    } );

    const showEdit = ( row ) => {
      if ( !row ) {
        state.title = '添加';
      } else {
        state.title = '编辑';
        state.form  = Object.assign( {}, row );
      }
      state.dialogFormVisible = true;
    };
    const close    = () => {
      state[ 'formRef' ].resetFields();
      state.form              = {
        coin_type : 'tron',
        alias     : '',
        key       : '',
        num       : 1,
      };
      state.dialogFormVisible = false;
    };
    const save     = () => {
      state[ 'formRef' ].validate( async ( valid ) => {
        if ( valid ) {
          const res = await makeAddress(
            Object.assign( {}, state.form, { key : md5( state.form.key ) } )
          );
          if ( res.status === 200 ) {
            ElMessage.success(
              '添加成功'
            );
            emit( 'fetch-data' );
            close();
          } else {
            ElMessage.error( '添加失败' );
          }
        }
      } );
    };

    return {
      ...toRefs( state ),
      showEdit,
      close,
      save,
    };
  },
} );
</script>
