import Pagination from '@/components/pagination'
import SaveForm from '@/components/save-form'
import { musicSheetPage, musicTagPage } from '@/views/content-manage/api'
import { subjectBasicConfigPage } from '@/views/system-manage/api'
import { NButton, NImage, NSpace, NTag, NDataTable, NFormItem, NInput, NSelect } from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { accompanimentTypeArray, audioTypeArray } from '@/utils/searchArray'
import styles from './index.module.less'

export default defineComponent({
  name: 'selectMusicSheet',
  emits: ['select'],
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: null,
        musicTag: null,
        musicSubject: null,
        audioType: null,
        accompanimentType: null,
        status: null,
        topFlag: null
      },
      dataList: [] as any,
      subjectList: [] as any,
      tagList: [] as any,
      visiableMusic: false,
      musicOperation: 'add',
      musicData: {} as any
    })

    const columns = (): any => {
      return [
        {
          title: '曲目名称',
          key: 'id',
          render(row: any) {
            return `${row.musicSheetName}(${row.id})`
          }
        },
        {
          title: '曲目封面',
          key: 'titleImg',
          render(row: any) {
            return <NImage width={35} height={35} src={row.titleImg} />
          }
        },
        {
          title: '分类',
          key: 'musicSheetCategoriesName',
        },
        {
          title: '伴奏类型',
          key: 'accompanimentType',
          render(row: any) {
            return row.accompanimentType === 'HOMEMODE' ? '自制伴奏' : '普通伴奏'
          }
        },
        {
          title: '可用声部',
          key: 'musicSubject',
          render(row: any) {
            return <NTag type="primary">{row.musicSubject}</NTag>
          }
        },
        {
          title: '播放类型',
          key: 'audioType',
          render(row: any) {
            return (
              <>
                {row.audioType === 'MP3' && <NTag type="primary">MP3</NTag>}
                {row.audioType === 'MIDI' && <NTag type="default">MIDI</NTag>}
              </>
            )
          }
        },
        {
          title: '能否转简谱',
          key: 'notation',
          render(row: any) {
            return (
              <NTag type={row.notation ? 'primary' : 'default'}>{row.notation ? '是' : '否'}</NTag>
            )
          }
        },
        // {
        //   title: '排序',
        //   key: 'sortNumber'
        // },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          render(row: any) {
            return (
              <NSpace>
                <NButton type="success" size="small" text onClick={() => emit('select', row)}>
                  添加
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }
    const getList = async () => {
      try {
        state.loading = true
        const { data } = await musicSheetPage({ page: state.pagination.page, rows: state.pagination.rows, ...state.searchForm,status: 1 })
        state.loading = false
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
        state.loading = false
      }
    }

    // 获取标签
    const getTagList = async () => {
      try {
        const { data } = await musicTagPage({ page: 1, rows: 999 })
        const tempList = data.rows || []
        tempList.forEach((item: any) => {
          item.label = item.name
          item.value = item.id
        })
        state.tagList = tempList
      } catch {}
    }

    // 获取声部
    const getSubjectList = async () => {
      try {
        const { data } = await subjectBasicConfigPage({ page: 1, rows: 999 })
        const tempList = data.rows || []
        tempList.forEach((item: any) => {
          item.label = item.subjectName
          item.value = item.subjectId
        })
        state.subjectList = tempList
      } catch {}
    }

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

    const onSearch = () => {
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }

    onMounted(() => {
      getTagList()
      getSubjectList()
      getList()
    })
    return () => (
      <div class={styles.selectMusicSheet}>
        <SaveForm
          ref={saveForm}
          model={state.searchForm}
          onSubmit={onSubmit}
          saveKey="select-music-list"
          onSetModel={(val: any) => (state.searchForm = val)}
        >
          <NFormItem label="关键字" path="keyword">
            <NInput
              placeholder="曲目编号/名称"
              v-model:value={state.searchForm.keyword}
              clearable
            />
          </NFormItem>
          <NFormItem label="标签" path="musicTag">
            <NSelect
              placeholder="请选择标签"
              v-model:value={state.searchForm.musicTag}
              options={state.tagList}
              clearable
            />
          </NFormItem>
          <NFormItem label="声部" path="musicSubject">
            <NSelect
              placeholder="请选择声部"
              v-model:value={state.searchForm.musicSubject}
              options={state.subjectList}
              clearable
            />
          </NFormItem>
          <NFormItem label="播放类型" path="audioType">
            <NSelect
              placeholder="请选择播放类型"
              v-model:value={state.searchForm.audioType}
              options={audioTypeArray}
              clearable
            />
          </NFormItem>
          <NFormItem label="伴奏类型" path="accompanimentType">
            <NSelect
              placeholder="请选择伴奏类型"
              v-model:value={state.searchForm.accompanimentType}
              options={accompanimentTypeArray}
              clearable
            />
          </NFormItem>
          <NFormItem>
            <NSpace>
              <NButton type="primary" onClick={onSearch}>
                搜索
              </NButton>
              <NButton type="default" onClick={onBtnReset}>
                重置
              </NButton>
            </NSpace>
          </NFormItem>
        </SaveForm>
        <NDataTable
          loading={state.loading}
          columns={columns()}
          scrollX={1200}
          data={state.dataList}
        ></NDataTable>
        <Pagination
          v-model:page={state.pagination.page}
          v-model:pageSize={state.pagination.rows}
          v-model:pageTotal={state.pagination.pageTotal}
          onList={getList}
          sync
          saveKey="select-music-list"
        ></Pagination>
      </div>
    )
  }
})
