<template lang="pug">
el-dialog.link(
  :title="type + '超链接'"
  :visible.sync="show"
  :destroy-on-close="true"
  :close-on-click-modal="false"
  @before-close="show = false; $emit('cancel')"
)
  el-input(
    v-model="address"
    placeholder="请输入链接地址"
  )
    template(slot="prepend")
      img(:src="require('../img/link-gray.svg')")

  el-input(
    v-model="hint"
    style="margin-top: 10px"
    placeholder="文字说明 (选填)"
  )

  div(slot="footer")
    EditorButton.link__btn(
      shape="square"
      :disabled="address === ''"
      @click="confirm"
    ) 确定
</template>

<script>
import EditorButton from "./button"

export default {
  data() {
    return {
      show: true,
      address: "",
      hint: "",
      type: "插入",
    }
  },

  methods: {
    confirm() {
      this.show = false
      this.$emit("confirm", {
        address: this.address.startsWith("http") ? this.address : ("http://" + this.address),
        hint: this.hint,
      })
    },
  },

  components: {
    EditorButton,
  },
}
</script>

<style lang="stylus">
.link__btn
  border-radius: 3px
  padding: 5px 10px
  font-size: $base

.el-input-group__append, .el-input-group__prepend
  padding: 0 10px
</style>
