<template>
  <view
    class="k-list"
    :style="{
      'border-style': borderStyle,
      'border-radius': borderRadius + 'px',
    }"
  >
    <view
      class="k-list__header"
      v-if="type === 'single'"
      :class="{
        'k-list__header--border': leftBorder,
        'k-list__shadow': shadow,
      }"
    >
      <view class="k-list__header__l">
        <k-icon
          :name="icon"
          :size="24"
          :image="isImg"
          class="k-list__header__l__icon"
          v-if="icon"
        ></k-icon>
        <view>
          <k-typography
            :typographyIndex="
              leftBorder ? 'Title3' : titleSize ? titleSize : 'Heading01'
            "
            color="#666"
            :class="content ? 'k-list__header__l__title' : ''"
          >
            {{ title }}
          </k-typography>
          <k-typography typographyIndex="Heading05" color="#999">
            <view :class="info ? 'k-list__header__l__info' : ''">{{
              info
            }}</view>
          </k-typography>
          <k-typography
            :typographyIndex="contentFontSize ? contentFontSize : 'Heading03'"
            color="#999"
          >
            <view
              :class="
                info
                  ? 'k-list__header__l__content'
                  : content
                  ? 'k-list__header__l__content2'
                  : ''
              "
            >
              {{ content }}
            </view>
          </k-typography>
        </view>
        <slot name="title"></slot>
      </view>
      <view class="k-list__header__r" @click="handleClick()">
        <k-typography typographyIndex="Heading02" color="#999">
          {{ text ? text : '' }}
        </k-typography>
        <slot name="text"></slot>
        <image
          v-if="rightArrow"
          mode="heightFix"
          class="k-list__header__r__arrow"
          src="./images/rightArrow.svg"
        ></image>
      </view>
    </view>
    <view class="k-list__content">
      <slot name="content"></slot>
    </view>
    <view
      v-if="type === 'half-screen'"
      class="k-list__half"
      @click="handleClick()"
    >
      <view class="k-list__half__img">
        <image mode="widthFix" :src="image"></image>
      </view>
      <view class="k-list__half__name">
        <k-typography typographyIndex="Heading02" color="#333">
          {{ title }}
        </k-typography>
      </view>
      <view class="k-list__half__detail">
        <k-typography typographyIndex="Heading03" color="#999">{{
          text
        }}</k-typography>
        <k-icon
          :name="icon"
          size="16"
          color="var(--k-color-primary-01, #666)"
        ></k-icon>
      </view>
    </view>
    <view
      v-if="type === 'full-screen'"
      class="k-list__full"
      @click="handleClick()"
    >
      <view class="k-list__full__img">
        <img :src="image" />
      </view>
      <k-typography typographyIndex="Heading02" color="#333">
        {{ title }}
      </k-typography>
      <view class="k-list__full__tag" v-if="tags.length > 0">
        <k-tag
          class="k-list__full__tag__item"
          v-for="item in tags"
          :key="item"
          commercial
          hollow
          size="middle"
          >{{ item }}</k-tag
        >
      </view>
      <k-typography typographyIndex="Heading03" color="#999">
        {{ content }}
      </k-typography>
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script lang="ts">
import Vue, { VueConstructor } from 'vue';
import props from './props.js';
type PropType = {
  [Property in keyof typeof props.props]: typeof props.props[Property]['default'];
};
export default (Vue as VueConstructor<Vue & PropType>).extend({
  name: 'k-list',
  mixins: [props],
  data() {
    return {};
  },
  methods: {
    handleClick() {
      this.$emit('click');
    },
  },
});
</script>

<style scoped lang="scss">
/* stylelint-disable selector-class-pattern */
/* stylelint-disable declaration-no-important */
/* stylelint-disable comment-empty-line-before */
.k-list {
  display: flex;
  flex-direction: column;
  border: 2rpx solid #ccc;
  overflow: hidden;

  &__header {
    background: #fbfcff;
    display: flex;
    justify-content: space-between;
    color: #333;
    font-size: 16px;
    box-sizing: border-box;
    padding: 34rpx 30rpx;

    &__l {
      display: flex;
      flex-direction: row;
      align-items: center;

      &__icon {
        margin-right: 17rpx;
        margin-left: 8rpx;
      }

      image {
        height: 50rpx;
        width: 50rpx;
        margin-right: 17rpx;
      }

      &__title {
        margin-bottom: 30rpx;
      }

      &__info {
        padding: 20rpx 0;
        margin-bottom: 23rpx;
        border-bottom: 2rpx solid rgba($color: #000, $alpha: 0.1);
      }

      &__content {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      &__content2 {
        margin-top: 24rpx;
      }
    }

    &__r {
      color: #999;
      display: flex;
      align-items: center;

      &__arrow {
        width: 14rpx !important;
        height: 20rpx;
        margin-left: 20rpx;
      }
    }

    &--border {
      background: transparent;
      border-left: 8rpx solid var(--k-color-primary);
      height: 36rpx;
      line-height: 36rpx;
      color: #000;
      font-size: 34rpx;
      align-items: center;
      padding: 0rpx 30rpx 0 40rpx;

      .k-list__header__r {
        color: rgba($color: #000, $alpha: 0.5);
        font-size: 26rpx;
        line-height: 36rpx;
      }

      .k-list__header__l {
        margin-left: -30rpx;
      }
    }
  }

  &__content {
    color: #999;
    font-size: 28rpx;
    line-height: 40rpx;
    background: #fbfcff;
  }

  &__half {
    background: #fbfcff;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    padding: 16rpx 20rpx 25rpx;
    width: 100%;
    box-sizing: border-box;

    &__img {
      width: 270rpx;
      border-radius: 8rpx;

      image {
        width: 100%;
      }
    }

    &__name {
      line-height: 48rpx;
      margin: 20rpx 0;
    }

    &__detail {
      display: flex;
      justify-content: space-between;
    }
  }

  &__full {
    width: 100%;
    padding: 16rpx 16rpx 30rpx;
    border-radius: 16rpx;
    box-sizing: border-box;
    background: #fbfcff;

    &__img {
      border-radius: 8rpx;
      margin-bottom: 25rpx;

      img {
        width: 100%;
      }
    }

    &__tag {
      margin: 20rpx 0;

      &__item {
        margin-right: 20rpx;
      }
    }
  }

  &__shadow {
    box-shadow: 0rpx 0rpx 40rpx 0rpx #e8eaf3;
  }
}
</style>
