import {defineComponent, onMounted, reactive, ref} from "vue";
import SaveForm from "@components/save-form";
import {NButton, NDataTable, NDatePicker, NDescriptions, NDescriptionsItem, NFormItem, NImage, NInput, NModal, NSelect, NSpace} from "naive-ui";
import Pagination from "@components/pagination";
import TheTooltip from "@components/TheTooltip";
import AddMusic from "@views/music-library/project-music-sheet/module/jmedu/addMusic";

export default defineComponent({
  name: 'project-music-sheet-jmedu',

  setup() {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: null,
        subjectType: null,
        musicSubject: null,
        status: null
      },
      subjectList: [],
      showAdd: false
    })

    onMounted(() => {
    })

    const saveForm = ref()

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

    const onSubmit = () => {

    }

    const columns = (): any => {
      return [
        {
          title: '曲目信息',
          key: 'id',
          render: (row: any) => (
              <>
                <NDescriptions labelPlacement="left" column={1}>
                  <NDescriptionsItem label="曲目名称">
                    <TheTooltip content={row.musicSheetName}/>{' '}
                  </NDescriptionsItem>
                  <NDescriptionsItem label="曲目编号">{row.id}</NDescriptionsItem>
                </NDescriptions>
              </>
          )
        },
        {
          title: '封面图',
          key: 'titleImg',
          render(row: any) {
            return <NImage width={60} height={60} src={row.titleImg}/>
          }
        },
        {
          title: '曲目来源',
          key: 'musicSheetCategoriesName',
          render: (row: any) => (
              <>
                <NDescriptions labelPlacement="left" column={1}>
                  <NDescriptionsItem label="曲目来源">
                    <TheTooltip content={row.musicSheetCategoriesName}/>{' '}
                  </NDescriptionsItem>
                  <NDescriptionsItem label="所属人">
                    {row.accompanimentType === 'HOMEMODE' ? '自制伴奏' : '普通伴奏'}
                  </NDescriptionsItem>
                </NDescriptions>
              </>
          )
        },
        {
          title: '曲目类型',
          key: 'musicSheetCategoriesName'
        },
        {
          title: '可用声部',
          key: 'musicSheetCategoriesName'
        },
        {
          title: '分类',
          key: 'musicSheetCategoriesName'
        },
        {
          title: '是否收费',
          key: 'musicSheetCategoriesName'
        },
        {
          title: '上传人',
          key: 'musicSheetCategoriesName'
        },
        {
          title: '上传时间',
          key: 'musicSheetCategoriesName'
        },
        {
          title: '状态',
          key: 'musicSheetCategoriesName'
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          render(row: any) {
            return (
                <NSpace>
                  <NButton
                      type="primary"
                      size="small"
                      text
                      //v-auth="musicSheet/status1612431726029942786"
                      // onClick={() => onChangeStatus(row)}
                  >
                    {row.status ? '停用' : '启用'}
                  </NButton>
                  <NButton
                      type="primary"
                      size="small"
                      text
                      //v-auth="musicSheet/update1602302618558099458"
                      onClick={() => {
                        // state.visiableMusic = true
                        // state.musicOperation = 'edit'
                        // state.musicData = row
                      }}
                  >
                    修改
                  </NButton>
                </NSpace>
            )
          }
        }
      ]
    }

    return () => {
      return (
          <div class="system-menu-container">
            <SaveForm
                ref={saveForm}
                model={state.searchForm}
                onSubmit={onSubmit}
                saveKey="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="subjectType">
                <NSelect
                    placeholder="请选择曲目类型"
                    v-model:value={state.searchForm.subjectType}
                    options={
                      [
                        {
                          label: '独奏',
                          value: '1'
                        },
                        {
                          label: '合奏',
                          value: '2'
                        }
                      ]
                    }
                    clearable
                />
              </NFormItem>
              <NFormItem label="伴奏类型" path="musicSubject">
                <NSelect
                />
              </NFormItem>
              <NFormItem label="声部" path="musicSubject">
                <NSelect
                    placeholder="请选择声部"
                    v-model:value={state.searchForm.musicSubject}
                    options={state.subjectList}
                    clearable
                />
              </NFormItem>
              <NFormItem label="状态" path="status">
                <NSelect
                    v-model={[state.searchForm.status, 'value']}
                    placeholder="请选择状态"
                    clearable
                    options={
                      [
                        {
                          label: '启用',
                          value: true
                        },
                        {
                          label: '停用',
                          value: false
                        }
                      ] as any
                    }
                />
              </NFormItem>
              <NFormItem label="曲目来源" path="authorFrom">
                <NSelect
                    placeholder="请选择曲目来源"
                    // v-model:value={state.searchForm.authorFrom}
                    options={
                      [
                        {
                          label: '平台',
                          value: 'PLATFORM'
                        },
                        {
                          label: '机构',
                          value: 'TENANT'
                        },
                        {
                          label: '个人',
                          value: 'SELF'
                        }
                      ] as any
                    }
                    clearable
                />
              </NFormItem>

              <NFormItem label="曲目类型" path="authorFrom">
                <NSelect
                    placeholder="请选择收费类型"
                    // v-model:value={state.searchForm.authorFrom}
                    options={
                      [
                        {
                          label: '独奏',
                          value: 'PLATFORM'
                        },
                        {
                          label: '合奏',
                          value: 'TENANT'
                        }
                      ] as any
                    }
                    clearable
                />
              </NFormItem>

              <NFormItem label="所属人" path="authorFrom">
                <NInput></NInput>
              </NFormItem>
              <NFormItem label="曲目分类" path="authorFrom">
                <NSelect></NSelect>
              </NFormItem>
              <NFormItem label="上传时间" path="authorFrom">
                <NDatePicker
                    // v-model:value={state.searchForm.times}
                    type="daterange"
                    clearable
                    value-format="yyyy.MM.dd"
                    startPlaceholder="开始时间"
                    endPlaceholder="结束时间"
                />
              </NFormItem>
              <NFormItem>
                <NSpace>
                  <NButton type="primary" onClick={onSearch}>
                    搜索
                  </NButton>
                  <NButton type="default" onClick={onBtnReset}>
                    重置
                  </NButton>
                </NSpace>
              </NFormItem>
            </SaveForm>

            <div class={['section-container']}>
              <NSpace style={{paddingBottom: '12px'}}>
                <NButton
                    type="primary"
                    //v-auth="musicSheet/save1602302550719426561"
                    onClick={() => {
                      state.showAdd = true
                    }}
                >
                  新增
                </NButton>
                <NButton
                    //v-auth="musicSheet/save1602302550719426561"
                    onClick={() => {
                      // state.musicOperation = 'unable'
                      // state.musicData = {}
                    }}
                >
                  批量禁用
                </NButton>
                <NButton
                    //v-auth="musicSheet/save1602302550719426561"
                    onClick={() => {
                      // state.musicOperation = 'enable'
                      // state.musicData = {}
                    }}
                >
                  批量启用
                </NButton>
              </NSpace>

              <NDataTable
                  loading={state.loading}
                  columns={columns()}
                  // 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="music-list"
              ></Pagination>
            </div>

            <NModal
                v-model:show={state.showAdd}
                preset="dialog"
                showIcon={false}
                title={'添加曲目'}
                style={{width: '1200px',height: '800px'}}
            >
              <AddMusic/>
            </NModal>
          </div>
      )
    }
  }
})