<template>
  <el-row>
    <el-row>
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <search-white-board :show-more="true" @search="list">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2" :offset="1"><label class="search-label">菜单名</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.name" placeholder="请输入菜单名" clearable @keyup.enter.native="list" />
              </el-col>
            </el-row>
          </div>

          <div slot="more">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">是否删除</label></el-col>
              <el-col :span="5" style="text-align: left;">
                <el-switch v-model="searchForm.isDel" active-color="#13ce66" inactive-color="#ff4949" @change="list" />
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row>
          <el-col :span="2" :offset="22" style="text-align: right;">
            <el-button icon="el-icon-plus" type="success" plain @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>

        <el-row style="padding: 10px 0px;">
          <el-table :data="tableData" style="width: 100%;" row-key="id" lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" highlight-current-row stripe>
            <el-table-column prop="name" label="菜单名称" show-overflow-tooltip />
            <el-table-column prop="icon" label="图标">
              <template slot-scope="scope">
                <i :class="scope.row.icon" />
              </template>
            </el-table-column>
            <el-table-column prop="componentPath" label="组件路径" show-overflow-tooltip />
            <el-table-column prop="permission" label="权限字符串" show-overflow-tooltip />
            <el-table-column label="显示" width="50">
              <template slot-scope="scope">
                <span>{{ scope.row.hidden === true ? '否': '是' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="缓存" width="50">
              <template slot-scope="scope">
                <span>{{ scope.row.cache === true ? '是': '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="外链" width="50">
              <template slot-scope="scope">
                <span>{{ scope.row.link === true ? '是': '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
            <el-table-column label="更新时间" width="135">
              <template slot-scope="scope">
                <el-row>{{ scope.row.updateByName }}</el-row>
                <el-row>{{ scope.row.updateAt }}</el-row>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button v-if="!scope.row.isDel" type="danger" plain @click="handleIsDel(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row>
          <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="total" small @size-change="changeSizeChange" @current-change="changeCurrentChange" />
        </el-row>
      </white-board>
    </el-row>

    <edit-resource-dialog :visible="dialogVisible" :dialog-title="dialogTitle" :form="form" @cancelDialog="cancelDialog" @refresh="list" />
  </el-row>
</template>

<script>
import resourceApi from '@/api/platform/resourceApi'
import EditResourceDialog from '@/views/platform/system/resource/editMenuDialog'

export default {
  name: 'ResourceIndex',
  components: {
    'edit-resource-dialog': EditResourceDialog
  },
  data() {
    return {
      searchForm: {
        name: '',
        isDel: false,
        page: 1,
        size: 50
      },
      total: 0,
      tableData: [],
      dialogTitle: '',
      dialogVisible: false,
      form: {
        id: '',
        name: '',
        parentId: '',
        componentName: '',
        sort: 0,
        componentPath: '',
        path: '',
        resourceType: '',
        permission: '',
        icon: '',
        cache: false,
        hidden: false,
        link: false,
        remarks: ''
      }
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    cancelDialog(visible) {
      this.dialogVisible = visible
    },
    handleAdd() {
      this.form = {
        id: '',
        name: '',
        parentId: '',
        componentName: '',
        sort: 0,
        componentPath: '',
        path: '',
        resourceType: '1',
        permission: '',
        icon: '',
        cache: false,
        hidden: false,
        link: false,
        remarks: ''
      }
      this.isTop = '1'
      this.dialogTitle = '新增'
      this.dialogVisible = true
    },
    handleEdit(index, row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogTitle = '编辑'
      this.dialogVisible = true
    },
    handleIsDel(index, row) {
      this.$confirm('确定删除吗？如果存在下级节点则一并删除，此操作不能撤销！', '警告', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        resourceApi.handleIsDel(row.id).then(data => {
          this.list()
        })
      })
    },
    list() {
      this.tableData = []
      resourceApi.page(this.searchForm).then(data => {
        this.total = data.total
        this.tableData = data.data
      })
    },
    load(row, treeNode, resolve) {
      const d = {
        parentId: row.id,
        isDel: false
      }
      resourceApi.list(d).then(data => {
        resolve(data)
      })
    },
    changeSizeChange(val) {
      this.searchForm.size = val
      this.list()
    },
    changeCurrentChange(val) {
      this.searchForm.page = val
      this.list()
    }
  }
}
</script>

<style scoped>
</style>
