<template>
  <div class="fullheight view-list">
    <el-page-header @back="back" content="视图列表" style="margin: 24px 0" />
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      :selection="true"
      quick-search-props="name,alias"
      :show-export="false"
      :show-custom-column="false"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
      ref="table"
    >
      <template v-slot:toolbar>
        <el-button
          size="small"
          type="primary"
          @click="edit()"
          v-if="resourceRight.indexOf('3') > -1"
          icon="el-icon-plus"
          >添加</el-button
        >
        &nbsp;
        <ht-delete-button
          :disabled="isDisabled"
          :url="deleteUrl"
          :htTable="$refs.table"
          v-if="resourceRight.indexOf('4') > -1"
          :checkRight="true"
          >删除
        </ht-delete-button>
        &nbsp;
        <!--        <el-button size="small" @click="back" icon="el-icon-back">返回</el-button>-->
      </template>
      <ht-table-column type="index" width="50" align="center" label="序号" />
      <ht-table-column prop="name" label="视图名称" :sortable="true">
        <template slot-scope="scope">
          <el-button v-if="$checkRight(scope.row,'3')" type="text" @click="edit(scope.row.id)">{{
            scope.row.name
          }}</el-button>
          <template v-else>{{ scope.row.name }}</template>
        </template>
      </ht-table-column>
      <ht-table-column prop="alias" label="视图别名" :sortable="true" />
      <ht-table-column prop="sqlAlias" label="sql别名" :sortable="true" />
      <ht-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            class="copy-btn"
            @click="
              handleCommand({
                row: scope.row,
                command: 'preview'
              })
            "
            >预览</el-button
          >
          <el-button
            type="text"
            class="copy-btn"
            @click="handleCommand({row: scope.row, command: 'addToFront'})"
            >发布为应用端菜单</el-button
          >
          <el-button
            type="text"
            class="copy-btn"
            @click="handleCommand({row: scope.row, command: 'addToManage'})"
            >发布为管理端菜单</el-button
          >
          <!-- <el-dropdown
            size="mini"
            split-button
            @command="handleCommand"
            @click="
              handleCommand({
                row: scope.row,
                command: 'preview'
              })
            "
          >
            <span> 预览 </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="{row: scope.row, command: 'addToFront'}"
                >发布为应用端菜单</el-dropdown-item
              >
              <el-dropdown-item
                :command="{row: scope.row, command: 'addToManage'}"
                >发布为管理端菜单</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown> -->
        </template>
      </ht-table-column>
    </ht-table>
    <view-edit
      ref="viewEdit"
      :id="selectedId"
      :sqlAlias="selectedAlias"
      @after-save="afterSave"
    />
    <menus-add
      ref="menusAdd"
      :alias="selectedAlias"
      :sqlAlias="selecrSqlAlias"
      :viewId="selectedId"
    />
  </div>
</template>

<script>
import form from '@/api/form.js'
import {Base64} from 'js-base64'
import {mapState} from 'vuex'
const viewEdit = () => import('@/components/form/customView/ViewEdit.vue')
const menusAdd = () => import('@/components/form/customView/MenusAdd.vue')
export default {
  components: {
    viewEdit,
    menusAdd
  },
  computed: {
    ...mapState({
      currentUser: state => state.login.currentUser
    })
  },
  data() {
    return {
      data: [],
      pageResult: {
        page: 0,
        pageSize: 50,
        total: 0
      },
      alias: '',
      selectedId: '',
      selectedAlias: '',
      selecrSqlAlias: '',
      deleteUrl: window.context.form + '/form/query/queryView/remove',
      selectedList: [],
      isDisabled: true
    }
  },
  watch: {
    selectedList: {
      handler(val) {
        this.isDisabled = val.length < 1 ? true : false
      },
      deep: true
    }
  },
  created(){
      // 获取数据列表的权限
      this.resourceRight = sessionStorage.getItem('ht_view_right_'+this.$route.query.alias) || []
      // 有数据列表的编辑权限。就可以删除视图
      if (this.resourceRight.indexOf('3') > -1) {
        this.resourceRight.push('4')
      }
  },
  methods: {
    rowClick(row, column, event) {
      this.$refs.table.$refs.htTable.toggleRowSelection(row)
    },
    loadData(param, cb) {
      this.$addRightMarkIntoFilter(param)
      form
        .getViewList(param, this.$route.query.alias)
        .then(response => {
          if (response.rows) {
            response.rows.forEach(r => {
              // 当前视图没有权限，则表明不是自己创建的。则使用继承来的数据列表权限
              if (!r.resourceRight || r.resourceRight.length == 0) {
                r.resourceRight = this.resourceRight
              }
            });
          }
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => {
          cb()
        })
    },
    preview(viewId) {
      window.open(
        `${window.context.manage}/querySqlPreview/${viewId}`,
        '_blank'
      )
    },
    edit(id) {
      this.selectedAlias = this.$route.query.alias
      if (id) {
        this.selectedId = id
      } else {
        this.selectedId = ''
      }
      this.$refs.viewEdit.handleOpen()
    },
    back() {
      this.$router.go(-1)
    },
    afterSave() {
      this.$refs.table.load()
    },
    handleCommand(params) {
      switch (params.command) {
        case 'preview':
          this.preview(params.row.id)
          break
        case 'addToFront':
          this.selectedId = params.row.id
          this.selectedAlias = params.row.alias
          this.selecrSqlAlias = params.row.sqlAlias
          this.$refs.menusAdd.showDialog('front', 'addReport')
          break
        case 'addToManage':
          this.selectedId = params.row.id
          this.selectedAlias = params.row.alias
          this.selecrSqlAlias = params.row.sqlAlias
          this.$refs.menusAdd.showDialog('manage', 'addReport')
          break
      }
    },
    handleSelectionChange(selection) {
      this.selectedList = selection
    }
  }
}
</script>

<style lang="scss" scoped>
.view-list {
  padding: 0 24px;
  ::v-deep {
    .ht-table-panel {
      height: calc(100% - 82px);
    }
  }
}
</style>