<template>
  <QGTable
    ref="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';
import localStorage from '@/service/localStorage.service';
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: '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: 'updatedAt',
            title: '更新时间',
            hideSearch: true
          },
          {
            key: 'action',
            title: '操作',
            width: 200,
            render: (h, params) => {
              const props = {
                type: 'primary',
              };
              const style = {
                display: 'inline-block',
                margin: '5px',
              };
              const btnArr = [
                h(
                  'Button',
                  {
                    props,
                    style: {
                      ...style,
                    },
                    on: {
                      click: () => {
                        console.log(params);
                        this.$router.push(`/detail/${params.row.uuid}`);
                      },
                    },
                  },
                  '修改'
                ),
                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) {
        console.log(data);
        const user = localStorage.get('user');
        return editorApi.getPageList({ type: 'my', isPublish: 0, isTemplate: 0, author: user?.account, ...data });
      },
      addPage() {
        this.$router.push('/detail');
      }
    },
    mounted(){}
}
</script>