<template>
  <div  class="app-container">
    <el-form label-width="150px">
      <el-row :gutter="22">
        <el-col :span="12">
          <el-form-item label="选择多用户">
            <el-input v-model="form.userNickNames" placeholder="请选择用户" readonly clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleOpenMultiSelectUser">选择多用户</el-button>
        </el-col>

        <el-col :span="24">
          <el-form-item label="选中的用户">
            {{form.users}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择单用户">
            <el-input v-model="form.userNickName" placeholder="请选择用户" readonly clearable size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleOpenSingleSelectUser">选择单用户</el-button>
        </el-col>
        <el-col :span="24">
          <el-form-item label="选中的用户">
            {{form.user}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <multi-select-user ref="multiSelectUser" @ok="handleMultiSelectUser" />
    <single-select-user ref="singleSelectUser" @ok="handleSingleSelectUser" />
    <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"));

import multiSelectUser from "../../system/user/multiSelectUser";
import singleSelectUser from "../../system/user/singleSelectUser";
export default {
  components: {multiSelectUser,singleSelectUser},
  data() {
    return {
      form: {
        user:undefined,
        userNickName: undefined,
        users: undefined,
        userNickNames: undefined,
      }
    }
  },
  methods: {
    /**打开单选用户弹窗*/
    handleOpenSingleSelectUser(){
      this.$refs.singleSelectUser.show();
    },
    /**单选完成*/
    handleSingleSelectUser(){
      this.form.user = this.$refs.singleSelectUser.user
      this.form.userNickName = this.form.user?this.form.user.nickName: undefined
    },
    /**打开多选用户弹窗*/
    handleOpenMultiSelectUser(){
      this.$refs.multiSelectUser.show()
    },
    /**多选完成*/
    handleMultiSelectUser(){
      this.form.users =  this.$refs.multiSelectUser.users;
      this.form.userNickNames = this.form.users.map(item => item.nickName).join(",")
      this.$forceUpdate()
    },
    highlightedCode(){
      const code = "<template>\n" +
        "  <div  class=\"app-container\">\n" +
        "    <el-form label-width=\"150px\">\n" +
        "      <el-row :gutter=\"22\">\n" +
        "        <el-col :span=\"12\">\n" +
        "          <el-form-item label=\"选择多用户\">\n" +
        "            <el-input v-model=\"form.userNickNames\" placeholder=\"请选择用户\" readonly clearable size=\"small\"></el-input>\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"12\">\n" +
        "          <el-button type=\"primary\" icon=\"el-icon-search\" size=\"small\" @click=\"handleOpenMultiSelectUser\">选择多用户</el-button>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"选中的用户\">\n" +
        "            {{form.users}}\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"12\">\n" +
        "          <el-form-item label=\"选择单用户\">\n" +
        "            <el-input v-model=\"form.userNickName\" placeholder=\"请选择用户\" readonly clearable size=\"small\"></el-input>\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"12\">\n" +
        "          <el-button type=\"primary\" icon=\"el-icon-search\" size=\"small\" @click=\"handleOpenSingleSelectUser\">选择单用户</el-button>\n" +
        "        </el-col>\n" +
        "        <el-col :span=\"24\">\n" +
        "          <el-form-item label=\"选中的用户\">\n" +
        "            {{form.user}}\n" +
        "          </el-form-item>\n" +
        "        </el-col>\n" +
        "      </el-row>\n" +
        "    </el-form>\n" +
        "    <multi-select-user ref=\"multiSelectUser\" @ok=\"handleMultiSelectUser\" />\n" +
        "    <single-select-user ref=\"singleSelectUser\" @ok=\"handleSingleSelectUser\" />\n" +
        "  </div>\n" +
        "</template>\n" +
        "<script>\n" +
        "import multiSelectUser from \"../../system/user/multiSelectUser\";\n" +
        "import singleSelectUser from \"../../system/user/singleSelectUser\";\n" +
        "export default {\n" +
        "  components: {multiSelectUser,singleSelectUser},\n" +
        "  data() {\n" +
        "    return {\n" +
        "      form: {\n" +
        "        user:undefined,\n" +
        "        userNickName: undefined,\n" +
        "        users: undefined,\n" +
        "        userNickNames: undefined,\n" +
        "      }\n" +
        "    }\n" +
        "  },\n" +
        "  methods: {\n" +
        "    /**打开单选用户弹窗*/\n" +
        "    handleOpenSingleSelectUser(){\n" +
        "      this.$refs.singleSelectUser.show();\n" +
        "    },\n" +
        "    /**单选完成*/\n" +
        "    handleSingleSelectUser(){\n" +
        "      this.form.user = this.$refs.singleSelectUser.user\n" +
        "      this.form.userNickName = this.form.user?this.form.user.nickName: undefined\n" +
        "      this.$forceUpdate()\n" +
        "    },\n" +
        "    /**打开多选用户弹窗*/\n" +
        "    handleOpenMultiSelectUser(){\n" +
        "      this.$refs.multiSelectUser.show()\n" +
        "    },\n" +
        "    /**多选完成*/\n" +
        "    handleMultiSelectUser(){\n" +
        "      this.form.users =  this.$refs.multiSelectUser.users;\n" +
        "      this.form.userNickNames = this.form.users.map(item => item.nickName).join(\",\")\n" +
        "    }\n" +
        "  }\n" +
        "}\n" +
        "<\/script>\n"
      const result = hljs.highlight("vue", code || "", true);
      return result.value || '&nbsp;';
    }
  }
}

</script>

