<!--
 * @Author: 曹捷
 * @Date: 2021-05-26 17:21:38
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-05-26 18:07:45
 * @Description: fileContent
-->
<template>
  <a-modal class="obit-modal-default" @cancel="closeDialog" :maskClosable="false" title="导入脚本" v-model:visible="showModal"
    @ok="saveImportInfo" cancelText="取消" okText="确认" width="50%">
    <a-alert class="m-b-10" message="注：" type="error">
      <template #description>
        <pre>1、不要留空行 
2、不要前后留空格</pre>
      </template>
    </a-alert>
    <a-alert class="m-b-10" message="key支持格式" type="info">
      <template #description>
        <pre>1、驼峰命名 (userName)
2、下划线(user_name)</pre>
      </template>
    </a-alert>
    <a-alert class="m-b-10" message="SQL快捷查询" type="info">
      <template #description>
        <pre>SELECT CONCAT(column_name," ",data_type," ",column_comment) FROM
information_schema.COLUMNS
WHERE table_schema = 'device' AND table_name = 'biz_device';#表名</pre>
      </template>
    </a-alert>
    <a-alert class="m-b-10" message="导入脚本信息格式默认如下所示" type="info">
      <template #description>
        <pre>device_name VARCHAR 设备名称
address VARCHAR 所在地址</pre>
      </template>
    </a-alert>
    <a-textarea :maxlength="1000" :placeholder="`device_name VARCHAR 设备名称
address VARCHAR 所在纤细地址`" :rows="10" show-word-limit v-model:value="importInfo">
    </a-textarea>
  </a-modal>
</template>

<script>
import { nextTick, reactive, toRefs } from 'vue';
export default {
  props: {
    visible: {
      type: Boolean
    }
  },
  setup (props, context) {
    let _data = reactive({
      showModal: props.visible,
      importInfo: ''
    })
    let _methods = {
      saveImportInfo () {
        if (!_data.importInfo) {
          message.error('脚本信息不能为空');
          return
        }
        context.emit('import', _data.importInfo)
        context.emit('update:visible', false)
        nextTick(() => {
          _data.importInfo = ''
        })
      },
      closeDialog () {
        context.emit('update:visible', false)
      }
    }
    return {
      ...toRefs(_data),
      ..._methods
    }
  }
}
</script>

<style>
</style>