<template>
  <div class="ky-book">
    <p class="book-title" v-if="showTitle">{{title}}</p>
    <div class="book-item" v-for="(item,index) in dataList" :key="item.title">
      <div class="item">
        <div class="item-left">
          <div class="lt-no-circle" v-if="noCircle" :style="{'background': cricleBgColor,'color':cricleColor}">{{ item.index }}</div>
          <div v-else-if="isLogistics">
               <div v-if="index !== 0" :class="{'logistics-num':true,'greenb':index === 0}" ></div>
               <i v-else class="iconfont icon-duigou1001" style="font-size: 12px;color:#07c160"></i>
          </div>
          <div class="lt-num" v-else  :style="{'background': cricleBgColor,'color':cricleColor,'font-size':cricleSize}">{{ isLogistics ? '' : item.index }}</div>
          <div class="lt-line" :class="{'logistics': isLogistics}" :style="{'background': cricleBgColor}" v-if="item.showline"></div>
        </div>
        <div class="item-right" >
          <p @click="openDetail(item,index)" :class="{'greenc':isLogistics && index === 0}" :style="{'color':titleColor,'font-size':titleSize,'font-weight':titleWeight}">{{ item.title }}</p>
          <p v-show="item.showDetail" :class="{'greenc':isLogistics && index === 0}" :style="{'font-size':titleDetailSize,'white-space':'pre-wrap'}">{{ item.detail }}</p>
          <slot v-if="item.showSolt" :name="item.soltName"></slot>
        </div>
      </div>
      <i
        v-if="showIcon" 
        @click="openDetail(item,index)" 
        :class="{'iconfont':true, 'icon-zhankai1002':item.showDetail, 'icon-zhankai1001':!item.showDetail}"
        style="font-size: 21px;color:#CCCCCC"
      ></i>
    </div>
  </div>
</template>
<script>
export default {
  name: 'stepview',
  props: {
    dataList: {
      type: Array,
      default: function() { return [] }
    },
    title: {
      type: String,
      default: ''
    },
    showIcon: {
      type: Boolean,
      default: false
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    titleColor: {
      type: String,
      default: 'rgba(68, 68, 68, 0.8)'
    },
    cricleBgColor: {
      type: String,
      default: 'linear-gradient(204deg, #88cad1 0%, #61b3ba 100%)'
    },
    cricleColor: {
      type: String,
      default: 'white'
    },
    cricleSize: {
      type: String,
      default: '12px'
    },
    noCircle: {
      type: Boolean,
      default: false
    },
    titleSize: {
      type: String,
      default: '14px'
    },
    titleWeight: {
      type: Number,
      default: 600
    },
    titleDetailSize: {
      type: String,
      default: '13px'
    },
    isLogistics:  {
      type: Boolean,
      default: false
    },
  },

  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {
    openDetail(i, index) {
      this.$emit('openDetail', i, index)
    }
  },
  computed: {}
}
</script>
<style lang="scss" scoped>
.ky-book {
  margin: 35px 17px;
  
  .book-title {
    font-size: 16px;
    font-weight: 600;
    color: #323232;
    margin-bottom: 16px;
  }
  .book-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // background: olivedrab;
    // margin-bottom: 5px;
    text-align: left;
    .item {
      display: flex;
      flex-direction: row;
      .item-left {
        margin-right: 8px;
        .lt-num {
          width: 26px;
          height: 26px;
          background: linear-gradient(204deg, #88cad1 0%, #61b3ba 100%);
          border-radius: 13px;
          text-align: center;
          line-height: 26px;
          font-size: 12px;
          font-weight: bold;
          color: white;
        }
        .logistics-num{
          width: 6px;
          height: 6px;
          border-radius: 3px;
          background: rgb(189, 189, 189);
          margin-top: 10px;
        }
        .lt-no-circle{
          font-size: 18px;
          font-weight: bold;
          margin-top: 2px;
        }
        .lt-line {
          width: 2px;
          height: 100%;
          background: #53aab2;
          margin: 0 auto;
        }
        .logistics{
          width: 1px;
          height: 100%;
          background: #f0f0f0 !important;
          margin: 0 auto;
        }
      }
      .item-right {
        color: rgba(68, 68, 68, 0.8);
        padding-bottom: 20px;
        p:first-child {
          color: #444444;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 6px;
          margin-top: 0;
        }
      }
    }
    .greenc{
        color:  #07c160 !important;
    }
    .greenb{
        background: #07c160 !important;
    }
  }
}
</style>
