<template>
  <div class="app-container">
    <el-row style="margin-bottom: 24px;">
      <el-col :span="12" :offset="2">
        <el-button
            type="primary"
            v-loading="loading"
            @click="saveVal"
        >
          保存
        </el-button>
        <el-button @click="onCancel">
          取消
        </el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="2">
        <el-tree
            :data="typeOptions"
            accordion
            node-key="id"
            ref="tree"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span class="action">
                <a v-if="node.level === 1"
                    @click="append(data)">
                 增加
                </a>
                <a v-if="node.level !== 1 && node.level !== 3"
                    @click="edit(node, data)">
                修改
                </a>
                <a v-if="node.level !== 1"
                    @click="remove(node, data)">
                  删除
                </a>
              </span>
            </span>
          </template>
        </el-tree>
      </el-col>
    </el-row>
    <el-dialog
        :visible.sync="dialogVisible"
        :title="dialogType==='edit'?'编辑权限':'添加权限'"
    >
      <el-form
          :model="record"
          ref="modalForm"
          :rules="modalRules"
          label-width="80px"
          label-position="left"
      >
        <el-form-item label="权限id" prop="id">
          <el-input
              v-model="record.id"
              placeholder="权限id"
              clearable
          />
        </el-form-item>
        <el-form-item label="权限名" prop="label">
          <el-input
              v-model="record.label"
              placeholder="权限名"
              clearable
          />
        </el-form-item>
        <el-form-item label="操作名" prop="actions">
          <el-select
              v-model="record.actions"
              multiple
              filterable
              allow-create
              default-first-option
              style="width: 100%"
              placeholder="请选择或输入操作">
            <el-option
                v-for="item in actions"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
              type="danger"
              @click="closeModal"
          >
           取消
          </el-button>
          <el-button
              type="primary"
              @click="savePermission"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { getGames, IGameData } from '@/api/game'
import Sticky from '@/components/Sticky/index.vue'
import {
  getShopGameInfo,
  getShops,
  saveShopGameInfo,
  updateShopQtypes
} from '@/api/shop'
import { getAllCategory } from '@/api/question'
import { getPermissions, savePermission } from '@/api/permissions'
import { Form } from 'element-ui'

@Component({
  name: 'PermissionSetting',
  components: {
    Sticky
  },
  filters: {
    parseGameType: (type: number) => {
      return type === 0 ? '微信小游戏' : '网页版'
    }
  }
})
export default class extends Vue {
  private loading = true
  private shop = ''
  private dialogType = 'new'
  private dialogVisible = false
  private record = {actions: []}
  private actions = [
    'read', 'edit', 'delete'
  ]


  private typeSelected = []
  private typeOptions: {id: string, label: string, children?: any[]}[] = []
  private initAdmin() {
    return {
      id: '',
      label: '',
      actions: []
    }
  }
  private modalRules = {
    id: [{ required: true, message: '请输入权限id', trigger: 'blur' },
      { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
      {
        required: true,
        pattern: /^[a-zA-Z]+$/,
        message: '权限只支持英文字母',
        trigger: 'blur'
      }],

    label: [{ required: true, message: '请输入权限名', trigger: 'blur' },
      { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },
      {
        required: true,
        pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
        message: '权限名不支持特殊字符',
        trigger: 'blur'
      }],

  }
  async created() {
    await this.getRemoteCategory()
    this.loading = false
  }


  private async onCancel() {
    try {
      await this.$confirm('确认不保存当前信息?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      this.$store.dispatch('delView', this.$route)
      this.$router.go(-1)
    } catch (err) {

    }
  }

  private append(data) {
    this.record = this.initAdmin()
    this.dialogType = 'new'
    this.dialogVisible = true
    this.record.actions = this.actions
    this.record.parent = data
  }
  private edit(node, data) {
    console.log(data)
    this.record = this.initAdmin()
    this.record.idx = node.parent.data.children.indexOf(data)
    this.record.actions = data.children.map(o=>o.label)
    this.record.parent = node.parent.data
    this.dialogType = 'edit'
    this.dialogVisible = true
    this.record.id = data.id
    this.record.label = data.label
  }
  private async remove(node, data) {
    const parent = node.parent.data;
    const children = parent.children || parent.data;
    const index = children.findIndex(d => d.id === data.id);
    console.log(node, data)
    try {
      await this.$confirm('确认删除此权限?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      children.splice(index, 1);
    } catch(err) {

    }

  }
  private async saveVal() {
    try {
      let records = []
      for (let data of this.typeOptions[0].children) {
        records.push({
          _id: data.id,
          name: data.label,
          actions: data.children.map(o => o.label)
        })
      }
      await savePermission({datas: records})
      console.log(records)
      this.$notify({
        title: 'Success',
        message: '更新权限列表成功',
        type: 'success',
        duration: 2000
      })
    } catch (err) {
      console.log('save permission error', err)
    }
  }

  private async getRemoteCategory() {
    const { data } = await getPermissions()

    this.typeOptions.push({
      id: 'root',
      label: 'Root',
      children: data
    })
  }
  private closeModal() {
    this.dialogVisible = false
    this.$refs.modalForm.clearValidate()
  }
  private async savePermission() {
    const form = <Form>this.$refs.modalForm
    try {
      await form.validate()
      const subArr = []
      for (const s of this.record.actions) {
        subArr.push({
          id: `${this.record.id}:${s}`,
          label: s
        })
      }
      let data = {
        id: this.record.id,
        label: this.record.label,
        children: subArr
      }
      if (this.dialogType == 'new') {
        this.record.parent.children.push(data)
      } else {
        this.record.parent.children.splice(this.record.idx, 1, data)
      }

      this.dialogVisible = false
      this.$refs.modalForm.clearValidate()
    } catch (err) {

    }


  }
}
</script>

<style lang="scss" scoped>
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottom span{
  font-size: 13px;
  color: #999;
}

.button {
  padding: 0;
  min-height: auto;
  float: right;
}

.image {
  width: 100%;
  display: block;
}
.one-block{
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: .2s;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

}
.custom-tree-node .action{
  color: #409eff;
}

</style>
