<template>
  <view
    class="dialog-box"
    :style="{
      '--k-color-primary-01': themeColor,
      'background-color': boxBgColor ? boxBgColor : 'rgba(0,0,0,0.3)',
    }"
    @click="close"
  >
    <view class="dialog-box__content" @click.stop="clickContent">
      <view class="dialog-box__content__title">
        <k-typography typographyIndex="Title3">
          {{ title }}
        </k-typography>
      </view>
      <view class="dialog-box__content__sub-content">
        <slot name="content"></slot>
        <slot name="contentSub"></slot>
      </view>
      <view class="dialog-box__content__btn">
        <view v-if="!btnSingleText" class="dialog-box__content__btn__double">
          <view
            @click.stop="clickLeftBtn"
            class="dialog-box__content__btn__double__left"
            >{{ leftBtnText }}</view
          >
          <view
            @click.stop="clickRightBtn"
            class="dialog-box__content__btn__double__right"
            >{{ rightBtnText }}</view
          >
        </view>
        <view v-else class="dialog-box__content__btn__single" @click="clickBtn">
          {{ btnSingleText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue, { VueConstructor } from 'vue';
import props from './props';
type PropType = {
  boxBgColor: string;
  title: string;
  leftBtnText: string;
  rightBtnText: string;
  btnSingleText: string;
  themeColor: string;
};
export default (Vue as VueConstructor<Vue & PropType>).extend({
  name: 'k-dialog',
  mixins: [props],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    clickContent() {
      // console
    },
    close() {
      this.$emit('close');
    },
    clickBtn() {
      this.$emit('click');
    },
    clickLeftBtn() {
      this.$emit('clickLeftBtn');
    },
    clickRightBtn() {
      this.$emit('clickRightBtn');
    },
  },
});
</script>

<style scoped lang="scss">
/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-no-important */
/* stylelint-disable comment-empty-line-before */
.dialog-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transform: translateZ(10000px);

  &__content {
    position: relative;
    top: 40%;
    transform: translateY(-40%);
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    width: 304px;

    &__title {
      text-align: center;
      margin-bottom: 22px;
      padding-top: 30px;
    }

    &__sub-content {
      width: calc(100% - 44px);
      height: auto;
      padding-left: 22px;
      padding-right: 22px;
      max-height: 238px;
      overflow-y: scroll;
    }

    &__btn {
      height: 49px;
      border-top: 1px solid #eee;
      width: 100%;
      margin-top: 18px;

      &__double {
        width: 100%;
        height: 49px;

        &__left {
          width: calc(50% - 1px);
          border-right: 1px solid #eee;
          height: 49px;
          display: inline-block;
          text-align: center;
          line-height: 49px;
          color: #444;
        }

        &__right {
          width: 50%;
          height: 49px;
          color: var(--k-color-primary-01, #333);
          display: inline-block;
          text-align: center;
          line-height: 49px;
        }
      }

      &__single {
        width: 100%;
        height: 49px;
        display: inline-block;
        line-height: 49px;
        text-align: center;
        color: var(--k-color-primary-01, #333);
      }
    }
  }
}
</style>
