<template>
  <div>
    <bxs-cell-group>
      <bxs-cell 
        title="普通alert" 
        is-link 
        @click="alert('正文内容可带html标签')"
        />
      <bxs-cell 
        title="带标题alert" 
        is-link 
        @click="alert('正文内容可带html标签','温馨提示')"
        />
      <bxs-cell 
        title="带说明文字alert" 
        is-link 
        @click="alert('正文内容可带html标签','温馨提示','说明文字')"
        />
      <bxs-cell 
        title="普通dialog" 
        is-link 
        @click="dialog('普通dialog')"
        />
      <bxs-cell 
        title="带标题dialog" 
        is-link 
        @click="dialog('普通dialog','温馨提示')"
        />
      <bxs-cell 
        title="带说明文字dialog" 
        is-link 
        @click="dialog('普通dialog','温馨提示', '说明文字')"
        />
      <bxs-cell 
        title="自定义内容dialog" 
        is-link 
        @click="showCustom()"
        />
      <bxs-cell 
        title="通用调用方式" 
        is-link 
        @click="common()"
        />
      <bxs-cell 
        title="按钮高亮按照正反向操作变化" 
        is-link 
        @click="dialogButtonToggle('按钮高亮按照正反向操作变化')"
        />
      <bxs-cell 
        title="按钮高亮颜色可自定义" 
        is-link 
        @click="dialogButtonColor('按钮高亮颜色可自定义', '#ff5000')"
        />
    </bxs-cell-group>
    <bxs-message-box
      v-model="isShow"
      @before-close="beforeClose"
      >
      <bxs-input
        label="用户名"
        type="text"
        placeholder="请输入内容"
        />
      <bxs-input
        label="密码"
        type="text"
        placeholder="请输入密码"
        />
    </bxs-message-box>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    common() {
      this.$messagebox({
        title: '温馨提示',
        message: '正文内容',
        tips: '说明文字',
        className: 'customName',
        messageAlign: 'center',
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        showCancel: true,
        showConfirm: true,
      })
        .then(() => {
          console.log('确定')
        })
        .catch(() => {
          console.log('取消')
        })
    },
    alert(message, title, tips) {
      this.$messagebox.alert(message, title, tips).then(() => {
        console.log('知道了')
      })
    },
    dialog(message, title, tips) {
      this.$messagebox
        .dialog(message, title, tips)
        .then(() => {
          console.log('确定')
        })
        .catch(() => {
          console.log('取消')
        })
    },
    dialogButtonToggle(message) {
      this.$messagebox
        .dialog(message, {
          cancelButtonColor: '#508cee',
          confirmButtonColor: '',
        })
        .then(() => {
          console.log('确定')
        })
        .catch(() => {
          console.log('取消')
        })
    },
    dialogButtonColor(message, color) {
      this.$messagebox
        .dialog(message, {
          confirmButtonColor: color,
        })
        .then(() => {
          console.log('确定')
        })
        .catch(() => {
          console.log('取消')
        })
    },
    showCustom() {
      this.isShow = true
    },
    beforeClose(action, done) {
      console.log(action)
      done()
    },
  },
}
</script>
