<template>
  <el-dialog
      title="凭证管理"
      :visible.sync="editor.showTokenManager"
      width="50%"
      custom-class="token-manager-dialog"
  >

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="code" label="令牌" width="300">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="status" label="启用">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="updateToken(scope.row)"
                     active-color="#13ce66"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180">
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" @blur="updateToken(scope.row)"></el-input>
        </template>
      </el-table-column>
    </el-table>

  </el-dialog>
</template>

<script>
import {mapState} from "vuex";
import http from '../../../api/fastposter'

export default {
  name: "FpTokenManager",
  data() {
    return {
      list: []
    }
  },
  watch: {
    'editor.showTokenManager': {
      handler(v) {
        if (v) {
          this.query()
        }
      }
    }
  },
  computed: {
    ...mapState({
      'editor': state => state.editor
    })
  },
  methods: {
    query() {
      http.queryTokenList().then(r => {
        if (r.code === 0) {
          this.list = r.data.list
        }
      });
    },
    updateToken(row) {
      http.updateToken(row)
    }
  }
}
</script>

<style>
.token-manager-dialog {
  height: 50%;
}
</style>
