<template>
  <view class="xd-time-line">
    <view class="xd-time-line__title">
      <view v-if="icon">
        <xd-font-icon :icon="icon" :size="iconSize"></xd-font-icon>
      </view>
      <view :style="{fontSize: size + 'rpx'}">{{title}}</view>
    </view>
    <view class="xd-time-line__body">
      <view class="xd-time-line__body-time">
        <view
          class="xd-time-line__body-time-icon"
          :style="{
            background: uiDotColor,
          }"
        ></view>
        <view
          class="xd-time-line__body-time-line"
          :style="{background: lineColor}"
        ></view>
      </view>
      <view class="xd-time-line__body-solt">
        <slot>
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {
    getParentsStyle,
  } from '@/utils/xd.base';
  
  export default {
    name: "XdTimeLine",
    components: {XdFontIcon},
    props: {
      title: {
        type: String,
        default: '个人信息',
      },
      icon: {
        type:String,
        default: '',
      },
      iconSize: {
        type: String|Number,
        default: 40,
      },
      size: {
        type: String | Number,
        default: 32,
      },
      dotColor: {
        type: String,
        default: '',
      },
      lineColor: {
        type: String,
        default: '#666',
      }
    },
    data(){
      return {
        uiDotColor: '',
      }
    },
    async created() {
      this.uiDotColor = await getParentsStyle(this.$parent, '$mainColor');
      
      if(this.dotColor) this.uiDotColor = this.dotColor;
    }
  }
</script>

<style scoped lang="less">
  .xd-time-line {
    &__title {
      padding-bottom: unit(20, rpx);
      line-height: unit(40,rpx);
    }

    &__body {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      flex-direction: row;
      flex-wrap: wrap;

      &-time {
        width: unit(40,rpx);
        flex-shrink: 0;
        margin-left: unit(10,rpx);
        position: relative;

        &-icon {
          position: absolute;
          width: unit(19,rpx);
          height: unit(19,rpx);
          border-radius: unit(10,rpx);
          left: 0;
          top:0;
          z-index: 2;
        }

        &-line {
          position: absolute;
          border-radius: unit(10, rpx);
          left: unit(8,rpx);
          top: unit(18,rpx);
          width: unit(4,rpx);
          bottom: 0;
          z-index: 1;
        }
      }

      &-solt {
        flex: 1;
        width: 0;
      }
    }
  }

</style>
