<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="flex flex-col items-center border-r-2 w-1/3">
          <div class="text-xs text-text-secondary mb-4">周期</div>
          <div>{{ month1 }}月{{ day1 }}日</div>
          <div>{{ month2 }}月{{ day2 }}日</div>
        </div>
        <div class="flex flex-col items-center border-r-2 w-1/3">
          <div class="text-xs text-text-secondary mb-4">状态</div>
          <div class="flex bg-green-50 rounded px-1 flex items-center my-2">
            <van-icon name="success" color="#6EE7B7" />
            <div class="text-green-300"> 已完成</div>
          </div>
        </div>
        <div class="flex flex-col items-center w-1/3">
          <div class="text-xs text-text-secondary mb-1">执行人</div>
          <img src="@/assets/icons/avator.png" alt="" class="w-9 h-9">
          <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="pr-12 text-sm">增强公司内部管理制度</div>
          </c-cell>
          <c-cell title="加权百分比" title-class="text-sm text-text-secondary">
            <input
              slot="right"
              class="mr-12 text-sm border rounded py-1 w-14 text-center text-text-secondary"
              placeholder="25%"
            >
          </c-cell>
          <c-cell title="优先级" title-class="text-sm text-text-secondary">
            <div slot="right" class="mr-12 text-sm rounded-full px-3 py-1 border border-red-500 text-red-500">紧急</div>
          </c-cell>
          <c-cell title="参与人员" title-class="text-sm text-text-secondary">
            <div slot="right" class="flex items-center text-sm ">
              <div class="pr-5">
                （参与人员）6
              </div>
              <app-icon
                icon-name="right-arrow"
                class-name="w-2 h-4"
              />
            </div>
          </c-cell>
          <c-cell title="所有附件" title-class="text-sm text-text-secondary">
            <div slot="right" class="pr-7 text-sm">（附件数量）2</div>
          </c-cell>
          <c-cell label="描述">
            <div slot="content" class="text-sm px-4 -mt-2">
              负责人/执行人有权选择和更改所有内容的具体信息;参与人员仅可查看、
              添加参与人员和上传附件;所有参与人将被动添加至上级O的参与人员中.....
            </div>
          </c-cell>
        </group-cell>
        <c-cell label="拓展属性" title="类型" title-class="text-sm text-text-secondary" class="mt-4">
          <div slot="right" class="text-sm text-text-secondary pr-6">
            内部
          </div>
        </c-cell>
      </div>
      <!-- 底部栏 -->
      <div class=" flex fixed bottom-0 left-0 w-full px-4  bg-white py-2 rounded">
        <div class="rounded-full bg-common-bg w-1/2 py-2 px-4 text-xs ">
          <input type="text" class="bg-common-bg" placeholder="添加评论">
        </div>
        <div class="flex mx-4 space-x-4 items-center">
          <van-icon :name=" love ? 'like' : 'like-o' " :color="lovecolor" size="20" class="flex" @click="isLove()">
            <p class="text-xs text-black">{{ like }}</p>
          </van-icon>
          <van-icon name="chat-o" size="20" class="flex">
            <p class="text-xs">{{ comment }}</p>
          </van-icon>
          <van-icon name="underway-o" size="20" class="flex">
            <p class="text-xs">10</p>
          </van-icon>
        </div>

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

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

Vue.use(Icon)
Vue.use(ActionSheet)
export default Vue.extend({
  name: 'KeyResult',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue')
  },
  data() {
    return {
      show: false,
      month1: '04',
      month2: '04',
      day1: '14',
      day2: '30',
      love: false,
      lovecolor: '',
      like: 30,
      comment: 12
    }
  },
  computed: {

  },
  created() {
    // console.log(Mock, 'mock')
  },
  methods: {
    isShow() {
      this.show = !this.show
    },
    isLove() {
      this.love = !this.love
      if (this.love === true) {
        this.lovecolor = '#ee0a24'
        this.like++
      } else {
        this.lovecolor = ''
        this.like--
      }
    }
  }
})
</script>

<style lang="less" scoped>

</style>
