<template>
  <div>
    <div>
      <div ref="lxHeader">
        <LxHeader
          icon="md-apps"
          :text="$route.meta.title"
          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
        >
          <div slot="content"></div>
          <slot>
            <header-content :auths="auths_auth_mixin">
              <template #search>
                <div style="display: flex">
                  <el-date-picker v-model="selectDate" size="small" style="width: 140px;"></el-date-picker>
                  <Button
                    style="margin-left: 10px"
                    type="primary"
                    @click=""
                  >查询</Button
                  >
                </div>
              </template>
              <Button type="primary" @click="exportDocx">导出</Button>
            </header-content>
          </slot>
        </LxHeader>
      </div>
    </div>

    <el-card>
      <div>{{ $moment(selectDate).format('YYYY年MM月DD日') }}调度指令执行情况</div>

      <div v-for="(item, index) in transfers" :key="item.id">
        <div>{{ index }}</div>
        <div>
          <div>{{ item.equipment ? item.equipment.area : '' }}</div>

          <div>{{ item.content }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  Document,
  Paragraph,
  HeadingLevel,
  AlignmentType,
  TextRun,
  Packer,
  convertInchesToTwip
} from "docx";
import { saveAs } from 'file-saver';
import { index } from "@/api/system/baseForm";
import headerContent from "@/components/LxHeader/XyContent.vue";
import LxHeader from "@/components/LxHeader/index.vue";
import { authMixin } from "@/mixin/authMixin";
export default {
  components: {
    LxHeader,
    headerContent
  },
  mixins: [authMixin],
  data() {
    return {
      transfers: [],
      selectDate: new Date(),
    }
  },
  methods: {
    async getTransfer () {
      this.transfers = (await index({
        table_name: "transfers",
        page: 1,
        page_size: 999,
        filter: [
          {
            key: 'start_time',
            op: 'range',
            value: `${this.$moment(this.selectDate).startOf('days').format('YYYY-MM-DD HH:mm:ss')},${this.$moment(this.selectDate).endOf('days').format('YYYY-MM-DD HH:mm:ss')}`
          },
        ]
      })).data
    },

    async exportDocx () {
      const document = new Document({
        sections: [
          {
            children: [
              new Paragraph({
                text: "2023年9月20日调度指令执行情况",
                heading: HeadingLevel.HEADING_1,
                alignment: AlignmentType.CENTER,
                spacing: {
                  after: 400
                }
              }),
              new Paragraph({
                indent: {
                  firstLine: convertInchesToTwip(0.5)
                },
                spacing: {
                  before: 200,
                  line: 500
                },
                children: [
                  new TextRun({
                    text: "今日小雨转晴，北风2级，气温22℃~29℃。水情信息：8:00新塘3.06m，环城河北3.02m，觅渡桥2.99m，人民桥3.00m；16:00新塘3.03m，环城河北2.90m，觅渡桥2.92m，人民桥2.95m。",
                    size: 18,
                  })
                ]
              }),
              new Paragraph({
                spacing: {
                  before: 200,
                  line: 500
                },
                children: [
                  new TextRun({
                    text: "一、夜间水位控制执行情况",
                    size: 28,
                    bold: true,
                  }),
                ]
              }),
              new Paragraph({
                spacing: {
                  before: 200,
                  line: 500
                },
                indent: {
                  firstLine: convertInchesToTwip(0.5)
                },
                children: [
                  new TextRun({
                    text: "1、时间：2023年9月19日19:00 -2023年9月20日7:00 2、实际执行情况：（1）北部：无（2）南部：东风新枢纽运行共启停2次，觅渡桥水位3.00m启2.96m停，23:23—1:50（147分钟，两台）；大龙港枢纽运行共启停2次，觅渡桥水位3.00m启2.96m停，23:25—1:48（143分钟，两台）。",
                    size: 18,
                  })
                ]
              })
            ]
          },
        ]
      })

      const blob = await Packer.toBlob(document)
      saveAs(blob, 'test.docx')
    }
  },
  computed: {},
  created() {
    this.getTransfer()
  }
}
</script>

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