import Pagination from '@/components/pagination'
import { NButton, NDataTable, NModal, NSpace, NTag, useDialog, useMessage } from 'naive-ui'
import { defineComponent, onMounted, reactive } from 'vue'
import { sysMessageConfigPage, sysMessageConfigRemove } from '../../api'
import { filterClientType, filterMessageGroup } from '@/utils/filters'
import MessageOperation from './message-operation'

export default defineComponent({
  name: 'subsidy-list',
  setup() {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      dataList: [] as any,
      visiablePayment: false,
      paymentOperation: 'add',
      paymentData: {} as any
    })
    const dialog = useDialog()
    const message = useMessage()

    const columns = () => {
      return [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '客户端类型',
          key: 'clientId',
          render(row: any) {
            return filterClientType(row.clientId)
          }
        },
        {
          title: '消息类型',
          key: 'messageType'
        },
        {
          title: '消息跳转类型',
          key: 'action'
        },
        {
          title: '二级分类',
          key: 'subType'
        },
        {
          title: '消息组',
          key: 'group',
          render(row: any) {
            return filterMessageGroup(row.group)
          }
        },
        {
          title: '消息是否发送',
          key: 'sendFlag',
          render(row: any) {
            return row.sendFlag === 1 ? (
              <NTag type="primary">发送</NTag>
            ) : (
              <NTag type="default">不发送</NTag>
            )
          }
        },
        {
          title: '描述',
          key: 'description'
        },
        {
          title: '操作',
          key: 'operation',
          render(row: any) {
            return (
              <NSpace>
                <NButton
                  type="primary"
                  size="small"
                  text
                  //v-auth="sysMessageConfig/update1597903931924926465"
                  onClick={() => {
                    state.visiablePayment = true
                    state.paymentOperation = 'edit'
                    state.paymentData = row
                  }}
                >
                  修改
                </NButton>
                <NButton
                  type="primary"
                  size="small"
                  text
                  onClick={() => onRemove(row)}
                  //v-auth="sysMessageConfig/remove1597904021058080770"
                >
                  删除
                </NButton>
              </NSpace>
            )
          }
        }
      ]
    }

    const onRemove = (row: any): void => {
      dialog.warning({
        title: '警告',
        content: `是否删除？`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
          try {
            await sysMessageConfigRemove({ id: row.id })
            getList()
            message.success('删除成功')
          } catch {}
        }
      })
    }

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

    onMounted(() => {
      getList()
    })
    return () => (
      <>
        <NSpace style="padding-bottom: 12px">
          <NButton
            type="primary"
            //v-auth="sysMessageConfig/save1597903839524409345"
            onClick={() => {
              state.visiablePayment = true
              state.paymentOperation = 'add'
              state.paymentData = []
            }}
          >
            新增
          </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>

        <NModal
          v-model:show={state.visiablePayment}
          preset="dialog"
          showIcon={false}
          title={state.paymentOperation === 'add' ? '新增消息通知' : '修改消息通知'}
          style={{ width: '800px' }}
        >
          <MessageOperation
            type={state.paymentOperation}
            data={state.paymentData}
            onClose={() => (state.visiablePayment = false)}
            onGetList={getList}
          />
        </NModal>
      </>
    )
  }
})
