<template>
  <IxForm :control="formGroup"
      :control-col="{span:18}"
      :label-col="{span:6}"
      class="data-form"
      label-align="end"
      layout="horizontal"
      message-tooltip>
    <IxDivider dashed labelPlacement="start">基本信息</IxDivider>
    <IxRow>
      <IxCol :span="6">
        <IxFormItem :gutter="[0,10]" label="角色编码">
          <IxInput control="roleCode"/>
        </IxFormItem>
      </IxCol>
      <IxCol :span="6">
        <IxFormItem :gutter="[0,10]" label="角色名称">
          <IxInput control="roleName"/>
        </IxFormItem>
      </IxCol>
    </IxRow>
    <IxRow>
      <IxCol :span="12">
        <IxFormItem :control-col="{span:21}" :gutter="[0,10]" :label-col="{span:3}" label="备注">
          <IxInput control="memo"/>
        </IxFormItem>
      </IxCol>
    </IxRow>
    <IxDivider dashed labelPlacement="start">资源权限</IxDivider>
    <IxRow>
      <IxCol :span="8">
        <IxInput v-model:value="keywords" clearable @clear="pageList" @keydown.enter="pageList">
          <template #addonAfter>
            <IxButton icon="search" mode="text" @click="pageList"/>
          </template>
        </IxInput>
      </IxCol>
    </IxRow>
    <IxTable
        v-model:selectedRowKeys="selectedRowKeys"
        :columns="columns"
        :dataSource="sysResourceList"
        :scroll="{height:'30rem'}"
        :spin="tableSpin"
        class="list-table"
        get-key="id">
    </IxTable>
  </IxForm>
</template>

<script lang="ts" setup>
import {
  useFormGroup,
  Validators
} from '@idux/cdk'
import { VKey } from '@idux/cdk/utils'
import { TableColumn } from '@idux/components/table'
import Utils from '@/common/utils'
import RoleApi from '@/pages/sys/role/role-api.ts'

const props = withDefaults(defineProps<{ status?: 'create' | 'view' | 'edit' }>(),
    {
      status: 'create',
    }
)
const sysResourceList = ref<RoleTypes.SysResource[]>()
const tableSpin = ref(false)
const keywords = ref('')
const selectedRowKeys = ref<VKey[]>([])
const columns = computed<TableColumn<RoleTypes.SysResource>[]>(() => [
  {
    type: 'selectable',
    disabled() {
      return props.status === 'view'
    },
    menus: [
      'all',
      'invert',
      'none',
      'pageInvert'
    ]
  },
  {
    type: 'indexable',
    title: '#'
  },
  {
    title: '资源编码',
    dataKey: 'sn',
  },
  {
    title: '备注',
    dataKey: 'memo',
  },
])

const formGroup = useFormGroup<RoleTypes.SysRole>({
  roleCode: [ undefined, Validators.required ],
  roleName: [ undefined, Validators.required ],
  memo: [ undefined ],
  resIds: [ [] ],
})

function pageList() {
  tableSpin.value = true
  RoleApi.listRes(keywords.value)
      .then(res => {
        sysResourceList.value = res.data
      })
      .finally(() => {
        tableSpin.value = false
      })
}

function updateFormStatus() {
  if (props.status === 'view') {
    formGroup.disable()
  } else if (props.status === 'edit') {
    formGroup.enable()
  }
}

watch(() => props.status, updateFormStatus)

defineExpose({
  getValue() {
    if (!formGroup.valid.value) {
      formGroup.markAsDirty()
      return
    }
    const val = formGroup.getValue()
    return Utils.clone<RoleTypes.SysRole>({...val, resIds: selectedRowKeys.value as string[]})
  },
  setValue(data: RoleTypes.SysRole) {
    data = Utils.clone<RoleTypes.SysRole>(data)
    formGroup.setValue(data)
    if (data.resIds != null) {
      selectedRowKeys.value = data.resIds
    }
  },
  reset() {
    formGroup.reset()
    selectedRowKeys.value = []
  }
})

onMounted(() => {
  pageList()
  updateFormStatus()
})

</script>

<style lang="stylus" scoped>
.data-form:deep(.ix-row) {
  margin 1rem 0
}
</style>
