<template>
  <a-tabs ref="tabs" :class="[$style.myProject, 'sd-has-table']">
    <template>
      <span slot="tabBarExtraContent" :class="$style.morebtn" @click="mored">查看更多 ></span>
    </template>

    <a-tab-pane key="myProject" :class="$style.panel">
      <span slot="tab">
        <div :class="$style.bluePoint"></div> 我的项目<span
          v-show="shownum"
          :class="$style.projectNums"
          >{{ projectNums }}</span
        >
      </span>
      <my-project-list ref="myProject" list-type="myProject" @setProjectNums="setProjectNums" />
    </a-tab-pane>
  </a-tabs>
</template>

<script>
import storeMixin from '@/common/store-mixin'
import MyProjectList from './my-project-list.vue'
import components from './_import-components/iam-my-project-import'

export default {
  name: 'IamMyProject',
  metaInfo: {
    title: '我的项目',
  },
  components: {
    ...components,
    'my-project-list': MyProjectList,
  },
  mixins: [storeMixin],
  data() {
    return {
      type: 'myProject',
      projectNums: 0,
      shownum: false,
    }
  },
  methods: {
    mored(type) {
      this.$router.push(`/sd-frame/audit-project-list`)
    },
    setProjectNums(num) {
      this.projectNums = num
      this.shownum = true
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.morebtn {
  font-size: 14px;
  cursor: pointer;
}
.syncbtn {
  margin-right: 10px;
  cursor: pointer;
}
.item {
  .body > div {
    border: 1px solid #eee;
    padding: 0.5rem 0;
  }
}
.my-project {
  background: transparent;
  :global(.ant-tabs-tab-active) {
    color: #000000 !important;
    font-weight: 600 !important;
    span {
      padding-left: 5px;
    }
  }
  :global(.ant-tabs-ink-bar-animated) {
    display: none !important;
  }
  :global(.ant-tabs-bar) {
    border: none !important;
  }
}
.blue-point {
  background: #2775e2;
  width: 5px;
  height: 20px;
  position: absolute;
  border-radius: 5px;
  left: 0px;
  top: 9px;
}
.project-nums {
  background: #efefef;
  width: 35px;
  display: inline-block;
  border-radius: 15px;
  font-size: 10px;
  text-align: center;
  padding: 0 !important;
  margin-left: 7px;
}
</style>
