<template>
  <QGTable
   :columns="columns"
   :request="query"
   @newBtnClick="addPage"
  >
  </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: '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,
                    },
                    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}`)
            }
          },
          {
            key: 'updatedAt',
            title: '更新时间',
            hideSearch: true
          },
          {
            key: 'action',
            title: '操作',
            width: 200,
            render: (h, params) => {
              const props = {
                type: 'primary',
              };
              const style = {
                display: 'inline-block',
                margin: '5px',
              };
              return h(
                'Button',
                {
                  props,
                  style: {
                    ...style,
                  },
                  on: {
                    click: () => {
                      this.$router.push({ name: 'detail', params: { templateId: params.row.uuid } });
                    },
                  },
                },
                '立即使用'
              );
            },
          }
        ],
      }
    },
    methods: {
      async query(data) {
        return editorApi.getPageList({ type: 'template', ...data });
      },
      addPage() {
        this.$router.push('/detail');
      }
    },
    mounted(){}
}
</script>