<script setup lang="ts">
import type { PrintDirection, PrintOrientation, PrintTarget } from '@/components/FsPrinter/types'
import { ElLoading } from 'element-plus'
import PrintContract from './printContract.vue'
import { printPdf } from '@/components/FsPrinter/util'

const isPrinter = ref(false)

interface Option {
  direction?: PrintDirection
  orientation?: PrintOrientation
  margin: string
  title: string
  target: PrintTarget
  static: boolean
}

/** 打印参数 */
const option = reactive<Option>({
  direction: void 0,
  orientation: void 0,
  margin: '',
  title: '',
  target: '_iframe',
  static: false
})

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const status = ref('1')
const status2 = ref(['1'])

const contractData = reactive({
  partyA: '张三',
  partyB: '李四',
  address: '太原市小店区龙兴街1号'
})

const contractRef = ref()

const onPrint = () => {
  isPrinter.value = true
}

const onPrint2 = () => {
  contractRef.value?.print()
}

const onPrintPdf = () => {
  const loading = ElLoading.service({ text: '加载中' })
  printPdf({
    url: '/test.pdf',
    done: () => {
      loading.close()
    }
  })
}
</script>

<template>
  <el-card header="自定义打印" shadow="never">
    <el-form label-width="80px" style="max-width: 320px" @submit.prevent="">
      <el-form-item label="纸张方向">
        <el-select clearable class="ele-fluid" placeholder="不设置" v-model="option.direction">
          <el-option value="landscape" label="横向" />
          <el-option value="portrait" label="纵向" />
        </el-select>
      </el-form-item>
      <el-form-item label="纸张旋转">
        <el-select clearable class="ele-fluid" placeholder="不旋转" v-model="option.orientation">
          <el-option value="rotate-left" label="向左旋转" />
          <el-option value="rotate-right" label="向右旋转" />
        </el-select>
      </el-form-item>
      <el-form-item label="页面间距">
        <el-input clearable v-model="option.margin" placeholder="不设置" />
      </el-form-item>
      <el-form-item label="页面标题">
        <el-input clearable v-model="option.title" placeholder="默认" />
      </el-form-item>
      <el-form-item label="打印位置">
        <el-select class="ele-fluid" v-model="option.target">
          <el-option value="_iframe" label="子窗口" />
          <el-option value="_self" label="当前窗口" />
        </el-select>
      </el-form-item>
      <el-form-item label="始终显示">
        <el-radio-group v-model="option.static">
          <el-radio :value="false" label="否" />
          <el-radio :value="true" label="是" />
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onPrint">打印</el-button>
      </el-form-item>
    </el-form>
    <fs-printer
      v-model="isPrinter"
      :direction="option.direction"
      :orientation="option.orientation"
      :margin="option.margin"
      :title="option.title"
      :target="option.target"
      :static="option.static"
      :body-style="{ overflow: 'hidden' }"
    >
      <div style="overflow: auto">
        <el-table :data="tableData">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180">
            <template #default="{ row }">
              <el-tag type="success">{{ row.name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="Address" width="300" />
        </el-table>
        <div style="margin: 12px 0">更多表单组件演示：</div>
        <div>
          <el-radio-group v-model="status">
            <el-radio value="1">Option 1</el-radio>
            <el-radio value="2">Option 2</el-radio>
          </el-radio-group>
        </div>
        <div>
          <el-checkbox-group v-model="status2">
            <el-checkbox value="1">Option 1</el-checkbox>
            <el-checkbox value="2">Option 2</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </fs-printer>
  </el-card>
  <el-card header="合同打印" shadow="never" class="mt-3">
    <div class="w-260px">
      <el-form ref="form" :model="contractData" label-width="80px">
        <el-form-item label="甲方" prop="name">
          <el-input placeholder="请填写甲方" :maxLength="20" v-model="contractData.partyA"></el-input>
        </el-form-item>
        <el-form-item label="己方" prop="name">
          <el-input placeholder="请填写己方" :maxLength="20" v-model="contractData.partyB"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="name">
          <el-input placeholder="请填写甲方" :maxLength="20" v-model="contractData.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onPrint2">打印</el-button>
        </el-form-item>
      </el-form>
    </div>
    <print-contract ref="contractRef" :data="contractData" :is-static="option.static" :target="option.target" />
  </el-card>
  <el-card shadow="never" header="pdf 示例" class="mt-3">
    <el-button type="primary" @click="onPrintPdf">打印pdf</el-button>
  </el-card>
</template>

<style scoped lang="scss"></style>
