<template>
  <GlobalWindow
    v-if="group != null"
    :title="group.name + '资源管理'"
    width="1200px"
    v-model:visible="visible"
    :with-footer="false"
    :wrapper-closable="true"
    :close-on-press-escape="true"
  >
    <TableLayout
      :authorized="$hasPermissions([`cms:resource:query`])"
      :fullscreen="fullscreen"
    >
      <!-- 表格和分页 -->
      <template #table-wrap>
        <SearchTable
          v-loading="isWorking.search"
          :data="tableData.list"
          :with-fullscreen="false"
          @selection-change="handleSelectionChange"
          @refresh="refresh"
        >
          <template
            v-if="$hasAnyPermissions([
            'cms:resource:create',
            'cms:resource:delete'
          ])"
            #toolbar
          >
            <el-button
              v-permissions="['cms:resource:create']"
              type="primary"
              icon="Plus"
              @click="$refs.operaResourceWindow.open('新建资源', group)"
            >新建</el-button>
            <el-button
              v-permissions="['cms:resource:delete']"
              type="danger"
              icon="Delete"
              @click="deleteByIdInBatch"
            >删除</el-button>
          </template>
          <el-table-column type="selection" fixed="left" width="55"/>
          <el-table-column prop="title" label="资源标题" min-width="150px"/>
          <el-table-column prop="sort" label="排序" min-width="80px"/>
          <el-table-column prop="subTitle" label="资源副标题" min-width="150px"/>
          <el-table-column prop="description" label="资源描述" min-width="150px">
            <template #default="{ row }">
              <PopoverCellValue :content="row.description"/>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="资源值" min-width="200px">
            <template #default="{ row }">
              <ResourcePreview :value="row.value" :type="row.valueType" />
            </template>
          </el-table-column>
          <el-table-column prop="valueType" label="资源值类型" min-width="100px">
            <template #default="{ row }">
              {{ $d(`RESOURCE_TYPES.${row.valueType}`) }}
            </template>
          </el-table-column>
          <el-table-column
            v-if="$hasPermissions(['cms:resource:update'])"
            prop="disabled"
            label="是否启用"
            min-width="80px"
          >
            <template #default="{ row }">
              <el-switch
                v-model="row.disabled"
                :active-value="false"
                :inactive-value="true"
                @change="switchDisabled(row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            v-else
            prop="disabled"
            label="状态"
            min-width="80px"
          >
            <template #default="{ row }">
              {{$filters.disabledText(row.disabled)}}
            </template>
          </el-table-column>
          <el-table-column prop="config" label="资源配置" min-width="200px">
            <template #default="{ row }">
              <PopoverCellValue :content="row.description"/>
            </template>
          </el-table-column>
          <el-table-column prop="creatorRealName" label="创建人" min-width="100px"/>
          <el-table-column prop="createdAt" label="创建时间" min-width="185px"/>
          <el-table-column prop="updaterRealName" label="更新人" min-width="100px"/>
          <el-table-column prop="updatedAt" label="更新时间" min-width="185px"/>
          <template
            v-if="$hasAnyPermissions([
            'cms:resource:update',
            'cms:resource:delete'
          ])"
            #buttons="{ row }"
          >
            <el-button
              type="primary"
              icon="EditPen"
              v-permissions="['cms:resource:update']"
              @click="$refs.operaResourceWindow.open(`编辑${row.title}`, group, row)"
              link
            >编辑</el-button>
            <el-button
              type="danger"
              icon="Delete"
              v-permissions="['cms:resource:delete']"
              @click="deleteById(row)"
              link
            >删除</el-button>
          </template>
        </SearchTable>
        <pagination
          :pagination="tableData.pagination"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </template>
      <!-- 新建编辑窗口 -->
      <OperaResourceWindow
        ref="operaResourceWindow"
        @success="refresh"
      />
    </TableLayout>
  </GlobalWindow>
</template>

<script>
import BaseTable from '@/components/base/BaseTable'
import OperaResourceWindow from '@/components/cms/resource/OperaResourceWindow'
import ResourcePreview from '@/components/cms/resource/preview/ResourcePreview'
import { updateStatus } from '@/api/cms/resource'

export default {
  name: 'ResourceManageWindow',
  extends: BaseTable,
  components: { ResourcePreview, OperaResourceWindow },
  data () {
    return {
      visible: false,
      group: null,
      // 搜索
      searchForm: {
        groupId: null
      }
    }
  },
  methods: {
    /**
     * 打开窗口
     *
     * @param group 资源组对象
     */
    open (group) {
      this.group = group
      this.searchForm.groupId = group.id
      this.visible = true
      this.search()
    },
    /**
     * 启用/禁用
     *
     * @param row 行对象
     */
    switchDisabled (row) {
      const newValue = row.disabled
      row.disabled = !row.disabled
      // 开启
      if (!newValue) {
        this.__updateStatus(row, newValue)
        return
      }
      // 禁用
      this.$dialog.disableConfirm(`确认禁用 ${row.title} 资源吗？`)
        .then(() => {
          this.__updateStatus(row, newValue)
        })
        .catch(() => {
        })
    },
    /**
     * 修改状态
     *
     * @param row 行对象
     * @param newValue 新值
     * @private
     */
    __updateStatus (row, newValue) {
      updateStatus({
        id: row.id,
        disabled: newValue
      })
        .then(() => {
          row.disabled = newValue
          this.$tip.apiSuccess('修改成功')
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
    }
  },
  async created () {
    this.config({
      module: '资源',
      api: await import('@/api/cms/resource')
    })
  }
}
</script>
