<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-tabs :v-model="0" color="#2372EB">
            <van-tab title="摘要">
<!--        <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-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: 100%;">
                <template #title>
                    <span class="custom-title cl-gray">发明名称</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ patentData.title }}</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">{{ patentData.kindCodeDesc }}</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">{{ patentData.agency }}</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">{{ patentData.applicationNumber }}</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">{{ patentData.applicationDate }}</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">{{ patentData.publicationNumber }}</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">{{ patentData.publicationDate }}</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">{{ patentData.publicationDate }}</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">{{ patentData.publicationDate }}</span>-->
<!--                </template>-->
<!--            </van-cell>-->
            <van-cell style="width: 50%;float: left;">
                <template #title>
                    <span class="custom-title cl-gray">IPC分类号</span>
                </template>
                <template #label>
                    <span class="custom-title cl-black">{{ patentData.ipcList }}</span>
                </template>
            </van-cell>
<!--            <van-cell style="width: 50%;">-->
<!--                <template #title>-->
<!--                    <span class="custom-title cl-gray">IPC分类号</span>-->
<!--                </template>-->
<!--                <template #label>-->
<!--                    <span class="custom-title cl-black">{{ patentData.legalStatusDesc }}</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">{{ patentData.legalStatusDesc }}</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">{{ patentData.legalStatusDesc }}</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 title="申请(专利权)人" :label="patentData.assigneestringList" />
            <van-cell title="发明人" :label="patentData.inventorStringList" />
<!--            <van-cell title="申请人地址" :label="patentData.legalStatusDesc" />-->
<!--            <van-cell title="申请人邮编" :label="patentData.legalStatusDesc" />-->
            <van-cell title="代理机构" :label="patentData.agency" />
            <van-cell title="代理人" :label="patentData.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 ipcDesc" :key="index"  :title="(index+1)+'. '+item" value="" />
            <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="" value="" style="padding-bottom: 50px;">
                <template #title>
                    <van-steps direction="vertical" :active="flowIndex" active-color="#38f">
                    <van-step v-for="(item, index) in patentLegalHistory" :key="index">
                        <p>{{ item.desc }}</p>
                    </van-step>
                </van-steps>
                </template>
            </van-cell>
        </van-cell-group>
            </van-tab>
            <van-tab title="附图">
            <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 v-if="patentImage.length !== 0" v-for="(imageItem, index) in patentImage">
                  <div style="width: 90%;height: 9rem;margin:0 auto;">
                    <van-image :key="index" width="100%" height="100%" :src="imageItem" />
                  </div>
                </van-cell>
              <van-cell v-if="patentImage.length == 0">
                <div style="width: 90%;height: 9rem;margin:0 auto;">
                  <van-image width="100%" height="100%" src="" >
                    <template v-slot:error>无</template>
                  </van-image>
                </div>
              </van-cell>
            </van-cell-group>
            </van-tab>
        </van-tabs>
      </div>
    </div>

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

  
  export default {
    name: "PatentDetial",

    data() {
      return {
        patentData: {},
        patentLegalHistory: [],
        ipcDesc: [],
        flowIndex: '',
        patentImage: [],
      }
    },
    components: {
      VanButton: Button,
      VanRow: Row,
      VanCol: Col,
      VanIcon: Icon,
      VanField: Field,
      VanTab: Tab,
      VanTabs: Tabs,
      VanStep: Step,
      VanSteps: Steps,
    },
    created() {
      this.patentData = JSON.parse(sessionStorage.getItem('patentData'))
      if (this.patentData.ipcDesc !== '') {
        this.ipcDesc = JSON.parse(this.patentData.ipcDesc);
      }
      if (this.patentData.patentImage !== '') {
        this.patentImage =  JSON.parse(JSON.stringify(this.patentData.patentImage)).split(',');
      }
      console.log(this.patentImage)
      if (this.patentData.patentLegalHistory !== '') {
        this.patentLegalHistory = JSON.parse(this.patentData.patentLegalHistory);
        for (let i = 0; i < this.patentLegalHistory.length; i++) {
          if (this.patentLegalHistory[i].desc == this.patentData.legalStatusDesc) {
            this.flowIndex = i
          }
        }
      }
    },
    methods: {
      returnClick() {
        sessionStorage.removeItem('patentData')
        this.$router.push({path: 'Patent'})
      },

    },
  }
  </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;
  }
  .icon-mg {
    margin-left: 3px;
  }
  </style>../../service/api/index