<template>
  <el-dialog
    :title="$t('user.assignUser')"
    v-model="visible"
    :width="800"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-container>
      <el-header>
        <div class="right-panel">
          <div class="right-panel-search">
            <el-input
              v-model="search.Keyword"
              clearable
              :placeholder="$t('pleaseInput')"
              style="min-width: 230px"
            >
              <template #prepend>
                <el-select
                  v-model="search.QueryType"
                  style="min-width: 100px"
                  :placeholder="$t('pleaseChoose')"
                  class="filter-item"
                >
                  <el-option :label="$t('user.userName')" value="0" />
                  <el-option :label="$t('user.phone')" value="3" />
                  <el-option :label="$t('user.email')" value="4" />
                  <el-option :label="$t('user.fullName')" value="5" />
                </el-select>
              </template>
            </el-input>

            <el-button type="primary" icon="el-icon-search" @click="upsearch">{{
              $t("query")
            }}</el-button>
          </div>
        </div>
      </el-header>
      <el-main class="nopadding">
        <scTable
          ref="table"
          :apiObj="apiObj"
          :pageSize="10"
          row-key="UserCode"
          stripe
          :hideDo="true"
        >
          <el-table-column prop="UserCode" :width="34">
            <template #default="scope">
              <el-radio
                v-model="selectCode"
                :label="scope.row.UserCode"
                @click="selectCode = scope.row.UserCode"
                >{{&nbsp;}}</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('user.userName')"
            prop="UserName"
          ></el-table-column>
          <el-table-column
            :label="$t('user.fullName')"
            prop="FullName"
          ></el-table-column>
          <el-table-column
            :label="$t('user.phone')"
            prop="Phone"
          ></el-table-column>
          <el-table-column
            :label="$t('user.email')"
            prop="Email"
          ></el-table-column>
        </scTable>
      </el-main>
    </el-container>

    <template #footer>
      <el-button @click="visible = false">{{
        $t("dialogBox.cancelButtonText")
      }}</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">{{
        $t("dialogBox.saveButtonText")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      selectCode: "",
      apiObj: this.query,
      search: { Keyword: "", QueryType: "0", OrganizationCode: "" },
    };
  },
  methods: {
    open() {
      this.visible = true;
      return this;
    },
    setData(organizationCode, selectCode) {
      this.search.OrganizationCode = organizationCode;
      this.selectCode = selectCode;
    },
    submit() {
      this.$emit("success", this.selectCode);
      this.visible = false;
    },
    async query(params) {
      params.OrganizationCode = this.search.OrganizationCode;
      return await this.$API.wing.list(
        "GetManageOrganizationUserPages",
        params
      );
    },
    //搜索
    upsearch() {
      this.$refs.table.upData(this.search);
    },
    //刷新当前页
    refresh() {
      this.$refs.table.refresh();
    },
  },
};
</script>

<style>
</style>
