<template>
  <div class="commit-table">
    <div class="commit-table-title">
      质量投诉
    </div>
    <div class="log">
      <div
        v-for="(item, index) in dataTimeline"
        :key="index"
        class="log-item"
      >
        <div class="flex-1 flex key-box">
          <span
            class="key"
            :class="index < 3 && 'top'"
          >{{ index + 1 }}</span>
        </div>
        <div class="flex-5 flex message">{{ item.客诉描述 }}</div>
        <div class="flex-3 flex form">{{ item.日期 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
 index
} from '@/api/jixiaoguanli/jitairibaobiao'

const dataTimeline = ref([])

const getindex = async () => {
   
	// 模拟接口返回的数据
	const responseData = await index();
	console.log(responseData)
	
	// 提取客诉数据
	const customerData = responseData.data.customer
	customerData.forEach((item, index) => {
	  dataTimeline.value.push({
	    客诉描述: item['客诉描述'],
	    日期: item['日期']
	  })
	})
}
getindex()


</script>


<style lang="scss" scoped>
.commit-table{
    background-color: #fff;
    height: 400px;
	margin-right: 3000px;
	width:150%;	
    &-title{
        font-weight: 900;
        margin-bottom: 10px;
    }
    .log{
      &-item{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .key-box{
          justify-content: center;
        }
        .key{
          &.top{
            background: #314659;
            color: #FFFFFF;;
          }
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #F0F2F5;
          text-align: center;
          color:rgba($color: #000000, $alpha: 0.65)
        }
        .message{
          color: rgba(0, 0, 0, 0.65);
        }
        .form{
          color: rgba(0, 0, 0, 0.65);
          margin-left: 12px;
        }
        .flex{
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .flex-1{
          flex:1;
        }
        .flex-2{
          flex:2;
        }
        .flex-3{
          flex:3;
        }
        .flex-4{
          flex:4;
        }
        .flex-5{
          flex:5;
        }
      }
    }
}
</style>
