<template>
  <div>
    <div class="search-bar">
      <Form @submit.native.prevent inline ref="searchForm" :model="searchForm" class="inline">
         <Form-item label="名称" prop="name">
            <Input v-model="searchForm.pageName" class="comWidth" />
        </Form-item>
        <Form-item label="描述" prop="pageDescribe">
            <Input v-model="searchForm.pageDescribe" class="comWidth" />
        </Form-item>
        <Form-item label="作者" prop="author">
            <Input v-model="searchForm.author" class="comWidth" />
        </Form-item>
        <FormItem class="btnGroupStyle">
          <div>
            <Button class="btnStyle" @click="reset()">重置</Button>
            <Button type="primary" class="btnStyle" @click="filter">查询</Button>
          </div>
        </FormItem>
      </Form>
    </div>
    <div class="tableGroupStyle">
      <Table
        :columns="columns"
        :data="tableData"
        class="tableStyle"
      />
      <Page
        :total="total"
        v-if="total > 0"
        show-elevator
        show-sizer
        class="pageStyle"
        :current="searchForm.pageNo"
        :pageSize="searchForm.pageSize"
        @on-change="changePageNo"
      />
      <!-- @on-change="changePageNo"
        @on-page-size-change="changePageSize" -->
    </div>

  </div>
</template>
<script>
import api from '@api/editor.api'
import config from '@/config/index';
export default {
  data() {
    return {
      total: 0,
      searchForm: {
        pageName: '',
        pageDescribe: '',
        author: '',
        pageSize: 10,
        pageNo: 1
      },
      columns: [
        {
          align: 'center',
          title: '页面名称',
          key: 'pageName',
          width: 150,
        },
        {
          align: 'center',
          title: '描述',
          key: 'pageDescribe',
          width: 150,
        },
        {
          align: 'center',
          title: '作者',
          key: 'author',
          width: 100
        },
        {
          align: 'center',
          title: '封面',
          width: 60,
          render: (h, params) => {
            return h('div', {
              style: {
                padding: '5px 0',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }
            }, [
              h('Img', {
                style: {
                  width: '35px'
                },
                attrs: {
                  src: params.row.coverImage
                }
              })
            ])
          }
        },
        {
          align: 'center',
          title: '链接',
          render: (h, params) => {
            return h('span', `${config.h5Host}/activity/${params.row.uuid}?tenantId=${params.row.tenantId}&vccToken={token}`)
          }
        },
        {
          align: 'center',
          title: '操作',
          width: 80,
          render: (h, params) => {
            const row = params.row;
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.select(row);
                  }
                }
              }, '选择')
            ]);
          },
        }
      ],
      tableData: []
    }
  },
  created() {
    this.query()
  },
  methods: {
    filter() {
      this.searchForm.pageNo = 1;
      this.searchForm.pageSize = 10;
      this.query();
    },
    changePageNo(pageNo) {
      this.searchForm.pageNo = pageNo;
      this.query();
    },
    select(row) {
      this.$emit('selectPage', {
        pageType: 2,
        pageUrl: `${config.h5Host}/activity/${row.uuid}?tenantId=${row.tenantId}&vccToken={token}`,
        pageName: row.pageName
      });
    },
    async query() {
      const res = await api.getPageList(this.searchForm);
      this.total = res.total || 0;
      this.tableData = res.data || []
    },
    reset() {
      this.searchForm = {
        pageName: '',
        pageDescribe: '',
        author: '',
        pageSize: 10,
        pageNo: 1
      };
      this.query();
    },
  }
}
</script>
<style scoped lang="less">
.comWidth {
  width: 200px;
}
.search-bar{
  width: 100%;
  height: 50px;
  .btnGroupStyle{
    button{
      margin-right: 6px;
    }
  }
  /deep/ .ivu-form-item{
    margin-bottom: 0;
  }
  /deep/ .ivu-form-item-label {
    font-weight: bold;
    display: inline-block;
  }
  /deep/.ivu-form-item-content {
    display: inline-block;
  }
}
.tableGroupStyle {
    background: #fff;
    .toolBarStyle {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .pageStyle {
      margin-top: 20px;
      width: 100%;
      text-align: right;
    }
}
</style>