import {
  DataTableColumn,
  NButton,
  NDataTable,
  NModal,
  NSpace,
  useDialog,
  useMessage
} from 'naive-ui'
import { defineComponent, onMounted, reactive } from 'vue'
import { musicSheetCategoriesQueryTree, musicSheetCategoriesRemove } from '@views/music-library/api'
import SaveCategroyDialog from '@views/music-library/music-sheet/modal/save-categroy-dialog'
import { getOwnerName } from '@views/music-library/musicUtil'

type RowData = {
  id: string
  name: string
  coverImg: string
  musicSheetNum: string
  updateTime: string
  enable: boolean
  musicSheetCategoriesList?: RowData[]
}
export default defineComponent({
  emits: ['setTabName', 'jump'],
  name: 'music-category',
  setup(props, { slots, attrs, emit }) {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10
      },
      dataList: [] as any,
      showSaveDialog: false,
      saveMode: 'add',
      saveRowData: null as any
    })

    const dialog = useDialog()
    const message = useMessage()

    const getList = async () => {
      try {
        state.loading = true
        const body = {
          page: state.pagination.page,
          rows: state.pagination.rows
        }
        const { data } = await musicSheetCategoriesQueryTree(body)
        state.dataList = data || []
      } catch (e) {}
      state.loading = false
    }

    onMounted(() => {
      getList()
    })

    const jump = (param: any) => {
      emit('jump' as any, param)
    }
    const columns = (): DataTableColumn[] => {
      return [
        // {
        //   title: '编号',
        //   key: 'id'
        // },
        {
          title: '分类名称',
          key: 'id',
          render(row: any) {
            return row.name + '(' + row.id + ')'
          }
        },
        {
          title: '曲目数量',
          key: 'musicSheetNum',
          render(row: any) {
            return (
              <div>
                <NButton
                    type="primary"
                    size="small"
                    text
                    onClick={() => {
                      jump({
                        tabName: 'MusicList',
                        musicCategoryId: row.id
                      })
                    }}
                >
                  {row.musicSheetNum}
                </NButton>
              </div>
            )
          }
        },
        {
          title: '最后更新时间',
          key: 'updateTime'
        },
        {
          title: '更新人',
          key: 'operatorName'
        },

        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  v-auth="musicSheetCategories/remove1751239397398806530"
                  type="error"
                  size="small"
                  text
                  onClick={() => onRemove(row)}
                >
                  删除
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  onClick={() => {
                    state.saveRowData = row
                    state.saveMode = 'edit'
                    state.showSaveDialog = true
                  }}
                  v-auth="musicSheetCategories/update1751239533856292866"
                >
                  修改
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  onClick={() => {
                    state.saveRowData = row
                    state.showSaveDialog = true
                    state.saveMode = 'add'
                  }}
                  v-auth="musicSheetCategories/save1751239479284203521"
                >
                  添加子分类
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }

    // 删除
    const onRemove = async (row: any) => {
      dialog.warning({
        title: '提示',
        content: "是否确认删除'" + row.name + "'?",
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          const res = await musicSheetCategoriesRemove(row.id)
          if (res.data) {
            onSubmit()
            message.success('删除成功')
          }
        }
      })
    }
    return () => (
      <div class="system-menu-container">
        <div class={['section-container']}>
          <NSpace style={{ paddingBottom: '12px' }}>
            <NButton
              type="primary"
              v-auth="musicSheetCategories/save1751239479284203521"
              onClick={() => {
                state.saveMode = 'add'
                state.showSaveDialog = true
                state.saveRowData = null
              }}
            >
              新增分类
            </NButton>
          </NSpace>

          <NDataTable
            // scrollX={1000}
            loading={state.loading}
            columns={columns()}
            data={state.dataList}
            rowKey={(row: any) => row.id}
            childrenKey="musicSheetCategoriesList"
          ></NDataTable>
        </div>
        <NModal
          v-model:show={state.showSaveDialog}
          preset="dialog"
          showIcon={false}
          title={state.saveRowData ? '修改分类' : '新增分类'}
          style={{ width: '400px' }}
        >
          <SaveCategroyDialog
            onGetList={() => {
              state.showSaveDialog = false
              getList()
            }}
            onClose={() => {
              state.showSaveDialog = false
            }}
            list={state.dataList}
            saveMode={state.saveMode}
            actvieRow={state.saveRowData}
          ></SaveCategroyDialog>
        </NModal>
      </div>
    )
  }
})
