<template>
    <div id="category">
      <!--头部-->
      <!-- <Header/> -->
      <div class="header-title">
        <span class="header-title-return-back" @click="returnClick"><van-icon name="arrow-left" /></span>
        <span class="header-title-name-bold">商标详情</span>
      </div>
  
      <div class="manage-body">
        <van-cell-group>
            <van-cell>
                <div class="">
                    <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">商品名称</span></div>
                </div>
            </van-cell>
            <van-cell>
              <div style="width: 5rem;height: 5rem;margin:0 auto;">
                <van-image width="100%" height="100%" v-if="ttmData.imageUrl !== ''" :src="ttmData.imageUrl" />
                <van-image width="100%" height="100%" v-else src="" >
                  <template v-slot:error>无</template>
                </van-image>
              </div>
            </van-cell>
        </van-cell-group>
<!--        <van-cell-group>-->
<!--            <van-cell>-->
<!--                <div class="">-->
<!--                    <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">商品申请进度</span></div>-->
<!--                </div>-->
<!--            </van-cell>-->
<!--            <van-cell>-->
<!--                    <van-steps :active="1" active-color="#38f">-->
<!--                    <van-step>-->
<!--                        <p>商标申请</p>-->
<!--                    </van-step>-->
<!--                    <van-step>-->
<!--                        <p>初审公告</p>-->
<!--                    </van-step>-->
<!--                    <van-step>-->
<!--                        <p>已注册</p>-->
<!--                    </van-step><van-step>-->
<!--                        <p>终止</p>-->
<!--                    </van-step>-->
<!--                </van-steps>-->
<!--            </van-cell>-->
<!--        </van-cell-group>-->
        <van-cell-group>
            <van-cell>
                <div class="">
                    <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">商标基础信息</span></div>
                </div>
            </van-cell>
            <van-cell style="width: 50%;float: left;">
                <template #title>
                    <span class="custom-title cl-gray">商标名称</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.name }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;">
                <template #title>
                    <span class="custom-title cl-gray">国际分类</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.intCls }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;float: left;">
                <template #title>
                    <span class="custom-title cl-gray">申请/注册号</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.regNo }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;">
                <template #title>
                    <span class="custom-title cl-gray">商标状态</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.flowStatusDesc }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;float: left;">
                <template #title>
                    <span class="custom-title cl-gray">商标类型</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.tmType }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;">
                <template #title>
                    <span class="custom-title cl-gray">商标形式</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.tmStyle }}</span>
                </template>
            </van-cell>
        </van-cell-group>
        
        <van-cell-group>
            <van-cell>
                <div class="">
                    <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">法律节点</span></div>
                </div>
            </van-cell>
            <van-cell style="width: 50%;float: left;">
                <template #title>
                    <span class="custom-title cl-gray">商标申请日期</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.appDate }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;">
                <template #title>
                    <span class="custom-title cl-gray">专用权期限</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.validPeriod }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;float: left;">
                <template #title>
                    <span class="custom-title cl-gray">初审公告期号</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.announcementIssue }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;">
                <template #title>
                    <span class="custom-title cl-gray">初审公告日期</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.announcementDate }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;float: left;">
                <template #title>
                    <span class="custom-title cl-gray">注册公告期号</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.regIssue }}</span>
                </template>
            </van-cell>
            <van-cell style="width: 50%;">
                <template #title>
                    <span class="custom-title cl-gray">注册公告日期</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ ttmData.regDate }}</span>
                </template>
            </van-cell>
            <van-cell>
                <div class="">
                    <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">法律主体</span></div>
                </div>
            </van-cell>
            <van-cell title="申请人" :label="ttmData.applicantCn" />
            <van-cell title="申请地址" :label="ttmData.addressCn" />
            <van-cell title="代理/代办机构" :label="ttmData.agent" />
            <van-cell>
                <div class="">
                    <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">商品/服务项目</span></div>
                </div>
            </van-cell>
            <van-cell v-for="(item, index) in groupItemList" :key="index" :title="item.code" :value="item.name" />
            <van-cell>
                <div class="">
                    <div class="wt-84-per hg-14-rem"><span class="fs-16 fw-bold">商品流程状态</span></div>
                </div>
            </van-cell>
            <van-cell style="padding-bottom: 50px;">
                <template #title>
                    <van-steps direction="vertical" :active="flowIndex" active-color="#38f">
                    <van-step v-for="(item, index) in flowItems" :key="index">
<!--                        <p>2016-07-12 12:40</p>-->
                        <p>{{ item.flowItem }}</p>
                    </van-step>
                </van-steps>
                </template>
            </van-cell>
        </van-cell-group>
      </div>
    </div>

  </template>
  
  <script>
  // 2. 引入滚动组件
  import BScroll from 'better-scroll'
  import { Button, Col, Row, Icon, Field, Step, Steps } from 'vant';
  
  // 3. 引入接口
  import {getCategories, getCategoriesDetail} from "./../../service/api/index"

  
  export default {
    name: "TradeMarkDetail",

    data() {
      return {
        ttmData: {},
        listGroupItems: [],
        groupItemList: [],
        flowItems: [],
        flowIndex: '',
      }
    },
    components: {
      VanButton: Button,
      VanRow: Row,
      VanCol: Col,
      VanIcon: Icon,
      VanField: Field,
      VanStep: Step,
      VanSteps: Steps,
    },
    created() {
      this.ttmData = JSON.parse(sessionStorage.getItem('ttmData'))
      // this.listGroupItems = JSON.parse(this.ttmData.listGroupItems);
      this.flowItems = this.ttmData.flowInfoList;
      this.groupItemList = this.ttmData.groupItemList;
      for (let i = 0; i < this.flowItems.length; i++) {
        if (this.flowItems[i].FlowItem == this.ttmData.flowStatusDesc) {
          this.flowIndex = i
        }
      }
      console.log(this.flowItems)
    },
    methods: {
      returnClick() {
        sessionStorage.removeItem('ttmData')
        this.$router.push({path: 'TradeMark'})
      },

    },
  }
  </script>
  
  <style lang="less" scoped>
  
  .header-title {
    height: 46px;
    width: 100%;
    background-color: #fff;
    text-align: center;
  }
  .header-title-name {
    font-weight: bold;
    line-height: 46px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
  }
  .header-title-return {
    position: absolute;
    top: 13px;
    left: 20px;
    font-size: 15px;
  }
  .manage-body {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px 10px 0px 10px;
  }
  /deep/ .van-nav-bar__text {
    color: gray !important;
    font-weight: bold;
  }
  .icon-mg {
    margin-left: 3px;
  }
  /deep/ .van-card__thumb {
    width: 60px;
  }
  /deep/ .van-cell__value {
    bottom: 5px;
  }
  </style>../../service/api/index