import { h } from 'vue'
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { formatDateTime } from '@/utils/date-formatter'

export function createChannelPublishColumn(handleChannelPublishTableAction: (actionType: string) => void) {
  return [
    {
      title: '发布渠道',
      key: 'channel',
      align: 'left',
      width: 540,
      render() {
        return h(
          'div',
          {
            style: {
              display: 'flex',
              justifyContent: 'flex-start',
              alignItems: 'center',
            },
          },
          {
            default: () => [
              h(CustomIcon, {
                width: '24px',
                icon: 'icon-park-solid:computer',
                color: '#2468f2',
              }),
              h(
                'div',
                {
                  style: {
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'flex-start',
                    fontSize: '14px',
                    marginLeft: '12px',
                  },
                },
                {
                  default: () => [
                    h(
                      'span',
                      {},
                      {
                        default: () => '网页端',
                      },
                    ),
                    h(
                      'span',
                      {
                        style: {
                          color: '#84868c',
                        },
                      },
                      {
                        default: () => '可通过PC或移动设备立即开始对话',
                      },
                    ),
                  ],
                },
              ),
            ],
          },
        )
      },
    },
    {
      title: '状态',
      key: 'agentPublishStatus',
      align: 'left',
      width: 220,
      render() {
        return h(
          'div',
          {
            style: {
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'flex-start',
            },
          },
          {
            default: () => [
              h(
                'div',
                {
                  style: {
                    background: '#34a853',
                    borderRadius: '4px',
                    padding: '2px 14px',
                    color: '#fff',
                    marginBottom: '4px',
                  },
                },
                {
                  default: () => '已发布',
                },
              ),
              h(
                'span',
                {
                  style: {
                    color: '#84868c',
                  },
                },
                {
                  default: () => formatDateTime(new Date()) + '发布',
                },
              ),
            ],
          },
        )
      },
    },
    {
      title: '操作',
      key: 'action',
      align: 'left',
      width: '460',
      render() {
        return h(
          'div',
          {
            style: {
              display: 'flex',
              justifyContent: 'flex-start',
              alignItems: 'center',
            },
          },
          {
            default: () => [
              h(
                'div',
                {
                  style: {
                    display: 'flex',
                    justifyContent: 'flex-start',
                    alignItems: 'center',
                    fontSize: '14px',
                    padding: '4px 12px',
                    background: '#f7f7f9',
                    borderColor: '#2468f2',
                    color: '#2468f2',
                  },
                  className: 'cursor-pointer rounded-md border hover:opacity-80',
                  onClick: () => handleChannelPublishTableAction('accessPage'),
                },
                {
                  default: () => [
                    h(CustomIcon, { icon: 'lets-icons:view', style: { marginRight: '6px', fontSize: '16px' } }),
                    h(
                      'span',
                      {},
                      {
                        default: () => '立即访问',
                      },
                    ),
                  ],
                },
              ),
              h(
                'div',
                {
                  style: {
                    display: 'flex',
                    justifyContent: 'flex-start',
                    alignItems: 'center',
                    fontSize: '14px',
                    marginLeft: '16px',
                    padding: '4px 12px',
                    background: '#f7f7f9',
                  },
                  className: 'cursor-pointer hover:text-theme-color rounded-md border hover:border-theme-color',
                  onClick: () => handleChannelPublishTableAction('copyLink'),
                },
                {
                  default: () => [
                    h(CustomIcon, { icon: 'pepicons-pop:share-android-circle', style: { marginRight: '6px' } }),
                    h(
                      'span',
                      {},
                      {
                        default: () => '分享链接',
                      },
                    ),
                  ],
                },
              ),
            ],
          },
        )
      },
    },
  ]
}
