<template>
  <view class="popup-confirm">
    <u-popup
      :show="show"
      :round="10"
      mode="center"
      @close="close"
      :customStyle="popupCustomStyle"
      :closeOnClickOverlay="false"
    >
      <view class="main flex align-center">
        <base-imgae class="u-m-r-10" :src="iconSrc" width="24px" height="24px"></base-imgae>
        <view class="text u-font-16 text-title">{{ text }}</view>
      </view>
      <view class="footer flex justify-end">
        <view class="flex">
          <u-button class="u-m-r-16" :customStyle="closeCustomStyle" @click="close()"
            >取消</u-button
          >
          <u-button type="primary" :customStyle="confirmCustomStyle" @click="confirm()">{{
            confirmText
          }}</u-button>
        </view>
      </view>
    </u-popup>
    <!-- 		<popup-confirm :show.sync="showLogout" @confirm="handleLogoutConfirm" text="确认退出登录吗？" confirm-text="确认退出"></popup-confirm>
 -->
  </view>
</template>
<script>
export default {
  name: 'popup-confirm',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    text: {
      type: String,
      default: '',
    },
    width: {
      type: String,
      default: '380px',
    },
    confirmText: {
      type: String,
      default: '确认',
    },
    type: {
      type: String,
      default: 'warning',
    },
  },
  data() {
    return {};
  },
  computed: {
    iconSrc() {
      return `/static/components/popup-confirm/${this.type}.svg`;
    },
    popupCustomStyle() {
      return {
        width: this.width,
      };
    },
    closeCustomStyle() {
      return {
        width: '60px',
        height: '36px',
        border: 'none',
        color: '#1E252B',
        background: '#eff2f4',
      };
    },
    confirmCustomStyle() {
      return {
        width: '88px',
        height: '36px',
        background: '#2196F3',
      };
    },
  },
  methods: {
    close() {
      this.$emit('update:show', false);
      this.$emit('close');
    },
    confirm() {
      this.$emit('confirm');
    },
  },
};
</script>

<style lang="scss">
.popup-confirm {
  .main {
    padding: 24px;
  }

  .footer {
    padding: 0 20px 20px;
  }
}
</style>