<template>
  <Modal width="700" v-model="show" title="历史记录" @on-visible-change="change">
    <Table
      :columns="columns"
      :data="records"
      class="tableStyle"
    />
    <span slot="footer"></span>
  </Modal>
</template>
<script>
  import editorApi from '@api/editor.api';
  import config from '@/config/index';
  export default {
    props: {
      value: {
        type: Boolean,
        default: false
      },
      records: {
        type: Array,
        default() {
          return []
        }
      }
    },
    watch: {
      value(val) {
        this.show = val;
      }
    },
    data() {
      return {
        show: false,
        columns: [
          {
            title: '版本',
            align: 'center',
            render: (h, params) => {
              console.log(params);
              return h('span', {
                style: {
                  color: '#2d8cf0',
                  textDecoration: 'underline',
                  cursor: 'pointer'
                },
                on: {
                  'click': () => {
                    window.open(`${config.h5Host}/history/${params.row.id}?isPreview=1`)
                  },
                },
              }, `v${this.records.length - params.index}`)
            }
          },
          {
            title: '更新时间',
            key: 'updatedAt',
            align: 'center'
          },
          {
            key: 'author',
            title: '操作人',
            align: 'center'
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              const props = {
                type: 'primary',
              };
              const style = {
                display: 'inline-block',
                margin: '5px',
              };
              return h(
                  'Poptip',
                  {
                    props: {
                      confirm: true,
                      transfer: true,
                      title: '确认恢复到此版本？',
                    },
                    style: {
                      ...style,
                    },
                    on: {
                      'on-ok': async () => {
                        await editorApi.recoverPageData({
                          id: params.row.id,
                          author: JSON.parse(localStorage.getItem('user')).account || ''
                        });
                        window.location.reload();
                      },
                    },
                  },
                  [
                    h(
                      'Button',
                      {
                        ...props
                      },
                      '恢复'
                    ),
                  ]
                )
            }
          }
        ]
      }
    },
    created() {
      this.show = this.value;
      console.log(this.records, 123)
    },
    methods: {
      change(val) {
        if (!val) {
          this.close();
        }
      },
      close() {
        this.$emit('close');
      }
    }
  }
</script>