<template>
  <a-modal
    :width="600"
    v-model="visible"
    title="自定义链接"
    :maskClosable="false"
    :footer="false"
    @cancel="clearLink"
  >
    <a-form-model
      ref="ruleForm"
      :rules="rules"
      layout="horizontal"
      :model="form"
      :labelCol="{ span: 6 }"
      :wrapperCol="{ span: 16 }"
    >
      <a-form-model-item label="跳转类型">
        <a-radio-group v-model="formType" @change="typeChange" prop="type">
          <a-radio-button value="h5"> 网页 </a-radio-button>
          <a-radio-button value="mp"> 小程序 </a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item v-if="formType == 'h5'" label="页面名称" prop="name">
        <a-input v-model="form.name" placeholder="名字标示" />
      </a-form-model-item>
      <a-form-model-item v-if="formType == 'h5'" label="网页路径" prop="path">
        <a-input v-model="form.path" placeholder="https://" />
      </a-form-model-item>
      <a-form-model-item
        v-if="formType == 'mp'"
        label="小程序appId"
        prop="appId"
      >
        <a-input v-model="form.appId" placeholder="要打开的小程序appId" />
      </a-form-model-item>
      <a-form-model-item v-if="formType == 'mp'" label="小程序路径(选填)">
        <a-input v-model="form.path" placeholder="pages/index?id=123" />
      </a-form-model-item>
      <div style="margin-bottom: 20px; text-align: center">
        提示：小程序默认使用半屏模式打开，当不符合半屏模式条件时会按正常方式打开。
      </div>
      <!-- <a-form-model-item v-if="formType == 'mp'" label="小程序数据" prop="extraData">
        <a-input v-model="form.extraData" placeholder="给目标小程序的参数，例如：id=123&type=9" />
      </a-form-model-item> -->
      <a-form-model-item :wrapper-col="{ span: 24 }">
        <div style="text-align: center">
          <a-button type="primary" @click="checkOuterLink"> 确定 </a-button>
          <a-button style="margin-left: 20px" @click="clearLink">
            取消
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      formType: "h5",
      form: {
        name: "",
        path: "",
        appId: "",
        extraData: "",
      },
      rules: {
        type: { required: true },
        name: { required: false },
        path: {
          required: true,
          trigger: "blur",
          validator: (rule, value, callback) => {
            const value2 = value.trim();
            if (rule.required && !value2) {
              return callback(new Error("页面路径不能空"));
            } else if (
              value2 &&
              !/^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/.test(
                value2
              )
            ) {
              return callback(new Error("请填写正确的页面路径!"));
            } else {
              callback();
            }
          },
        },
        appId: { required: true, message: "appId不能为空", trigger: "change" },
        extraData: { required: false },
      },
    };
  },
  methods: {
    show() {
      this.formType = "h5";
      this.visible = true;
    },
    typeChange() {
      this.reset();
      this.rules.path.required = this.formType == "mp" ? false : true;
    },
    checkOuterLink() {
      const that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const typeArg = that.formType,
            name = that.form.name;
          let pathName = "",
            argName = "",
            argKey = "";
          if (typeArg == "h5") {
            pathName = name ? `外链(${name})` : "外链";
            argKey = "$H5Link";
            argName = that.form.path;
          } else {
            const appId = that.form.appId;
            pathName = name ? `${name}(${appId})` : `小程序(${appId})`;
            argKey = "$MPLink";
          }
          that.visible = false;
          that.$emit("promise", {
            success: true,
            pathName: pathName,
            path: that.form.path || "",
            argName: that.form.path,
            argKey: argKey,
            argValue: that.form.appId || "",
            argParams: typeArg == "mp" ? that.form.extraData : "",
          });
        } else {
          return false;
        }
      });
    },
    reset() {
      this.$refs.ruleForm.clearValidate();
      this.form = {
        name: "",
        path: "",
        appId: "",
        extraData: "",
      };
    },
    clearLink() {
      this.visible = false;
      this.reset();
      this.$emit("promise", {
        success: false,
        path: "",
      });
    },
  },
};
</script>
