<template>
  <div>
    <div style="height: 60px;"></div>
    <u-tabbar fixed placeholder>
      <div class="bottom-btn">
        <div class="btn">
          <u-button type="error" plain size="mini" @click="handleReject">驳回</u-button>
        </div>
        <div class="btn">
          <u-button type="primary" size="mini" @click="handlePermit">通过</u-button>
        </div>
        <div class="btn" v-if="showBtn">
          <u-button type="warning" size="mini" @click="handleEnd">终审</u-button>
        </div>
      </div>
    </u-tabbar>

    <!-- 驳回弹框, 展示文本域 填写驳回原因 -->
    <u-modal
      :show="showRejectModal"
      title="驳回原因"
      showCancelButton
      @cancel="showRejectModal = false"
      @confirm="reject"
    >
      <u-textarea v-model="rejectReason" placeholder="请输入驳回原因" @blur="filter"/>
    </u-modal>

    <!-- 确认弹框 -->
    <u-modal
      :show="showModal"
      title="提示"
      :content="modalContent"
      showCancelButton
      @cancel="showModal = false"
      @confirm="handleModal"
      style="text-align: center"
    ></u-modal>
  </div>
</template>

<script>
import { filterInput } from '@/utils/regular'

export default {
  props: {
    showBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 驳回弹框
      showRejectModal: false,
      // 驳回原因
      rejectReason: '',
      // 确认弹框
      showModal: false,
      // 确认弹框内容
      modalContent: '',
      // 是否是终审
      isEnd: false
    }
  },
  methods: {
    filter() {
      this.rejectReason = filterInput(this.rejectReason)
    },
    handleReject() {
      this.rejectReason = ''
      this.showRejectModal = true
    },
    reject() {
      console.log('驳回原因-->子元素:', this.rejectReason)
      if (!this.rejectReason.trim()) {
        uni.showToast({
          title: '请输入驳回原因',
          icon: 'none'
        })
        return
      }
      // 调用父元素的方法
      this.$emit('reject', this.rejectReason)
      this.showRejectModal = false
    },
    // 通过
    handlePermit() {
      this.isEnd = false
      console.log('通过')
      // 弹框提示: 是否确认通过审批
      this.showModal = true
      this.modalContent = '是否确认通过审批？'
    },
    // 终审
    handleEnd() {
      this.isEnd = true
      console.log('终审')
      // 弹框提示: 是否确认终审
      this.showModal = true
      this.modalContent = '是否确认终审？'
    },
    // 确认
    handleModal() {
      if (!this.isEnd) {
        console.log('通过-->子元素')
        this.$emit('handlePermit')
      } else {
        console.log('终审-->子元素')
        this.$emit('handleEnd')
      }
      this.showModal = false
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .btn {
    width: 60px;
    margin-right: 10px;
    &:last-child {
      margin-right: 20px;
    }
  }
}
/deep/ .u-modal__content {
  padding: 12px !important;
}
</style>
