<style scoped>
  ._nav{margin: 20px 0 0 0 ;background-color: #f5f5f5;}
  ._nav li{float: left;font-size: 14px;color: #666666;padding: 15px 20px;cursor: pointer;position: relative;background-color: #f1f1f1;margin-right: 5px}
  ._nav li._active{background-color:#FFFFFF;color: #333333 }
  ._nav li._active::after{content: "";width: 20px;height: 3px;background-color: #E95252;display: inline-block;position: absolute;bottom: 0;left: 38%;}
  ._conten li{display: flex;padding:10px 30px;margin-top: 20px;border: 1px solid #ebebeb;}
  ._left{display: flex;flex: 6;align-items: center;border-right: 1px dashed #DCDFE6;padding-right: 20px !important;}
  ._left>div{padding-left: 14px}
  ._Icon{width: 50px;height: 50px;line-height: 50px;text-align: center;color: white;font-weight: bold;background-color: #2AAEF2;border-radius: 50%;font-size: 22px}
  ._t{color: #333333;font-size: 14px;padding-bottom: 7px;font-weight: bold}
  ._s{color: #666666;font-size: 12px;}
  ._right{flex: 1;align-items: center;display: flex;padding-left: 20px !important;border-left: 1px dashed #DCDFE6;justify-content: center;}
  ._right i{width: 30px;height: 30px;display: inline-block;color: white !important;border-radius: 50%;text-align: center;line-height: 30px;margin-right: 10px;cursor: pointer;outline: none;}
  ._right i.icon-liucheng{background-color: #00C6FF}
  ._right i.icon-liucheng:hover{background-color: #83d7ef}
  ._right i.icon-liucheng:active{background-color: #038cb3}
  ._right i.el-icon-circle-plus-outline{background-color: #47BF8C}
  ._right i.el-icon-circle-plus-outline:hover{background-color: #47BF8C}
  ._right i.el-icon-circle-plus-outline:active{background-color: #10a063}
  ._log_t{padding: 10px;}
</style>
<template>
  <div>
    <ul class="_nav clearfix" v-if="showTab==0">
      <li :class="active==1?'_active':''" @click="active=1,tabData(1)">{{$t('fnc.shoukuandan')}}</li>
      <li :class="active==2?'_active':''" @click="active=2,tabData(2)">{{$t('fnc.fukuandan')}}</li>
      <li :class="active==3?'_active':''" @click="active=3,tabData(3)">挂账单</li>
    </ul>
    <ul class="_nav clearfix" v-else>
      <li :class="active==1?'_active':''"  v-if="showTab==1">{{$t('fnc.shoukuandan')}}</li>
      <li :class="active==2?'_active':''" v-if="showTab==2">{{$t('fnc.fukuandan')}}</li>
      <li :class="active==3?'_active':''" v-else>挂账单</li>
    </ul>
    <ul class="_conten">
      <li v-for="(item,index) in GetList" v-if="(item.IsShow === 1 || item.showYes) && item.bigShow">
        <div class="_left">
          <span class="_Icon">{{item.Name.substring(0,1)}}</span>
          <div>
            <p class="_t">{{item.Name}}</p>
            <p class="_s">{{item.DescribeInfo}}</p>
          </div>
        </div>
        <div class="_right">
          <el-tooltip popper-class="item _process" effect="dark" :content="$t('fnc.liucheng')"  placement="top">
            <el-popover
              popper-class="detailsIT_Journal"
              width="580"
              trigger="click">
              <div class="InfoChangeLog" >
                <div class="changLog">
                  <p class="_log_t">{{$t('fnc.skliucheng')}}</p>
                  <my-FlowChartModule :data="AuditListData"></my-FlowChartModule>
                </div>
              </div>
              <i slot="reference" class="iconfont icon-liucheng" @click="getFlowChart(item.Id)"></i>
            </el-popover>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="$t('pub.addBtn')"  placement="top">
            <i class="edit el-icon-circle-plus-outline" @click="goUrl('addFinancialDocuments',item.Id,item.Name+$t('visa.v_dan'),item.Type,item.IsUploadPic)"></i>
          </el-tooltip>
        </div>
      </li>
    </ul>
    <div class="noData" v-show="noData">
      {{$t('system.content_noData')}}
    </div>
  </div>
</template>
<script>
  import myFlowChartModule from "./FinancialSubmodule/FlowChartModule.vue";
  export default {
    data(){
      return{
        GetList:[],
        active:1,
        AuditListData:{
          AuditList:[]
        },
        collectList:[],
        payList:[],
        GZList: [],
        total:0,
        currentPage:1,
        noData:false,
        lastID:-1,
        orderObj:null,
        showTab:0,
        templateID: null,
        DepartID: null,
        EmployeeId: null,
        OrderSource: null,
      }
    },methods:{
      goUrl(path,id,Name,Type,IsUploadPic) {
        if(this.active==1){
          this.$router.push({ name: "addReceivablesDocuments",query:{"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增收款单'}})
        }else if(this.active==2){
          this.$router.push({ name: path,query:{"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增付款单'}})
        }else {
          this.$router.push({ name: "addFinancialGZDocuments",query:{"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增挂账单'}})
        }
      },
      getFlowChart(id){  //获取流程图
        if(this.lastID==id)return
        this.apipost('FinancialFlowTemplate_post_GetProcessList',{ID:id,WorkFlowID:0,TemplateType:0},res=>{
          if(res.data.resultCode==1){
            this.lastID = id
            res.data.data.forEach(y=>{
              y.contentTips = y.AuditDescription+(y.AuditWay=="2"? this.$t('fnc.huiqian') : this.$t('fnc.huoqian'))
            });
            this.AuditListData.AuditList = res.data.data
          }else{}
        },err=>{})
      },
      tabData(t){  //切换
        if(t==1){
          this.GetList = this.collectList;
        }else if (t==2){
          this.GetList = this.payList;
        }else if (t==3) {
          this.GetList = this.GZList;
        }
        if(this.GetList.length<1){
          this.noData = true;
        }else{
          this.noData = false;
        }
        let newList = [];
        if (this.templateID) {
          this.templateID.forEach(x=>{
            this.payList.forEach(y=>{
              if(x === y.Id) {
                y.showYes = true
                newList.push(y)
              } else {
                y.showYes = false
              }
            })
          })
          this.GetList = newList
        }
        console.log("this.GetList",this.GetList)
      },
      Financial_post_GetList(){ //获取
        this.apipost('Financial_post_GetList',{},res=>{
          if(res.data.resultCode==1){
            let data = res.data.data;
            console.log("data",data);
            if(data){
              data.forEach(x => {
                // 5-8 OrderSource 为5 并且当前登录人为吴珊，只显示49和50
                // 如果不是吴珊，只显示49 
                if (this.OrderSource === '5' && this.showTab === '2') {
                  if (x.Id === 49 || x.Id === 50){
                    x.bigShow = false
                    if (x.Id === 49){
                      x.bigShow = true
                    } else if (x.Id === 50 && this.EmployeeId === 639){
                      x.bigShow = true
                    }
                    console.log('if',x.Id,x.bigShow)
                  } else {
                    x.bigShow = false
                    console.log('else',x.Id,x.bigShow)
                  }
                } else {
                  //    5-5       仅茈、而巳。  14:32:06
                  // 部门id  =  242 或者  240   就展示出  templeteId=33 的流程，  流程名字叫做  公司佣金收款
                  if (x.Id === 33 || x.Id === 48) { 
                    if (x.Id === 33) {
                      if (this.DepartID === 242 || this.DepartID === 240) {
                        x.bigShow = true
                      } else {
                        x.bigShow = false
                      }
                    } else if (x.Id === 48) {
                      if (this.EmployeeId === 1725) {
                        x.bigShow = true
                      } else {
                        x.bigShow = false
                      }
                    }
                  } else {
                    x.bigShow = true
                  }
                }
                if(x.Type==1){
                  this.collectList.push(x);
                }else if (x.Type==2){
                  this.payList.push(x);
                }else if (x.Type==7){
                  this.GZList.push(x);
                }
              });
            }
            this.GetList = this.collectList;
            if(this.GetList.length<1){
              this.noData = true;
            }
            if(this.$route.query.Type){
              this.tabData(this.$route.query.Type);
            }
          }else{
            this.$message.error(res.data.message)
          }
        },err=>{})
      },
    },mounted(){
      let userInfo = this.getLocalStorage();
      this.DepartID = userInfo.RB_Department_Id;
      this.EmployeeId = userInfo.EmployeeId;
      this.templateID = this.$route.query.templateID ? JSON.parse(this.$route.query.templateID) : null
      this.OrderSource = this.$route.query.OrderSource ? this.$route.query.OrderSource : null
      this.showTab = this.$route.query.Type?this.$route.query.Type:0;
      
      if(this.showTab==1){
        this.GetList = this.collectList;
      } else if(this.showTab==3){
        this.GetList = this.GZList;
      }else{
        this.GetList = this.payList;
      }
      this.active = parseInt(this.$route.query.Type)?parseInt(this.$route.query.Type):1;
      this.orderObj = this.$route.query.orderObj;
      this.Financial_post_GetList();
    },components: {
      "my-FlowChartModule": myFlowChartModule
    }
  }
</script>
