<template>
  <div class="customer-wrap">
    <!-- <p class="title">审批中心</p> -->
    <div class="taskTop">
      <div class="taskTop_left">
        <div
          class="taskTop_left_item"
          :class="[isActive2 ? 'active' : '']"
          @click="handleMyApprove('2')"
        >
          <span class="page-title">地址审核</span>
          <i class="el-icon-arrow-down" v-if="isActive2"></i>
        </div>
        <div
          class="taskTop_left_item"
          :class="[isActive1 ? 'active' : '']"
          @click="handleMyApprove('1')"
          v-if="isPublic || isPrivate || isHeadOps"
        >
          <el-badge :value="total1" class="item" v-if="total1>0">
            <span class="page-title">区域审批</span>
          </el-badge>
          <span class="page-title" v-else>区域审批</span>
          <i class="el-icon-arrow-down" v-if="isActive1"></i>
        </div>
        <div
          class="taskTop_left_item taskTop_left_item_remove"
          :class="[isActive3 ? 'active' : '']"
          @click="handleMyApprove('3')"
          v-if="isPublic || isPrivate || isHeadOps || isBranchAdmin"
        >
          <el-badge :value="total2" class="remove_item" v-if="total2>0">
            <span class="page-title">客户移交审批</span>
          </el-badge>
          <span class="page-title" v-else>客户移交审批</span>
          <i class="el-icon-arrow-down" v-if="isActive3"></i>
        </div>
      </div>
    </div>
    <PlaceApprove v-if="isActive1" @getDrawCount="getDrawCount" />
    <AddressApprove v-if="isActive2" fromPage="approveCenter" />
    <RemoveApprove v-if="isActive3"  @getRemoveCount="getRemoveCount" :isBranchAdmin="isBranchAdmin"/>
  </div>
</template>
<script>
import PlaceApprove from "./components/placeApprove.vue";
import RemoveApprove from "./components/removeApprove.vue";
import AddressApprove from "../grid/map/anchor";
import { mapGetters } from 'vuex'
import {getDrawCountApi} from "@/api/grid/draw-area";
import { getRemoveList } from "@/api/approveCenter/placeApprove.js";
export default {
  components: { PlaceApprove, AddressApprove,RemoveApprove },
  computed: {
    ...mapGetters(["roles",'userName']),

   //总行
    isHeadAdmin() {
      return this.roles.includes("headAdmin")
    },
    //对公
    isPublic() {
      return this.roles.includes('headPublic')
    },
    //对私
    isPrivate() {
      return this.roles.includes('headPrivate')
    },
    //运管部
    isHeadOps() {
      return this.roles.includes('headOps')
    },
    //支行
    isBranchAdmin() {
      return this.roles.includes('branchAdmin')
    },
  },
  data() {
    return {
      isActive1: false,
      isActive2: true,
      isActive3: false,
      total1:0,
      total2:0,
    };
  },
  created(){
    if(!this.isPublic && !this.isPrivate && !this.isHeadOps ){
      this.isActive1 = false;
      this.isActive2 = true;
    }
    this.getDrawCount();
    if(this.isPublic || this.isPrivate || this.isHeadOps || this.isBranchAdmin){
      this.getRemoveTotal();
    }
  },
  methods: {
    getDrawCount(){
      getDrawCountApi().then(res=>{
        if(res.code == 200){
          this.total1 = res.data;
        }
      })
    },
    getRemoveTotal() {
      const params = {
        pageSize:10,
        pageNum:1,
      };
      getRemoveList(params).then((res) => {
        if (res.code == "200") {
          this.total2 = res.total;
        }
      });
    },
    getRemoveCount(count){
      this.total2=count;
    },
    handleMyApprove(type) {
      this.isActive1 = type == "1" ? true : false;
      this.isActive2 = type == "2" ? true : false;
      this.isActive3 = type == "3" ? true : false;
    },
  },
};
</script>
<style lang="scss" scoped>
.customer-wrap .title {
  padding-left: 25px;
  font-size: 22px;
  margin: 0 0;
  color: #000;
}
.taskTop {
  margin-top: 10px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.taskTop_left {
  display: flex;
}

.taskTop_left_item {
  width: 130px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
}
.taskTop_left_item_remove{
  width: 175px;
  .remove_item{
    width: 135px !important;
  }
  .el-icon-arrow-down{
    margin-left: 10px;
  }
}

.el-icon-arrow-down {
  margin-left: 5px;
  font-size: 16px;
  color: rgb(64, 149, 229);
}
.active {
  border-bottom: 4px solid rgb(64, 149, 229);
}
.taskTop_left_item {
  ::v-deep .el-badge__content.is-fixed {
    top: 19px;
    right: 17px;
  }
  ::v-deep .el-badge{
    width: 100px;
  }
}
</style>
