<template>
  <el-row>
    <el-row class="movie-list">
      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>注册管理</span>
          </div>
          <div class="text item">
            <el-form ref="form" :model="accountRegistry" label-width="100px">
              <el-form-item label="开放注册">
                <el-input v-model="accountRegistry.enabled" style="width: 50%; padding-right: 10px" readonly />
                <el-button size="mini" type="info" @click="onSetRegistry()">
                  <span v-if="!accountRegistry.enabled">启用</span>
                  <span v-else>禁用</span>
                </el-button>
              </el-form-item>
              <el-form-item label="图形验证码">
                <el-input v-model="accountRegistry.captchaCode" style="width: 50%; padding-right: 10px" readonly />
              </el-form-item>
              <el-form-item label="短信验证码">
                <el-input v-model="accountRegistry.verifyCode" style="width: 50%; padding-right: 10px" readonly />
              </el-form-item>
              <el-form-item label="启用验证码">
                <el-input v-model="accountRegistry.enableCode" style="width: 50%; padding-right: 10px" readonly />
                <el-button size="mini" type="info" @click="onSetCode()">
                  <span v-if="!accountRegistry.enableCode">启用</span>
                  <span v-else>禁用</span>
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
      <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>会员计划</span>
          </div>
          <div class="text item">
            <el-table
              :data="vipPlanList"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="planId"
                label="ID"
              />
              <el-table-column
                prop="name"
                label="名字"
              />
              <el-table-column
                prop="price"
                label="价格(¥)"
              />
              <el-table-column
                prop="duration"
                label="时长(天)"
              />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
import { userMixin } from 'assets/js/mixin'
import {
  getAccountRegistry,
  getChargeReq, getVipPlan, setAccountCode, setAccountRegistry
} from '@/api/admin'

export default {
  name: 'AdminRegistry',
  mixins: [userMixin],
  data() {
    return {
      chargeReqList: [],
      vipPlanList: [],
      accountRegistry: null
    }
  },
  created() {
    document.title = '注册配置'
    this.getData()
  },
  mounted() {
  },
  methods: {
    getData() {
      this.getAccountRegistryWrapper()
      getVipPlan().then(resp => {
        if (resp.code === 0) {
          this.vipPlanList = resp.data
        }
      })
    },
    getAccountRegistryWrapper() {
      getAccountRegistry().then(resp => {
        if (resp.code === 0) {
          this.accountRegistry = resp.data
        }
      })
    },
    onApprove(row) {
      this.$message.info('同意充值 ' + row)
    },
    onDecline(row) {
      this.$message.info('拒绝充值' + row)
    },
    onSetRegistry() {
      const payload = {}
      payload.enabled = !this.accountRegistry.enabled
      setAccountRegistry(payload).then(resp => {
        if (resp.code === 0) {
          this.getAccountRegistryWrapper()
        } else {
          this.$message.error(resp.msg)
        }
      })
    },
    onSetCode() {
      const payload = {}
      payload.enabled = !this.accountRegistry.enableCode
      setAccountCode(payload).then(resp => {
        if (resp.code === 0) {
          this.getAccountRegistryWrapper()
        } else {
          this.$message.error(resp.msg)
        }
      })
    }
  }
}
</script>

<style>
</style>
