import {defineComponent, reactive, onMounted} from 'vue'
import {useUserStore} from '@/store/modules/user'
import styles from "@views/music-library/music-sheet/modal/index.module.less";
import {ref} from 'vue';
import {NButton, NCheckbox, NCheckboxGroup, NForm, NFormItem, NGrid, NInput, NInputNumber, NSelect, NSpace, NTab, NTabPane, NTabs} from "naive-ui";
import {setTabsCaches} from "@/hooks/use-async";
import {useRoute} from "vue-router";

export default defineComponent({
  name: 'musicPreView',
  props: {
    item: {
      type: Object,
      default: () => {
      }
    },
    rowData: {
      type: Object,
      default: () => {
      }
    }
  },
  setup(props, {emit}) {
    const state = reactive({
      tabName: null as any,
      selectApp: [] as any, //选择的APP
      showTabMec: true,
      showTabJmedu: true,


    })

    onMounted(() => {
      // getTagList()
      console.log(props.rowData)
    })

    const userStore = useUserStore()
    const token = userStore.getToken
    const forms = reactive({})
    const formsRef = ref()
    const route = useRoute()
    const setTabs = (val: any) => {
      setTabsCaches(val, 'tabName', route)
    }

    function onSubmit() {

    }

    function changeSelectapp(apps: string) {
      apps.split(',').forEach(app => {

      })
    }


    return () => (
        <div>
          <NForm
              class={styles.formContainer}
              model={forms}
              ref={formsRef}
              label-placement="left"
              label-width="85"
          >
            <NFormItem
                label="适用应用:"
                path="audioType"
                rule={[
                  {
                    required: true,
                    message: '请选择适用应用'
                  }
                ]}
            >
              <NCheckboxGroup
                  onUpdateValue={(value) => {
                    state.selectApp = value;
                    if (!state.tabName) {
                      // 没有值，将第一个作为选中对象
                      state.tabName = value.toString()
                    }
                  }}
              >
                <NCheckbox value="MEC">管乐迷</NCheckbox>
                <NCheckbox value="JMEDU">管乐团</NCheckbox>
                <NCheckbox value="COOLESHOW">酷乐秀</NCheckbox>
                <NCheckbox value="COOLESHOW_EDU">音乐数字课堂</NCheckbox>
              </NCheckboxGroup>
            </NFormItem>
            <NTabs
                type="line"
                v-model:value={state.tabName}
                onUpdate:value={(val: any) => setTabs(val)}
            >
              {state.selectApp.includes('MEC') &&
                  <NTabPane
                      tab="管乐迷"
                      name="MEC"
                  >
                      <NFormItem
                          label="曲目分类"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="是否收费"
                          path="musicSheetType"
                      >
                          <NSelect
                              clearable
                              options={
                                [
                                  {
                                    label: '是',
                                    value: 1
                                  },
                                  {
                                    label: '否',
                                    value: 0
                                  }
                                ] as any
                              }
                          >
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="排序值"
                          path="musicSheetType"
                      >
                          <NInput></NInput>
                      </NFormItem>
                  </NTabPane>
              }
              {state.selectApp.includes('JMEDU') &&
                  <NTabPane
                      tab="管乐团"
                      name="JMEDU"
                  >
                      <NFormItem
                          label="分类"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="排序值"
                          path="musicSheetType"
                      >
                          <NInput></NInput>
                      </NFormItem>
                  </NTabPane>
              }
              {state.selectApp.includes('COOLESHOW') &&
                  <NTabPane
                      tab="酷乐秀"
                      name="COOLESHOW"
                  >
                      <NFormItem
                          label="可用途径"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="曲目标签"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="是否收费"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="曲目价格"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="是否置顶"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="精品乐谱"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="排序值"
                          path="musicSheetType"
                      >
                          <NInput></NInput>
                      </NFormItem>
                  </NTabPane>
              }
              {state.selectApp.includes('COOLESHOW_EDU') &&
                  <NTabPane
                      tab="音乐数字课堂"
                      name="COOLESHOW_EDU"
                  >
                      <NFormItem
                          label="曲目分类"
                          path="musicSheetType"
                      >
                          <NSelect>
                          </NSelect>
                      </NFormItem>
                      <NFormItem
                          label="排序值"
                          path="musicSheetType"
                      >
                          <NInput></NInput>
                      </NFormItem>
                  </NTabPane>
              }
            </NTabs>
          </NForm>
          <NSpace justify="end">
            <NButton type="default" onClick={() => emit('close')}>
              取消
            </NButton>
            <NButton
                type="primary"
                onClick={() => onSubmit()}
                // loading={btnLoading.value}
                // disabled={btnLoading.value}
            >
              确认
            </NButton>
          </NSpace>
        </div>
    )
  }
})
