<template>
  <view class="ml-update-log">
    <view v-for="(item, index) in list" :key="index" class="ml-update-log-item">
      <view class="ml-update-log-date">{{ item.date }}</view>
      <view v-if="item.logs && item.logs.length > 0" class="ml-update-log-title">
        <text class="ml-update-log-title-icon">
          <ml-icon name="shoucang" status="primary" />
        </text>
        <text>优化</text>
      </view>
      <view v-for="(oItem, oIndex) in item.logs" :key="`o_${index}_${oIndex}`" class="ml-update-log-ul">
        <view class="ml-update-log-li">• {{ oItem.label }}</view>
      </view>
      <view v-if="item.fixs && item.fixs.length > 0" class="ml-update-log-title">
        <text class="ml-update-log-title-icon">
          <ml-icon name="shoucang" status="primary" />
        </text>
        <text>修复</text>
      </view>
      <view v-for="(fItem, fIndex) in item.fixs" :key="`f_${index}_${fIndex}`" class="ml-update-log-ul">
        <view class="ml-update-log-li">• {{ fItem.label }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MlUpdateLog',
  props: {
    data: Array
  },
  data () {
    return {
    }
  },
  computed: {
    list () {
      // {
      //   logs: [{ label }],
      //   fixs: [{ label }]
      // }
      return this.data || []
    }
  }
}
</script>

<style lang="scss">
.ml-update-log {
  .ml-update-log-item {
    text-align: left;
    margin-bottom: 30px;
    .ml-update-log-date {
      font-size: 34px;
      font-weight: 700;
    }
    .ml-update-log-title {
      font-size: 30px;
      line-height: 80px;
      font-weight: 700;
      padding-left: 16px;
      .ml-update-log-title-icon {
        padding-right: 8px;
      }
    }
    .ml-update-log-ul {
      font-size: 28px;
      .ml-update-log-li {
        line-height: 48px;
        padding-left: 40px;
      }
    }
  }
}
</style>
