<template>
  <el-form class="code-gen-datasource-form" :model="form" ref="form">
    <pro-layout-contaner
      :columnCount="2"
      :gutter="10"
      :enableBottomGutter="false"
    >
      <pro-input label="数据源类型" v-model="form.typeName" prop="typeName" />
      <pro-input
        label="数据源名称"
        v-model="form.name"
        prop="name"
        :rules="$store.vStrRequired"
      />
      <pro-layout-formitem
        label="数据源配置:参考mars-pro/src/pro/mixins/dataSource"
        :span="24"
      >
        <CodeEdit :code="form.options" ref="options" />
      </pro-layout-formitem>
    </pro-layout-contaner>
    <div class="el-dialog__footer">
      <pro-action @asyncHandler="handleFormatCode" text="格式化" />
      <pro-action @handler="$emit('customerClose', form)" text="取 消" />
      <pro-action
        @asyncHandler="handlerSave"
        :text="selectpdata ? '保存编辑' : '保存并继续'"
        type="primary"
      />

    </div>
  </el-form>
</template>

<script>
import CodeEdit from "../components/code-edit";
import { post } from "mars-pro/src/pro/request";

const defaultOptions = `{
name: '数据源名称',
target: '数据源目标: [url|array|object]',
dataField: '?',
fieldMap: {}
}`;

export default {
  components: { CodeEdit },
  props: {
    //数据源Id
    selectpdata: {},
  },
  data() {
    const _selectpdata = this.selectpdata || {};
    return {
      form: {
        typeName: _selectpdata.typeName,
        name: _selectpdata.name,
        options: _selectpdata.options || defaultOptions,
      },
    };
  },
  methods: {
    //验证数据源配置
    validateOptions() {
      const formOptions = this.$refs.options.inputCode;
      try {
        return Function(`return ${formOptions}`).call(this);
      } catch (e) {
        //
        this.$message.error(`数据源配置语法错误:
${e.message}
         `);
        return false;
      }
    },
    async handlerSave() {
      try {
        //表单校验
        await this.$refs.form.validate();
        //验证数据源配置
        if (this.validateOptions() !== false) {
          const _selectpdata = this.selectpdata || {};
          const { err } = await post("/mock/api/code-gen/data-source/save", {
            data: {
              ...this.form,
              options: this.$refs.options.inputCode,
              ...(_selectpdata._id ? {_id: _selectpdata._id} : {})
            },
          }).done();

          if (!err) {
            this.$store.dataSourceList.loadDatas();

            //如果是编辑, 则保存成功后 便关闭
            this.$emit('customerClose', this.form)
          }
        }
      } catch (e) {}
    },
    async handleFormatCode(){
      const formOptions = this.$refs.options.inputCode;
      this.form.options = formOptions
      if (formOptions){
        const { response } = await post("/mock/api/code-gen/user-mock/formatCode", {
           code: formOptions
          }).done();
          this.form.options = response.data.formatCode
          
      }
    }
  },
};
</script>

<style lang="scss">
.code-gen-datasource-form {
  .vue-codemirror {
    width: 100%;
    display: inline-block;
  }
}
</style>