<template>
  <view class="body window">
    <u-navbar
      back-icon-color="#fff"
      background="#FFFFFF"
      title="用户画像"
      titleColor="#fff"
      :border-bottom="false"
      title-bold
    ></u-navbar>
    <view class="data_body">
      <view class="scroll_list">
        <!-- 基础数据 -->
        <view class="view_block">
          <view class="title">基础数据</view>
          <view class="progress_circle">
            <view
              v-for="(item, index) in CircleData"
              :key="index"
              :class="['progress_block', 'block_' + index]"
            >
              <view class="name">{{ item.series[0].name }}</view>
              <!-- <view class="value">{{ item.series[0].value }}</view> -->
              <view
                class="charts-box arcbar"
                style="height: 180rpx;width: 60%;"
              >
                <view class="value">{{ item.series[0].value }}</view>
                <!-- <qiun-data-charts type="arcbar" :chartData="item" :canvasId="'four_a_'+index" :canvas2d="isCanvas2d"
									:resshow="delayload"
									:opts="{title:{name:item.series[0].precent,color:item.series[0].color,fontSize:15},subtitle:{name:'',color:'#666666',fontSize:12},extra:{arcbar:{backgroundColor:item.series[0].backgroundColor}}}" /> -->
              </view>
              <view class="planet">
                <view class="planet_shadow"></view>
                <view class="crater1"></view>
                <view class="crater2"></view>
                <view class="crater3"></view>
                <view class="crater4"></view>
              </view>
              <view class="star" :class="['star' + index]"></view>
              <view class="star pink" :class="['star' + index]"></view>
              <view class="star blue" :class="['star' + index]"></view>
              <view class="star yellow" :class="['star' + index]"></view>
            </view>
          </view>
        </view>
        
        <view class="top_desc">
          <view class="text-gray">综合评分</view>
          <view class="remaining">86</view>
          <view class="u-flex head_block">
            <view>
              <text class="text-gray">总派单量</text>
              <text class="income">1008</text>
            </view>
            <view>
              <text class="text-gray">总完工量</text>
              <text class="income">432</text>
            </view>
            <view>
              <text class="text-gray">未完工工单量</text>
              <text class="income">533</text>
            </view>
          </view>
        </view>

        <!-- 服务时效 -->
        <view class="view_block">
          <view class="title">服务时效</view>
          <progress-bar :content="RankData" @updateRanking="updateRanking"></progress-bar>
        </view>

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

<script>

import ProgressBar from "@/components/progress-bar/progress-bar.vue"
export default {
  components: {
    ProgressBar
  },  
  data() {
    return {
      title: '用户画像', //标题
      showDataTime: 'today', //选中的时间
      tabCur: 0, //标签头下标
      topBar: 17, //导航高
      top: '180', //下拉栏位置
      scrollHeight: '600px', //数据展示体高度
      isCanvas2d: true,
			delayload: false, //延时加载图表，否则会出现图表加载完后定位错乱
      CircleData: [
        {
          series: [
            {
              color: '#fff',
              data: 0.224,
              precent: '22.4%',
              index: 0,
              legendShape: 'circle',
              name: '总派单量',
              pointShape: 'circle',
              show: true,
              type: 'arcbar',
              value: '1332',
              backgroundColor: '#00AEF9',
            },
          ],
        },
        {
          series: [
            {
              color: '#fff',
              data: 0.3717,
              precent: '37.17%',
              index: 0,
              legendShape: 'circle',
              name: '总完工量',
              pointShape: 'circle',
              show: true,
              type: '133',
              value: '1096',
              backgroundColor: '#F55676',
            },
          ],
        },
        {
          series: [
            {
              color: '#fff',
              data: 0.0017,
              precent: '0.17%',
              index: 0,
              legendShape: 'circle',
              name: '未完工工单量',
              pointShape: 'circle',
              show: true,
              type: 'arcbar',
              value: '765',
              backgroundColor: '#FAB215',
            },
          ],
        },
        {
          series: [
            {
              color: '#fff',
              data: 0.6321,
              precent: '63.21%',
              index: 0,
              legendShape: 'circle',
              name: '综合评分',
              pointShape: 'circle',
              show: true,
              type: 'arcbar',
              value: '65',
              backgroundColor: '#2EC693',
            },
          ],
        },
      ],
      RankData: [
        {
          "name":"一次通过率",
          "num":500,
          "width":"",
          "background":"#FFBE68"
        },
        {
          "name":"预约及时率",
          "num":300,
          "width":"",
          "background":"#0FEBE1"
        },
        {
          "name":"接单及时率",
          "num":455,
          "width":"",
          "background":"#BF8DFC"
        },
        {
          "name":"上门及时率",
          "num":601,
          "width":"",
          "background":"#FF859C"
        }
      ]
    }
  },
  computed: {},
  methods: {
    updateRanking(nVal){
      this.RankData = nVal
    }
  },
  onLoad() {},
}
</script>

<style scoped lang="scss">
.body{
	height: 100vh;
	margin: 0;
	padding: 0 20rpx;
	font-family: "montserrat";
	background-image: linear-gradient(125deg,#CB9FFE,#5894F7,#ABCDFA,#74A3F6,#CB9FFE);
	background-size: 400%;
	animation: bganimation 15s infinite;
}
.window{
	height: 100vh;
	overflow: hidden;
	.topLine{
		width: 100%;
	}

	scroll-view {
		box-sizing: border-box;
	}
	.swiper {
		box-sizing: border-box;
	}
	.data_body {
		overflow: auto;
		text-align: center;
		color: #333333;
		background-repeat: repeat;
		height: 100%;
		.scroll_list{
			height: 100%;
			.view_block{
				background-color: #fff;
				padding: 16rpx 10rpx 10rpx 10rpx;
				border-radius: 20rpx;
				margin-bottom: 40rpx;
				.title{
					text-align:left;
					margin: 10rpx 0 20rpx 10rpx;
					font-size: 32rpx;
				}
				.progress_circle{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-items: center;
          height: 450rpx;

          .progress_block{
            width: 45%;
            border-radius: 20rpx;
            height: 180rpx;
            position: relative;
            overflow: hidden;

            .name{
              color: #fff;
              font-size: 24rpx;
              position: absolute;
              top: 20rpx;
              left: 10rpx;
              max-width: 154rpx;
            }
            .value{
              color: #fff;
              font-size: 46rpx;
              position: absolute;
              top: 64rpx;
              left: 10rpx;
              max-width: 154rpx;
            }

            .circle{
              position: absolute;
              right: 8rpx;
              top: 16rpx;
            }
            .arcbar{
              position: absolute;
              right: -4rpx;
              top: 8rpx;
            }
          }
          .block_0{
            background-color: #0FC3FF;
          }
          .block_1{
            background-color: #FF6B8B;
          }
          .block_2{
            background-color: #FFCB1D;
          }
          .block_3{
            background-color: #3BDCAA;
          }
          .planet {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #333;
            position: absolute;
            left: -13px;
            bottom: -26px;
            overflow: hidden;
            opacity: 0.5;
            z-index: 0;
          }

          .planet_shadow {
            position: absolute;
            border-radius: 50%;
            height: 100%;
            width: 100%;
            top: -40%;
            right: -10%;
            border: 35px solid rgba(0, 0, 0, .15);
          }

          .crater1,
          .crater2,
          .crater3,
          .crater4 {
            position: absolute;
            border-radius: 50%;
            background: rgba(0, 0, 0, .3);
            box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
          }

          .crater1 {
            width: 20px;
            height: 20px;
            left: 25%;
            top: 20%;
          }

          .crater2 {
            width: 10px;
            height: 10px;
            left: 50%;
            top: 60%;
          }

          .crater3 {
            width: 15px;
            height: 15px;
            left: 30%;
            top: 65%;
          }

          .crater4 {
            width: 15px;
            height: 15px;
            left: 60%;
            top: 35%;
          }
          .star {
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #FFF;
            top: 10px;
            left: 50px;
            position: relative;
            transform-origin: 100% 0;
            box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
            opacity: 0;
            z-index: 2;
          }
          .star0{
            animation: star-ani 4s infinite ease-out;
          }
          .star1{
            animation: star-ani 5s infinite ease-out;
          }
          .star2{
            animation: star-ani 6s infinite ease-out;
          }
          .star3{
            animation: star-ani 7s infinite ease-out;
          }

          .star:after {
            content: '';
            display: block;
            top: 20px;
            left: 60px;
            border: 0px solid #fff;
            border-width: 0px 90px 2px 90px;
            border-color: transparent transparent transparent rgba(255, 255, 255, .3);
            transform: rotate(-45deg) translate3d(1px, 3px, 0);
            box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
            transform-origin: 0% 100%;
            animation: shooting-ani 100s infinite ease-out;
          }

          .pink {
            top: 10px;
            left: 60px;
            background: #ff5a99;
            animation-delay: 5s;
            -webkit-animation-delay: 5s;
            -moz-animation-delay: 5s;
          }

          .pink:after {
            border-color: transparent transparent transparent #ff5a99;
            animation-delay: 5s;
            -webkit-animation-delay: 5s;
            -moz-animation-delay: 5s;
          }

          .blue {
            top: 15px;
            left: 70px;
            background: cyan;
            animation-delay: 7s;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
          }

          .blue:after {
            border-color: 'transpareanimation-delay: 12s';
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            animation-delay: 7s;
          }

          .yellow {
            top: 0px;
            left: 80px;
            background: #ffcd5c;
            animation-delay: 5.8s;
          }

          .yellow:after {
            border-color: transparent transparent transparent #ffcd5c;
            animation-delay: 5.8s;
          }
        }
			}
      .top_desc {
        width: 100%;
        border-radius: 20rpx;
        background-color: #fff;
        margin-top: 20rpx;
        padding: 20rpx;
        box-sizing: border-box;
        margin-bottom: 40rpx;
        .text-gray {
          font-size: 28rpx;
          color: #ccc;
          margin-right: 10rpx;
          text-align: left;
        }

        .remaining {
          font-size: 56rpx;
          text-align: left;
          color: #4ecdb6;
        }

        .flex_1 {
          flex: 1;
        }

        .head_block {
          margin-top: 20rpx;
          justify-content: space-between;
          .income {
            color: #E34B5E;
          }
        }
      }
		}
	}
}
@keyframes bganimation {
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}
</style>
