<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()"
    />
    <!-- 弹窗 -->
    <van-action-sheet v-model="show">
      <div class="text-text-secondary px-6 ">
        <div class="border-b py-3.5 ">分享到</div>
        <div class="border-b py-3.5">拷贝任务</div>
        <div class="border-b py-3.5">删除</div>
        <div class=" py-3.5">归档</div>
      </div>
    </van-action-sheet>
    <!-- 内容 -->
    <div class="pt-14 px-4 pb-16">
      <!-- 头部栏 -->
      <div class="flex justify-around">
        <div class="relative flex flex-col items-center border-r-2 w-1/3">
          <div class=" text-xs text-text-secondary" @click="showDate = true">周期</div>
          <van-calendar
            v-model="showDate"
            title="选择日期"
            :round="false"
            type="range"
            :allow-same-day="true"
            :show-confirm="false"
            color="#61C7FF"
            :style="{ height:'100%'}"
            @confirm="onConfirm"
          />
          <div class="mt-4 inherit absolute bottom-0">
            <div>{{ date }}</div>
            <div>{{ dateStart }}</div>
            <div>{{ dateEnd }}</div>
          </div>
        </div>
        <div class="flex flex-col items-center border-r-2 w-1/3">
          <div class="text-xs text-text-secondary ">状态</div>
          <div class="flex items-center mt-2">
            <dashboard
              :percentage="percentage"
              :stroke-width="5"
              :width="58"
            >
              <div
                slot="content"
                class="flex flex-col items-center"
              >
                <div class="text-lg">{{ percentage + '%' }}</div>
              </div>
            </dashboard>
          </div>
        </div>
        <div class="relative flex flex-col items-center w-1/3">
          <div class="text-xs text-text-secondary mb-1" @click="$router.push('/team/team-frame')">负责人</div>
          <div class="inherit absolute bottom-0">
            <img src="@/assets/icons/avator.png" alt="" class="w-9 h-9">
            <div>张三</div>
          </div>

        </div>
      </div>
      <!-- 信息栏 -->
      <div>
        <group-cell class="mt-4" title="更多信息">
          <c-cell title="优先级" title-class="text-sm text-text-secondary">
            <div slot="right" class="flex items-center">
              <div class="text-sm rounded-full px-2 border border-red-500 text-red-500">紧急</div>
              <app-icon
                icon-name="right-arrow"
                class-name="ml-5 w-1.5 h-3 flex items-center"
                @click="$router.push('/okr/o-priority')"
              />
            </div>

          </c-cell>
          <c-cell title="关联" title-class="text-sm text-text-secondary">
            <app-icon
              slot="right"
              icon-name="right-arrow"
              class-name="ml-5 w-1.5 h-3"
              @click="$router.push('/okr/o-relation')"
            />
          </c-cell>
          <c-cell title="可访问性" title-class="text-sm text-text-secondary">
            <div slot="content" class="">私有</div>
            <app-icon
              slot="right"
              icon-name="right-arrow"
              class-name="ml-5 w-1.5 h-3 flex items-center"
              @click="$router.push('/okr/o-accessibility')"
            />
          </c-cell>
          <c-cell title="参与人员" title-class="text-sm text-text-secondary">
            <div slot="right" class="flex items-center text-sm ">
              <div class="">
                10
              </div>
              <app-icon
                icon-name="right-arrow"
                class-name="ml-5 w-1.5 h-3"
                @click="$router.push('/team/team-frame')"
              />
            </div>
          </c-cell>
          <c-cell title="所有附件" title-class="text-sm text-text-secondary">
            <div slot="right" class="flex items-center text-sm ">
              <div class="">
                （附件数量）2
              </div>
              <app-icon
                icon-name="right-arrow"
                class-name="ml-5 w-1.5 h-3"
              />
            </div>
          </c-cell>
          <c-cell label="描述">
            <div slot="content" class="text-sm px-4 -mt-2">
              负责人/执行人有权选择和更改所有内容的具体信息;参与人员仅可查看、
              添加参与人员和上传附件;所有参与人将被动添加至上级O的参与人员中.....
            </div>
            <app-icon
              slot="right"
              icon-name="right-arrow"
              class-name="w-1.5 h-3"
              @click="$router.push('/okr/o-describe')"
            />
          </c-cell>
        </group-cell>
        <group-cell class="mt-4" title="拓展属性">
          <app-icon
            slot="suffix"
            icon-name="right-arrow"
            class-name="w-1.5 h-3"
            @click="$router.push('/okr/o-extendedAttribute')"
          />
          <c-cell title="客户单位" title-class="text-sm text-text-secondary">
            <div slot="content" class="text-sm">XXX有限责任公司</div>
          </c-cell>
          <c-cell title="客户代表" title-class="text-sm text-text-secondary">
            <div slot="content" class="text-sm">张凯丽</div>
          </c-cell>
          <c-cell title="联系方式" title-class="text-sm text-text-secondary">
            <div slot="content" class="text-sm">173644832910</div>
          </c-cell>
        </group-cell>
      </div>
      <!-- 底部栏 -->

    </div>
  </main-page>
</template>

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

Vue.use(Calendar)
Vue.use(Icon)
Vue.use(ActionSheet)
export default Vue.extend({
  name: 'KRDetail',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'dashboard': () => import('@/views/okr/components/dashboard.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue')
  },
  data() {
    return {
      show: false,
      showDate: false,
      date: '',
      dateStart: '4月4日',
      dateEnd: '5月5日',
      percentage: 40,
      love: false,
      loveColor: false,
      like: 30,
      comment: 12
    }
  },
  computed: {

  },
  created() {
    // console.log(Mock, 'mock')
  },
  methods: {
    isShow() {
      this.show = !this.show
    },
    isLove() {
      this.love = !this.love
      this.loveColor = !this.loveColor
      if (this.love === true) {
        this.like++
      } else {
        this.like--
      }
    },
    formatDate(date:Date) {
      const month = date.getMonth() + 1
      const day = date.getDate()
      if (month < 10) {
        if (day < 10) {
          return `0${date.getMonth() + 1}月0${date.getDate()}日`
        } else {
          return `0${date.getMonth() + 1}月${date.getDate()}日`
        }
      } else {
        if (day < 10) {
          return `${date.getMonth() + 1}月0${date.getDate()}日`
        } else {
          return `${date.getMonth() + 1}月${date.getDate()}日`
        }
      }
    },
    onConfirm(date: [any, any]) {
      const [start, end] = date
      this.showDate = false
      this.dateStart = `${this.formatDate(start)}`
      this.dateEnd = ` ${this.formatDate(end)}`
    }
  }
})
</script>

<style lang="less" scoped>

</style>
