<template>
  <section class="mock">
    <ai-dialog-btn dialogTitle="随机数据配置" :customFooter="false" appendToBody @onConfirm="submit">
      <div class="btn" slot="btn">生成随机数据</div>
      <el-form size="small" label-width="120px">
        <el-form-item label="接口">
          <el-input v-model="action" placeholder="请输入接口"/>
        </el-form-item>
        <el-form-item label="mock配置">
          <el-input type="textarea" rows="5" v-model="config" placeholder="请输入mock配置"/>
        </el-form-item>
      </el-form>
    </ai-dialog-btn>
  </section>
</template>

<script>
import Mock from "mockjs"

export default {
  name: "mock",
  data() {
    return {
      action: "",
      config: ""
    }
  },
  watch: {
    config(v) {
      console.log(eval(v))
    }
  },
  methods: {
    submit() {
      const {mock, Random} = Mock
      const data = mock({
        'list|100-200': [JSON.parse(this.config)]
      })
      Promise.all(data.list.map(e => this.$request.post(this.action, 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>
