<template>
  <view class="u-circle-progress">
    <view class="u-circle-progress__left">
      <view class="u-circle-progress__left__circle" :style="[leftSyle]" ref="left-circle"></view>
    </view>
    <view class="u-circle-progress__right">
      <view class="u-circle-progress__right__circle" ref="right-circle" :style="[rightSyle]"></view>
    </view>
    <view class="u-circle-progress__circle"></view>
  </view>
</template>
<script>
import { props } from './props';
import { mpMixin } from '../../libs/mixin/mpMixin';
import { mixin } from '../../libs/mixin/mixin';
import { sleep } from '../../libs/function/index';
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
/**
 * CircleProgress 圆形进度条 TODO: 待完善
 * @description 展示操作或任务的当前进度，比如上传文件，是一个圆形的进度环。
 * @tutorial https://uview-plus.jiangruyi.com/components/circleProgress.html
 * @property {String | Number}	percentage	圆环进度百分比值，为数值类型，0-100 (默认 30 )
 * @example
 */
export default {
  name: 'u-circle-progress',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      leftBorderColor: 'rgb(200, 200, 200)',
      rightBorderColor: 'rgb(200, 200, 200)'
    };
  },
  computed: {
    leftSyle() {
      const style = {};
      style.borderTopColor = this.leftBorderColor;
      style.borderRightColor = this.leftBorderColor;
      return style;
    },
    rightSyle() {
      const style = {};
      style.borderLeftColor = this.rightBorderColor;
      style.borderBottomColor = this.rightBorderColor;
      return style;
    }
  },
  mounted() {
    sleep().then(() => {
      this.rightBorderColor = 'rgb(66, 185, 131)';
      // this.init()
    });
  },
  methods: {
    init() {
      animation.transition(
        this.$refs['right-circle'].ref,
        {
          styles: {
            transform: 'rotate(45deg)',
            transformOrigin: 'center center'
          }
        },
        () => {
          this.rightBorderColor = 'rgb(66, 185, 131)';
          // animation.transition(this.$refs['right-circle'].ref, {
          // 	styles: {
          // 		transform: 'rotate(225deg)',
          // 		transformOrigin: 'center center'
          // 	},
          // 	duration: 3000,
          // }, () => {
          // 	animation.transition(this.$refs['left-circle'].ref, {
          // 		styles: {
          // 			transform: 'rotate(45deg)',
          // 			transformOrigin: 'center center'
          // 		},
          // 	}, () => {
          // 		this.leftBorderColor = 'rgb(66, 185, 131)'
          // 		animation.transition(this.$refs['left-circle'].ref, {
          // 			styles: {
          // 				transform: 'rotate(225deg)',
          // 				transformOrigin: 'center center'
          // 			},
          // 			duration: 1500,
          // 		}, () => {
          // 		})
          // 	})
          // })
        }
      );
    }
  }
};
</script>
<style scoped>
.u-circle-progress {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  position: relative;
  border-radius: 100px;
  height: 100px;
  width: 100px;
  background-color: rgb(200, 200, 200);
  overflow: hidden;
  justify-content: space-between;
}
.u-circle-progress__circle {
  border-radius: 100px;
  height: 90px;
  width: 90px;
  transform: translate(-50%, -50%);
  background-color: rgb(255, 255, 255);
  left: 50px;
  top: 50px;
  position: absolute;
}
.u-circle-progress__left {
  position: absolute;
  left: 0;
  width: 50px;
  height: 100px;
  overflow: hidden;
  box-sizing: border-box;
}
.u-circle-progress__left__circle {
  box-sizing: border-box;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-top-color: rgb(66, 185, 131);
  border-right-color: rgb(66, 185, 131);
  border-width: 5px;
  width: 100px;
  height: 100px;
  transform: rotate(225deg);
}
.u-circle-progress__right {
  position: absolute;
  right: 0;
  width: 50px;
  height: 100px;
  overflow: hidden;
}
.u-circle-progress__right__circle {
  position: absolute;
  right: 0;
  box-sizing: border-box;
  border-top-color: transparent;
  border-right-color: transparent;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  border-left-color: rgb(200, 200, 200);
  border-bottom-color: rgb(200, 200, 200);
  border-width: 5px;
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  transform-origin: center center;
}
</style>
