<template>
  <el-dialog :visible.sync="dialogVisible" width="800px" :before-close="onClose" :title="title" append-to-body>
    <el-form :model="dialogData" label-width="120px">
      <!-- 纸张格式 -->
      <el-form-item label="纸张格式">
        <el-select v-model="dialogData.paperFormat" @change="onChange">
          <el-option v-for="format in papers" :key="format" :label="format" :value="format">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 宽度和高度 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="宽度">
            <el-input-number v-model="dialogData.width" :disabled="dialogData.paperFormat !== 'Custom'" :precision="1"
              :step="0.1">
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="高度">
            <el-input-number v-model="dialogData.height" :disabled="dialogData.paperFormat !== 'Custom'" :precision="1"
              :step="0.1">
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 方向和缩放 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="方向">
            <el-select v-model="dialogData.orientation" @change="onChange">
              <el-option v-for="orient in orientations" :key="orient" :label="orientationLabels[orient] || orient"
                :value="orient">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缩放">
            <el-select v-model="dialogData.scaling">
              <el-option v-for="scale in scalingOptions" :key="scale" :label="scalingLabels[scale] || scale"
                :value="scale">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 保持比例和连续 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item>
            <el-checkbox v-model="dialogData.keepAspectRatio">保持比例</el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-checkbox v-model="dialogData.continuous">连续</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 边距设置 -->
      <el-form-item label="单位">
        <el-select v-model="dialogData.units">
          <el-option v-for="unit in unitOptions" :key="unit" :label="unit" :value="unit">
          </el-option>
        </el-select>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上边距">
            <el-input-number v-model="dialogData.top" :precision="1" :step="0.1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下边距">
            <el-input-number v-model="dialogData.bottom" :precision="1" :step="0.1"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="左边距">
            <el-input-number v-model="dialogData.left" :precision="1" :step="0.1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边距">
            <el-input-number v-model="dialogData.right" :precision="1" :step="0.1"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-checkbox v-model="dialogData.drawWestToEast">从西到东绘制</el-checkbox>
      </el-form-item>
    </el-form>
    <slot />

    <div v-if="exportPending" style="text-align: center; margin: 20px 0;">
      <IntLoader label="导出中..." />
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="onClose">关闭</el-button>
      <el-button type="primary" :disabled="exportPending" @click="onExport">导出</el-button>
    </span>
  </el-dialog>
</template>
<script>

import { PaperFormatFactory } from '@int/geotoolkit/scene/exports/PaperFormatFactory.js';
import { PaperOrientation } from '@int/geotoolkit/scene/exports/PaperOrientation.js';
import { ScalingOptions } from '@int/geotoolkit/scene/exports/ScalingOptions.js';

import IntLoader from '@/components/IntLoader.vue';

export default {
  name: 'PrintDialog',
  components: { IntLoader },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    exportPending: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'Export to PDF'
    },
    paperFormat: {
      type: String,
      default: 'Letter'
    },
    orientation: {
      type: String,
      default: PaperOrientation.Portrait
    },
    top: {
      type: [Number, String],
      default: 1
    },
    bottom: {
      type: [Number, String],
      default: 1
    },
    left: {
      type: [Number, String],
      default: 0.5
    },
    right: {
      type: [Number, String],
      default: 0.5
    },
    keepAspectRatio: {
      type: [Boolean, String],
      default: false
    },
    scaling: {
      type: [String],
      default: ScalingOptions.FitToPage
    },
    continuous: {
      type: [Boolean, String],
      default: false
    },
    drawWestToEast: {
      type: [Boolean, String],
      default: false
    },
    units: {
      type: String,
      default: 'cm'
    }
  },
  data() {
    return {
      dialogVisible: false,
      paperFactory: null,
      papers: [],
      orientations: [],
      scalingOptions: [],
      unitOptions: ['cm', 'mm', 'px', 'inch'],
      dialogData: {},
      // 方向选项的中文映射
      orientationLabels: {
        'Portrait': '纵向',
        'Landscape': '横向'
      },
      // 缩放选项的中文映射
      scalingLabels: {
        'AsIs': '原始大小',
        'FitBoth': '适应页面',
        'FitWidth': '适应宽度',
        'FitHeight': '适应高度',
        'Custom': '自定义'
      }
    };
  },
  created() {
    this.dialogVisible = this.showDialog;
    this.paperFactory = PaperFormatFactory.getInstance();
    this.papers = this.paperFactory.getPaperList();
    this.orientations = Object.keys(PaperOrientation);
    this.scalingOptions = Object.keys(ScalingOptions);

    this.dialogData = {
      'paperFormat': this.paperFormat,
      'orientation': this.orientation,
      'top': Number(this.top),
      'bottom': Number(this.bottom),
      'left': Number(this.left),
      'right': Number(this.right),
      'scaling': this.scaling,
      'keepAspectRatio': this.keepAspectRatio === 'true' || this.keepAspectRatio,
      'continuous': this.continuous === 'true' || this.continuous,
      'units': this.units,
      'drawWestToEast': this.drawWestToEast === 'true' || this.drawWestToEast,
      'width': 10,
      'height': 15
    };

    // 初始化宽高
    const paper = this.getPaper();
    this.dialogData.width = +paper.getWidth().toFixed('1');
    this.dialogData.height = +paper.getHeight().toFixed('1');
  },
  watch: {
    // 监听外部showDialog属性变化
    showDialog(val) {
      this.dialogVisible = val;
    },
    // 监听内部dialogVisible变化，同步到外部
    dialogVisible(val) {
      if (!val && this.showDialog) {
        this.onClose();
      }
    }
  },
  methods: {
    getPaper() {
      const { paperFormat, units, orientation } = this.dialogData;
      return this.paperFactory.getPaper(paperFormat, units, orientation);
    },
    onChange() {
      const paper = this.getPaper();
      this.dialogData.width = +paper.getWidth().toFixed('1');
      this.dialogData.height = +paper.getHeight().toFixed('1');
    },
    onExport() {
      const settings = {
        ...this.dialogData,
        'paperFormat': this.getPaper()
      };
      this.$emit('save', { 'printSettings': settings });
    },
    onClose() {
      this.dialogVisible = false;
      this.$emit('close');
    }
  }
};
</script>
