<!--准入资格审核-->
<template>
  <div class="app-container approval">
    <div v-if="!infoPageType" class="top-button-max-big-box">
      <div class="top-button-max-box">
        <div class="top-button-box" @click="tableClick(1)">
          <p :class="pageType == 1 ? 'p-color':''">待审核</p>
          <p :class="pageType == 1 ? 'p-back':''"></p>
        </div>
        <div class="top-button-box" @click="tableClick(2)" >
          <p :class="pageType == 2 ? 'p-color':''">已通过</p>
          <p :class="pageType == 2 ? 'p-back':''"></p>
        </div>
        <div class="top-button-box" @click="tableClick(3)">
          <p :class="pageType == 3 ? 'p-color':''">未通过</p>
          <p :class="pageType == 3 ? 'p-back':''"></p>
        </div>
      </div>
      <pending v-if="pageType==1"></pending>
      <passed v-if="pageType==2"></passed>
      <failed v-if="pageType==3"></failed>
    </div>
    <info-page v-if="infoPageType" :infoData="infoData"></info-page>
  </div>
</template>
<script>
  import pending from "./pending.vue";
  import passed from "./passed.vue";
  import failed from "./failed.vue";
  import infoPage from "./infoPage.vue";

export default {
  components: {
    pending,
    passed,
    failed,
    infoPage
  },
  name: "Approval",
  data() {
    return {
      infoPageType:false,
      pageType:1,
      pageTypeTwo:1,
      infoData:{
        type:null,
        list:0,//type=0,审核，1查看
      }
    };
  },
  created() {

  },
  methods: {
    pageClick(state,type,row){
      if(state){
        this.$set(this,'infoData',{
          type:type,
          list:row
        });
      }
      this.$set(this,'infoPageType',state);
    },
    pageOff(){
      // this.pageType = JSON.parse(JSON.stringify(this.pageTypeTwo));
      this.pageType = this.pageTypeTwo;
    },
    //选项卡切换
    tableClick(type){
      if(this.pageType!=type){
        if(type == 4){
          // this.pageTypeTwo = JSON.parse(JSON.stringify(this.pageType));
          this.pageTypeTwo = this.pageType;
        }
        this.pageType = type;
      }
    },
  }
};
</script>
<style scoped lang="scss">
  .approval {
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top-button-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .top-button-max-box{
        display: flex;
        padding-top:4px;
        border-bottom:1px solid #D8D8D8;
        .top-button-box{
          height:73px;
          padding:0 25px;
          p:nth-child(1){
            line-height:68px;
            text-align: center;
            font-weight:500;
            cursor: pointer;
          }
          p:nth-child(2){
            height:5px;
            border-radius:2px;
          }
          .p-color{
            color:#0045AF;
          }
          .p-back{
            background: #0045AF;
          }
        }
      }
    }
  }
</style>
