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";

type RowData = {
  id: string
  name: string
  coverImg: string
  musicSheetNum: string
  updateTime: string
  enable: boolean
  musicSheetCategoriesList?: RowData[]
}
export default defineComponent({
  emits: ['setTabName'],
  name: 'music-category',
  setup() {
    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 columns = (): DataTableColumn[] => {
      return [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '分类名称',
          key: 'name'
        },
        {
          title: '曲目数量',
          key: 'musicSheetNum'
        },
        {
          title: '最后更新时间',
          key: 'updateTime'
        },
        {
          title: '更新人',
          key: 'operatorName'
        },

        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          render(row: any) {
            return (
                <NSpace>
                  <NButton
                      //v-auth="musicSheetCategories/switching1608067671668359169"
                      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/update1608067835686617090"
                  >
                    修改
                  </NButton>
                  <NButton
                      type="primary"
                      size="small"
                      text
                      onClick={() => {
                        state.saveRowData = row
                        state.showSaveDialog = true
                        state.saveMode = 'add'
                      }}
                      //v-auth="musicSheetCategories/save1608067543331045378"
                  >
                    添加子分类
                  </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/save1608067543331045378"
                  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: '550px'}}
          >
            <SaveCategroyDialog
                onGetList={() => {
                  state.showSaveDialog = false
                  getList()
                }}
                onClose={() => {
                  state.showSaveDialog = false
                }}
                list={state.dataList}
                saveMode={state.saveMode}
                actvieRow={state.saveRowData}
            ></SaveCategroyDialog>
          </NModal>
        </div>
    )
  }
})
