<template>
  <QGTable
    ref="qgTable"
    :columns="columns"
    :request="query"
    @newBtnClick="addPage"
    @clearCache="refreshData"
  >
  </QGTable>
</template>
<script>
import editorApi from '@api/editor.api';
import QGTable from '@editor/component/QgTable/index.vue';
import config from '@/config/index';
export default {
    components: {
        QGTable,
    },
    data(){
      return {
        columns: [
          {
            key: 'id',
            title: '编号',
            formType: 'input',
            hideSearch: true
          },
          {
            key: 'pageName',
            title: '名称',
            formType: 'input',
          },
          {
            key: 'pageDescribe',
            title: '描述',
            formType: 'input',
          },
          {
            key: 'uuid',
            title: 'uuid',
            formType: 'input',
            hideTable: true,
          },
          {
            key: 'author',
            title: '作者',
            formType: 'input',
          },
          {
            key: 'coverImage',
            title: '封面',
            hideSearch: true,
            render: (h, params) => {
              return h(
                'div',
                {
                  style: {
                    textAlign: 'left',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    padding: '10px 0'
                  },
                },
                [h(
                  'img',{
                    attrs: {
                      src: params.row.coverImage + '?imageMogr2/format/jpg/thumbnail/!10p',
                    },
                    style: {
                      width: '37.5px',
                      height: '66.7px',
                      objectFit: 'contain'
                    }
                  }
                )]
              );
            },
          },
          {
            key: 'id',
            title: '链接',
            hideSearch: true,
            render: (h, params) => {
              return h('span', `${config.h5Host}/activity/${params.row.uuid}?tenantId=${params.row.tenantId}&vccToken={token}&appChannel={appChannel}`)
            }
          },
          {
            key: 'isTemplate',
            title: '是否模板',
            formType: 'select',
            number: true,
            hideSearch: true,
            valueEnum: {
              0: '否',
              1: '是',
            }
          },
          {
            key: 'updatedAt',
            title: '更新时间',
            hideSearch: true
          },
          {
            key: 'action',
            title: '操作',
            width: 250,
            render: (h, params) => {
              const props = {
                type: 'primary',
              };
              const style = {
                display: 'inline-block',
                margin: '5px',
              };
              const btnArr = [
                h(
                  'Button',
                  {
                    props,
                    style: {
                      ...style,
                    },
                    on: {
                      click: () => {
                        window.open(`${config.h5Host}/activity/${params.row.uuid}?tenantId=${params.row.tenantId}&isPreview=1`);
                      },
                    },
                  },
                  '预览'
                ),
                h(
                  'Button',
                  {
                    props,
                    style: {
                      ...style,
                    },
                    on: {
                      click: () => {
                        console.log(params);
                        this.$router.push(`/detail/${params.row.uuid}`);
                      },
                    },
                  },
                  '修改'
                ),
                h(
                  'Button',
                  {
                    props,
                    style: {
                      ...style,
                      display: params.row.pageHistory &&  params.row.pageHistory.length ? 'inline-block' : 'none'
                    },
                    on: {
                      click: () => {
                        this.$refs.qgTable.showRecords(params.row.pageHistory);
                      },
                    },
                  },
                  '历史记录'
                ),
                h(
                  'Poptip',
                  {
                    props: {
                      confirm: true,
                      transfer: true,
                      title: '确认删除？',
                    },
                    style: {
                      ...style,
                    },
                    on: {
                      'on-ok': async () => {
                        await editorApi.delPageById(params.row.id);
                        this.$refs.qgTable.query();
                      },
                    },
                  },
                  [
                    h(
                      'Button',
                      {
                        props,
                      },
                      '删除'
                    ),
                  ]
                ),
              ];
              return h(
                'div',
                {
                  style: {
                    textAlign: 'center',
                  },
                },
                btnArr
              );
            },
          },
        ],
      }
    },
    methods: {
      async query(data) {
        return editorApi.getPageList({ type: 'list', ...data });
      },
      addPage() {
        this.$router.push('/detail');
      },
      async refreshData() {
        try {
          await editorApi.refreshCache();
          this.$Notice.success({ title: '刷新成功！' });
        } catch (error) {
          console.log(error);
            this.$Notice.warning({ title: '刷新失败！' });
        }
      },
    },
    mounted(){}
}
</script>