<template>
  <section class="mock">
    <el-dropdown>
      <div class="toolbarBtn" v-text="`生成随机数据`"/>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <ai-dialog-btn dialogTitle="随机数据配置" :customFooter="false" @onConfirm="submit" appendToBody @open="getBeans" width="500px">
            <div class="btn" slot="btn">生成数据</div>
            <el-form size="small" label-width="60px">
              <el-form-item label="接口">
                <el-input v-model="action" placeholder="请输入接口" @change="handleAction"/>
              </el-form-item>
            </el-form>
          </ai-dialog-btn>
        </el-dropdown-item>
        <el-dropdown-item>
          <ai-dialog-btn dialogTitle="随机数据配置" :customFooter="false" @onConfirm="generateForm" appendToBody @open="getBeans" width="500px">
            <div class="btn" slot="btn">页面数据</div>
            <el-form size="small" label-width="60px">
              <el-form-item label="接口">
                <el-input v-model="action" placeholder="请输入接口" @change="handleAction"/>
              </el-form-item>
            </el-form>
          </ai-dialog-btn>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </section>
</template>

<script>
import Mock from "mockjs"
import instance from "../router/axios";

export default {
  name: "mock",
  data() {
    return {
      instance,
      action: "",
      config: "",
      swagger: {},//swagger接口对象集合
    }
  },
  computed: {
    url: v => /addOrUpdate/.test(v.action) ? v.action : `/${v.action}/addOrUpdate`
  },
  methods: {
    handleAction() {
      let formName = this.swagger.paths[this.url]?.post.parameters.find(e => e.in == "body")?.name || ""
      const {Random} = Mock
      if (formName) {
        formName = Random.capitalize(formName)
        const props = this.swagger.definitions[formName]?.properties || {}
        Object.keys(props).map(e => {
          const item = props[e]
          if (item.format == "date-time") {
            props[e] = () => Random.datetime()
          } else if (/[0-9a-zA-Z]/.test(item.description)) {
            props[e] = () => Random.pick(item.description?.match(/\b[0-9a-zA-Z]+\b/g))
          } else if (/address/i.test(e)) {
            props[e] = () => Random.county(true)
          } else if (/userName/i.test(e)) {
            props[e] = () => Random.cname()
          } else if (/lat/.test(e)) {
            props[e] = () => Random.float(3, 53, 6, 8)
          } else if (/lng/.test(e)) {
            props[e] = () => Random.float(73, 135, 6, 8)
          } else if (item.type == "number") {
            props[e] = () => Random.float(0, 1000, 0, 2)
          } else if (item.type == "integer") {
            props[e] = () => Random.integer(0, 1000)
          } else if (item.type == "string") {
            props[e] = () => Random.ctitle()
          } else props[e] = null
        })
        this.config = props
      }
    },
    getBeans() {
      this.instance.get("/app/v2/api-docs", {withoutToken: true}).then(res => this.swagger = res)
    },
    generateForm() {
      const {mock} = Mock
      this.$vm.$emit("mock", mock(this.config))
    },
    submit() {
      const {mock} = Mock
      const data = mock({
        'list|50-100': [this.config]
      })
      Promise.all(data.list.map(e => this.instance.post(this.url, e))).then(() => this.$message.success("随机数据生成,执行完毕!"))
    }
  }
}
</script>

<style lang="scss" scoped>
.mock {
  .btn {
    cursor: pointer;
    user-select: none;
    padding: 0 12px;

    &:hover {
      color: rgba(#fff, .8);
    }
  }
}
</style>
