<template>
  <div id="userBtn">
    <van-row>
      <van-col span="24" class="main">
        <van-col span="24" class="one">
          <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa' }">我的消息</van-divider>
          <van-col span="24" class="one_1">
            <van-col span="8" class="one_1action onlyColor" @click.native="pathBtn('user/message', 'unRead')">
              <van-goods-action-icon text="未读" :badge="numData.message ? numData.message.unread : ''">
                <template #icon><i class="iconfont icon-xiaoxi"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/message', 'read')">
              <van-goods-action-icon text="CPC消息" :badge="numData.message ? numData.message.cpc : ''">
                <template #icon><i class="iconfont icon-xiaoxi"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action onlyColor" @click.native="pathBtn('user/message', 'notice')">
              <van-goods-action-icon text="通知" :badge="numData.message ? numData.message.notice : ''">
                <template #icon><i class="iconfont icon-tongzhi"></i></template>
              </van-goods-action-icon>
            </van-col>
          </van-col>
        </van-col>
        <van-col span="24" class="one">
          <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa' }">我的申请</van-divider>
          <van-col span="24" class="one_1">
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/apply', 'apply')">
              <van-goods-action-icon text="专利申请" :badge="numData.apply ? numData.apply.apply : '0'">
                <template #icon><i class="iconfont icon-jiaodi"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/apply', 'analysis')">
              <van-goods-action-icon text="查新检索" :badge="numData.apply ? numData.apply.analysis : '0'">
                <template #icon><i class="iconfont icon-pinggu"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/apply', 'assessment')">
              <van-goods-action-icon text="价值评估" :badge="numData.apply ? numData.apply.access : '0'">
                <template #icon><i class="iconfont icon-pinggu"></i></template>
              </van-goods-action-icon>
            </van-col>
          </van-col>
        </van-col>
        <van-col span="24" class="one">
          <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa' }">我的专利</van-divider>
          <van-col span="24" class="one_1">
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/patent', 'information')">
              <van-goods-action-icon text="专利管理" :badge="numData.patent ? numData.patent.information : '0'">
                <template #icon><i class="iconfont icon-jiaodi"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/patent', 'safe')">
              <van-goods-action-icon text="专利维权" :badge="numData.patent ? numData.patent.safeg : '0'">
                <template #icon><i class="iconfont icon-pinggu"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/patent', 'early')">
              <van-goods-action-icon text="专利预警" :badge="numData.patent ? numData.patent.early : '0'">
                <template #icon><i class="iconfont icon-pinggu"></i></template>
              </van-goods-action-icon>
            </van-col>
            <!-- <van-col span="6" class="one_1action" @click.native="pathBtn('user/patent', 'gzj')">
              <van-goods-action-icon text="国知局信息" badge="">
                <template #icon><i class="iconfont icon-fankuixinxi"></i></template>
              </van-goods-action-icon>
            </van-col> -->
          </van-col>
        </van-col>
        <van-col span="24" class="one">
          <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa' }">我的交易</van-divider>
          <van-col span="24" class="one_1 one_4">
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/transaction', 'index', 'type=转让')">
              <van-goods-action-icon text="专利转让" :badge="numData.transaction ? numData.transaction.trans1 : '0'">
                <template #icon><i class="iconfont icon-jiaodi"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/transaction', 'index', 'type=许可')">
              <van-goods-action-icon text="专利许可" :badge="numData.transaction ? numData.transaction.trans2 : '0'">
                <template #icon><i class="iconfont icon-pinggu"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/transaction', 'index', 'type=免费许可')">
              <van-goods-action-icon text="免费许可" :badge="numData.transaction ? numData.transaction.trans3 : '0'">
                <template #icon><i class="iconfont icon-pinggu"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/transaction', 'index', 'type=招商')">
              <van-goods-action-icon text="专利招商" :badge="numData.transaction ? numData.transaction.trans4 : '0'">
                <template #icon><i class="iconfont icon-pinggu"></i></template>
              </van-goods-action-icon>
            </van-col>
            <van-col span="8" class="one_1action" @click.native="pathBtn('user/transaction', 'index', 'type=质押')">
              <van-goods-action-icon text="专利质押" :badge="numData.transaction ? numData.transaction.trans5 : '0'">
                <template #icon><i class="iconfont icon-pinggu"></i></template>
              </van-goods-action-icon>
            </van-col>
          </van-col>
        </van-col>
        <van-col span="24" class="two">
          <van-col span="24" class="two_1">
            <banner-1></banner-1>
          </van-col>
          <van-col span="24" class="two_2">
            <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa' }" @click="more()"> <span>专利超市</span><span>More</span> </van-divider>
            <van-tabs v-model="active" color="#409eff">
              <van-tab title="专利信息" name="1">
                <patent-1></patent-1>
              </van-tab>
              <van-tab title="交易公告" name="2">
                <trans-1></trans-1>
              </van-tab>
              <!-- <van-tab title="转让信息" name="3">
                <transfer-1></transfer-1>
              </van-tab> -->
            </van-tabs>
          </van-col>
        </van-col>
      </van-col>
    </van-row>
    <van-col span="24" class="sticky">
      <!-- <span @click="chat">咨询<br />服务</span> -->
      <van-badge @click.native="chat">
        <div class="child">咨询服务</div>
      </van-badge>
    </van-col>
    <van-dialog
      v-model="chatShow"
      class="dialog"
      title="咨询服务"
      :showConfirmButton="false"
      :showCancelButton="false"
      :closeOnClickOverlay="true"
      cancel-button-text="返回"
    >
      <frame-chat></frame-chat>
    </van-dialog>
  </div>
</template>

<script>
import banner1 from '../parts/banner-1.vue';
import patent1 from '../parts/patent-1.vue';
import trans1 from '../parts/trans-1.vue';
import transfer1 from '../parts/transfer-1.vue';
import frameChat from '@/layout/chatCommon/chat.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: statistics } = createNamespacedHelpers('statistics');
const { mapActions: patentchat } = createNamespacedHelpers('patentchat');
export default {
  name: 'userBtn',
  props: {},
  components: {
    frameChat,
    banner1,
    patent1,
    trans1,
    // transfer1,
  },
  data: function () {
    return {
      chatShow: false,
      active: '1',
      numData: {},
      // 未读总数
      unList: [],
      unTotal: 0,
    };
  },
  created() {
    if (this.user.id) this.search();
  },
  methods: {
    ...patentchat(['query', 'update']),
    ...statistics(['patentUserIndex']),
    async search({ skip = 0, limit = 10, ...info } = {}) {
      let res = await this.patentUserIndex({ id: this.user.id });
      if (this.$checkRes(res)) this.$set(this, `numData`, res.data);
      // 查询聊天未读数
      res = await this.query({ id: this.user.id });
      if (this.$checkRes(res)) {
        let data = res.data.filter((i) => i.is_read == false && i.receiver_id == this.user.id);
        if (data) {
          this.$set(this, `unList`, data);
          this.$set(this, `unTotal`, data.length);
        }
      }
    },
    pathBtn(type, path, query) {
      if (this.user) {
        this.$router.push({ path: `/patent/${type}/${path}?${query}` });
      } else {
        this.$router.push({ path: '/login' });
      }
    },
    async chat() {
      // if (this.unList) {
      //   for (const val of this.unList) {
      //     val.is_read = true;
      //     let res = await this.update(val);
      //     if (this.$checkRes(res));
      //   }
      // }
      this.$router.push({ path: '/patent/user/chat/index' });
    },
    // 更多
    more() {
      this.$router.push({ path: '/patent/market/index' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    .one_1 {
      .one_1action {
        /deep/.van-info {
          background-color: #409eff;
        }
        /deep/.van-goods-action-icon {
          padding: 8px 0;
        }
        i {
          font-size: 20px;
        }
      }
    }
    .one_4 {
      .one_1action {
        width: 20%;
      }
    }
    /deep/.van-divider {
      margin: 10px;
    }
  }
  .two {
    .two_1 {
      margin: 5px 0 0 0;
    }
    .two_2 {
      span:nth-child(2) {
        margin: 0 10px;
      }
    }
  }
}
.sticky {
  position: fixed;
  width: 15%;
  bottom: 30px;
  z-index: 999;
  text-align: right;
  right: 15px;
  .child {
    width: 40px;
    background: #409eff;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    padding: 5px;
  }
}
.onlyColor {
  /deep/.van-info {
    background-color: #409eff !important;
  }
}
</style>
