<template>
  <el-dialog v-model="visible" title="Excel模版说明" width="800px" top="5vh" append-to-body>
    <div class="app-container">
      <el-text>
        1、Excel模版采用EasyExcel作为模版处理工具，采用标记化语言作为参数管理。<br />
        2、模版仅支持<el-tag>.xlsx</el-tag>格式模版。<br />
        3、打印结果与上传模版样式一致，仅做内容填充，模版中设置的样式、字体等均保留。<br />
      </el-text>
      <el-row style="margin-top: 5px">
        <el-text type="warning" size="large">变量说明：</el-text>
      </el-row>
      <el-text>
        1、 <el-tag>{{ text }}</el-tag
        >：文本格式，文本格式使用大括号包含。样例：<el-tag>{{ textsample }}</el-tag
        >,如果模版中使用了大括号 ，模版定义时增加\用于区分，样式如下：<el-tag type="danger">\{模版信息\}</el-tag>, <br />
        2、 <el-tag>{{ table }}</el-tag
        >：表格格式，表格定义采用Thymeleaf风格定义。样例：<el-tag>{{ tablesample }}</el-tag
        ><br />
      </el-text>
      <el-row style="margin-top: 40px">
        <el-button type="primary" icon="Download" size="mini" style="margin-left: 20px" @click="handleQuery">样例下载</el-button>
      </el-row>
    </div>
  </el-dialog>
</template>

<script setup name="ExcelExplanation" lang="ts">
const router = useRouter();
const { proxy } = getCurrentInstance();
const visible = ref(false);
const text = ref('{}');
const textsample = ref('{text}');
const table = ref('{#}{.}{/}');
const tablesample = ref('{#row1}{row1.a1}{row1.a2}{/row1}');
const show = () => {
  visible.value = true;
};

defineExpose({
  show
});
</script>

<style scoped lang="scss"></style>
