<template>
  <div
    :class="[
      'card ',
      {
        'card-border-radius': isCircle,
        'card-border': isBorder,
        'card-shadow': isShadow,
        'card-location': type == 'location-card',
        'card-gap': type == 'gap-card',
        'card-location-bg': type == 'location-card' && bgFull,
        'card-opacity': type == 'opacity-card',
        'text-btn-card-border': type == 'text-btn-card' && isBorder,
        'image-text-card': type == 'image-text-card',
      },
    ]"
    :style="[
      themeColor
        ? {
            '--k-color-primary-01': themeColor,
            '--k-color-primary-02': themeColor,
            '--k-color-primary-03': themeColor,
            '--k-color-primary-05': themeColor,
          }
        : {},
      { 'background-color': backgroundColor ? backgroundColor : '#fff' },
    ]"
  >
    <div v-if="type == 'image-text-card'">
      <div class="image-text-card__title">
        <div class="image-text-card__title__left">
          <div class="image-text-card__title__left__title">
            {{ title }}
          </div>
          <div class="image-text-card__title__left__icon">
            <div class="image-text-card__title__left__icon__item">
              <k-icon
                class="image-text-card__title__left__icon__item__icon"
                :name="leftIcon.name"
                :size="leftIcon.size"
                :color="leftIcon.color"
              ></k-icon>
              <div
                class="image-text-card__title__left__icon__item__label"
                :style="{
                  'font-size': leftIcon.labelSize ? leftIcon.labelSize : '16px',
                }"
                >{{ leftIcon.label }}</div
              >
            </div>
            <div class="image-text-card__title__left__icon__item">
              <k-icon
                class="image-text-card__title__left__icon__item__icon"
                :name="rightIcon.name"
                :size="rightIcon.size"
                :color="rightIcon.color"
              ></k-icon>
              <div
                class="image-text-card__title__left__icon__item__label"
                :style="{
                  'font-size': rightIcon.labelSize
                    ? rightIcon.labelSize
                    : '16px',
                }"
              >
                {{ rightIcon.label }}</div
              >
            </div>
          </div>
        </div>
        <div v-if="imageSrc" class="image-text-card__title__right">
          <img :src="imageSrc" />
        </div>
      </div>
      <div class="image-text-card__content" v-if="contentListData">
        <div
          class="image-text-card__content__item"
          v-for="(item, index) in contentListData"
          :key="index"
        >
          <div class="image-text-card__content__item__left">
            {{ item.label }}
          </div>
          <div class="image-text-card__content__item__right">
            <div :class="item.ellipsis ? ' kui-ellipsis' : ''">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else-if="type == 'text-btn-card'">
      <div class="text-btn-card-border__header">
        <k-tag
          commercial
          v-if="tagText"
          size="middle"
          class="location-card__tag text-btn-card-border__header__tag"
        >
          {{ tagText }}</k-tag
        >
        <div class="text-btn-card-border__header__content">{{
          headerContent
        }}</div>
        <div class="text-btn-card-border__header__status">{{
          headerStatus
        }}</div>
      </div>
      <div
        :class="[
          'text-btn-card-border__title ',
          { 'text-btn-card-border__title-bold': titleFontBold },
        ]"
      >
        {{ title }}
      </div>
      <div class="text-btn-card-border__content-list" v-if="contentListData">
        <div v-for="(item, index) in contentListData" :key="index">
          <div
            class="left-icon__content text-btn-card-border__content-list__item"
          >
            <div
              class="text-btn-card-border__content-list__item__left"
              :style="{ width: item.labelWidth ? item.labelWidth : '80px' }"
            >
              {{ item.label }}
            </div>
            <div
              class="text-btn-card-border__content-list__item__right"
              :style="{
                width: item.labelWidth
                  ? 'calc(100% - ' + item.labelWidth + ')'
                  : 'calc(100% - 80px)',
              }"
            >
              <div :class="item.ellipsis ? 'kui-ellipsis' : ''">
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="contentVertical"
        class="text-btn-card-border__content-vertical"
      >
        {{ contentVertical }}
      </div>
      <div v-if="contentBottom" class="text-btn-card-border__content-bottom">
        {{ contentBottom }}
      </div>
      <k-button
        :class="
          'text-btn-card-border__btn ' +
          (btnType == 'outline' ? 'text-btn-card-border__btn-plain-color' : '')
        "
        :bgColor="themeColor && btnType != 'outline' ? themeColor : ''"
        :borderColor="themeColor"
        v-if="btnText"
        :type="btnType"
        @click="clickBtn"
        :title="btnText"
        width="110px"
        height="33px"
        fontSize="10px"
        size="middle"
      >
      </k-button>
    </div>

    <div
      v-else-if="type == 'function-card' && functionCardData.length > 0"
      class="function-card"
    >
      <div
        class="function-card__item"
        v-for="(item, index) in functionCardData"
        v-bind:key="index"
        @click="clickIcon(item)"
      >
        <div
          class="function-card__item__icon"
          :style="{ width: iconSize + 'px' }"
        >
          <k-icon :name="item.icon" :size="iconSize" color="#666"></k-icon>
        </div>
        <div class="function-card__item__label">{{ item.label }}</div>
      </div>
    </div>
    <div v-else-if="type == 'location-card'">
      <div class="location-card__left">
        <p class="location-card__left__title">{{ title }}</p>
        <p class="location-card__left__description">{{ description }}</p>
        <!-- <k-tag commercial v-if="!bgFull" size="small" class="location-card__tag">{{tagText}}</k-tag> -->
        <div
          :class="
            'location-card__tag ' +
            (bgFull ? 'location-card__tag-white' : 'location-card__tag-theme')
          "
        >
          {{ tagText }}</div
        >
      </div>
      <div class="location-card__right">
        <div
          v-if="commonText"
          class="location-card__right__common"
          :class="bgFull ? 'location-card__right__common-full' : ''"
          >{{ commonText }}</div
        >
        <div class="location-card__right__text">
          {{ detail }}
        </div>
      </div>
    </div>

    <div
      v-else-if="type == 'gap-card'"
      class="order ext-class"
      @click.stop="toDetail"
    >
      <div class="order-info">
        <div class="space-name kui-ellipsis">{{ title }}</div>
        <div
          class="left-icon"
          v-for="(item, index) in gapCardIconList"
          :key="index"
        >
          <k-icon :name="item.icon" :size="item.size" color="#fff"></k-icon>
          <text
            :class="
              'left-icon__content ' + (item.ellipsis ? 'kui-ellipsis' : '')
            "
            >{{ item.content }}</text
          >
        </div>

        <div class="status ext-status-class" v-if="tagText">{{
          tagText
        }}</div>
      </div>
      <div class="deliver"></div>
      <div class="btn-group">
        <slot />
      </div>
      <div class="action-group">
        <div
          :class="[
            'text-button',
            {
              disabled: leftBtnDisabled,
            },
          ]"
          @click.stop="clickLeftBtn"
          >{{ leftBtnText }}</div
        >
        <block>
          <div class="divider" />
          <div
            :class="[
              'text-button',
              {
                disabled: rightBtnDisabled,
              },
            ]"
            @click.stop="clickRightBtn"
            >{{ rightBtnText }}</div
          >
        </block>
      </div>
    </div>

    <!-- <div v-if="type == 'opacity-card' && themeColor" class="card-opacity-bg-opacity"></div> -->
    <div
      v-else
      :class="
        type == 'opacity-card' && themeColor ? 'card-opacity-bg-opacity' : ''
      "
    >
      <div>
        <p class="card-opacity__title">{{ title }}</p>
        <p class="card-opacity__description">{{ description }}{{ ' >' }}</p>
        <div class="card-opacity__btn">
          <k-button
            @click="clickBtn"
            :title="btnText"
            width="121px"
            height="33px"
            fontSize="10px"
            size="middle"
            :borderColor="themeColor"
            :bgColor="themeColor"
          >
          </k-button>
        </div>
      </div>
    </div>

    <!-- <div v-else>
      <p class="card-opacity__title">{{ title }}</p>
      <p class="card-opacity__description">{{ description }}{{ ' >' }}</p>
      <div class="card-opacity__btn">
        <k-button @click="clickBtn" :title="btnText" width="121px" height="33px" fontSize="10px" size="middle"
          :borderColor="themeColor" :bgColor="themeColor">
        </k-button>
      </div>
    </div> -->
  </div>
</template>

<script>
import Vue, { VueConstructor } from 'vue';
import props from './props';

export default {
  name: 'k-card',
  mixins: [props],
  data() {
    return {};
  },
  methods: {
    toDetail() {
      // eslint-disable-next-line no-console
      console.log('90909090');
    },
    clickIcon(inData) {
      this.$emit('click', inData);
    },
    clickBtn(inData) {
      this.$emit('click', inData);
    },
    clickLeftBtn() {
      if (!this.leftBtnDisabled) {
        this.$emit('clickLeftBtn');
      }
    },
    clickRightBtn() {
      if (!this.rightBtnDisabled) {
        this.$emit('clickRightBtn');
      }
    },
  },
};
</script>

<style scoped lang="scss">
/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-no-important */
/* stylelint-disable comment-empty-line-before */
.card {
  background: #fff;
  padding: 20px;
  width: calc(100% - 38px);
  margin: 10px auto;
}

.card-shadow {
  box-shadow: 0 0 20px 0 #e8eaf3;
}

.card-border {
  border: 1px solid var(--k-color-primary-01, #333);
}

.card-border-radius {
  border-radius: 8px;
}

.function-card {
  width: 100%;
}

.function-card__item {
  display: inline-block;
  width: 25%;
}

.function-card__item__icon {
  margin: 8px auto;
}

.function-card__item__label {
  font-size: 12px;
  text-align: center;
  color: #333;
}

.card-location-bg {
  background: var(--k-color-primary-01, #333) !important;
  color: #fff !important;

  .location-card__left__title,
  .location-card__left__description,
  .location-card__right__text {
    color: #fff !important;
  }
}

.card-location {
  padding-bottom: 10px;
  display: flex;
  position: relative;

  .location-card__left {
    width: 217px;
    display: inline-block;

    .location-card__left__title {
      font-size: 17px;
      color: #333;
      margin-bottom: 5px;
    }

    .location-card__left__description {
      font-size: 14px;
      color: #666;
    }

    .location-card__tag {
      display: inline-block;
      color: #fff;
      height: 15px;
      line-height: 15px;
      border-radius: 7.5px;
      font-size: 12px;
      padding: 0 6px;
    }

    .location-card__tag-theme {
      border: 1px solid var(--k-color-primary-01, #333);
      background: var(--k-color-primary-01, #333);
    }

    .location-card__tag-white {
      border: 1px solid #fff;
      background: rgba(0, 0, 0, 0);
    }
  }

  .location-card__right {
    width: 55px;
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 11px;
    color: #999;
    height: calc(100% - 35px);
    padding-left: 17px;
    margin-left: 5px;
    border-left: 1px dashed #979797;

    .location-card__right__common {
      width: auto;
      height: 15px;
      border-top-right-radius: 8px;
      position: absolute;
      right: -21px;
      top: -20px;
      background-color: var(--k-color-primary-01, #333);
      color: #fff;
      font-weight: 400;
      font-size: 9px;
      padding: 3px 6px;
      line-height: 15px;
    }

    .location-card__right__common-full {
      background: var(--k-color-primary-02, #333);
    }

    .location-card__right__text {
      display: inline-block;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.card-opacity {
  min-height: 135px;
  text-align: center;
  background: var(--k-color-primary-05, #333) !important;
  border: 1px dashed var(--k-color-primary-01, #333);
  border-radius: 4px;
  position: relative;

  .card-opacity__title {
    font-size: 20px;
    color: #000;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
  }

  .card-opacity__description {
    font-size: 15px;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
  }

  .card-opacity__btn {
    margin: 0 auto;
  }
}

.card-opacity-bg-opacity {
  background: rgba(255, 255, 255, 0.5);
  width: calc(100% - 2px);
  height: calc(100% - 42px);
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 4px;
  padding: 20px 0;
}

.order {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 2px;
  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  color: #fff;
  display: inline-block;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.order-info {
  position: relative;
  border-radius: 3px 3px 0 0;
  background: var(--k-color-primary-01, #333);
  box-sizing: border-box;
  padding: 18px 10px 20px 20px;

  &::before {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -1px;
    left: -1px;
    z-index: 2;
    width: 0;
    height: 0;
    border-bottom: 6px solid #fff;
    border-right: 6px solid transparent;
  }

  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: -1px;
    right: -1px;
    z-index: 2;
    width: 0;
    height: 0;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
  }
}

.left-icon {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  margin-top: 3px;

  .left-icon__content {
    position: relative;
    top: -3px;
    margin-left: 8px;
  }
}

.space {
  height: 21px;
}

.icon {
  margin-right: 6px;
  flex: none;
  position: relative;
  top: -2px;
}

.space-name {
  margin-bottom: 10px;
  font-size: 25px;
}

.deliver {
  height: 1px;
  width: calc(100% - 8px);
  background: var(--k-color-primary-02, #333);
  // transform: scale(0.5);
  position: relative;
  left: -8px;
  margin-left: 12px;
}

.status {
  position: absolute;
  right: 7px;
  top: 11px;
  padding: 3px 16px;
  line-height: 16px;
  background: var(--k-color-primary-02, #333);
  border-radius: 12px;
  font-size: 12px;
}

.text-button {
  width: 160px;
  height: 38px;
  margin: 0 auto;
  line-height: 38px;
  text-align: center;
  color: #fff;

  .disabled {
    opacity: 0.2;
  }
}

.card-gap {
  padding: 0;
}

.action-group {
  display: flex;
  position: relative;
  background: var(--k-color-primary-01, #333);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 0 0 3px 3px;
  height: 38px;
  font-size: 17px;

  &::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: -1px;
    top: -1px;
    z-index: 2;
    width: 0;
    height: 0;
    border-top: 6px solid #fff;
    border-right: 6px solid transparent;
  }

  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -1px;
    right: -1px;
    z-index: 2;
    width: 0;
    height: 0;
    border-top: 6px solid #fff;
    border-left: 6px solid transparent;
  }
}

.divider {
  width: 1px;
  height: 20px;
  margin-top: 9px;
  background-color: #fff;
}

.text-btn-card-border {
  border: 1px solid #e1e2e8;
  padding: 15px 16px 25px 15px;
  position: relative;

  &__header {
    position: relative;

    &__tag {
      margin-right: 10px;
    }

    &__content {
      display: inline-block;
      color: #999;
      font-size: 15px;
    }

    &__status {
      position: absolute;
      right: 6px;
      top: 0;
      font-size: 15px;
      color: var(--k-color-primary-01, #333);
    }
  }

  &__title {
    font-size: 18px;
    color: #333;
    margin-top: 16px;

    &-bold {
      font-weight: 600;
    }
  }

  &__content-list {
    &__item {
      font-size: 15px;
      color: #999;
      margin-top: 8px;
      display: flex;
      flex-wrap: nowrap;
      width: 100%;

      &__left {
        display: flex;
      }

      &__right {
        display: flex;
        text-align: left;
      }
    }
  }

  &__btn {
    position: absolute;
    bottom: 20px;
    right: 15px;
  }

  &__btn-plain-color {
    color: var(--k-color-primary-01, #333) !important;
  }

  &__content-vertical {
    color: #0c0c0c;
    font-size: 17px;
    margin-top: 5px;
  }

  &__content-bottom {
    color: #0c0c0c;
    font-size: 17px;
    height: 33px;
    line-height: 33px;
    margin-top: 20px;
    position: relative;
    top: 5px;
  }
}

.image-text-card {
  padding: 20px 15px;

  &__title {
    position: relative;
    margin-bottom: 20px;

    &__left {
      width: 170px;
      height: 100px;

      &__title {
        font-size: 22px;
        color: #0e0e0e;
        font-weight: 600;
        margin-bottom: 20px;
      }

      &__icon {
        &__item {
          display: inline-block;
          width: 50%;

          &__label {
            color: #808080;
            margin-left: 10px;
            display: inline-block;
          }

          &__icon {
            display: inline-block;
          }
        }
      }
    }

    &__right {
      display: inline-block;
      width: 130px;
      height: 100px;
      overflow: hidden;
      position: absolute;
      top: 0;
      right: 0;

      img {
        width: 100%;
        height: 100px;
      }
    }
  }

  &__content {
    width: 100%;

    &__item {
      margin-bottom: 8px;
      flex-wrap: nowrap;
      display: flex;
      width: 100%;

      &__left {
        font-size: 16px;
        color: #1e1e1e;
        width: 80px;
        display: flex;
        align-items: flex-start;
        direction: nowrap;
      }

      &__right {
        font-size: 16px;
        color: #808080;
        width: calc(100% - 80px);
        display: flex;
        direction: nowrap;
        justify-content: flex-end;
        text-align: right;
        line-height: 20px;
      }
    }
  }
}
</style>
