<template>
  <div>
    <div class="card_top_stc">
      <a-row>
        <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6" v-for="(item, index) in cardData" :key="'comment' + index">
          <a-card class="card-hover card-shadow">
            <div class="box-card">
              <div class="box-card-title">
                <span>{{ item.title }}</span>
                <span class="card-title-circle"><a-icon type="info-circle" /></span>
              </div>
              <div class="box-card-center">
                <div class="box-count">
                  <span>{{ item.count }}</span>
                </div>
                <div class="box-nav">
                  <div class="center-msg" v-if="item.children.length>0">
                    <a-tag color="#d48265">{{item.children[0].title}}</a-tag><span class="cont-count">{{item.children[0].count}}</span>
                    <a-tag color="#91c7ae" style="margin-left: 8px;">{{item.children[1].title}}</a-tag><span class="cont-count">{{item.children[1].count}}</span>
                  </div>
                </div>
              </div>
              <div class="box-card-bottom">
                <span class="cont-title">{{item.foot.title}}</span><span class="cont-count">{{item.foot.count}}</span>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import { getType } from '@/views/utils/auth'
import { Icon } from 'ant-design-vue';
export default {
  name: "cardCount",
  components: { Icon },
  props: {

  },
  data () {
    return {
      cardData: [
        { title: '预审项目数', count: 0, children: [{ title: '待审核', count: 0 }, { title: '已审核', count: 0 }], foot: { title: '今日新上报', count: 0 } },
        { title: '预审通过项目数', count: 0, children: [{ title: '未分配', count: 0 }, { title: '已分配', count: 0 }], foot: { title: '今日新上报', count: 0 } },
        { title: '项目分配人次', count: 0, children: [{ title: '未评审', count: 0 }, { title: '已评审', count: 0 }], foot: { title: '今日评审', count: 0 } },
        { title: '终审项目数', count: 0, children: [{ title: '未审核', count: 0 }, { title: '已审核', count: 0 }], foot: { title: '今日增加', count: 0 } },
      ],
      list2: [
        { title: '预审项目数', count: 0, children: [{ title: '待审核', count: 0 }, { title: '已审核', count: 0 }], foot: { title: '今日新上报', count: 0 } },
        { title: '项目分配人次', count: 0, children: [{ title: '未评审', count: 0 }, { title: '已评审', count: 0 }], foot: { title: '今日评审', count: 0 } },
        { title: '终审项目数', count: 0, children: [{ title: '未审核', count: 0 }, { title: '已审核', count: 0 }], foot: { title: '今日增加', count: 0 } },
        { title: '访问次数', count: 0, children: [], foot: { title: '今日访问', count: 0 } },
      ],
    }
  },
  props: {
    reportYear: {
      type: Number,
      default: () => {
        return null
      }
    },
  },
  created () {
    // this.cardData = this.list1
    // let projType = getType()
    // if (projType && projType == '2') {
    //   this.cardData = this.list2
    // } else {
    //   this.cardData = this.list1
    // }
    // this.changeType()
  },
  computed: {
    // projType: {
    //   get () {
    //     return this.$store.state.app.projType
    //   },
    //   set () {
    //   }
    // },
  },
  methods: {
    changeType () {
      if (!!this.reportYear) {
        this.geFirstAuditCount()
        this.getFirstAuditPassCount()
        this.getAssignPersonCount()
        this.geLastAuditCount()
      }
    },
    geFirstAuditCount () {
      this.$api.statistical.geFirstAuditCount({ auditType: 1, projType: getType(), reportYear: this.reportYear }).then(({ data = {} }) => {
        if (data) {
          this.setCardDataList(0, data.count5, data.count1, data.count2, data.count3)
        }
      }).catch(() => { })
    },
    getFirstAuditPassCount () {
      this.$api.statistical.getFirstAuditPassCount({ auditType: 1, projType: getType(), reportYear: this.reportYear }).then(({ data = {} }) => {
        if (data) {
          this.setCardDataList(1, data.count5, data.count1, data.count2, data.count3)
        }
      }).catch(() => { })
    },
    getAssignPersonCount () {
      this.$api.statistical.getAssignPersonCount({ auditType: 1, projType: getType(), reportYear: this.reportYear }).then(({ data = {} }) => {
        if (data) {
          this.setCardDataList(2, data.count1, data.count2, data.count3, data.count4)
        }
      }).catch(() => { })
    },
    geLastAuditCount () {
      this.$api.statistical.geLastAuditCount({ auditType: 1, projType: getType(), reportYear: this.reportYear }).then(({ data = {} }) => {
        if (data) {
          this.setCardDataList(3, data.count5, data.count1, data.count2, data.count3)
        }
      }).catch(() => { })
    },
    // getLoginCount () {
    //   this.$api.statistical.getLoginCount().then(({ data = {} }) => {
    //     if (data) {
    //       this.setCardDataList(3, data.count1, 0, 0, data.count3)
    //     }
    //   }).catch(() => { })
    // },
    setCardDataList (index, c1, c2, c3, c4) {
      this.cardData[index].count = c1
      if (this.cardData[index].children.length > 0) {
        this.cardData[index].children[0].count = c2
        this.cardData[index].children[1].count = c3
      }
      this.cardData[index].foot.count = c4
    },
  },
  watch: {
    // projType: {
    //   handler (value) {
    //     if (!!value) {
    //       this.changeType()
    //     }
    //   }
    // },
    reportYear: {
      handler (value) {
        if (!!value) {
          this.changeType()
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.card-shadow {
  box-shadow: 3px 3px 5px #d3d8dfc2;
}
.card-hover {
  transition: all 0.1s linear 0s;
}
.card-hover:hover {
  border: 1px solid rgb(205, 207, 207) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transform: translate(0, -0.1px);
  background: #f8f9fa;
  // cursor: pointer;
}
.card_top_stc {
  .ant-row .ant-col {
    padding: 6px;
  }
  .ant-card {
    border-radius: 4px;
    background-color: #ffffff;
    overflow: hidden;
    margin: 0 auto;
    ::v-deep.ant-card-body {
      padding: 12px !important;
      zoom: 1;
    }
    .box-card {
      .box-card-title {
        position: relative;
        height: 20px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 15px;
        line-height: 20px;
        .card-title-circle {
          display: block;
          position: absolute;
          right: 0px;
          top: 0px;
          cursor: pointer;
        }
      }
      .box-card-center {
        .box-count {
          height: 34px;
          line-height: 34px;
          overflow: hidden;
          color: rgba(0, 0, 0, 0.85);
          font-size: 28px;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-break: break-all;
        }
        .box-nav {
          height: 36px;
          border-bottom: 1px solid #e6ebf5;
          padding-bottom: 6px;
          .center-msg {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: flex-end;
            .ant-tag {
              margin-right: 0px !important;
            }
          }
          .center-msg span {
            display: block;
          }
        }
      }
      .box-card-bottom {
        height: 25px;
        display: flex;
        align-items: flex-end;
      }
      .cont-title {
        padding: 0px;
      }
      .cont-count {
        font-size: 16px;
        padding: 0px 5px;
        // font-style: italic;
        font-weight: 400;
      }
    }
  }
}
</style>