<template>
  <!-- 新建日程 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <app-icon
      slot="right"
      icon-name="dot-h"
      class-name="w-5 h-3 flex items-center "
      @click="isShow()"
    />
    <div class="pt-14 px-4 pb-28">
      <!-- 环形图 -->
      <div class="flex items-center justify-center">
        <img src="@/assets/images/clock.png" alt="" class=" h-50">
        <div class="absolute mb-8 font-bold text-lg">{{ gettime }}</div>
        <div class="absolute text-sm mt-1">120min</div>
      </div>
      <!-- 数据 -->
      <div>
        <van-action-sheet v-model="show">
          <c-cell title="分享" title-color="text-text-secondary " />
          <c-cell title="删除" title-color="text-text-secondary " />
        </van-action-sheet>
        <c-cell title="日程名称" title-color="text-text-secondary text-sm " />
        <c-cell type="input" placeholder="请输入日程名称" class-input="text-left text-text-secondary text-sm" />
        <group-cell class="mt-4" title="基本信息">
          <c-cell title="地点" title-color="text-text-secondary text-sm">
            <app-icon
              slot="right"
              type="png"
              class-name="w-1.5 h-2"
              :path="require('@/assets/icons/right-arrow.png')"
            />
          </c-cell>
          <c-cell title="负责人" title-color="text-text-secondary text-sm">
            <div slot="right" class="flex items-center">
              <img src="@/assets/icons/avator.png" alt="" class="w-7 h-7 mr-2">
              <app-icon
                type="png"
                class-name=" w-1.5 h-2 "
                :path="require('@/assets/icons/right-arrow.png')"
              />
            </div>
          </c-cell>
          <c-cell title="参与人员" title-color="text-text-secondary text-sm">
            <app-icon
              slot="right"
              type="png"
              class-name="w-1.5 h-2"
              :path="require('@/assets/icons/right-arrow.png')"
            />
          </c-cell>
          <c-cell title="描述" title-color="text-text-secondary text-sm" />
          <c-cell type="input" placeholder="请输入日程描述" class-input="text-left text-xs focus:text-text-secondary" />
        </group-cell>
        <group-cell class="mt-4" title="更多信息">
          <c-cell title="私密" title-color="text-text-secondary text-sm">
            <div slot="right">
              <van-switch v-model="checked" size="18px" active-color="#32B2F7" />
            </div>
          </c-cell>
          <c-cell title="标签" title-color="text-text-secondary text-sm">
            <div slot="right" class="flex text-white text-sm space-x-2">
              <div class="bg-gray-300 rounded-full px-2.5" :class="green" @click="clickTag(text1)">{{ text1 }}</div>
              <div class="bg-gray-300 rounded-full px-2.5" :class="yellow" @click="clickTag(text2)">{{ text2 }}</div>
              <div class="bg-gray-300 rounded-full px-2.5" :class="pink" @click="clickTag(text3)">{{ text3 }}</div>
            </div>
          </c-cell>
          <c-cell title="附件" title-color="text-text-secondary text-sm">
            <app-icon
              slot="right"
              type="png"
              class-name="w-1.5 h-2"
              :path="require('@/assets/icons/right-arrow.png')"
            />
          </c-cell>
        </group-cell>
        <!--按钮-->
        <div class="fixed bottom-0 left-0 w-full px-4  bg-common-bg py-1.5">
          <c-button>
            发布
          </c-button>
        </div>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import { Switch } from 'vant'
import { ActionSheet } from 'vant'

Vue.use(ActionSheet)
Vue.use(Switch)
export default Vue.extend({
  name: 'CreateEvents',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  data() {
    return {
      show: false,
      gettime: '',
      checked: true,
      text1: '会议',
      text2: '外勤',
      text3: '出差',
      green: '',
      yellow: '',
      pink: ''
    }
  },
  computed: {
    // text() {
    //   return this.currentRate.toFixed(0) + '%';
    // },
  },
  created() {
    // console.log(Mock, 'mock')
    this.getTime()
  },
  methods: {
    isShow() {
      this.show = !this.show
    },
    getTime() {
      setInterval((res: any) => {
        const date = new Date()
        const mf = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        if (date.getHours() === 24 || date.getHours() < 12) {
          this.gettime = date.getHours() % 12 + ':' + mf + 'AM'
        } else if (date.getHours() === 12) {
          this.gettime = date.getHours() + ':' + mf + 'PM'
        } else if (date.getHours() > 12) {
          this.gettime = date.getHours() % 12 + ':' + mf + 'PM'
        }
      }, 1000)
    },
    clickTag(name:string) {
      if (name === '会议') {
        this.pink = ''
        this.yellow = ''
        return this.green = 'bg-gradient-to-r from-meeting-r to-meeting-l '
      } else if (name === '外勤') {
        this.green = ''
        this.pink = ''
        return this.yellow = 'bg-gradient-to-r from-field-r to-field-l '
      } else if (name === '出差') {
        this.yellow = ''
        this.green = ''
        return this.pink = 'bg-gradient-to-r from-trip-r to-trip-l '
      }
    }
  }
})
</script>

<style lang="less" scoped>

</style>
