import {defineComponent, onMounted, reactive, ref} from 'vue'
import SaveForm from '@components/save-form'
import {DataTableRowKey, NButton, NDataTable, NDescriptions, NDescriptionsItem, NFormItem, NInput, NSelect, NSpace, useDialog, useMessage} from 'naive-ui'
import Pagination from '@components/pagination'
import {getMapValueByKey, getSelectDataFromObj} from '@/utils/objectUtil'
import {clientType, messageSenderFunctionModule, musicSheetSourceType} from '@/utils/constant'
import TheTooltip from "@components/TheTooltip";
import {getOwnerName} from "@views/music-library/musicUtil";
import {sysMessageConfigPage, sysMessagePage} from "@views/message/api";

export default defineComponent({
  name: 'wechat-record',
  props: {
    appKey: {
      type: String,
      required: true
    }
  },

  setup(props) {
    const dialog = useDialog()
    const message = useMessage()
    const state = reactive({
      loading: false,
      appId: null as any,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        title: null, //消息名称
        clientId: null, //客户端
        model: null, // 功能模块
        status: null // 状态
      },
      dataList: []
    })

    onMounted(async () => {
      getList()
    })


    const saveForm = ref()

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

    const onSubmit = () => {
      state.pagination.page = 1
      getList()
    }

    const checkedRowKeysRef = ref<DataTableRowKey[]>([])
    const handleCheck = (rowKeys: DataTableRowKey[]) => {
      checkedRowKeysRef.value = rowKeys
    }

    const getList = async () => {
      try {
        state.loading = true
        const {data} = await sysMessagePage({
          ...state.pagination,
          ...state.searchForm,
          appKey: props.appKey,
          sendMode:'WECHAT',
        })
        state.pagination.pageTotal = Number(data.total)
        state.dataList = data.rows || []
      } catch {
      }
      state.loading = false
    }

    const columns = (): any => {
      return [
        {
          title: '标题',
          key: 'title'
        },
        {
          title: '发送时间',
          key: 'sendTime'
        },
        {
          title: '发送平台',
          key: 'senderName'
        },
        {
          title: '接收人姓名',
          key: 'username'
        },
        {
          title: '接收人手机号',
          key: 'receiver'
        },
        {
          title: '消息内容',
          key: 'content',
          width:"600"
        },
        // {
        //   title: '消息内容',
        //   key: 'content',
        //   render: (row: any) => (
        //       <>
        //         <NDescriptions labelPlacement="left" column={1}>
        //           <NDescriptionsItem label="流程名称">
        //             {getMapValueByKey(row.sourceType, new Map(Object.entries(musicSheetSourceType)))}
        //           </NDescriptionsItem>
        //           <NDescriptionsItem label="流程编号">
        //             {row.wxTemplateId}
        //           </NDescriptionsItem>
        //           <NDescriptionsItem label="申请人">
        //             <TheTooltip content={getOwnerName(row.musicSheetExtend, row.sourceType)} />
        //           </NDescriptionsItem>
        //           <NDescriptionsItem label="申请时间">
        //             <TheTooltip content={row.createTime} />
        //           </NDescriptionsItem>
        //         </NDescriptions>
        //       </>
        //   )
        // },
        {
          title: '发送对象',
          key: 'clientId',
          render: (row: any) => {
            return (
                <div>
                  {getMapValueByKey(row.clientId, new Map(Object.entries(clientType)))}
                </div>
            )
          }
        },
        {
          title: '功能模块',
          key: 'group',
          render: (row: any) => {
            return (
                <div>
                  {getMapValueByKey(row.group, new Map(Object.entries(messageSenderFunctionModule)))}
                </div>
            )
          }
        },
        {
          title: '触发条件',
          key: 'triggerCondition'
        },
      ]
    }

    return () => {
      return (
          <div class="system-menu-container">
            <SaveForm
                ref={saveForm}
                model={state.searchForm}
                onSubmit={onSubmit}
                saveKey="wechat-record"
                onSetModel={(val: any) => (state.searchForm = val)}
            >
              <NFormItem label="标题" path="title">
                <NInput
                    placeholder="请输入标题"
                    v-model:value={state.searchForm.title}
                    clearable
                />
              </NFormItem>
              <NFormItem label="发送对象" path="clientId">
                <NSelect
                    placeholder="全部发送对象"
                    v-model:value={state.searchForm.clientId}
                    options={getSelectDataFromObj(clientType)}
                    clearable
                />
              </NFormItem>
              <NFormItem label="功能模块" path="model">
                <NSelect
                    filterable
                    placeholder="全部功能模块"
                    v-model:value={state.searchForm.model}
                    options={getSelectDataFromObj(messageSenderFunctionModule)}
                    clearable
                ></NSelect>
              </NFormItem>
              {/*<NFormItem label="状态" path="status">*/}
              {/*  <NSelect*/}
              {/*      v-model:value={state.searchForm.status}*/}
              {/*      placeholder="请选择状态"*/}
              {/*      options={*/}
              {/*        [*/}
              {/*          {*/}
              {/*            label: '启用',*/}
              {/*            value: true*/}
              {/*          },*/}
              {/*          {*/}
              {/*            label: '停用',*/}
              {/*            value: false*/}
              {/*          }*/}
              {/*        ] as any*/}
              {/*      }*/}
              {/*      clearable*/}
              {/*  />*/}
              {/*</NFormItem>*/}
              <NFormItem>
                <NSpace>
                  <NButton type="primary" onClick={onSearch}>
                    搜索
                  </NButton>
                  <NButton type="default" onClick={onBtnReset}>
                    重置
                  </NButton>
                </NSpace>
              </NFormItem>
            </SaveForm>

            <div class={['section-container']}>
              <NDataTable
                  loading={state.loading}
                  columns={columns()}
                  data={state.dataList}
                  rowKey={(row: any) => row.id}
                  scrollX={'1400'}
              ></NDataTable>

              <Pagination
                  v-model:page={state.pagination.page}
                  v-model:pageSize={state.pagination.rows}
                  v-model:pageTotal={state.pagination.pageTotal}
                  onList={getList}
                  sync
                  saveKey="wechat-record"
              ></Pagination>
            </div>
          </div>
      )
    }
  }
})
