<template>
  <view class="body">
    <!--选款-->
    <u-navbar title="客户详情"
              :border-bottom="false"
              :background="{backgroundColor: 'transparent'}">
    </u-navbar>
    <view class="u-p-30">
      <view class="border-radius-8 bg-fff u-p-r-30 u-p-l-30 u-m-b-20">
        <view class="u-p-t-24 u-p-b-24 u-border-bottom">客户信息</view>
        <view class="u-p-t-24 u-p-b-24 u-flex">
          <view class="label">客户名称</view>
          <view class="context">{{detail.fullName}}</view>
        </view>
        <view>
          <view class=" u-p-b-24 u-flex">
            <view class="label">联系人</view>
            <view class="context">{{detail.contacts[0].name}}</view>
          </view>
          <view class=" u-p-b-24 u-flex">
            <view class="label">联系方式</view>
            <view class="context"
                  @click="uni.makePhoneCall(detail.contacts[0].phone)">
              {{detail.contacts[0].phone}}
            </view>
          </view>
        </view>
      </view>
      <view class="border-radius-8 bg-fff u-p-r-30 u-p-l-30 u-m-b-20">
        <view class="tabBar u-flex u-border-bottom">
          <view class="tabBar-item u-flex"
                v-for="(item,index) in tarBars" @click="activeIndex = index"
                :class="[activeIndex === index ? 'active': '']"
          >
            <text>{{ item.label }}</text>
            <text class="tabBar-split u-m-r-30 u-m-l-30" v-if="index < tarBars.length -1"></text>
          </view>
        </view>
        <view class="u-p-b-28">
          <view class="item  " v-for="group in groupByTime">
            <view class="item-title u-m-t-28 u-m-b-28">{{group.label}}</view>
            <view>
              <view v-for="(item) in group.children" class="u-flex">
                <view class="item-img u-relative">
                  <image :src="`${$IMG_URL}${item.styleLibraryTaskItemVO.originalImageCode}`" mode="fit" style="width:100%; height: 100%"></image>
                </view>
                <view class="u-flex-1 u-p-l-20 u-p-r-30 u-border-left">
                  <view class="item-title u-flex ">
                    <view class="u-flex-1 u-line-1 u-font-32 u-p-t-20 u-p-b-8">{{item.styleLibraryTaskItemVO.styleTag}}</view>
                  </view>
                  <view class="item-desc u-font-24">{{ item.styleLibraryTaskItemVO.materialName }}</view>
                  <view class="item-desc u-font-24">{{ item.styleLibraryTaskItemVO.styleCode }}</view>
                  <view class="item-tags u-p-b-24">
                    <view class="item-tag u-font-20"
                          :key="tag.id"
                          v-for="tag in item.styleLibraryTaskItemVO.styleLibraryTagVOList">
                      {{ tag.materialTagName }}
                    </view>
                  </view>
                </view>
              </view>
            </view>

          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "item",
  data(){
    return {
      activeIndex: 0,
      tarBars: [
        { label: '采购意向记录'},
        { label: '浏览款式记录'},
      ],
      item: {
        styleLibraryMaterialProspectiveCustomerVOList: []
      }
    }
  },
  computed:{
    detail(){
      return this.item.basics || {contacts: [{name: '',phone: ''}]}
    },
    groupByTime(){
      let map = Array.from(new Set(this.tarBarContent.map((item) => item.createTime))),
          newList = [];
      for (const item of this.tarBarContent) {
        let name = item['createTime'],
            index = map.indexOf(name);
        if(newList[index]){
          newList[index]['children'].push(item)
        }else{
          newList.push({
            label: name,
            children: [item]
          })
        }
      }
      console.log(newList)
      return newList
    },
    tarBarContent(){
      return (this.item.styleLibraryMaterialProspectiveCustomerVOList || [] )
          // 	1-采购意向记录、2-浏览款式记录
          .filter((item) => item.type === this.activeIndex+1)
    }
  },
  created() {
    let {id} = this.$Route.query;
    this.getItem(id)
  },
  methods:{
    getItem(id){
      this.$http("stylelibraryorder.potentialCustomersDetails",id)
          .then(res => {
            let { code, data } = res;
            if(code === 200){
              this.item = data;
            }
          })
    }
  }
}
</script>

<style scoped lang="scss">
$h-color: #AF8D66;
$color: rgba(175,141,102,0.10);
$main-color: #fff;
.item{
  width: 100%;
  margin-bottom: 40rpx;
  &--round{
    border-radius: 16rpx;
    border: 1px solid rgba(0,0,0,0.10);
  }
  &--status{
    left: 0;
    top: 0;
    position: absolute;
  }
  &-img{
    width: 160rpx;
    height: 160rpx;
    //height: 100%
  }
  &-title{}
  &-desc{}
  &-tags{

  }
  &-tag{
    padding: 6rpx 2px;
    background: $color;
    text-align: center;
    color: $h-color;
    display: inline-block;
    margin-right: 10rpx;
  }
}

.tabBar{
  height: 88rpx;
  &-item{
    font-size: 24rpx;
    &.active{
      font-size: 28rpx;
    }
  }
  &-split{
    height: 28rpx;
    width: 2rpx;
    background: rgba(0,0,0,0.20);
    display: inline-block;
  }
}
.border-radius-8{
  border-radius: 8rpx;
}
.bg-fff{
  background: #fff;
}
.label{
  color: rgba(0,0,0,0.40);
  font-size: 28rpx;
  min-width: 140rpx;
}
.context{
  color: #000;
  font-size: 28rpx;
}
</style>
