<style scoped>
    .query-box{border: none;padding-left: 0}
    ._nav li{float: left;font-size: 14px;color: #666666;padding: 15px 10px;background-color: #F1F1F1;cursor: pointer;position: relative;}
    ._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%;}
    ._content li{display: flex;padding: 0 30px;margin-top: 20px;border: 1px solid #ebebeb;background-color: white;}
    ._content li:hover{box-shadow:0px 0px 20px rgba(191,191,191,1);transition: all linear 0.5s;}
    ._content li>div{padding: 9px 0}
    ._left{display: flex;flex: 2;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;display: block;}
    ._t{color: #333333;font-size: 14px;padding-bottom: 7px;font-weight: bold}
    ._s{color: #666666;font-size: 12px;}
    ._cent{flex: 3;display: flex;align-items: center;}
    ._cent>div{width: 50%;padding-left: 80px;}
    ._right{flex: 1;align-items: center;display: flex;padding-left: 20px !important;border-left: 1px dashed #DCDFE6;}
    .icon-liuchengsheji{background-color: #B552E9;}
    .icon-liuchengsheji:hover{background-color: #c57dea}
    .eicon-liuchengshejidit:active{background-color: #8741ab}
    ._red{color: #E95252}
    ._dt{text-decoration: underline}
    ._cu{cursor: pointer;}
    ._none{opacity:0 ;}
    ._block{opacity: 1}
    .InfoChangeLog{height: auto;background-color: #FFFFFF;}
    .changLogList{padding-left: 20px;max-height: 180px;overflow: auto;}
    .changLogList_l{border-left: 1px solid #E9E9E9;position: relative;padding-bottom: 10px;padding-left: 20px;padding-top: 10px;}
    ._radius_green{background-color: #47BF8C;width: 7px;height: 7px;border-radius: 50%;display: inline-block;position: absolute;left: -4px;top: 19px;}
    .changLog_time{color: #666666;font-size: 12px;display: inline-block;padding-right: 10px}
    .el-button{border-radius: inherit !important}
    ._log_t{padding: 10px;}
    ._bdrd{border-radius: 17px;}
    ._tp{padding: 10px 20px 0 20px;font-size: 12px;display: flex;align-items: center;align-items: flex-end}
    ._bg_blue{background-color: #297BEF}
    ._bg_org{background-color: #F16C3C !important}
    ._bg_greend{background-color: #32B37C}
    ._bg_greendS{background-color:#1C9A65}
    ._bg_gray{background-color: #666666}
    ._color_blue{color: #005CAA}
    ._yewu{color: white;padding: 3px 13px;}
    ._qian{padding: 6px 15px;}
    ._array{display: inline-block;background-color: #999999}
    ._array_h{width: 35px;height: 3px;}
    ._array_h_left{top: 14px;left: -40px;position: absolute;}
    ._array_h_right{top: 14px;right: -40px;position: absolute;}
    ._array_w{width: 3px;height: 35px;}
    .tri_left{width: 0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left: 6px solid #999999;}
    .tri_down{width: 0;height:0;border-left:6px solid transparent;border-right: 6px solid transparent;border-top: 6px solid #999999; }
    .tri_right{width: 0;height:0;border-top:6px solid transparent;border-bottom: 6px solid transparent;border-right: 6px solid #999999;}
    ._tag{display: inline-block;border-radius: 4px;padding: 2px 4px;margin-bottom: 4px;font-size: 12px}
    ._inlineblock_cen{display: inline-block;text-align: center}
    ._text_right{text-align: right;padding-right: 50px}
    ._tp_b{padding: 0 20px}
    .height40{height: 40px;}
    ._feiyong{padding: 10px;flex-wrap: wrap;/*justify-content: space-between;*/display: flex;}
    ._feiyong>span{display: inline-block;padding: 4px 20px;color: white;font-size: 14px;border-radius: 4px;margin:0 10px 10px 0;}
    ._log_t_s{font-size: 12px;color: #666666}
    .el-popover{text-align: inherit}
    ._dtel{padding-top: 10px;}
    ._no_liucheng{padding: 20px;text-align: center}
    ._liu_block{display: inline-block;width:auto;margin-bottom: 20px;position: relative;}
    .icon-xiaotuziCduan_,.icon-xiaotuziCduan_2{position: absolute;right: -10px;top: -10px;color: #999999;}
    ._array_h_left .icon-xiaotuziCduan_2{position: absolute;left: -10px;top: -10px;right: initial;}
    .text_l{text-align: left;margin-right: 50px}
    .text_r{text-align: right;margin-left: 50px}
    ._miaoshu{display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding:6px 15px;border-radius:4px;background-color: #297BEF;color:white;font-size: 14px;min-width: 120px; text-align: center;max-width: 130px;}
    ._last_ml0{margin-right: 0}
    ._last_mr0{margin-left: 0}
    ._array_h_dbox{position:absolute;top: 14px;right: -5px;}
    ._array_h_dbox_l{right: inherit;left: -40px}
    ._array_h_down{width: 35px;height: 3px;position: absolute;background-color: #999999}
    ._array_h_down_{width: 3px;height: 20px;position: absolute;background-color: #999999}
    ._array_h_down_l{left: 35px}
    .icon-xiaotuziCduan_1{position: absolute;left: 28px;top: 10px;color: #999999;}
    .xiaotuziCduan_1_l{left: inherit;right: -9px;}
    ._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-rizhi1{background-color: #67c23a}
    ._right i.icon-rizhi1:hover{background-color: #85ce61}
    ._right i.icon-rizhi1:active{background-color: #5daf34}
    ._right i.icon-liucheng1{background-color: #409EFF}
    ._right i.icon-liucheng1:hover{background-color: #66b1ff}
    ._right i.icon-liucheng1:active{background-color: #3a8ee6}
    ._right i.icon-bofang{background-color: #ebb563}
    ._right i.icon-bofang:hover{background-color: #ebb563}
    ._right i.icon-bofang:active{background-color: #cf9236}
    ._right i.icon-zanting1{background-color: #ebb563}
    ._right i.icon-zanting1:hover{background-color: #ebb563}
    ._right i.icon-zanting1:active{background-color: #cf9236}
    ._right i.el-icon-delete{background-color: #f56c6c}
    ._right i.el-icon-delete:hover{background-color: #f78989}
    ._right i.el-icon-delete:active{background-color: #dd6161}
    ._left ._Icon_box{width: 50px;padding: 0}
    .page_FProcessManagement .query-box li:last-child{
        top: 100px;
    }
</style>
<template>
    <div class="page_FProcessManagement">
        <div class='query-box'>
			<ul>
				<!-- <li>
                    <span>注：财务基本流程包括（收款流程，付款流程，发票流程），如果需要其他的流程，比如退款流程等请在自定义流程下新增流程设置</span>
                </li>                 -->
				<li><input type="button" class="normalBtn" :value="$t('fnc.addliucheng')" @click="goUrl('addFinancialProcess',0,8)"/>
                <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex()"/>
                </li>
			</ul>
		</div>
        <ul class="_nav clearfix">
            <li class="_active" @click="getTemplateList()">{{$t('fnc.lcliebiao')}}</li>
            <!-- <li :class="active==1?'_active':''" @click="active=1,msg.TempLateWay=8,getTemplateList()">自定义流程</li> -->
        </ul>
        <el-form class="_info_box clearfix"  label-width="110px">
                <el-row>
                    <el-col :span="4" :gutter="35">
                        <el-form-item :label="$t('fnc.lcmingcheng')">
                            <el-input v-model="msg.Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :gutter="35">
                        <el-form-item :label="$t('fnc.feiyongleixing')">
                            <el-select  filterable  v-model='msg.CostTypeID' >
                              <el-option :value="0" :label="$t('pub.unlimitedSel')"></el-option>
                              <el-option v-for="item in GetCostTypeList" :key="item.ID" :value="item.ID" :label="item.Name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :gutter="35">
                      <el-form-item :label="$t('visa.v_shifouqiyong')">
                        <el-tooltip :content="msg.Status==1?$t('fnc.qiyong'):$t('fnc.tingyong')" placement="top">
                          <el-switch
                            @change="resetPageIndex"
                            v-model="msg.Status"
                            active-value="1"
                            inactive-value="2">
                          </el-switch>
                        </el-tooltip>
                      </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </ul>
        <ul class="_content" v-loading="loading">
            <li v-for="(item,index) in CTemplateList" >
                <div class="_left">
                    <div class="_Icon_box">
                        <span class="_Icon">{{item.Name.substring(0,1)}}</span>
                    </div>
                    <div>
                        <p class="_t">{{item.Name}}</p>
                        <p class="_s">{{item.DescribeInfo}}</p>
                    </div>
                </div>
                <div class="_cent _cent_zidingyi">
                    <div>
                        <p class="_t _red">
                            <el-popover
                                popper-class="detailsIT_Journal"
                                width="420"
                                trigger="click">
                                    <div class="InfoChangeLog" v-if="item.CoseTypeList">
                                        <div class="changLog">
                                            <p class="_log_t">{{$t('fnc.syfeiyong')}}</p>
                                            <div class="_feiyong">
                                                <span class="_bg_greend" v-for="Cose in item.CoseTypeList">{{Cose}}</span>
                                            </div>
                                            <p class="_log_t _log_t_s">{{$t('tips.yssdliucheng')}}</p>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <p class="_no_liucheng">{{$t('tips.zwsyfeiyong')}}</p>
                                    </div>
                                <span slot="reference" class="_dt _cu"  type="success" icon="iconfont icon-rizhi1">{{item.CoseTypeListLength}}{{$t('fnc.gfyleixing')}}</span>

                            </el-popover>
                        </p>
                        <p class="_s">{{$t('fnc.syfeiyong')}}</p>
                    </div>
                    <div>
                        <p class="_t _cu" v-if="item.FinanceFlowConnectType!=3">
                            <!-- <template v-for="(cp,ci) in item.SuitableObjectNameList">
                                <span >{{cp}} <span v-if="ci!=item.SuitableObjectNameList.length-1">,</span> </span>
                            </template> -->
                              <el-popover popper-class="detailsIT_Journal" width="420" trigger="click">
                                    <div class="InfoChangeLog" v-if="item.SuitableObjectNameList">
                                        <div class="changLog">
                                            <p class="_log_t">{{$t('fnc.sygongsi')}}</p>
                                            <div class="_feiyong">
                                                <span class="_bg_greend" v-for="Cose in item.SuitableObjectNameList">{{Cose}}</span>
                                            </div>
                                            <p class="_log_t _log_t_s">{{$t('objFill.zhuysgsjzxndlc')}}</p>
                                        </div>
                                    </div>
                                    <div v-else>
                                        <p class="_no_liucheng">{{$t('objFill.zhanwusygs')}}</p>
                                    </div>
                                <span slot="reference" class="_dt _cu"  type="success" icon="iconfont icon-rizhi1" v-if="item.FinanceFlowConnectType!=3">{{item.SuitableObjectNameListlength}}{{$t('objFill.geshiyonggs')}}</span>
                            </el-popover>
                        </p>
                        <P v-if="item.FinanceFlowConnectType==3"> <span slot="reference" class="_t" type="success" icon="iconfont icon-rizhi1">{{$t('fnc.jttongyong')}}</span></P>
                        <p class="_s">{{$t('fnc.sygongsi')}}</p>
                    </div>
                    <div>
                        <p class="_t" v-if="item.Status==1">{{item.FlowNum==null?$t('fnc.no'):item.FlowNum}}</p>
                        <p class="_t" v-else>{{$t('fnc.zwkqliucheng')}}</p>
                        <p class="_s">{{$t('fnc.zlchengshu')}}</p>
                    </div>
                </div>
                <div class="_right">
                    <el-tooltip class="item" effect="dark" :content="$t('fnc.rizhi')" placement="top" >
                        <el-popover
                            popper-class="detailsIT_Journal"
                            width="250"
                            trigger="click">
                                <div class="InfoChangeLog" >
                                    <div class="changLog">
                                        <p class="_log_t">{{$t('fnc.lcrizhi')}}</p>
                                        <ul class="changLogList" v-if="FinanceInfoChangeLog">
                                            <li class="changLogList_l" v-for="(log,li) in FinanceInfoChangeLog">
                                                <span style="background-color: #47BF8C"  class="_radius_green"></span>
                                                <p> <span class="_color_blue">{{log.emName}}</span>  <span class="fr changLog_time">{{log.UpdateDate}}</span> </p>
                                                <p class="_dtel">{{log.StartValue}}</p>
                                            </li>
                                        </ul>
                                        <ul v-else>
                                            <li>{{$t('fnc.zwxgrizhi')}}</li>
                                        </ul>
                                    </div>
                                </div>
                            <i slot="reference" v-show="item.Status==1" class="iconfont icon-rizhi1"
                            @click="getFinanceInfoChangeLog(item)"></i>
                        </el-popover>
                    </el-tooltip>
                    <el-tooltip popper-class="item _process" effect="dark" :content="$t('fnc.liucheng')"  placement="top">
                        <el-popover
                            popper-class="detailsIT_Journal"
                            width="600"
                            trigger="click">
                                <div class="InfoChangeLog" >
                                    <div class="changLog">
                                        <p class="_log_t">{{$t('fnc.skliucheng')}}</p>
                                        <my-FlowChartModule :data="item.Workflow_Condition"></my-FlowChartModule>
                                    </div>
                                </div>
                            <i slot="reference" v-show="item.Status==1" class="iconfont icon-liucheng1"></i>
                        </el-popover>
                    </el-tooltip>
                     <el-tooltip class="item"  effect="dark"  :content="$t('fnc.qiyong')"  placement="top">
                         <i class="iconfont icon-bofang" v-show="item.Status==2"  @click="UpdateStatus(item.Id,item.TemplateType)"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('fnc.tingyong')"  placement="top">
                         <i class="iconfont icon-zanting1" v-show="item.Status==1" @click="UpdateStatus(item.Id,item.TemplateType)"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')"  placement="top">
                        <i  class="iconfont icon-liuchengsheji" v-show="item.Status==1"  @click="goUrl('addFinancialProcess',item.Id,8)"></i>
                    </el-tooltip>
                    <!-- <el-tooltip  class="item" effect="dark" :content="$t('system.table_delete')"  placement="top">
                        <i  class="edit el-icon-delete" v-show="item.Status==1" @click="deletTemplate(item.Id,item.Name)"></i>
                    </el-tooltip>  -->

                </div>
            </li>
        </ul>
        <div class="noData" v-if="noData">
            {{$t('system.content_noData')}}
        </div>
         <div>
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    layout="total,prev, pager, next, jumper"
                    :page-size=msg.pageSize
                    :total=total>
                </el-pagination>
        </div>
    </div>
</template>

<script>
import myFlowChartModule from "./FinancialSubmodule/FlowChartModule.vue";
export default {
    data(){
        return{
            sendData:{},
            //TemplateList:[],
            CTemplateList:[],
            FinanceInfoChangeLog:[],
            GetCostTypeList:[],
            total:0,
            currentPage:1,
            noData:true,
            loading:false,
            msg:{
                pageIndex:1,
                pageSize:6,
                RB_BranchId:-1,
                Name:'',
                CostTypeID:0,
                Status:'1'
            }
        }
    },created(){
        let type  = this.$route.query.type;
        if(this.$route.query.Branch_Id>=0){
            this.msg.RB_BranchId = this.$route.query.Branch_Id;
        };
    },components: {
        "my-FlowChartModule": myFlowChartModule
    },methods:{
      getFinanceInfoChangeLog(item){
        this.apipost('FinancialFlowTemplate_post_GetTemplateLogList',{
          TempleteId: item.Id
        },res=>{
          if(res.data.resultCode==1){
            this.FinanceInfoChangeLog = res.data.data
          }else{
              this.$message.error(res.data.message)
          }
        },err=>{})
      },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getTemplateList();
        },
         tips(msg,type) {
            this.$message({
                message: msg,
                duration:2000,
                type: type
            });
        },
        addTemplate(obj){
            obj.RB_BranchId = this.msg.RB_BranchId;
            this.apipost('FinancialFlowTemplate_post_Set',obj,res=>{
                if(res.data.resultCode==1){
                    this.$message.success('启用成功！')
                    this.getTemplateList()
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        deletTemplate(id,text){  //删除
            this.$confirm(this.$t('tips.qrsc')+'“'+text+'”'+this.$t('tips.lcmscbkhf'), this.$t('tips.tips'), {
                confirmButtonText: this.$t('pub.sureBtn'),
                cancelButtonText: this.$t('pub.cancelBtn'),
                type: 'warning'
            }).then(() => {
                this.apipost('FinancialFlowTemplate_post_Remove',{ID:id},res=>{
                    if(res.data.resultCode==1){
                        this.$message.success(res.data.message)
                        this.getTemplateList()
                    }else{
                        this.$message.error(res.data.message)
                    }
                },err=>{})
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: this.$t('tips.cancleDelete')
                });
            });
        },
        financeinfo_post_GetCostTypeList(){  // 费用类型
            this.apipost('financeinfo_post_GetCostTypeList',{Name:'',type:0,DepartIDs:this.DepartIDs},res=>{
                if(res.data.resultCode==1){
                    this.GetCostTypeList = res.data.data;
                }else{

                }
            },err=>{})
    },
        UpdateStatus(id,type){  //启停用
            this.apipost('FinancialFlowTemplate_post_UpdateStatus',{ID:id,TemplateType:type,RB_Branch_id:this.msg.RB_BranchId},res=>{
                if(res.data.resultCode==1){
                    this.$message.success(res.data.message)
                    this.getTemplateList()
                }else{
                    this.$message.error(res.data.message)
                }
            },err=>{})
        },
        getTemplateList(){
            this.loading = true;
            let url = 'FinancialFlowTemplate_post_GetPageList'
            // if(this.active==0){
            //     url = 'FinancialFlowTemplate_post_GetTemplateList'
            // }
            this.apipost(url,this.msg,res=>{
                if(res.data.resultCode==1){
                        this.total = res.data.data.count;
                        let data = res.data.data.pageData;
                        data.forEach(x => {
                            if(x.CoseTypeList==null){
                                x.CoseTypeListLength = 0
                            }else{
                                x.CoseTypeListLength = x.CoseTypeList.length;
                            }
                            if(x.SuitableObjectNameList==null){
                                x.SuitableObjectNameListlength = 0
                            }else{
                                x.SuitableObjectNameListlength = x.SuitableObjectNameList.length
                            }
                            if(x.Workflow_Condition.AuditList!=null){
                                // v-if="lc.AuditWay!=1">({{lc.AuditWay=="2"?'会签':'或签'}})
                                x.Workflow_Condition.AuditList.forEach(y=>{
                                    if(y.AuditWay==1){
                                        y.contentTips = (y.NodeTypeList && y.NodeTypeList.length>0?y.NodeTypeList[0]+'|':'') + y.AuditDescription
                                    }else{
                                        y.contentTips = (y.NodeTypeList && y.NodeTypeList.length>0?y.NodeTypeList[0]+'|':'') + (y.AuditWay==2?y.AuditDescription+'（会签）':y.AuditDescription+'（或签）')
                                    }
                                })
                            }
                            x.FinanceInfoChangeLog.forEach(y=>{
                                y.Time = this.$commonUtils.formatMsgTime(y.UpdateDate)
                            })
                        });
                        this.CTemplateList = data;
                        this.loading = false;
                        if(data.length>0){
                            this.noData = false;
                        }else{
                            this.noData = true;
                        }
                }else{
                    this.$message.error(res.data.message);
                    this.loading = false;
                }
            },err=>{})
        },
        resetPageIndex() {
            this.msg.pageIndex = 1
            this.currentPage = 1
            this.getTemplateList()
        },
        goUrl(path,id,isZ,Branch_Id) {
            this.$router.push({ name: path,query:{"id":id,"isZ":isZ,"blank":'y',tab:this.$t('objFill.xiugailiucheng')} })
        },
    },mounted(){
        this.getTemplateList();
        this.financeinfo_post_GetCostTypeList();
    }
}
</script>
