<template>
  <el-dialog title="选择口令" :visible.sync="show" width="40%" :before-close="close">
    <div v-loading="loading">
      <el-input v-model="searchName" class="w200" placeholder="请输入口令" size="medium" clearable @change="klflCodeList"><i slot="prefix" class="el-input__icon el-icon-search" @click="klflCodeList"></i></el-input>
      <el-table tooltipEffect="light" :data="tableList" class="pt10" style="width:100%" height="300">
        <el-table-column align="left" label="口令名称">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.row">{{ scope.row.gameCode }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column align="left" label="口令个数" prop="codeStock"></el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="submit">保 存</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { klflCodeList } from '@/service/api/gameApi.js';
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.klflCodeList();
      }
    }
  },
  data() {
    return {
      loading: false,
      searchName: '',
      tableList: [],
      radio: {}
    };
  },
  methods: {
    close() {
      this.$emit('update:show', false);
    },
    async klflCodeList() {
      this.loading = true;
      let res = await klflCodeList({ gameActivityId: this.$route.params.id || this.id, minStock: '', searchName: this.searchName });
      this.tableList = res.result;
      this.loading = false;
    },
    submit() {
      this.$emit('selectedCode', this.radio);
      this.close();
      this.radio = {};
    }
  }
};
</script>
