<style scoped>
  @import "../css/cssReset.css";
  ._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 v-if="!visaShowTab" :class="active==3?'_active':''" @click="active=3,tabData(3)">挂账单</li>
      <li v-if="!visaShowTab" :class="active==4?'_active':''" @click="active=4,tabData(4)">折让单</li>
    </ul>
    <ul class="_nav ceshi 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-if="showTab==3">挂账单</li>
      <li :class="active==4?'_active':''" v-if="showTab==4">折让单</li>
    </ul>
    <!-- 搜索框匹配 -->
    <div style="margin:10px 0;">
      <span style="margin: 0 20px;">筛选：</span>
      <el-input v-model="searchVal" placeholder="请输入内容" style="width:200px"></el-input>
    </div>
    <ul class="_conten">
      <li v-for="(item,index) in NewItems" 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 "../components/FlowChartModule.vue";
  export default {
    data(){
      return{
        searchVal:'',
        GetList:[],
        active:1,
        AuditListData:{
          AuditList:[]
        },
        collectList:[],
        payList:[],
        GZList: [],
        ZRList: [],
        total:0,
        currentPage:1,
        noData:false,
        lastID:-1,
        orderObj:null,
        showTab:0,
        templateID: null,
        DepartID: null,
        EmployeeId: null,
        OrderSource: null,
        visaShowTab:false,
        tradeWay:'',
        platformAccount:'',
        Handmsg:{},
        czmsg:{},
      }
    },
    computed: {
      NewItems() {
        var _this = this;
        var NewItems = [];
        this.GetList.map(function(item) {
          if (item.Name.search(_this.searchVal) != -1) {
          NewItems.push(item);
          }
        });
        return NewItems;
        }
    },
    methods:{
      goUrl(path,id,Name,Type,IsUploadPic) {
         if(this.active==1){
          // 手配费 收款单参数Handmsg
          if(this.$route.query.Handmsg){
            this.$router.push({
                path: '/financial/financalDocument/addReceivablesDocuments',
                query:{"Handmsg":this.Handmsg,"tradeWay":this.tradeWay,"platformAccount":this.platformAccount,"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.$route.query.czmsg){
            let Handmsg=this.$route.query.czmsg;
            this.$router.push({
                path: '/financial/financalDocument/addReceivablesDocuments',
                query:{"Handmsg":Handmsg,"tradeWay":this.tradeWay,"platformAccount":this.platformAccount,"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({
                path: '/financial/financalDocument/addReceivablesDocuments',
                query:{"tradeWay":this.tradeWay,"platformAccount":this.platformAccount,"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){
          // 付款单参数czmsg
          // 领队报账  预付款冲抵  返款制单
          if(this.$route.query.czmsg){
            this.$router.push({
                path: '/financial/financalDocument/' + path,
                query:{"czmsg":this.czmsg,"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({
                path: '/financial/financalDocument/' + 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 if(this.active==4){
          this.$router.push({
            path: '/financial/financalDocument/' + path,
            query:{"id":id,"Name":Name,"Type":2,"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({
            path: '/financial/financalDocument/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;
        }
        else if (t==4) {
          this.GetList = this.ZRList;
        }
        if(this.GetList.length<1){
          this.noData = true;
        }else{
          this.noData = false;
        }
        let newList = [];
        if (this.templateID) {
          this.templateID.forEach(x=>{
            this.GetList.forEach(y=>{
              if(x == y.Id) {
                y.showYes = true
                newList.push(JSON.parse(JSON.stringify(y)))
              } else {
                y.showYes = false
              }
            })
          })
          this.GetList = newList;
        }
      },
      Financial_post_GetList(){ //获取
        this.apipost('Financial_post_GetList',{},res=>{
          if(res.data.resultCode==1){
            let data = res.data.data;
            if(data){
              data.forEach(x => {
                // 5-8 OrderSource 为5 并且当前登录人为吴珊，只显示49和50
                // 如果不是吴珊，只显示49
                // 如果没有 OrderSource 则49和50都不显示
                if (this.OrderSource === '5' && this.showTab === '2' && (x.Id === 49 || x.Id === 50)) {
                  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
                    }
                  } else {
                    x.bigShow = false
                  }
                } else if (x.Id === 49 || x.Id === 50){
                  x.bigShow = false
                } 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 ) {  //76 77 稽核单据|| x.Id === 76 || x.Id === 77
                      // 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);
                }else if (x.Type==8){
                  this.ZRList.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.DeptId;
      this.EmployeeId = userInfo.Id;
      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;
      this.tradeWay = this.$route.query.tradeWay?this.$route.query.tradeWay:0;
      this.platformAccount = this.$route.query.platformAccount?this.$route.query.platformAccount:0;
      this.searchVal = this.$route.query.searchTitle?this.$route.query.searchTitle:'';

      // searchVal

      if(this.$route.query.visaType){
        this.visaShowTab=true;
      }
      if(this.showTab==1){
        this.GetList = this.collectList;
      } else if(this.showTab==3){
        this.GetList = this.GZList;
      }else if(this.showTab==2){
        this.GetList = this.payList;
      }
      else if(this.showTab==4){
        this.GetList = this.ZRList;
      }

      this.active = parseInt(this.$route.query.Type)?parseInt(this.$route.query.Type):1;
      this.orderObj = this.$route.query.orderObj;
      this.Handmsg = this.$route.query.Handmsg?this.$route.query.Handmsg:this.Handmsg;
      this.czmsg = this.$route.query.czmsg?this.$route.query.czmsg:this.czmsg;

      this.Financial_post_GetList();
    },components: {
      "my-FlowChartModule": myFlowChartModule
    }
  }
</script>
