<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>
      <van-tabs v-if="pageLoading == true" :v-model="0" @click="tabChange">
        <van-tab title="软件著作权">
            <div>
            <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item title="登记日期" ref="registerAper">
                    <div style="margin: 10px 10px 0 10px;">
                      <van-tag type="primary" v-for="(item, index) in registerAperList" :key="index" @click="clickRegisterAperLabels(item, index)" :color="registerAperName == item.condition?'#E9F1FD':'#F2F3F5'" :text-color="registerAperName == item.condition?'#2372EB':'#6D6F6D'" class="mg-lt-5 pd-5 pd-bt-10 mg-10 fs-13" size="large">{{ item.condition }}</van-tag>
                    </div>
                    <div style="padding: 10px 16px;margin-bottom: 45px;">
                    <van-button class="br-6" style="width: 45%;float: left;"  type="default" @click="registerAperConfirmCancel">
                        重置
                    </van-button>
                    <van-button class="br-6" style="width: 45%;float: right;" type="info" @click="registerAperConfirmSure">
                        确认
                    </van-button>
                    </div>
                </van-dropdown-item>
                <!-- <van-dropdown-item></van-dropdown-item> -->
            </van-dropdown-menu>
        </div>
          <div style="font-size: 13px;margin-top: 10px;margin-left: 5px;">共<span style="color: #DB2C2C;">{{ total }}</span>个软件著作权</div>
        <div class="manage-body">
        <div style="height: 180px;" v-for="(item, index) in copyrightList" :key="index" @click="jumpDetail('ruanjian',item)">
            <div class="ft-left wt-84-per mg-bt-10"><span class="ft-left fs-16 fw-bold">{{ item.name }}</span></div>
            <div class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">软件简称：{{ item.shortName }}</span></div>
            <div class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">登记号：{{ item.registerNo }}</span></div>
            <div class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">登记日期：{{ item.registerAperDate }}</span></div>
            <div style="padding-bottom: 10px" class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">开发完成日期：{{ item.publishDate }}</span></div>
<!--            <div style="padding-bottom: 10px" class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">权力取得方式：{{ item.name }}</span></div>-->
        </div>
      </div>
        </van-tab>
        <van-tab title="作品著作权">
            <div>
            <van-dropdown-menu active-color="#1989fa">
                <van-dropdown-item title="作品类别" ref="type">
                    <div style="margin: 10px 10px 0 10px;">
                      <van-tag type="primary" v-for="(item, index) in typeList" :key="index" @click="clickTypeLabels(item, index)" :color="typeName == item.condition?'#E9F1FD':'#F2F3F5'" :text-color="typeName == item.condition?'#2372EB':'#6D6F6D'" class="mg-lt-5 pd-5 pd-bt-10 mg-10 fs-13" size="large">{{ item.condition }}</van-tag>
                    </div>
                    <div style="padding: 10px 16px;margin-bottom: 45px;">
                    <van-button class="br-6" style="width: 45%;float: left;"  type="default" @click="typeConfirmCancel">
                        重置
                    </van-button>
                    <van-button class="br-6" style="width: 45%;float: right;" type="info" @click="typeConfirmSure">
                        确认
                    </van-button>
                    </div>
                </van-dropdown-item>
                <van-dropdown-item title="登记日期" ref="register">
                    <div style="margin: 10px 10px 0 10px;"><van-tag type="primary" v-for="(item, index) in registerList" :key="index" @click="clickRegisterLabels(item, index)" :color="registerName == item.condition?'#E9F1FD':'#F2F3F5'" :text-color="registerName == item.condition?'#2372EB':'#6D6F6D'" class="mg-lt-5 pd-5 pd-bt-10 mg-10 fs-13" size="large">{{ item.condition }}</van-tag>
                    </div>
                    <div style="padding: 10px 16px;margin-bottom: 45px;">
                    <van-button class="br-6" style="width: 45%;float: left;"  type="default" @click="registerConfirmCancel">
                        重置
                    </van-button>
                    <van-button class="br-6" style="width: 45%;float: right;" type="info" @click="registerConfirmSure">
                        确认
                    </van-button>
                    </div>
                </van-dropdown-item>
                <!-- <van-dropdown-item></van-dropdown-item> -->
            </van-dropdown-menu>
        </div>
          <div style="font-size: 13px;margin-top: 10px;margin-left: 5px;">共<span style="color: #DB2C2C;">{{ copyRightTotal }}</span>个作品著作权</div>
        <div class="manage-body">
        <div style="height: 180px;" v-for="(item, index) in writeCopyrightList" :key="index" @click="jumpDetail('zuopin',item)">
            <div class="ft-left wt-84-per mg-bt-10"><span class="ft-left fs-16 fw-bold">{{ item.name }}</span></div>
            <div class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">作品类别：{{ item.category }}</span></div>
            <div class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">登记号：{{ item.registerNo }}</span></div>
            <div class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">登记日期：{{ item.registerDate }}</span></div>
            <div class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">完成日期：{{ item.finishDate }}</span></div>
            <div style="padding-bottom: 10px" class="ft-left wt-84-per cl-gray mg-bt-10"><span class="ft-left fs-13">首次发表日期：{{ item.publishDate }}</span></div>
        </div>
      </div>
        </van-tab>
       </van-tabs>
      <van-loading style="text-align: center;margin-top: 50%" v-if="pageLoading == false" />
    </div>

  </template>
  
  <script>
  import { Button, Col, Row, Icon, Field, Tab, Tabs, Step, Steps, DropdownMenu, DropdownItem, Tag } from 'vant';
  
  // 3. 引入接口
  import {
    postCopyrightPage,
    postCopyrightsCopyrightPage,
    postCopyrightSoftRegisterDate,
    postCopyrightCategory,
    postCopyrightRegisterDate
  } from "@/service/api/customerDashboard";

  
  export default {
    name: "Copyright",

    data() {
      return {
        pageLoading: true,
        copyrightList: [],
        writeCopyrightList: [],
        typeList: [],
        registerList: [],
        registerAperList: [],
        typeName: '',
        typeValue: '',
        registerName: '',
        registerValue: '',
        registerAperName: '',
        registerAperValue: '',
        tabIndex: 0,
        currentPage: 1,
        loading: false,
        isEndLoading: false,
        copyRightCurrentPage: 1,
        copyRightLoading: false,
        copyRightIsEndLoading: false,
        total: '',
        copyRightTotal: '',
      }
    },
    components: {
      VanButton: Button,
      VanRow: Row,
      VanCol: Col,
      VanIcon: Icon,
      VanField: Field,
      VanTab: Tab,
      VanTabs: Tabs,
      VanStep: Step,
      VanSteps: Steps,
      VanDropdownMenu: DropdownMenu,
      VanDropdownItem: DropdownItem,
      VanTag: Tag,
    },
    created() {
      window.scrollTo(0, 0)
      this.postSoftRegisterDate();
      this.postTradeCategory();
      this.postRegisterDate();
    },
    mounted() {
      window.addEventListener('scroll', this.scrollBottom);
      this.postCopyright();
      this.postCopyrightsCopyright();
    },
    destroyed() {
      window.removeEventListener('scroll', this.scrollBottom)
    },
    methods: {
      // 获取软件著作权
      async postCopyright(){
        let params = {
          // companyId: '6a9a9635f0082f4c4437cba76d7b2138',
          companyId: sessionStorage.getItem('companyId'),
          registerAperDate: this.registerAperValue,
          pageNum: this.currentPage,
          pageSize: 10,
        }
        let result = await postCopyrightPage(params);
        // this.copyrightList = result.records;
        if (result) {
          this.pageLoading = true;
          this.total = result.total;
          if (this.loading) {
            this.copyrightList = this.copyrightList.concat(result.records);
          } else {
            this.copyrightList = result.records;
          }
          if (this.copyrightList.length < result.total) {
            this.isEndLoading = false;
          } else {
            this.isEndLoading = true;
          }
          this.loading = false;
        }
      },
      // 获取作品著作权
      async postCopyrightsCopyright(){
        let params = {
          // companyId: '04d1559f5767e33f823e6d79161acdd2',
          companyId: sessionStorage.getItem('companyId'),
          category: this.typeValue,
          registerDate: this.registerValue,
          pageNum: this.copyRightCurrentPage,
          pageSize: 10,
        }
        let result = await postCopyrightsCopyrightPage(params);
        // this.writeCopyrightList = result.records;
        this.copyRightTotal = result.total;
        if (this.copyRightLoading) {
          this.writeCopyrightList = this.writeCopyrightList.concat(result.records);
        } else {
          this.writeCopyrightList = result.records;
        }
        if (this.writeCopyrightList.length < result.total) {
          this.copyRightIsEndLoading = false;
        } else {
          this.copyRightIsEndLoading = true;
        }
        this.copyRightLoading = false;
      },

      // 获取软件著作权登记日期
      async postSoftRegisterDate(){
        let result = await postCopyrightSoftRegisterDate({companyId: sessionStorage.getItem('companyId')});
        this.registerAperList = result;
      },
      // 获取作品著作权作品类别
      async postTradeCategory(){
        let result = await postCopyrightCategory({companyId: sessionStorage.getItem('companyId')});
        this.typeList = result;
      },
      // 获取作品著作权登记日期
      async postRegisterDate(){
        let result = await postCopyrightRegisterDate({companyId: sessionStorage.getItem('companyId')});
        this.registerList = result;
      },

      // 根据登记日期查询
      clickRegisterAperLabels(tag, i) {
        this.registerAperName = tag.condition;
      },
      // 登记日期点击重置
      registerAperConfirmCancel() {
        this.registerAperName = '';
        this.registerAperValue = '';
        this.currentPage = 1;
        this.pageLoading = false;
        this.postCopyright();
      },
      // 登记日期点击确定
      registerAperConfirmSure() {
        this.$refs.registerAper.toggle(false);
        this.registerAperValue = this.registerAperName;
        this.currentPage = 1;
        this.pageLoading = false;
        this.postCopyright();
      },

      // 根据作品类别查询
      clickTypeLabels(tag, i) {
        this.typeName = tag.condition;
      },
      // 作品类别点击重置
      typeConfirmCancel() {
        this.typeName = '';
        this.typeValue = '';
        this.copyRightCurrentPage = 1;
        this.postCopyrightsCopyright();
      },
      //作品类别点击确定
      typeConfirmSure() {
        this.$refs.type.toggle(false);
        this.typeValue = this.typeName;
        this.copyRightCurrentPage = 1;
        this.postCopyrightsCopyright();
      },

      // 根据登记日期查询
      clickRegisterLabels(tag, i) {
        this.registerName = tag.condition;
      },
      // 登记日期点击重置
      registerConfirmCancel() {
        this.registerName = '';
        this.registerValue = '';
        this.copyRightCurrentPage = 1;
        this.postCopyrightsCopyright();
      },
      // 登记日期点击确定
      registerConfirmSure() {
        this.$refs.register.toggle(false);
        this.registerValue = this.registerName;
        this.copyRightCurrentPage = 1;
        this.postCopyrightsCopyright();
      },

      tabChange(name, title) {
        // console.log(name, title)
        this.tabIndex = name;
      },

      // 滚动到页面底部时，请求内容
      scrollBottom() {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop  //页面滚动的高度
        let clientHeight = document.documentElement.clientHeight  //可视区域高度
        let scrollHeight = document.documentElement.scrollHeight  //可滚动内容的高度
        let bottomOfWindow = scrollTop + clientHeight + 1000 >= scrollHeight    //是否滚动到底部
        //loading 和 this.tableData.length和this.total是自己的判断条件
        if (this.tabIndex == 0) {
          if (scrollTop !== 0 && bottomOfWindow && !this.loading && this.total > 10) {
            this.loading = true;
            this.currentPage += 1;
            this.postCopyright();
          }
        } else {
          if (scrollTop !== 0 && bottomOfWindow && !this.copyRightLoading && this.copyRightTotal > 10) {
            this.copyRightLoading = true;
            this.copyRightCurrentPage += 1;
            this.postCopyrightsCopyright();
          }
        }
      },

      returnClick() {
        this.$router.go(-1)
      },
      jumpDetail(type,data) {
        sessionStorage.setItem('copyRightType', type)
        sessionStorage.setItem('copyRightData', JSON.stringify(data))
        this.$router.push({path: 'CopyrightDetail'})
      },
      onConfirm() {},

    },
  }
  </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 20px;
  }
  .icon-mg {
    margin-left: 3px;
  }
  /deep/ .van-tabs__line {
    background-color: #1989fa;
  }
  </style>../../service/api/index