<template>
  <div>
    <QGTable
     :columns="columns"
     :request="query"
     :toolBar="gettoolBar"
    >
     <Button>新增</Button>
    </QGTable>
  </div>
</template>
<script>
import QGTable from './index.vue';
const statusList = [{label: '有效', value: 1},{label: '无效',value: 2}];
const showTitle = function(){}
const type = ''
export default {
    components: {
        QGTable,
    },
    data(){
      return {
        search: {
          time: [],
        },
        type: '',
        title: '',
        templateList: [],
        total: 0,
        modal: false,
        form: {},
        value: null,
        formModule: [{}],
        columns: [
        {
          type: 'index',
          title: '序号',
        },
        {
          key: 'componentName',
          title: '模版ID',
          formType: 'input',
          value: '11',
        },
        {
          key: 'templateType',
          title: '模版名称',
          formType: 'input',
          hideTable: true,
        },
        {
          key: 'page',
          title: '模版类型',
          formType: 'select',
          value: 1,
          number: true,
          valueEnum: {
            1: '好的',
            2: '行动',
            3: '可以的',
          },
          render: (h, params) => {
            return h('div', showTitle('page', type, params));
          },
        },
        {
          key: 'terminal',
          title: '内容',
        },
        {
          key: 'status',
          title: '状态',
          render: (h, params) => {
            return h('div', showTitle('status', statusList, params));
          },
        },
        {
          key: 'time',
          title: '发布时间',
          render: (h, params) => {
            return h('div', `${(params.row.startTime && params.row.startTime) || ''}-${(params.row.endTime && params.row.endTime) || ''}`);
          },
        },
        {
          key: 'action',
          title: '操作',
          width: 200,
          render: (h, params) => {
            const props = {
              type: 'primary',
            };
            const style = {
              display: 'inline-block',
              margin: '5px',
            };
            const isShow = status => {
              if (Array.isArray(status)) {
                return status.includes(params.row.status) ? 'inline-block' : 'none';
              }
              return params.row.status === status ? 'inline-block' : 'none';
            };
            const btnArr = [
              h(
                'Button',
                {
                  props,
                  style: {
                    ...style,
                    display: isShow([1, 3]),
                  },
                  on: {
                    click: () => {
                      console.log('查看');
                    },
                  },
                },
                '查看'
              ),
              h(
                'Button',
                {
                  props,
                  style: {
                    ...style,
                    display: isShow(2),
                  },
                  on: {
                    click: () => {
                      console.log('修改！')
                    },
                  },
                },
                '修改'
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '确认启用？',
                  },
                  style: {
                    display: isShow(2),
                  },
                  on: {
                    'on-ok': () => {
                      console.log('启用')

                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      props,
                      style,
                    },
                    '启用'
                  ),
                ]
              ),
              h(
                'Poptip',
                {
                  props: {
                    confirm: true,
                    transfer: true,
                    title: '确认删除？',
                  },
                  style: {
                    ...style,
                    display: isShow(1),
                  },
                  on: {
                    'on-ok': () => {
                      console.log('删除')
                    },
                  },
                },
                [
                  h(
                    'Button',
                    {
                      props,
                    },
                    '删除'
                  ),
                ]
              ),
            ];
            return h(
              'div',
              {
                style: {
                  textAlign: 'left',
                },
              },
              btnArr
            );
          },
        },
      ],
      }
    },
    methods: {
      gettoolBar(){
        return [<Button type="primary" onClick={() => this.newElement}>新增</Button>]
      },
      requestFn(data){
        console.log(data);
        return {
          data: [{page: 1},{}],
          total: 100,
       }
      },
      query(data) {
        console.log(data);
        return {
            data: [{page:1}, {page:2}],
            total: 100,
        }
      },
    },
    mounted(){}
}
</script>