<template>
  <a-page-header-wrapper title="转换为C语言字符串">
    <a-card :bordered="false">
      <a-row :gutter="{ sm: 24, md: 24, lg: 24, xl: 24 }">
        <a-col :md="12" :sm="24">
          <a-textarea
            v-model="source"
            placeholder="请将需要转换的文本粘贴到这里"
            :auto-size="{ minRows: 25, maxRows: 25 }"
          />
          <div style="margin: 10px">
            <a-button @click="getConvertString">开始转换</a-button>
          </div>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-textarea
            v-model="target"
            :disabled="true"
            placeholder="这里是转换后的结果"
            :auto-size="{ minRows: 25, maxRows: 25 }"
          />
          <div style="margin: 10px">
            <a-form layout="inline">
              <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
                <a-col :md="16" :sm="24">
                  <a-form-item label="文件名" v-decorator="['filename']" :required="true">
                    <a-input v-model="filename" placeholder="请输入" />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <span class="submitButtons">
                    <a-button
                      type="primary"
                      @click="downloadFile"
                    >
                      下载文件
                    </a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </a-col>
      </a-row>
    </a-card>
  </a-page-header-wrapper>
</template>

<script>
import {
  Avatar,
  Row,
  Col,
  Card,
  List,
  Button,
  Form,
  Icon,
  Table,
  Divider,
  Dropdown,
  Input,
  Select,
  Modal,
  DatePicker,
  message,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";

import { getConvertString } from "@/api/openapi";

export default {
  name: "ToolIndex",
  data: () => ({
    visible: false,
    confirmLoading: false,
    filename: null,
    source: null,
    target: null,
  }),
  components: {
    APageHeaderWrapper: PageHeaderWrapper,
    ARow: Row,
    ACol: Col,
    ACard: Card,
    ATextarea: Input.TextArea,
    AModal: Modal,
    AAvatar: Avatar,
    ACardGrid: Card.Grid,
    ACardMeta: Card.Meta,
    AList: List,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
    AIcon: Icon,
    ATable: Table,
    ADescriptionItem: DescriptionItem,
    ADivider: Divider,
    ADropdown: Dropdown,
    AInput: Input,
    ASelect: Select,
    AOption: Select.Option,
    ARangePicker: DatePicker.RangePicker,
  },
  methods: {
    createFile(content, filename) {
      const a = document.createElement("a");
      const blob = new Blob([content]);
      const url = window.URL.createObjectURL(blob);
      a.href = url;
      a.download = filename;
      a.click();
      window.URL.revokeObjectURL(url);
    },
    downloadFile() {
      this.visible = true;
      if (!this.source) return message.error("输入内容不能为空");

      this.createFile(this.target, this.filename);
    },
    getConvertString() {
      getConvertString({ string: this.source })
        .then((res) => {
          this.target = res.data;
          message.success(res.msg);
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
  },
  created() {},
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>
