import {NButton, NDataTable, NFormItem, NInput, NSelect, NSpace, useDialog, useMessage} from 'naive-ui'
import {defineComponent, onMounted, PropType, reactive, ref} from 'vue'
import {musicSheetApplicationOwnerList} from '../../api'
import SaveForm from "@components/save-form";
import Pagination from "@components/pagination";
import {sysApplicationPage} from "@views/menu-manage/api";
import {clientType} from "@/utils/constant";
import {getMapValueByKey} from "@/utils/objectUtil";

export default defineComponent({
  name: 'musicSheetOwnerDialog',
  props: {
    data: {
      type: Object as PropType<any>,
      default: () => {
      }
    },
    sourceType: {
      type: String,
      default: null
    }

  },
  emits: ['close', 'getList', "choseMusicSheetOwnerData"],
  setup(props, {slots, attrs, emit}) {
    const forms = reactive({})
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        applicationId: null,
        name: null,
        sourceType: null as any,
      },
      dataList: [],
      appData: [], // 适用项目行数据
    })

    const btnLoading = ref(false)
    const formsRef = ref()
    const message = useMessage()
    const dialog = useDialog()
    const saveForm = ref()

    // app列表
    const initUseAppList = async () => {
      try {
        const {data} = await sysApplicationPage({page: 1, rows: 999})
        const tempList = data.rows || []
        tempList.forEach((item: any) => {
          item.label = item.appName
          item.value = item.id
        })

        if (tempList.length > 0) {
          state.searchForm.applicationId = tempList[0].value
        } else {
          message.warning("获取应用列表失败")
        }
        state.appData = tempList
      } catch {
      }
    }

    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }
    const onSearch = () => {
      saveForm.value?.submit()
    }
    const onBtnReset = () => {
      saveForm.value?.reset()
    }
    const getList = async () => {
      try {
        const applicationId = state.searchForm.applicationId;
        if (!applicationId) {
          message.warning("获取应用列表失败");
        }
        state.loading = true
        state.searchForm.sourceType = props.sourceType
        const {data} = await musicSheetApplicationOwnerList({...state.pagination, ...state.searchForm})
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
      }
      state.loading = false
    }

    onMounted(async () => {
      initUseAppList()
      getList()
    })
    const columns = (): any => {
      return [
        {
          title: '人员名称',
          key: 'userName'
        },
        {
          title: '机构',
          key: 'organizationRole'
        },
        {
          title: '客户端',
          key: 'clientType',
          render(row: any) {
            return getMapValueByKey(row.clientType, new Map(Object.entries(clientType)));
          }
        },
        {
          title: '操作',
          key: 'operation',
          fixed: 'right',
          render(row: any) {
            return (
                <NSpace>
                  <NButton
                      type="primary"
                      size="small"
                      text
                      onClick={() => {
                        const choseMusicSheetOwnerData = {
                          ...row,
                          applicationId: state.searchForm.applicationId
                        }
                        emit("choseMusicSheetOwnerData", choseMusicSheetOwnerData)
                        emit('close')
                      }}
                  >
                    选择
                  </NButton>
                </NSpace>
            )
          }
        }
      ]
    }

    return () => (
        <div class="system-menu-container">
          <SaveForm
              ref={saveForm}
              model={state.searchForm}
              onSubmit={onSubmit}
              saveKey="musicSheetOwnerDialog"
              onSetModel={(val: any) => (state.searchForm = val)}
          >
            <NFormItem label="应用" path="applicationId" size="small">
              <NSelect
                  placeholder="请选择适用项目"
                  v-model:value={state.searchForm.applicationId}
                  options={state.appData}
              />
            </NFormItem>
            <NFormItem label="所属人" path="userName" size="small">
              <NInput
                  placeholder="请选择所属人"
                  v-model:value={state.searchForm.name}
                  clearable
              />
            </NFormItem>
            <NFormItem size="small">
              <NSpace>
                <NButton type="primary" onClick={onSearch}>
                  搜索
                </NButton>
              </NSpace>
            </NFormItem>
          </SaveForm>
          <div class={['section-container']}>
            <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="musicSheetOwnerDialog"
                pageSlot={5}
            ></Pagination>
          </div>
        </div>
    )
  }
})
