<template lang="pug">
el-dialog.video(
  title=""
  width="640px"
  :visible.sync="show"
  :destroy-on-close="true"
  @before-close="show = false; $emit('cancel')"
)
  .video__title 插入在线视频

  el-input(
    v-model="address"
    placeholder="请输入视频地址"
  )
    template(slot="prepend") https://
  .video__hint(v-if="valid") 目前仅支持 哔哩哔哩 网站视频
  .video__hint__red(v-else) 目前仅支持 哔哩哔哩 网站视频

  EditorButton.video__btn(
    shape="square"
    :disabled="!valid"
    @click="show = false; $emit('confirm', address)"
  ) 确定
</template>

<script>
import EditorButton from "./button"

export default {
  data() {
    return {
      show: true,
      address: "",
    }
  },

  computed: {
    valid() {
      if(this.address === "") return false

      const exp = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi // eslint-disable-line
      return this.address.match(new RegExp(exp)) && this.address.indexOf("bilibili") !== -1
    },
  },

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

<style lang="stylus">
.video
  .el-dialog__body
    display: flex
    flex-direction: column
    padding: 0px 128px 40px

  .el-input
    margin-top: 41px

.video__title
  font-size: 20px
  font-weight: bold
  align-self: center

.video__btn
  border-radius: 3px
  padding: 10px 20px
  font-size: $base
  align-self: flex-end
  margin-top: 38px

.video__hint
  margin-top: 10px

.video__hint__red
  margin-top: 10px
  color: $red
</style>
