/**
*  @Author      LiuShaolong
*  @Description 详情Table
*  @CreateDate  2020/5/11
*/
<template>
  <el-dialog :visible="show" :title="title" width="800px" :close-on-click-modal="false" :close-on-press-escape="false"
             @close="close" append-to-body custom-class="detail-dialog">
    <zy-page ref="page" :sel-mode="false" height="500px" :request="request" :searchable="false"
             :required-params="requiredParams" :request-params="params" :buttons="buttons">
    </zy-page>
    <div slot="footer">
      <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import {WebpageDataService} from "../../../assets/webpage";

  export default {
    name: 'DetailTable',
    components: {},
    props: ['show', 'title', 'params', 'button'],
    data() {
      return {
        request: WebpageDataService.webpage_data_detail_table,
        requiredParams: [],
        buttons: [{
          name: '导出', icon: "el-icon-export", click: this.exportDetail
        }, {
          name: '打印', icon: "el-icon-print", click: this.printDetail
        }]
      }
    },
    created() {
    },
    mounted() {
    },
    watch: {
      show: {
        handler: function (nv) {
          if (nv) {
            if (this.button.selectionMode === 'query') {
              this.requiredParams = [];
              this.$nextTick(() => this.$refs['page'].loadData());
            } else if (this.button.selectionMode === 'single') {
              this.requiredParams = ['ids'];
              this.$nextTick(() => {
                if (this.params.ids.length === 1) {
                  this.$refs['page'].loadData();
                } else {
                  this.$refs['page'].clearData();
                }
              })
            }
          } else {
            this.$refs['page'].clearData();
          }
        },
      }
    },
    computed: {},
    methods: {
      close() {
        this.$emit('close')
      },
      exportDetail() {
        WebpageDataService.webpage_data_detail_export(this.params);
      },
      printDetail() {
        this.$global.print({
          title: '预览',
          type: 'table',
          loader: callback => WebpageDataService.webpage_data_detail_table(this.params, callback)
        })
      }
    },
  }
</script>
<style lang="scss">
  .detail-dialog {
    .el-dialog__body {
      height: 500px;
    }
  }
</style>