<template>
  <div class="content-view">
    <Alert type="warning" show-icon style="margin-bottom: 12px">
      仅<strong>平台租户</strong>（is_platform=1）可维护租户列表；普通租户登录后本页仅能看到自身租户信息。
      新增时<strong>租户编码可留空</strong>，留空则由服务端自动生成；填写则使用自定义编码（须唯一）。需在数据库执行迁移脚本创建 <code>sys_tenant</code> 表及默认数据。
    </Alert>
    <div class="table-head-tool">
      <Button type="primary" @click="showAddWarp">新增租户</Button>
    </div>
    <div class="table-body">
      <tables ref="tables" v-model="gridOption.data" :columns="gridOption.columns" />
    </div>
    <editModal ref="editModal" :columns="gridOption.columns" :data="gridOption.editRow" />
  </div>
</template>

<script>
import uiTool from '@/utils/uiTool'
import sysTenantServer from '@/api/system/sysTenantServer'

export default {
  name: 'sys_tenant_page',
  data() {
    return {
      gridOption: {
        editRow: {},
        columns: [
          { title: 'id', key: 'id' },
          { title: '名称', key: 'name', name: 'name', required: true },
          {
            title: '租户编码',
            key: 'code',
            name: 'code',
            placeholder: '留空则保存时自动生成；填写则使用自定义编码（须唯一）'
          },
          { title: '备注', key: 'remark', name: 'remark' },
          {
            title: '状态',
            key: 'status',
            name: 'status',
            com: 'Radio',
            source: [
              { key: 1, value: '启用' },
              { key: 0, value: '停用' }
            ],
            render(h, p) {
              return h('span', p.row.status === 1 ? '启用' : '停用')
            }
          },
          {
            title: '平台租户',
            key: 'is_platform',
            name: 'is_platform',
            com: 'Switch',
            render(h, p) {
              return h('span', Number(p.row.is_platform) === 1 ? '是' : '否')
            }
          },
          {
            title: '操作',
            render: (h, params) => {
              if (params.row.id === 1) {
                return h('span', { style: { color: '#999' } }, '内置租户')
              }
              const btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => this.showEditWarp(params.row)
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => this.delConfirm(params.row)
                }
              ]
              return uiTool.getBtn(h, btns)
            }
          }
        ],
        data: []
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    normalizeTenantRow(row) {
      const r = { ...row }
      r.is_platform = r.is_platform === true || r.is_platform === 1 || r.is_platform === '1' ? 1 : 0
      if (r.code != null && typeof r.code === 'string' && !r.code.trim()) {
        delete r.code
      }
      return r
    },
    async init() {
      const res = await sysTenantServer.list()
      if (res && res.code === 0) {
        this.gridOption.data = res.data || []
      }
    },
    showAddWarp() {
      this.$refs.editModal.addShow(
        { status: 1, is_platform: 0 },
        async (row) => {
          await sysTenantServer.add(this.normalizeTenantRow(row))
          this.$Message.success('新增成功')
          this.init()
        }
      )
    },
    showEditWarp(row) {
      this.$refs.editModal.editShow(row, async (newRow) => {
        await sysTenantServer.edit(this.normalizeTenantRow(newRow))
        this.$Message.success('修改成功')
        this.init()
      })
    },
    delConfirm(row) {
      uiTool.delConfirm(async () => {
        await sysTenantServer.del(row)
        this.$Message.success('删除成功')
        this.init()
      })
    }
  }
}
</script>

<style scoped>
.content-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.table-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
</style>
