<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="TYPE_NAME" label="类型名称" width="130">
          <template slot-scope="scope">
            <el-tag type="warning" size="small" class="no-border">{{scope.row.TYPE_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否启用服务协议" width="150">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.IS_PACT==1?'success':'danger')">{{(scope.row.IS_PACT==1?'是':'否')}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="对应月提现金额下限" width="250">
          <template slot-scope="scope">
            {{scope.row.MONTH_LIMIT_AMOUNT}}
          </template>
        </el-table-column>
        <el-table-column label="对应年提现金额下限" width="250">
          <template slot-scope="scope">
            {{scope.row.YEAR_LIMIT_AMOUNT}}
          </template>
        </el-table-column>
        <el-table-column label="备注" width="130">
          <template slot-scope="scope">
            {{scope.row.REMARK}}
          </template>
        </el-table-column>
        <el-table-column label="创建人" v-if="false">
          <template slot-scope="scope">
            {{scope.row.CREATE_ADMIN}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" v-if="false">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="更新人">
          <template slot-scope="scope">
            {{scope.row.UPDATE_ADMIN}}
          </template>
        </el-table-column>
        <el-table-column label="更新时间" width="200">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.UPDATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" plain size="small" @click="handleEditShow(scope.row)" v-if="permission.hasPermission(`config/reg-type-edit`)">编辑</el-button>
            <el-button type="danger" plain size="small" @click="delHandle(scope)" v-if="false">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-dropdown size="small" trigger="click" @command="muliDelHandle" v-if="false">
          <el-button type="primary" size="small">
            所选数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="delete">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" size="small" @click="handlePactShow" v-if="permission.hasPermission(`config/pact-edit`)"><i class="el-icon-edit"></i> 维护服务协议</el-button>
        <el-button type="primary" size="small" @click="onAdd" style="display: none;" v-if="false">添加类型</el-button>
      </div>
    </div>
    <el-dialog title="修改注册类型" :visible.sync="dialogEditFormVisible">
      <el-form :model="form" label-width="250px" class="form-dialog" v-loading="dialogEditLoading">
        <el-form-item label="注册类型名称">
          <el-input v-model="form.typeName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="是否启用服务协议">
          <el-select v-model="form.isPact" placeholder="请选择是否启用服务协议">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="达到月提现金额更改应注册类型">
          <el-input v-model="form.monthAmount" type="number"></el-input>
        </el-form-item>
        <el-form-item label="达到年提现金额更改应注册类型">
          <el-input v-model="form.yearAmount" type="number"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="handleEdit">修 改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="维护服务协议" :visible.sync="dialogPactFormVisible">
      <el-form :model="form" label-position="top" v-loading="dialogPactLoading">
        <el-form-item>
          <editor id="contentEditor" :cloud-channel="editorRootUrl" ref="contentEditor" v-model="pactForm.CONTENT"
                  :init="editorOptions"></editor>
        </el-form-item>
        上次更新时间:{{tool.formatDate(pactForm.UPDATED_AT)}}
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPactFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="handlePactEdit">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from './../../utils/tool'
import Editor from 'nix-tinymce'
import {fullEditor, textEditor, EDITOR_ROOT_URL} from '@/utils/editor'
import permission from '@/utils/permission'

export default {
  name: 'reg-type',
  components: {
    'editor': Editor
  },
  created () {

  },
  mounted () {
    this.getData()
  },
  data () {
    return {
      tableData: null,
      loading: true,
      tool: tool,
      permission: permission,
      multipleSelection: [],
      dialogEditLoading: false,
      dialogEditFormVisible: false,
      dialogPactLoading: false,
      dialogPactFormVisible: false,
      form: {
        id: null,
        typeName:'',
        isPact:null,
        monthAmount: null,
        yearAmount: null,
        remark: null,
      },
      editorRootUrl: EDITOR_ROOT_URL,
      editorOptions: textEditor,
      pactForm : {
        CONTENT: '',
        ADM_NAME:'',
        UPDATED_AT:''
      }
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleEditShow(row) {
      this.dialogEditLoading = true
      this.auditId = row.ID
      this.dialogEditFormVisible = true
      let vueObj = this
      network.getData('config/reg-type-get', {id: this.auditId}).then(response => {
        vueObj.dialogEditLoading = false
        vueObj.form = response
      })
    },
    handleEdit() {
      this.dialogEditFormVisible = false
      this.$message({
        message: '正在修改数据',
        type: 'info'
      })
      let path = 'config/reg-type-edit'
      network.postData(path, this.form).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.getData()
      }).catch(response => {
      })
    },
    handlePactShow() {
      this.dialogPactLoading = true
      this.dialogPactFormVisible = true
      let vueObj = this
      network.getData('config/pact-get').then(response => {
        vueObj.dialogPactLoading = false
        vueObj.pactForm = response
      })
    },
    handlePactEdit() {
      this.dialogPactFormVisible = false
      this.$message({
        message: '正在修改数据',
        type: 'info'
      })
      let path = 'config/pact-edit'
      network.postData(path, this.pactForm).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.getData()
      }).catch(response => {
      })
    },
    getData(){
      network.getData('config/reg-type').then(response => {
        this.tableData = response.list
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

</style>