<script lang="jsx">
  import Test from "./Test";
  export default {
    name: "HelloWorld",
    components: {
      Test,
      TestJsx: {
        render() {
          return <div>我是vue文件的JSX渲染的</div>;
        },
      },
    },
    props: {
      msg: String,
    },
  };
</script>

<script>
  // @ is an alias to /src
  import HelloWorld from "@comp/HelloWorld";
  // const { sum } = require('../utils/index')

  export default {
    name: "Home",
    components: {
      HelloWorld,
    },
    methods: {
      handleClick() {
        // console.log(sum(1, 32))
      },
    },
  };
</script>

<template>
  <div class="hello">
    <h1 class="h1">{{ msg }}</h1>
    <test />
    <test-jsx />
  </div>
</template>

<script lang="jsx">
  import Test from "./Test";
  export default {
    name: "HelloWorld",
    components: {
      Test,
      TestJsx: {
        render() {
          return <div>我是vue文件的JSX渲染的</div>;
        },
      },
    },
    props: {
      msg: String,
    },
  };
</script>

<style lang="scss" scoped>
  .h1 {
    font-size: 30px;
    color: skyblue;
  }
  .hello {
    @include bgCover("@/assets/logo.png");
  }
</style>

<template>
  <div>请选择你最喜欢的水果</div>
  <div>
    <button v-for="(fruit, idx) in fruits" :key="fruit" @click="handleSelect(idx)">
      {{ fruit }}
    </button>
  </div>
  <div>你最喜欢的是【{{ select }}】</div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const fruits = ref(["芒果", "榴莲", "菠萝"]);
    const select = ref("");
    const handleSelect = (idx) => {
      select.value = fruits.value[idx];
    };
    return {
      fruits,
      select,
      handleSelect,
    };
  },
};
</script>

<template>
  <div>请选择你最喜欢的水果</div>
  <div>
    <button v-for="(fruit, idx) in data.fruits" :key="fruit" @click="data.handleSelect(idx)">
      {{ fruit }}
    </button>
  </div>
  <div>你最喜欢的是【{{ data.select }}】</div>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const data = reactive({
      fruits: ["芒果", "榴莲", "菠萝"],
      select: "",
      handleSelect(idx) {
        data.select = data.fruits[idx];
      },
    });
    return {
      data,
    };
  },
};
</script>

<template>
  <div>请选择你最喜欢的水果</div>
  <div>
    <button v-for="(fruit, idx) in fruits" :key="fruit" @click="handleSelect(idx)">
      {{ fruit }}
    </button>
  </div>
  <div>你最喜欢的是【{{ select }}】</div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      fruits: ["芒果", "榴莲", "菠萝"],
      select: "",
      handleSelect(idx) {
        data.select = data.fruits[idx];
      },
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>

<template>
  <div>请选择你最喜欢的水果</div>
  <div>
    <button v-for="(fruit, idx) in fruits" :key="fruit" @click="handleSelect(idx)">
      {{ fruit }}
    </button>
  </div>
  <!-- 1.和以前一样，在标签上写上 ref 名称-->
  <div ref="selectRef">你最喜欢的是【{{ select }}】</div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
  setup() {
    // 2. 定义一个和标签上 ref 名称一样的 Ref 实例
    const selectRef = ref(null);
    const data = reactive({
      fruits: ["芒果", "榴莲", "菠萝"],
      select: "",
      handleSelect(idx) {
        data.select = data.fruits[idx];
      },
    });
    watch(
      () => data.select,
      (val, preVal) => {
        // 得到一个 RefImpl 的对象, 通过 .value 访问到真实DOM
        console.log(selectRef.value);
        console.log(val, preVal);
      }
    );
    return {
      ...toRefs(data),
      selectRef,
    };
  },
};
</script>

<template>
  <div>这是地图弹窗</div>
</template>

<script>
export default {
  name: "MapDialog",
};
</script>

<template>
  <map-dialog />
</template>

<script>
import MapDialog from "./components/MapDialog.vue";
export default {
  name: "App",
  components: {
    MapDialog,
  },
};
</script>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.2"></script>

<template>
  <div id="map"></div>
</template>

<script>
import { onMounted } from "vue";
export default {
  name: "MapDialog",
  setup() {
    onMounted(() => {
      const { Map, Point } = BMap;
      const map = new Map("map");
      const point = new Point(116.404, 39.915);
      map.centerAndZoom(point, 16);
      map.enableScrollWheelZoom();
    });
  },
};
</script>

<style scoped>
#map {
  height: 400px;
}
</style>

<template>
  您选择的位置是：{{ place.address }}
  <a-button @click="toggleVisible">选择位置</a-button>
  <map-dialog v-model:visible="visible" :point="place.point" :range="place.range" @confirm="handleConfirm" />
</template>

<script>
import { reactive, toRefs } from "vue";
import MapDialog from "./components/MapDialog.vue";
export default {
  name: "App",
  components: {
    MapDialog,
  },
  setup() {
    const data = reactive({
      place: {},
      visible: false,
      toggleVisible() {
        data.visible = !data.visible;
      },
      handleConfirm(place) {
        data.place = place;
      },
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>

<template>
  <a-modal
    :visible="visible"
    centered
    title="请选择地址"
    cancelText="取消"
    okText="确定"
    @cancel="close"
    @ok="handleOk"
  >
    <a-form class="form" layout="inline" ref="mapForm" :model="form" :rules="rules">
      <a-form-item name="address">
        <a-auto-complete
          v-model:value="form.address"
          :options="addressSource"
          placeholder="请输入你要搜索的地点"
          @search="handleQuery"
          @select="handleSelect"
          style="width: 360px"
        />
      </a-form-item>
      <a-form-item name="range">
        <a-select v-model:value="form.range" placeholder="请选择范围" @change="setRadius">
          <a-select-option v-for="range in ranges" :key="range">
            {{ range }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div id="map"></div>
  </a-modal>
</template>

<script>
import { ref, reactive, toRefs, watch, nextTick } from "vue";
export default {
  name: "MapDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    range: {
      type: String,
      default: "300米",
    },
    point: {
      type: Object,
      default: () => ({ lng: 113.271429, lat: 23.135336 }),
    },
  },
  setup(props, { emit }) {
    const mapForm = ref(null);
    const formData = reactive({
      form: {
        address: "",
        range: props.range,
      },
      rules: {
        address: [
          {
            required: true,
            message: "请输入你要搜索的地点",
            trigger: "blur",
          },
        ],
      },
      ranges: ["100米", "300米", "500米"],
      addressPoint: props.point,
      addressSource: [],
      setRadius() {},
      handleQuery() {},
      handleSelect() {},
      close() {
        emit("update:visible", false);
        mapForm.value.resetFields();
      },
      handleOk() {
        mapForm.value.validate().then(() => {
          emit("confirm", {
            address: formData.form.address,
            point: formData.addressPoint,
            range: formData.form.range,
          });
          emit("update:visible", false);
        });
      },
    });

    const { Map, Point } = BMap;

    // 地图相关元素，因为可能在别的方法使用
    let map = null;

    // 初始化地图
    function initMap() {
      // 防止dom还未渲染
      nextTick(() => {
        // 禁用地图默认点击弹框
        map = new Map("map", { enableMapClick: false });
        const { lng, lat } = formData.addressPoint;
        const point = new Point(lng, lat);
        map.centerAndZoom(point, 16);
        map.enableScrollWheelZoom();
      });
    }
    watch(
      () => props.visible,
      (visible) => {
        visible && initMap();
      }
    );
    return {
      mapForm,
      ...toRefs(formData),
    };
  },
};
</script>

<style scoped>
#map {
  height: 400px;
}
.form {
  height: 66px;
}
</style>

<template>
  <div class="content">
    <div>
      <divider orientation="left">文件名设置</divider>
      <FileSetting :fileSettings="fileSettings" :diyForm="diyForm" />
      <divider orientation="left">输出设置</divider>
      <FileOutput :ext="ext" :enable="enable" />
      <divider orientation="left">输出结果</divider>
      <FileList :oldFiles="oldFiles" :newFiles="newFiles" />
    </div>
  </div>
</template>

<script>
  import { Divider } from "ant-design-vue";
  import FileList from "./FileList";
  import FileOutput from "./FileOutput";
  import FileSetting from "./FileSetting";
  export default {
    name: "ModifyFilename",
    components: {
      Divider,
      FileList,
      FileOutput,
      FileSetting,
    },
    computed: {
      // 新文件列表
      newFiles() {
        return this.oldFiles;
      },
    },
    data() {
      return {
        // 存放这文件名设置的数据
        fileSettings: {},
        // 存放自定义序号数组
        diyForm: {},
        // 启用输出设置
        enable: false,
        // 输出设置后缀名
        ext: [],
        // 原文件列表
        oldFiles: [],
      };
    },
  };
</script>

<style lang="less" scoped>
  .content {
    width: 1366px;
    box-sizing: border-box;
    padding: 0 15px;
    margin: 0 auto;
    overflow-x: hidden;
  }
</style>

<template>
  <div class="content">
    <div v-for="item in components" :key="item.name">
      <divider orientation="left">{{ item.label }}</divider>
      <component
        :is="item.name"
        v-bind="{ ...getProps(item.props) }"
        @update="
          (key, val) => {
            update(item.props, key, val);
          }
        "
      />
    </div>
  </div>
</template>

<script>
  import getNewFileList from "@/utils/";
  import { Divider } from "ant-design-vue";
  import FileList from "./FileList";
  import FileOutput from "./FileOutput";
  import FileSetting from "./FileSetting";
  export default {
    name: "ModifyFilename",
    components: {
      Divider,
      FileList,
      FileOutput,
      FileSetting,
    },
    // 传递给深层级子组件
    provide() {
      return {
        parent: this,
      };
    },
    data() {
      return {
        components: [
          {
            label: "文件名设置",
            name: "FileSetting",
            props: "fileSettingsProps",
          },
          {
            label: "输出设置",
            name: "FileOutput",
            props: "fileOutputProps",
          },
          {
            label: "输出结果",
            name: "FileList",
            props: "fileListProps",
          },
        ],
        fileSettingsProps: {
          fileSettings: {
            filename: {
              value: "",
              span: 6,
              type: "file",
              placeholder: "请输入新的文件名",
            },
            serialNum: {
              value: "",
              span: 6,
              type: "sort-descending",
              placeholder: "起始序号(默认支持纯数字或纯字母)",
            },
            increment: {
              value: 1,
              span: 2,
              placeholder: "增量",
              isNum: true,
            },
            preReplaceWord: {
              value: "",
              span: 3,
              type: "file",
              placeholder: "替换前的字符",
            },
            replaceWord: {
              value: "",
              span: 3,
              type: "file",
              placeholder: "替换后的字符",
            },
          },
          diyForm: {
            diySerial: "",
            separator: "",
            diyEnable: false,
          },
        },
        fileOutputProps: {
          enable: false,
          ext: ["", ""],
        },
        oldFiles: [],
      };
    },
    computed: {
      newFiles() {
        const { fileSettings, diyForm } = this.fileSettingsProps;
        const { ext, enable } = this.fileOutputProps;
        const { diySerial, separator, diyEnable } = diyForm;
        return getNewFileList(
          this.oldFiles,
          fileSettings,
          ext,
          enable,
          this.getRange(diySerial, separator, diyEnable)
        );
      },
    },
    watch: {
      "fileSettingsProps.diyForm.diySerial"(val) {
        if (!val) {
          this.fileSettingsProps.diyForm.diyEnable = !1;
        }
      },
    },
    methods: {
      getRange(diySerial, separator, enable) {
        if (!enable) return null;
        !separator ? (separator = ",") : null;
        return diySerial.split(separator);
      },
      getProps(key) {
        if (key === "fileListProps") {
          return {
            oldFiles: this.oldFiles,
            newFiles: this.newFiles,
          };
        }
        return this[key] || {};
      },
      update(props, key, val) {
        if (props === "fileListProps") {
          return (this[key] = val);
        }
        this[props][key] = val;
      },
    },
  };
</script>
<style lang="less" scoped>
  .content {
    width: 1366px;
    box-sizing: border-box;
    padding: 0 15px;
    margin: 0 auto;
    overflow-x: hidden;
  }
</style>

<template>
  <a-list bordered :dataSource="fileList" :pagination="pagination" ref="list">
    <div slot="header" class="list-header">
      <strong>
        {{ filename }}
      </strong>
      <a-button type="danger" size="small" @click="clearFiles">
        清空
      </a-button>
    </div>
    <a-list-item slot="renderItem" slot-scope="item, index">
      <a-list-item-meta>
        <a-tooltip slot="title" :overlayStyle="{ maxWidth: '500px' }">
          <template slot="title">
            {{ item.name }}
          </template>
          {{ item.name }}
        </a-tooltip>
      </a-list-item-meta>
      <a-button
        ghost
        type="danger"
        size="small"
        @click="
          () => {
            delCurrent(index);
          }
        "
      >
        删除
      </a-button>
    </a-list-item>
  </a-list>
</template>

<script>
  import { List, Button, Tooltip } from "ant-design-vue";
  const { Item } = List;
  export default {
    name: "FileListItem",
    props: {
      fileList: {
        type: Array,
        required: true,
      },
      filename: {
        type: String,
        required: true,
      },
      pagination: {
        type: Object,
        default: () => ({
          pageSize: 10,
          showQuickJumper: true,
          hideOnSinglePage: true,
        }),
      },
    },
    inject: ["parent"],
    components: {
      "a-list": List,
      "a-list-item": Item,
      "a-list-item-meta": Item.Meta,
      "a-button": Button,
      "a-tooltip": Tooltip,
    },
    methods: {
      delCurrent(current) {
        this.parent.oldFiles.splice(current, 1);
      },
      clearFiles() {
        this.parent.update("fileListProps", "oldFiles", []);
      },
      drop(e) {
        e.preventDefault();
        this.parent.update("fileListProps", "oldFiles", [
          ...this.parent.oldFiles,
          ...e.dataTransfer.files,
        ]);
      },
    },
    mounted() {
      let $el = this.$refs.list.$el;
      this.$el = $el;
      if ($el) {
        $el.ondragenter = $el.ondragover = $el.ondragleave = () => false;
        $el.addEventListener("drop", this.drop, false);
      }
    },
    destroyed() {
      this.$el && this.$el.removeEventListener("drop", this.drop, false);
    },
  };
</script>

<style lang="less" scoped>
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>

<template>
  <a-modal
    title="自定义序号"
    :visible="serialNumVisible"
    @cancel="serialNumVisible = !1"
    @ok="handleDiySerialNum"
  >
    <a-form-model
      ref="diyForm"
      :model="diyForm"
      :rules="rules"
      labelAlign="left"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-model-item label="自定义序号" prop="diySerial">
        <a-input
          v-model="diyForm.diySerial"
          placeholder="请输入自定义序号"
          aria-placeholder="请输入自定义序号"
        />
      </a-form-model-item>
      <a-form-model-item label="自定义分隔符" prop="separator">
        <a-input
          v-model="diyForm.separator"
          placeholder="请输入自定义序号分隔符(默认,)"
          aria-placeholder="请输入自定义序号分隔符"
        />
      </a-form-model-item>
      <a-form-model-item label="是否启用自定义">
        <a-switch v-model="diyForm.diyEnable" :disabled="disabled" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<template>
  <a-row type="flex" :gutter="16">
    <a-col
      :key="key"
      :span="setting.span"
      v-for="(setting, key) in fileSettings"
    >
      <template v-if="setting.isNum">
        <a-input-number
          style="width:100%"
          :placeholder="setting.placeholder"
          :min="1"
          v-model="setting.value"
        />
      </template>
      <template v-else>
        <a-input
          :placeholder="setting.placeholder"
          v-model="setting.value"
          allowClear
        >
          <a-icon
            slot="prefix"
            :type="setting.type"
            style="color:rgba(0,0,0,.25)"
          />
        </a-input>
      </template>
    </a-col>
    <a-col>
      <a-button @click="serialNumVisible = !0">
        自定义序号
      </a-button>
    </a-col>
    <a-col>
      <a-button type="primary" @click="handleModify">
        确定修改
      </a-button>
    </a-col>

    <a-modal
      title="自定义序号"
      :visible="serialNumVisible"
      @cancel="serialNumVisible = !1"
      @ok="handleDiySerialNum"
    >
      <a-form-model
        ref="diyForm"
        :model="diyForm"
        :rules="rules"
        labelAlign="left"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-model-item label="自定义序号" prop="diySerial">
          <a-input
            v-model="diyForm.diySerial"
            placeholder="请输入自定义序号"
            aria-placeholder="请输入自定义序号"
          />
        </a-form-model-item>
        <a-form-model-item label="自定义分隔符" prop="separator">
          <a-input
            v-model="diyForm.separator"
            placeholder="请输入自定义序号分隔符(默认,)"
            aria-placeholder="请输入自定义序号分隔符"
          />
        </a-form-model-item>
        <a-form-model-item label="是否启用自定义">
          <a-switch v-model="diyForm.diyEnable" :disabled="disabled" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-row>
</template>

<script>
  import {
    Row as ARow,
    Col as ACol,
    Icon as AIcon,
    Input as AInput,
    Switch as ASwitch,
    Button as AButton,
    InputNumber as AInputNumber,
    FormModel as AFormModel,
  } from "ant-design-vue";
  import { saveAs } from "file-saver";
  // 是否符合默认序号规范
  import { isDefaultSerialNum } from "@/utils/regexp";
  const AFormModelItem = AFormModel.Item;

  // 获取content-disposition响应头的默认文件名
  const getFileName = (str) => str.replace(/^.*filename="?([^"]+)"?.*$/, "$1");

  export default {
    name: "FileSetting",
    props: {
      fileSettings: {
        type: Object,
        required: true,
      },
      diyForm: {
        type: Object,
        required: true,
      },
    },
    components: {
      ARow,
      ACol,
      AIcon,
      AInput,
      ASwitch,
      AButton,
      AInputNumber,
      AFormModel,
      AFormModelItem,
    },
    inject: ["parent"],
    // 没有自定义序号时不可操作
    computed: {
      disabled() {
        return !this.diyForm.diySerial;
      },
    },
    data() {
      return {
        serialNumVisible: !1,
        rules: {
          diySerial: [
            {
              required: true,
              message: "请输入自定义序号",
              trigger: "blur",
            },
          ],
        },
      };
    },
    methods: {
      handleModify() {
        // 获取填写的序号
        const serialNum = this.fileSettings.serialNum.value;
        // 当没有启用自定义时，走默认规则
        if (isDefaultSerialNum(serialNum) && !this.diyForm.enable) {
          return this.$message.error("请输入正确的序号，格式为纯数字或纯字母");
        }
        const { newFiles, oldFiles } = this.parent;
        const data = new FormData();
        for (let i = 0; i < oldFiles.length; i++) {
          const { name } = newFiles[i];
          data.append("files", oldFiles[i]);
          data.append("name", name);
        }
        this.axios({
          method: "post",
          url: "/upload",
          data,
          responseType: "blob",
        })
          .then((res) => {
            const disposition = res.headers["content-disposition"];
            // 转换为Blob对象
            let file = new Blob([res.data], {
              type: "application/zip",
            });
            // 下载文件
            saveAs(file, getFileName(disposition));
            this.$message.success("修改成功");
          })
          .catch(() => {
            this.$message.error("发生错误");
          });
      },
      handleDiySerialNum() {
        this.$refs.diyForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.serialNumVisible = !1;
        });
      },
    },
  };
</script>