<template>
  <div  class="app-container">
    <el-form label-width="150px">
      <el-row :gutter="22">
        <el-col  :span="24">
          <el-form-item label="单张图片">
            <image-upload :limit="1" :file-size="5" :file-type="['.png', '.jpg', '.jpeg', '.gif']"  v-model="form.image"></image-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传的图片">
            {{form.image}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="多张图片">
            <image-upload :limit="3" :file-size="5" :file-type="['.png', '.jpg', '.jpeg', '.gif']"  v-model="form.imageList"></image-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传的图片">
            {{form.imageList}}
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="单个文件">
            <file-upload :limit="1" :file-size="10" :file-type="['.zip', '.docx']" v-model="form.file"></file-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传的文件">
            {{form.file}}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="多个文件">
            <file-upload :limit="3" :file-size="10" v-model="form.fileList"></file-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传的文件">
            {{form.fileList}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-tag>源码</el-tag>
    <pre><code class="hljs" v-html="highlightedCode()"></code></pre>
  </div>
</template>
<script>
import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));

export default {
  components: {},
  data() {
    return {
      form: {
        file:'',
        fileList: '/profile/upload/2021/12/31/f7562921-232c-4941-9944-3edcc16f0b48.docx',
        image: '',
        imageList: '/profile/upload/2021/12/31/7debdff8-5e3f-4f04-9dd9-08f37d6c95dc.jpg'
      }
    }
  },
  methods: {
    highlightedCode(){
      const code = "<template>\n" +
        "  <div  class=\"app-container\">\n" +
        "    <el-form label-width=\"150px\">\n" +
        "      <el-row :gutter=\"22\">\n" +
        "        <el-col  :span=\"24\">\n" +
        "          <el-form-item label=\"单张图片\">\n" +
        "            <image-upload :limit=\"1\" :file-size=\"5\" :file-type=\"['.png', '.jpg', '.jpeg', '.gif']\"  v-model=\"form.image\"></image-upload>\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"上传的图片\">\n" +
        "            {{form.image}}\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"多张图片\">\n" +
        "            <image-upload :limit=\"3\" :file-size=\"5\" :file-type=\"['.png', '.jpg', '.jpeg', '.gif']\"  v-model=\"form.imageList\"></image-upload>\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"上传的图片\">\n" +
        "            {{form.imageList}}\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"单个文件\">\n" +
        "            <file-upload :limit=\"1\" :file-size=\"10\" :file-type=\"['.zip', '.docx']\" v-model=\"form.file\"></file-upload>\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"上传的文件\">\n" +
        "            {{form.file}}\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"多个文件\">\n" +
        "            <file-upload :limit=\"3\" :file-size=\"10\" v-model=\"form.fileList\"></file-upload>\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"上传的文件\">\n" +
        "            {{form.fileList}}\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "      </el-row>\n" +
        "    </el-form>\n" +
        "  </div>\n" +
        "</template>\n" +
        "<script>\n" +
        "export default {\n" +
        "  components: {},\n" +
        "  data() {\n" +
        "    return {\n" +
        "      form: {\n" +
        "        file:'',\n" +
        "        fileList:'',\n" +
        "        image: '',\n" +
        "        imageList: ''\n" +
        "      }\n" +
        "    }\n" +
        "  },\n" +
        "  methods: {\n" +
        "\n" +
        "  }\n" +
        "}\n" +
        "<\/script>\n";
      const result = hljs.highlight("vue", code || "", true);
      return result.value || '&nbsp;';
    }
  }
}

</script>

