import Pagination from '@/components/pagination'
import { NButton, NDataTable, NImage, NModal, NSpace, NTag, useDialog, useMessage } from 'naive-ui'
import { defineComponent, onMounted, reactive } from 'vue'
import { subjectPage, subjectUpdate } from '../api'
import SongOperation from './instrument-operation'

export default defineComponent({
  name: 'instrument-manage',
  setup() {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        keyword: null,
        status: null
      },
      dataList: [] as any,
      visiableSong: false,
      songOperation: 'add',
      songData: {} as any
    })
    const dialog = useDialog()
    const message = useMessage()

    const columns = () => {
      return [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '图片',
          key: 'img',
          render(row: any) {
            return <NImage width={70} src={row.img} />
          }
        },
        {
          title: '所属声部',
          key: 'name'
        },
        {
          title: '乐器名称',
          key: 'name'
        },
        {
          title: '乐器编码',
          key: 'code'
        },
        // {
        //   title: '状态',
        //   key: 'delFlag',
        //   render(row: any) {
        //     return !row.delFlag ? <NTag type="primary">启用</NTag> : <NTag type="error">停用</NTag>
        //   }
        // },
        {
          title: '操作',
          key: 'operation',
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  type="primary"
                  size="small"
                  text
                  //v-auth="subject/update1598205405598932994"
                  onClick={() => {
                    state.visiableSong = true
                    state.songOperation = 'edit'
                    state.songData = row
                  }}
                >
                  修改
                </NButton>

                {/* <NButton
                  type="primary"
                  size="small"
                  text
                  v-auth="subject/update1668958388100288514"
                  onClick={() => onOperation(row)}
                >
                  {row.delFlag ? '启用' : '停用'}
                </NButton> */}
              </NSpace>
            )
          }
        }
      ]
    }

    // const onOperation = async (row: any) => {
    //   const content = row.delFlag ? `您是否启用“${row.name}”？` : `您是否停用“${row.name}”？`
    //   dialog.warning({
    //     title: '提示',
    //     content,
    //     positiveText: '确定',
    //     negativeText: '取消',
    //     onPositiveClick: async () => {
    //       try {
    //         await subjectUpdate({ id: row.id, delFlag: !row.delFlag })
    //         message.success(`${row.delFlag ? '启用' : '停用'}成功`)
    //         getList()
    //       } catch {}
    //     }
    //   })
    // }

    const getList = async () => {
      try {
        state.loading = true
        const { data } = await subjectPage({ ...state.pagination, ...state.searchForm })
        state.loading = false
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
        state.loading = false
      }
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class="system-menu-container">
        <h2>乐器管理</h2>

        <div class={['section-container']}>
          <NSpace style={{ paddingBottom: '12px' }}>
            <NButton
              type="primary"
              //v-auth="subject/save1598205342327857154"
              onClick={() => {
                state.visiableSong = true
                state.songOperation = 'add'
                state.songData = {}
              }}
            >
              添加乐器
            </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
          ></Pagination>
        </div>
        <NModal
          v-model:show={state.visiableSong}
          preset="dialog"
          showIcon={false}
          title={state.songOperation === 'add' ? '新增声部' : '修改声部'}
          style={{ width: '500px' }}
        >
          <SongOperation
            type={state.songOperation}
            data={state.songData}
            onClose={() => (state.visiableSong = false)}
            onGetList={getList}
          />
        </NModal>
      </div>
    )
  }
})
