<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <poly-search :query-type-options="queryTypeOptions" default-key="name" @toQuery="searchQuery" />
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <!-- 新增 -->
      <div style="margin: 0 2px;">
        <el-button
          v-permission="['admin','permissionTemplate:add']"
          class="filter-item"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="add"
        >新增</el-button>
      </div>
      <!-- 导出 -->
      <!--      <div style="display: inline-block;">-->
      <!--        <el-button-->
      <!--          :loading="downloadLoading"-->
      <!--          size="mini"-->
      <!--          class="filter-item"-->
      <!--          type="warning"-->
      <!--          icon="el-icon-download"-->
      <!--          @click="download">导出</el-button>-->
      <!--      </div>-->
    </div>
    <div style="width: 75%;float: left">
      <!--表单组件-->
      <eForm ref="form" :is-add="isAdd" :dict-map="dictMap" />
      <!--表格渲染-->
      <el-table v-loading="loading" :data="data" size="small" highlight-current-row style="width: 100%;" @row-dblclick="edit" @current-change="handleCurrentChange">
        <el-table-column prop="id" label="id" />
        <el-table-column prop="name" label="模板名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="sort" label="顺序" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==='1'" type="success">可用</el-tag>
            <el-tag v-else type="danger">不可用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button v-permission="['admin','permissionTemplate:edit']" size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)" />
            <el-popover
              :ref="scope.row.id"
              v-permission="['admin','permissionTemplate:del']"
              placement="top"
              width="180"
            >
              <p>确定删除本条数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
              </div>
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page="page + 1"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <div class="preTress">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <el-tooltip class="item" effect="dark" content="选择指定模版分配权限" placement="top">
            <span class="role-span">权限分配</span>
          </el-tooltip>
          <el-button
            v-permission="['admin','roles:edit']"
            :disabled="!showButton"
            :loading="apiLoading"
            icon="el-icon-check"
            size="mini"
            style="float: right; padding: 6px 9px"
            type="primary"
            @click="getCheckedTree"
          >保存</el-button>
          <el-button
            v-permission="['admin','roles:edit']"
            :loading="updateLoading"
            icon="el-icon-refresh"
            size="mini"
            style="float: right; padding: 6px 9px;margin-right: 3px"
            type="primary"
            @click="updateTree"
          >更新</el-button>
        </div>
        <premission-tree ref="preTress" :is-show-check-box="showButton" :api-ids="apiIds" />
      </el-card>
    </div>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import initDict from '@/mixins/initDict'
import { getAttrByValueFromDict } from '@/utils/common-util'
import { del, downloadPermissionTemplate, getpremissionById, putPremission, updatePemission } from '@/api/system/permissionTemplate'
import { parseTime, downloadFile } from '@/utils/index'
import eForm from './form'
import premissionTree from './premissionTree'
import polySearch from '@/components/polySearch/index'
export default {
  components: { eForm, premissionTree, polySearch },
  mixins: [initData, initDict],
  data() {
    return {
      delLoading: false,
      polyObject: {},
      queryTypeOptions: [
        { key: 'id', display_name: 'id' },
        { key: 'name', display_name: '名称' },
        { key: 'code', display_name: '标识' },
        { key: 'status', display_name: '状态' }
      ],
      apiLoading: false,
      updateLoading: false,
      showButton: false,
      selectCheckList: [],
      lineId: '',
      apiIds: []
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
      this.getDictMap('')
    })
  },
  methods: {
    parseTime,
    getAttrByValueFromDict,
    getCheckedTree() {
      const arr = this.$refs.preTress.getCheckedNodes()
      this.selectCheckList = arr.filter(item => {
        return typeof item.id === 'number'
      })
      const obj = {
        ptId: this.lineId,
        permissionIds: []
      }
      this.selectCheckList.forEach(item => {
        obj.permissionIds.push(item.id)
      })
      putPremission(obj).then(res => {
        this.$message.success('保存成功')
      })
    },
    updateTree() {
      this.updateLoading = true
      updatePemission().then(res => {
        this.$refs.preTress.getPremission()
        this.updateLoading = false
        this.$notify({
          title: '提示',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
      }).catch(e => {
        console.log(e)
        this.updateLoading = false
      })
    },
    handleCurrentChange(val) {
      this.lineId = ''
      if (val) {
        this.lineId = val.id
        // 清空菜单的选中
        this.$refs.preTress.$refs['preTree'].setCheckedKeys([])
        // 保存当前的角色id
        // 点击后显示按钮
        this.showButton = true
        // 初始化
        this.apiIds = []
        // 菜单数据需要特殊处理
        this.getpremissionById(val.id)
      }
    },
    getpremissionById(id) {
      getpremissionById(id).then(res => {
        res.forEach(data => {
          this.apiIds.push(data)
        })
        this.$refs.preTress.$refs['preTree'].setCheckedKeys(this.apiIds)
      })
    },
    searchQuery(data) {
      this.polyObject = data
    },
    beforeInit() {
      this.showButton = false
      this.url = 'api/permissionTemplate'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort }
      const polyObj = this.polyObject
      const type = polyObj.type
      const value = polyObj.value
      if (type && value) { this.params[type] = value }
      return true
    },
    subDelete(id) {
      this.delLoading = true
      del(id).then(res => {
        this.delLoading = false
        this.$refs[id].doClose()
        this.dleChangePage()
        this.init()
        this.$notify({
          title: '删除成功',
          type: 'success',
          duration: 2500
        })
      }).catch(err => {
        this.delLoading = false
        this.$refs[id].doClose()
        console.log(err.response.data.message)
      })
    },
    add() {
      this.isAdd = true
      this.$refs.form.dialog = true
    },
    edit(data) {
      this.isAdd = false
      const _this = this.$refs.form
      _this.form = {
        originalCode: data.code,
        id: data.id,
        name: data.name,
        code: data.code,
        sort: data.sort,
        status: data.status,
        createTime: data.createTime,
        updateTime: data.updateTime
      }
      _this.dialog = true
    },
    // 导出
    download() {
      this.beforeInit()
      this.downloadLoading = true
      downloadPermissionTemplate(this.params).then(result => {
        downloadFile(result, 'PermissionTemplate列表', 'xlsx')
        this.downloadLoading = false
      }).catch(() => {
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style scoped>
.preTress {
  margin-left: 10px;
  width: 24%;
  float:left;
  height: 700px;
  overflow: scroll;
}
</style>