<template>
  <!-- 协同日程 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <div class="pt-14 px-4">
      <div class="h-80 w-80 mx-auto flex items-center justify-center relative border rounded-full border-text-extreme-light">
        <div class="h-64 w-64 relative">
          <div class="line-wrapper relative">
            <div
              v-for="i of 6"
              :key="i"
              class="h-64 w-px bg-schedule-timeline line"
              :class="`line-${i}`"
            />
          </div>
          <div class="h-56 w-56 bg-common-bg rounded-full center" />
          <div class="h-48 w-48 border center rounded-full flex items-center justify-center">
            Time
          </div>
        </div>
        <div class="absolute top-0 right-0 w-40 h-40">
          <div class="h-full w-full overflow-hidden relative">
            <div class="h-full w-full circle xxx absolute top-0 left-0" />
            <div class="h-full w-full circle yyy absolute top-0 left-0" />
            <div class="h-full w-full circle zzz absolute -top-px left-px" />
          </div>
        </div>
        <div class="absolute top-0 right-0 w-40 h-40 zzz">
          <div class="h-full w-full overflow-hidden relative">
            <div class="h-full w-full circle xxx absolute top-0 left-0" />
            <div class="h-full w-full circle yyy absolute top-0 left-0" />
          </div>
        </div>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'Schedule',
  components: {
    'main-page': () => import('@/layout/main-page.vue')
  },
  data() {
    return {}
  },
  created() {
    // console.log(Mock, 'mock')
  }
})
</script>

<style lang="scss" scoped>

@mixin center {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%,-50%)
}

.center {
  @include center;
}

.line {
  position: absolute;
  left: 50%;
}

@for $i from 1 to 6 {
  .line-#{$i} {
    transform: rotate(30deg * $i) translateX(-50%);
  }
}

.circle {
  border: solid;
  border-width: 8px 8px 0 0;
  border-top-right-radius: 400px;
  transform-origin: bottom left;
  &.xxx {
    border-color: green;
  }
  &.yyy {
    border-color: blue;
    transform: rotate(18deg)
  }
  &.zzz {
    border-width: 10px 10px 0 0;
    border-color: #f6f7f8;
    transform: rotate(45deg)
  }
}

.zzz {
  transform-origin: bottom left;
  transform: rotate(-115deg)
}
</style>
