<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="border-b py-3.5">删除</div>
        <div class=" py-3.5">归档</div>
      </div>
    </van-action-sheet>
    <!-- 内容 -->
    <div class="pt-14 px-4 pb-16">
      <c-cell label="关键节点名称">
        <input slot="content" type="text" class="text-sm text-red-500 focus:text-text-primary" placeholder="请输入关键节点">
      </c-cell>
      <!-- 更多信息 -->
      <group-cell class="mt-4" title="更多信息">
        <c-cell title="所属目标" title-color="text-sm text-text-secondary">
          <div slot="right" class="flex items-center">
            <div class="mr-2 text-sm text-red-500">{{ object }}</div>
            <app-icon
              icon-name="right-arrow"
              class-name="w-2 h-3 "
            />
          </div>
        </c-cell>
        <c-cell title="执行人" title-color="text-sm text-text-secondary">
          <div slot="right" class="flex items-center">
            <div class="mr-2 text-sm text-red-500">{{ people }}</div>
            <app-icon
              icon-name="right-arrow"
              class-name="w-2 h-3 "
            />
          </div>
        </c-cell>
        <c-cell title="周期" title-color="text-sm text-text-secondary">
          <div slot="right" class="flex items-center">
            <div class="mr-2 text-sm text-red-500">{{ period }}</div>
            <app-icon
              icon-name="right-arrow"
              class-name="w-2 h-3 "
            />
          </div>
        </c-cell>
        <c-cell title="加权百分比" title-color="text-sm text-text-secondary">
          <div slot="right" class="mr-4 border rounded  px-2 text-text-secondary flex justify-center">
            <input type="number" class="text-sm w-6 text-center " min="0" max="100">%
          </div>
        </c-cell>
        <c-cell title="优先级" title-color="text-sm text-text-secondary">
          <div slot="right">
            <app-icon
              icon-name="right-arrow"
              class-name="w-2 h-3 "
            />
          </div>
        </c-cell>
        <c-cell title="参与人员" title-color="text-sm text-text-secondary">
          <div slot="right">
            <app-icon
              icon-name="right-arrow"
              class-name="w-2 h-3 "
            />
          </div>
        </c-cell>
        <c-cell title="描述" title-color="text-sm text-text-secondary">
          <div slot="right">
            <app-icon
              icon-name="right-arrow"
              class-name="w-2 h-3 "
            />
          </div>
        </c-cell>
      </group-cell>
      <!-- 拓展属性/其他信息 -->
      <c-cell label="拓展属性" title="关键节点类型" title-color="text-sm text-text-secondary" class="mt-4">
        <div slot="right">
          <app-icon
            icon-name="right-arrow"
            class-name="w-2 h-3 "
          />
        </div>
      </c-cell>
      <c-cell label="其他信息" title="附件" title-color="text-sm text-text-secondary" class="mt-4">
        <div slot="right">
          <app-icon
            icon-name="right-arrow"
            class-name="w-2 h-3 "
          />
        </div>
      </c-cell>
      <!-- 按钮 -->
      <div class="fixed bottom-0 left-0 w-full px-4  bg-common-bg py-1.5">
        <c-button>
          确认
        </c-button>
      </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: 'KRCreate',
  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'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  data() {
    return {
      show: false,
      object: '',
      people: '',
      period: ''
    }
  },
  computed: {

  },
  created() {
    // console.log(Mock, 'mock')
  },
  methods: {
    isShow() {
      this.show = !this.show
    }

  }
})
</script>

<style lang="less" scoped>

</style>
