<template>
  <div class="h100 w100">
    <zgh-header :title="$route.name"></zgh-header>
    <div class="common-top mainBox">
      <!------------强大的分割线-------------->
      <button class="common-btn mg20" @click="showConfirm1">Confirm</button>
      <button class="common-btn mg20" @click="showConfirm">Confirm 弹出input</button>
      <div class="highlight mgB30">
        <div class="wp fs14">
          <p>
            显示：this.$confirm.show(options)
          </p>
          <p>
            隐藏：this.$confirm.close()
          </p>
          <pre>
            <code class="hljs language-html">
    <h3 class="bold fs16">本例用法：</h3>
              {{code | htmlDecode}}
            </code>
          </pre>
          <h3 class="bold color3 textC pdB20">options参数说明</h3>
          <zgh-table :tbody="tbody"></zgh-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        n: 0,
        nickname:'执法大队',
        tbody: [
          {name: 'message', explain: '提示文字', type: 'String', default: ''},
          {name: 'isMaskClick', explain: '点击遮罩是否隐藏', type: 'Boolean', default: 'false'},
          {name: 'styles', explain: '新增自定义样式', type: 'Object', default: ''},
          {name: 'onHide', explain: '隐藏Confirm', type: 'Function', default: ''},
          {name: 'onShow', explain: '显示Confirm', type: 'Function', default: ''},
          {name: 'isInput', explain: '是否是输入框', type: 'Boolean', default: 'false'},
          {name: 'content', explain: '输入框内容', type: 'String', default: ''}
        ],
        code: `
        showConfirm() {
          this.$confirm.show({
            message: '修改昵称',
            content:'执法大队',
            isInput:true,
            onShow: (confirm) => {
              console.log(获取输入框值：confirm.content)
            },
            onHide: () => {
              this.$confirm.close()
            },
            styles:{borderRadius:'5px'}
          })
        }`
      }
    },
    computed: {},
    mounted() {
    },
    methods: {
      showConfirm() {
        this.$confirm.show({
          message: '修改昵称',
          content:this.nickname,
          isInput:true,
          onShow: (confirm) => {
            console.log(confirm)
            this.nickname = confirm.content
            console.log(this.nickname)
          },
          onHide: () => {
            this.$confirm.close()
          }
        })
      },

      showConfirm1() {
        this.$confirm.show({
          message: '提示文字',
          onShow: (confirm) => {
            console.log(confirm)
          },
          onHide: () => {
            this.$confirm.close()
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config.less");

  a {
    display: block;
    text-align: center;
    .lh(70);
  }
</style>
