<template>
	<lj-win-common :title="title" show-back ref="baseWin">
		<div slot="header_sub">
			<div class="oaview_toparea" :style="colortop">
		    	<div class="oaview_top_type" v-if="docInfo.dtype == 0">公文审批</div>
		    	<div class="oaview_top_type" v-if="docInfo.dtype == 1">单据审批</div>
		    	<div class="oaview_top_code">{{docInfo.doccode}}</div>
		     	<div class="oaview_top_flag">{{docInfo.docflagStr}}</div>
		    </div>
		    <!-- <div class="oaview_toparea_sec" :style="colortop_sec"></div>
    		<div class="oaview_toparea_thr" :style="colortop_thr"></div>-->
 			</div>
		<div slot="body" style="background-color: #fff;font-family: '微软雅黑';font-size: 14px;">
    		<!-- 公文信息 -->
    		<div v-if="docInfo.dtype == 0" style="padding:10px 0 0 0 ">
    			<!-- <div style="font-size: 16px;padding: 5px 20px 25px 20px;">
					<span>{{docInfo.doccontent}}</span>
	    			<div style="color:#888;font-size:14px;margin:5px 0 0 20px;position: absolute;right: 20px;">
						{{docInfo.opemp}}
					</div>
    			</div> -->
				<div class="oaview_flex">
					<div class="oaview_title">内容</div>
					<div class="oaview_item">{{docInfo.doccontent}}</div>
				</div>
				<div class="oaview_flex">
					<div class="oaview_title">发起人</div>
					<div class="oaview_item">{{docInfo.opemp}}</div>
				</div>
				<div class="oaview_flex">
					<div class="oaview_title">相关附件</div>
				</div>
				<div>
					<van-cell class="lj-file-show_and_update" v-if="picFjFilter(filedatasList).length > 0">
						<template v-for="(file, index) in picFjFilter(filedatasList)">
							<lj-img-pro
								:key="file.fileid"
								class="file-rel-item"
								v-if="file.filemd5"
								:md5="file.filemd5"
								@image-click="photoBrowser(index)"
							/>
						</template>
					</van-cell>
					<div class="lj-card-item" v-for="(file, index) in docFjFilter(filedatasList)" :key="index">
						<lj-fj :fileName="file.fileName" :fileType="file.fileType" :fileSize = file.filekb  :md5="file.filemd5"  :fileid="file.fileid"/>
					</div>
				</div>
    		</div>
			<!-- 客户订单信息 -->
			<div v-else style="padding:10px 0 0 0 ">
                <div v-for="(item,index) in docTemplate" :key="index">
                    <div class="oaview_flex" v-if="!item.visiable">
						<div class="oaview_title">{{item.title}}</div>
						<div class="oaview_item">{{item.value}}</div>
					</div>
                </div>
				
				<div style="display:flex">
					<div style="font-size:14px;color:#6495ed;margin: 10px auto 10px auto" @click="handleClickShowTaskmx()">查看单据详细信息</div>
				</div>

				<div v-if="showUrge" style="font-size:14px;margin:20px 0 0 20px;color:#fc4f4f">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-jinggao"></use>
					</svg>
					{{urgeObject.urgeemp}}于{{urgeObject.urgedate}}发起催办，请抓紧处理。
				</div>
			</div>

    		<div class="lj-divider" style="height: 5px;"></div>
    		<!-- 审批流程 -->
    		<div style="padding:0 20px;">
    			<template v-for="step in docInfo.stepList">
    				<div style="margin-top: 5px;">
    					<div style="display: flex;align-items: center;">
    						<span v-if="step.flowsort == 0" style="font-size: 20px;">
    							<svg class="icon" aria-hidden="true">
    								<use xlink:href="#icon-zhengque1"></use>
    							</svg>
    						</span>
    						<span v-else-if="step.allpassed == 3" style="font-size: 20px;">
    							<svg class="icon" aria-hidden="true">
    								<use xlink:href="#icon-dengdai1"></use>
    							</svg>
    						</span>
    						<span v-else-if="step.allpassed == 2" style="font-size: 20px;">
    							<svg class="icon" aria-hidden="true">
    								<use xlink:href="#icon-weiwancheng"></use>
    							</svg>
    						</span>
    						<span v-else-if="step.allpassed == 1" style="font-size: 20px;">
    							<svg class="icon" aria-hidden="true">
    								<use xlink:href="#icon-zhengque1"></use>
    							</svg>
    						</span>
    						<span v-else-if="step.allpassed == 0 || step.allpassed == 5" style="font-size: 20px;">
    							<svg class="icon" aria-hidden="true">
    								<use xlink:href="#icon-jianzhanbuzhouweiwan"></use>
    							</svg>
    						</span>
    						<div class="flowstep_title">
    							<span v-if="step.allpassed == 5" style="text-decoration: line-through;color: #aaa">{{step.flowstepname}}</span>
    							<span v-else class="flowstep_title">{{step.flowstepname}}</span>
    							<span v-if="step.flowsort == docInfo.flowsort && step.flowsort > 0 && docInfo.docflag !== 11">(正在审批)</span>
    						</div>
    					</div>
    					<!-- 审批流程明细 -->
    					<div>
							<div style="margin-left: 30px;font-size: 15px;">
								<template v-for="stepmx in step.flowEmpList">
									<div style="display: flex;">
										<!--是否全部通过审批（图标）-->
										<div v-if="step.flowEmpList.length > 1">
											<div v-if="step.ifjoin == 0" :style="stepmx.cancel == 1 ? {color: '#aaa'}:{}">
				    							<svg class="icon" aria-hidden="true" style="color: red" v-if="stepmx.passed == 2">
				    								<use xlink:href="#icon-butongguo"></use>
				    							</svg>
				    							<svg class="icon" aria-hidden="true" v-if="stepmx.passed == 1">
				    								<use xlink:href="#icon-tongguo"></use>
				    							</svg>
												<svg class="icon" aria-hidden="true" v-if="stepmx.passed == 0">
				    								<use xlink:href="#icon-unselected"></use>
				    							</svg>
											</div>
											<div v-else>
				    							<svg class="icon" aria-hidden="true" style="color: red" v-if="stepmx.passed == 2">
				    								<use xlink:href="#icon-cuowu"></use>
				    							</svg>
				    							<svg class="icon" aria-hidden="true" v-if="stepmx.passed == 1">
				    								<use xlink:href="#icon-kongjianyixuan"></use>
				    							</svg>
												<svg class="icon" aria-hidden="true" v-if="stepmx.passed == 0">
				    								<use xlink:href="#icon-kongjianweixuan"></use>
				    							</svg>
											</div>
										</div>
										<div>
											<div v-if="stepmx.cancel == 1" style="text-decoration: line-through;color: #aaa">
												<span>{{stepmx.empname}}</span>
											</div>
											<div v-else>
												<div v-if="stepmx.passed == 2" style="color: red;">
													<span>{{stepmx.empname}}</span>
													<span style="margin-left: 10px;">{{stepmx.greetime | timeFilter2}}</span>
												</div>
												<div v-else-if="stepmx.passed == 1">
													<span>{{stepmx.empname}}</span>
													<span style="margin-left: 10px;color: #888">{{stepmx.greetime | timeFilter2}}</span>
												</div>
												<div v-else>
													<span>{{stepmx.empname}}</span>
												</div>
											</div>
										</div>
										<!--PC移动端图标-->
										<div  v-if="stepmx.clienttype" style="margin-left: 10px;">
											<div v-if="stepmx.clienttype" style="color: #7ba62c;">
												<svg class="icon" aria-hidden="true">
				    								<use xlink:href="#icon-tel"></use>
				    							</svg>
				    							{{stepmx.clienttype}}
											</div>
											<div v-else style="color: #0281ed;">
												<svg class="icon" aria-hidden="true">
				    								<use xlink:href="#icon-diannao"></use>
				    							</svg>
				    							PC
											</div>
										</div>
									</div>
									<div v-if="stepmx.empcontent" 
										:class="stepmx.passed == 2 ? 'lj-sharp-red-text' : 'lj-card-summary-heavy-text'"
										style="margin-left: 20px;font-size: 14px;"
									>
										<span v-if="stepmx.passed == 2">否决理由：</span>
										<span v-else>审批意见：</span>
										{{ stepmx.empcontent }}
									</div>
								</template>
							</div>
    					</div>
    				</div>
    			</template>
    		</div>
		</div>
		<div slot="footer">
			<div v-show="showContent" class="bottom_content">
				<div style="display: flex;align-items: center;">
					<div style="font-size: 15px;padding: 0 20px;color: #888;">审批</div>
					<div style="position: absolute;right: 20px;color: #ccc;font-size: 15px;" @click="closeContent()">
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-close"></use>
						</svg>
					</div>
				</div>
				<div>
					<textarea rows="5" :placeholder="ifresponse == 1 ? '可填写审批意见' : '请填写否决原因'" style="width: 90%;font-size: 15px;margin: 10px;" v-model="contentText"></textarea>
				</div>
			</div>
			<mu-row v-if="showBottomButton">
				<mu-col v-show="ifresponse == 0 || ifresponse == 1">
					<mu-button large color="#ffb732" @click="handleClickAgree()" full-width>同意</mu-button>
				</mu-col>
				<mu-col v-show="ifresponse == 0 || ifresponse == 2">
					<mu-button large color="#fc4e2c" @click="handleClickOppose()" full-width>否决</mu-button>
				</mu-col>
			</mu-row>
		</div>
	</lj-win-common>
</template>

<script>
	import LjWinCommon from 'components/lj-win-common'
	import {Popup} from 'vux'
	import LjImgPro from "components/lj-img-pro";
	import LjFj from "components/lj-fj";

	export default {
		components: {
			LjWinCommon,
			Popup,
			LjImgPro,
			LjFj
		},
		data() {
			return {
				title: "",
				mainObject: {},
				currentEmpname: "",
				showBottomButton: false,
				docInfo: {},
				ifresponse: 0,
				showContent: false,
				contentText: '',
				showUrge: false,
				urgeObject: {},
				showMoney: false,
                docTemplate: [],
				filedatasList: []
			}
		},
		created() {
			let pageParam = $lj.getPageParam();
            if (pageParam.mainObject) {
                this.mainObject = pageParam.mainObject;
            }
			this.showMoney = $lj.checkPower(122);
			this.currentEmpname = $lj.getStorage('user').username;
			this.getOA_Doc();
		},
		methods: {
			getOA_Doc() {
				let self = this;
				let requestBody = {
					token: $lj.getStorage("token"),
					docid: this.mainObject.docid
				};
				$lj.postLJRequest("GetDocDetail", requestBody, function (ret) {
					if(ret) {
						if (ret.docInfo) {
							self.title = ret.docInfo.flowname;

							if (ret.docInfo.dtype === 1) {
								if (ret.docInfo.saletask) {
									ret.docInfo.saletask.requiredateStr = $lj.dateformat(ret.docInfo.saletask.requiredate, 'yyyy') + '年' + $lj.dateformat(ret.docInfo.saletask.requiredate, 'M') + '月' + $lj.dateformat(ret.docInfo.saletask.requiredate, 'd') + '日'
								} 
								if (ret.docInfo.buytask) {
									ret.docInfo.buytask.requiredateStr = $lj.dateformat(ret.docInfo.buytask.requiredate, 'yyyy') + '年' + $lj.dateformat(ret.docInfo.buytask.requiredate, 'M') + '月' + $lj.dateformat(ret.docInfo.buytask.requiredate, 'd') + '日'
								}
							}

							let ifCancel = 0;
							//获取当前进度
							let currentFlowSort = ret.docInfo.flowsort;
							if (ret.docInfo.docflag == 2) {
								ret.docInfo.stepList.forEach((step) => {
									let ifbreak = false;
									step.flowEmpList.forEach((stepmx) => {
										if (stepmx.passed == 2) {
											currentFlowSort = step.flowsort
											ifbreak = true;
											return false;
										}
									})
									if (ifbreak) {
										return false;
									}
								})
							}

							for(let i = 0; i < ret.docInfo.stepList.length; i++)  {
								ret.docInfo.stepList[i].allpassed = 0
								//判断之前的步骤
								if (ret.docInfo.stepList[i].flowsort < currentFlowSort) {
									ret.docInfo.stepList[i].allpassed = 1
									if (ret.docInfo.stepList[i].ifjoin == 0 && ret.docInfo.stepList[i].flowEmpList.length > 1) {
										let passedEmp = "";
										for (let j = 0; j < ret.docInfo.stepList[i].flowEmpList.length; j++) {
											if (ret.docInfo.stepList[i].flowEmpList[j].passed == 1) {
												passedEmp = ret.docInfo.stepList[i].flowEmpList[j].empname
												break;
											}
										}
										ret.docInfo.stepList[i].flowEmpList.forEach((stepmx) => {
											if (stepmx.empname != passedEmp) {
												stepmx.cancel = 1;
											}
										})
									}
									
								}
								//判断当前步骤
								let opposeEmp = "";
								if (ret.docInfo.stepList[i].flowsort == currentFlowSort) {
									let passedNum = 0;
									ret.docInfo.stepList[i].allpassed = ret.docInfo.docflag == 11 ? 1 : 3
									for (let j = 0; j < ret.docInfo.stepList[i].flowEmpList.length; j++) {
										if(ret.docInfo.stepList[i].flowEmpList[j].empname == self.currentEmpname) {
											//催办
											if (ret.docInfo.stepList[i].flowEmpList[j].urgeflag == 1) {
												self.showUrge = true;
												self.urgeObject = {
													urgeemp: ret.docInfo.stepList[i].flowEmpList[j].urgeemp,
													urgedate: $lj.dateformat(ret.docInfo.stepList[i].flowEmpList[j].urgedate, 'M月d日')
												}
											}
											self.showBottomButton = ret.docInfo.docflag == 11 ? false : true;
										}
										//存在否决，跳出循环，将之后的步骤全部取消
										if (ret.docInfo.stepList[i].flowEmpList[j].passed == 2) {
											ret.docInfo.stepList[i].allpassed = 2
											opposeEmp = ret.docInfo.stepList[i].flowEmpList[j].empname
											self.showBottomButton = false;
											ifCancel = 1
											break;
										}
										// 通过人员统计
										else if (ret.docInfo.stepList[i].flowEmpList[j].passed == 2) {
											passedNum++;
										}
									}
									if (ifCancel == 1) {
										//存在否决，其他未处理审批的用户变为取消
										ret.docInfo.stepList[i].flowEmpList.forEach((stepmx) => {
											if (stepmx.passed == 0 && stepmx.empname != opposeEmp) {
												stepmx.cancel = 1;
											}
										})
									} else {
										//(单选)存在通过审批时，其他用户变为取消
										if (passedNum > 0 && ret.docInfo.stepList[i].ifjoin === 0) {
											ret.docInfo.stepList[i].flowEmpList.forEach((stepmx) => {
												if (stepmx.passed == 0 && stepmx.empname != opposeEmp) {
													stepmx.cancel = 1;
												}
											})
										}
									}

								}
								//判断之后的步骤
								if (ret.docInfo.stepList[i].flowsort > currentFlowSort) {
									if (ifCancel == 1) {
										ret.docInfo.stepList[i].allpassed = 5
										ret.docInfo.stepList[i].flowEmpList.forEach((stepmx) => {
											stepmx.cancel = 1;
										})
									} else {
										ret.docInfo.stepList[i].allpassed = 0
									}
								}
							}
							self.docInfo = ret.docInfo
                            self.docTemplate = self.getDocTemplate();

							if(self.docInfo.dtype == 0) {
								self.getFile();
							}
						}
					}
				})
			},
			handleClickAgree() {
				if (this.ifresponse === 0) {
					this.ifresponse = 1;
					this.showContent = true;
					return
				}
				this.docInfo.dscrp = this.contentText
				let requestBody = {
					token: $lj.getStorage("token"),
					docInfo: this.docInfo
				}
				$lj.postLJRequest("AgreeDoc", requestBody, function (ret) {
					if (ret) {
						alert('同意审批成功');
						$lj.sendEvent("timespace_refresh");
						$lj.closeWin();
					}
				})
			},
			handleClickOppose() {
				if (this.ifresponse === 0) {
					this.ifresponse = 2;
					this.showContent = true;
					return
				}
				if(this.contentText == '') {
					$lj.toast('请输入否决理由');
					return
				}
				let requestBody = {
					token: $lj.getStorage("token"),
					docid: this.docInfo.docid,
					dscrp: this.contentText
				}
				$lj.postLJRequest("OpposeDoc", requestBody, function (ret) {
					if (ret) {
						alert('否决审批成功');
						$lj.sendEvent("timespace_refresh");
						$lj.closeWin();
					}
				})
			},
			closeContent() {
				this.ifresponse = 0;
				this.contentText = '';
				this.showContent = false;
			},
			handleClickShowTaskmx() {
				switch (this.docInfo.taskType) {
					case 0:
						$lj.openWin('saletask-detail', {mainObject: this.docInfo.saletask})
						break;
					case 1:
						$lj.openWin('buytask-detail', {mainObject: this.docInfo.buytask})
						break;
					case 2:
						$lj.openWin('claim-mx', {mainObject: this.docInfo.claimbill})
						break;
					case 3:
						$lj.openWin('request-buy-mx', {mainObject: this.docInfo.requestbuy})
						break;
					case 4:
						$lj.openWin('reissue-spt-mx', {mainObject: this.docInfo.reissue})
						break;
					case 5:
						if (this.docInfo.quote.billtype == 1) {
							$lj.openWin('quote-record-mx', {mainObject: this.docInfo.quote})
						} else {
							$lj.openWin('quote-mx', {mainObject: this.docInfo.quote})
						}
						break;
					case 6:
						$lj.openWin('saletask-fore-detail', {mainObject: this.docInfo.saletask})
						break;
					case 7:
						$lj.openWin('saletaskmx-change-mx', {mainObject: this.docInfo.saletaskMxChange})
						break;
					case 8:
						$lj.openWin('sctask-abnormity-mx', {mainObject: this.docInfo.abnormity})
						break;
					case 9:
						$lj.openWin('bill-money-mx', {mainObject: this.docInfo.billmoney})
					case 10:
						$lj.openWin('saletaskmx-stopbill-mx', {mainObject: this.docInfo.saletaskMxStopBill})
						break;
					case 11:
						$lj.openWin('spt-price-changemx', {mainObject: this.docInfo.priceChangeBill})
						break;
					case 12:
						$lj.openWin('outware-scll-new-mx', {outwareid: this.docInfo.outwareBill.outwareid})
						break;
					case 13:
						$lj.openWin('request-wfjg-mx',{mainObject:this.docInfo.requestWfjgBill})
						break;
					case 14:
						$lj.openWin('kq-cwork-mx',{mainObject:this.docInfo.kqWorkBill})
						break;
					case 15:
						$lj.openWin('equipment-repair-info',{mainObject:this.docInfo.eqRepairtBill,readOnly: true})
						break;
					case 16:
						// 订单收款单
						break;
				}
			},
            getDocTemplate() {
                switch(this.docInfo.taskType) {
                    case 0:
                    case 6:
                        return this.getSaletaskTemplate();
                    case 1:
                        return this.getBuyTaskTemplate();
                    case 2:
                        return this.getClaimTemplate();
                    case 3:
                        return this.getRequestBuyTemplate();
                    case 4:
                        return this.getReissueTemplate();
                    case 5:
                        return this.getQuoteTemplate();
                    case 7:
                        return this.getSaletaskMxChangeTemplate();
					case 8:
                        return this.getAbnormityTemplate();
					case 9:
						return this.getBillMoneyTemplate();
					case 10:
						return this.getSaletaskMxStopBillTemplate();
					case 11:
						return this.getSptPriceChangeBillTemplate();
					case 12:
						return this.getOutWareScllBillTemplate();
					case 13:
						return this.getRequestWfjgTemplate();
					case 14:
						return this.getKQCWorkTemplate();
					case 15:
						return this.getEQRepairtTemplate();
					case 16:
						return this.getCusAmtTemplate();
                }
            },
            // 销售订单/预测单
            getSaletaskTemplate() {
                var kind = {
                    0: "销售预测单",
                    1: "销售订单",
                    6: "外销订单"
                }
                return [
                    {title: "单号",value: this.docInfo.saletask.taskcode},
                    {title: "类型",value: kind[this.docInfo.saletask.kind]},
                    {title: "客户",value: this.isShowCusname(this.docInfo.saletask), visiable: !(this.docInfo.saletask.kind === 1)},
                    {title: "业务员",value: this.docInfo.saletask.assign_emp},
                    {title: "金额",value: `${$lj.moneyFormat(this.docInfo.saletask.sumfprice)}元`,visiable: (this.showMoney && (this.docInfo.saletask.kind === 1) && this.docInfo.saletask.kind !== 0)},
                    {title: "交期",value: this.docInfo.saletask.requiredateStr},
                    {title: "相关号",value: this.docInfo.saletask.relcode},
                    {title: "交货方式",value: this.docInfo.saletask.paytype},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
            // 采购订单
            getBuyTaskTemplate() {
                return [
                    {title: "单号",value: this.docInfo.buytask.taskcode},
                    {title: "供应商",value: this.docInfo.buytask.sptname},
                    {title: "业务员",value: this.docInfo.buytask.assign_emp},
                    {title: "金额",value: `${$lj.moneyFormat(this.docInfo.buytask.billamt)}元`},
                    {title: "订货日期",value: this.docInfo.buytask.requiredateStr},
                    {title: "相关号",value: this.docInfo.buytask.relcode},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
            // 费用预算申请单
            getClaimTemplate() {
                return [
                    {title: "单号",value: this.docInfo.claimbill.billcode},
                    {title: "申请人",value: this.docInfo.claimbill.Empname},
                    {title: "报销事由",value: this.docInfo.claimbill.reason},
                    {title: "报销类型",value: this.docInfo.claimbill.claimtype},
                    {title: "报销金额",value: `${$lj.moneyFormat(this.docInfo.claimbill.amt)}元`},
                    {title: "报销部门",value: this.docInfo.claimbill.departmentname},
                    {title: "报销日期",value: $lj.dateformat(this.docInfo.claimbill.billdate, 'yyyy-MM-dd')},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
            // 材料申购单
            getRequestBuyTemplate() {
                return [
                    {title: "单号",value: this.docInfo.requestbuy.requestbuycode},
                    {title: "部门",value: this.docInfo.requestbuy.handtype},
                    {title: "经手人",value: this.docInfo.requestbuy.assign_emp},
                    {title: "申购日期",value: $lj.dateformat(this.docInfo.requestbuy.requestbuydate, 'yyyy-MM-dd')},
                    {title: "相关号",value: this.docInfo.requestbuy.relcode},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
            // 供应商费用单
            getReissueTemplate() {
                return [
                    {title: "单号",value: this.docInfo.reissue.reissuecode},
                    {title: "供应商",value: this.docInfo.reissue.sptname},
                    {title: "预付款日期",value: $lj.dateformat(this.docInfo.reissue.plandate, 'yyyy-MM-dd')},
                    {title: "收支项目",value: this.docInfo.reissue.itemname},
                    {title: "部门",value: this.docInfo.reissue.handtype},
                    {title: "经手人",value: this.docInfo.reissue.assign_emp},
                    {title: "单据日期",value: $lj.dateformat(this.docInfo.reissue.reissuedate, 'yyyy-MM-dd')},
                    {title: "相关号",value: this.docInfo.reissue.relcode},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
            // 销售报价单
            getQuoteTemplate() {
                var kind = {
                    0: "销售报价",
                    1: "销售报价记录",
                }
                return [
                    {title: "单号",value: this.docInfo.quote.quotecode},
                    {title: "类型",value: kind[this.docInfo.quote.billtype]},
                    {title: "客户",value: this.isShowCusname(this.docInfo.quote)},
                    {title: "报价日期",value: $lj.dateformat(this.docInfo.quote.quotedate, 'yyyy-MM-dd')},
                    {title: "货运部",value: this.docInfo.quote.freight,visiable:this.docInfo.powerid == 3810},
                    {title: "货运部地址",value: this.docInfo.quote.station_address,visiable:this.docInfo.powerid == 3810},
                    {title: "经手人",value: this.docInfo.quote.assign_emp},
                    {title: "相关号",value: this.docInfo.quote.relcode},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
            // 销售订单配置及相关计划配置变更单
            getSaletaskMxChangeTemplate() {
                return [
                    {title: "单号",value: this.docInfo.saletaskMxChange.billcode},
                    {title: "类型",value: "销售订单配置及相关计划配置变更单"},
                    {title: "建立日期",value: $lj.dateformat(this.docInfo.saletaskMxChange.opdate, 'yyyy-MM-dd')},
                    {title: "客户",value: this.isShowCusname(this.docInfo.saletaskMxChange)},
                    {title: "产品名称",value: this.docInfo.saletaskMxChange.mtrlname},
                    {title: "经手人",value: this.docInfo.saletaskMxChange.rep},
                    {title: "订单相关号",value: this.docInfo.saletaskMxChange.saletask_relcode},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
            // 个人其他计件
            getAbnormityTemplate() {
                return [
                    {title: "单据编号", value: this.docInfo.abnormity.billcode},
                    {title: "返工单号", value: this.docInfo.abnormity.fgbillcode},
                    {title: "责任部门", value: this.docInfo.abnormity.dutydept},
                    {title: "责任人", value: this.docInfo.abnormity.dutyrep},
                    {title: "异常月份", value: this.docInfo.abnormity.wagemth},
                    {title: "工资项目", value: this.docInfo.abnormity.wagename},
                    {title: "相关单号", value: this.docInfo.abnormity.relcode},
                    {title: "返工事由", value: this.docInfo.abnormity.dutyreason},
                    {title: "备注", value: this.docInfo.abnormity.dscrp},
                    {title: "摘要",value: this.docInfo.doccontent}
                ]
            },
            // 供应商收支单
            getBillMoneyTemplate() {
                return [
                    {title: "单号",value: this.docInfo.billmoney.billcode},
                    {title: "发生日期",value: $lj.dateformat(this.docInfo.billmoney.billdate, 'yyyy-MM-dd')},
                    {title: "供应商",value: this.docInfo.billmoney.sptname},
                    {title: "应付支出",value: this.docInfo.billmoney.rawamt_takepay},
                    {title: "出纳账号",value: this.docInfo.billmoney.accountsname},
                    {title: "经手人",value: this.docInfo.billmoney.rep},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
            // 销售订单明细终止申请单
            getSaletaskMxStopBillTemplate() {
                return [
                    {title: "销售单号",value: this.docInfo.saletaskMxStopBill.taskcode},
                    {title: "客户",value: this.isShowCusname(this.docInfo.saletaskMxStopBill)},
                    {title: "物料编码",value: this.docInfo.saletaskMxStopBill.mtrlcode},
                    {title: "物料名称",value: this.docInfo.saletaskMxStopBill.mtrlname},
                    {title: "终止数",value: this.docInfo.saletaskMxStopBill.edit_stopqty},
                    {title: "终止原因",value: this.docInfo.saletaskMxStopBill.stopreason},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
            },
			// 供应商询价单
			getSptPriceChangeBillTemplate() {
				return [
                    {title: "单号",value: this.docInfo.priceChangeBill.Billcode},
                    {title: "供应商",value: this.docInfo.priceChangeBill.sptname},
                    {title: "币种",value: this.docInfo.priceChangeBill.moneyname},
                    {title: "经手人",value: this.docInfo.priceChangeBill.inrep},
                    {title: "协作状态",value: this.docInfo.priceChangeBill.fiebstatusStr},
                    {title: "备注",value: this.docInfo.priceChangeBill.Dscrp},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
			},
			// 其他领料单
			getOutWareScllBillTemplate() {
				return [
                    {title: "单号",value: this.docInfo.outwareBill.outwarecode},
                    {title: "仓库",value: this.docInfo.outwareBill.storagename},
                    {title: "领用时间",value: this.docInfo.outwareBill.outdate},
                    {title: "领用组",value: this.docInfo.outwareBill.relidname},
                    {title: "经手人",value: this.docInfo.outwareBill.outrep},
                    {title: "相关号",value: this.docInfo.outwareBill.part},
                    {title: "员工编号",value: this.docInfo.outwareBill.empcode},
                    {title: "员工姓名",value: this.docInfo.outwareBill.empname},
                    {title: "领出原因",value: this.docInfo.outwareBill.cusname},
                    {title: "备注",value: this.docInfo.outwareBill.dscrp},
                    {title: "摘要",value: this.docInfo.doccontent},
                ]
			},
			//外协申请单
			getRequestWfjgTemplate(){
				return[
					{title:"单号",value:this.docInfo.requestWfjgBill.taskcode},
					{title:"负责人",value:this.docInfo.requestWfjgBill.assign_emp},
					{title:"下单日期",value:$lj.dateformat(this.docInfo.requestWfjgBill.requiredate, 'yyyy-MM-dd')},
					{title:"相关号",value:this.docInfo.requestWfjgBill.relcode},
					{title:"摘要",value:this.docInfo.doccontent}
				]
			},
			//考勤单
			getKQCWorkTemplate(){
				return[
					{title:"单号",value:this.docInfo.kqWorkBill.billcode},
					{title:"经手人",value:this.docInfo.kqWorkBill.billrep},
					{title:"考勤项目",value:this.docInfo.kqWorkBill.cworkname},
					{title:"工资项目",value:this.docInfo.kqWorkBill.wagename},
					{title:"工资月份",value:this.docInfo.kqWorkBill.wagemth},
					{title:"相关人员",value:this.docInfo.kqWorkBill.relempstr},
					{title:"单据日期",value:$lj.dateformat(this.docInfo.kqWorkBill.billdate, 'yyyy-MM-dd')},
					{title:"相关号码",value:this.docInfo.kqWorkBill.part},
					{title:"摘要",value:this.docInfo.doccontent}
				]
			},
			// 设备委外维修
			getEQRepairtTemplate() {
				return [
					{title:"设备编号",value:this.docInfo.eqRepairtBill.EquipCode},
					{title:"设备名称",value:this.docInfo.eqRepairtBill.EquipName},
					{title:"报修人",value:this.docInfo.eqRepairtBill.opemp},
					{title:"报修时间",value:$lj.dateformat(this.docInfo.eqRepairtBill.opdate, 'yyyy-MM-dd')},
					{title:"报修项目",value:this.docInfo.eqRepairtBill.faultcase},
					{title:"备注",value:this.docInfo.eqRepairtBill.descrp},
					{title:"负责人",value:this.docInfo.eqRepairtBill.repairemp},
					{title:"责任人",value:this.docInfo.eqRepairtBill.responsible_emp},
					{title:"维护费用",value:this.docInfo.eqRepairtBill.repaircost},
					{title:"摘要",value:this.docInfo.doccontent}
				]
			},
			//订单收款单
			getCusAmtTemplate(){
				return[
					{title:"单号",value:this.docInfo.taskAmtBill.billcode},
					{title:"经手人",value:this.docInfo.taskAmtBill.assign_emp},
					{title:"客户名称",value:this.docInfo.taskAmtBill.cusname},
					{title:"业务员",value:this.docInfo.taskAmtBill.custype},
					{title:"出纳收款",value:this.docInfo.taskAmtBill.amt},
					{title:"单据日期",value:$lj.dateformat(this.docInfo.taskAmtBill.billdate, 'yyyy-MM-dd')},
					{title:"相关号码",value:this.docInfo.taskAmtBill.part},
					{title:"备注",value:this.docInfo.taskAmtBill.dscrp},
					{title:"摘要",value:this.docInfo.doccontent}
				]
			},
			docFjFilter(data) {
                if (!data || !data.length) return []
                let picArr = ["jpg","jpeg","png","gif","bmp"]
                return data.filter((item) => {
                    return picArr.indexOf(item.fileType.trim().toLowerCase()) == -1
                })
            },
            picFjFilter(data) {
                if (!data || !data.length) return []
                let picArr = ["jpg","jpeg","png","gif","bmp"]
                return data.filter((item) => {
                    return picArr.indexOf(item.fileType.trim().toLowerCase()) > -1
                })
            },
            photoBrowser(index) {
                var images = [];
                for (const picture of this.filedatasList) {
                    let url = "";
                    if (picture.hasOwnProperty("thumbPath")) {
                        url = picture.thumbPath
                    } else {
                        url = $lj.constant.cacheDir + "/" + picture.filemd5;
                    }
                    images.push(url);
                }
                $lj.photoBrowser(images, index);
            },
            getFile() {
                let self = this;
                $lj.postLJRequest("GetFjFileList", {
                    token: $lj.getStorage("token"),
                    type: "OADocAnnex",
					relid: this.docInfo.docid
                }, function (ret) {
                    if (ret) {
                        if (ret.fileDatas && ret.fileDatas.length > 0) {
                            self.filedatasList = ret.fileDatas;
                        }
                    }
                })
            }
		},
		computed: {
			colortop: function() {
				switch(this.docInfo.docflag) {
					case 1: return {backgroundColor: '#8dc026'}
					case 2: return {backgroundColor: '#fc4e2c'}
					case 11: return {backgroundColor: '#46a4da'}
					default: break;
				}
			},
			isShowCusname(data) {
				let empid = $lj.getStorage("userInfo").empid;
				return function (data) {
					let msg = "";
					if (empid != 0 && $lj.checkPower(1210)) {
						msg = data.cuscode;
					} else {
						msg = data.cusname;
					}
					return msg;
				}
			}
			// colortop_sec: function() {
			// 	switch(this.docInfo.docflag) {
			// 		case 1: return {backgroundColor: '#bbe26e'}
			// 		case 2: return {backgroundColor: '#fd8e78'}
			// 		case 11: return {backgroundColor: '#90cef1'}
			// 		default: break;
			// 	}
			// },
			// colortop_thr: function() {
			// 	switch(this.docInfo.docflag) {
			// 		case 1: return {backgroundColor: '#e3f8b8'}
			// 		case 2: return {backgroundColor: '#ffdbd4'}
			// 		case 11: return {backgroundColor: '#d1edfd'}
			// 		default: break;
			// 	}
			// },
		}

	}
</script>

<style>
	.oaview_toparea {
		/*position: absolute;
	    top: 44px;*/
	    top: 60px;
	    width: 100%;
	    display: flex;
	    color: #fff;
	    /*background-color: #fc4e2c;*/
	    font-size: 16px;
	    font-weight: bold;
	    align-items: center;
	    height: 35px;
	}
	.oaview_top_type {
		/*padding-left: 20px;*/
		flex: 0 0 20%;
		text-align: center;
	}
	.oaview_top_code {
		text-align: center;
		flex: 0 0 60%;
	}
	.oaview_top_flag {
		flex: 0 0 20%;
		text-align: center;
	}
	/*.oaview_toparea_sec {
	    height: 5px;
	    width: 100%;
	}
	.oaview_toparea_thr {
	    height: 5px;
	    width: 100%;
	}*/
	.oaview_flex {
		display: flex;
		line-height: 25px;
		align-items: flex-start;
		padding: 0px 20px;
	}
	.oaview_title {
		font-size: 14px;
		font-weight: bold;
		flex: 0 0 70px;
		text-align: justify;
		text-align-last: justify;
	}
	.oaview_item {
		margin: 0 0 0 10px;
		color: #777
	}

	.flowstep_title {
		font-weight: bold;
		margin-left: 5px;
		font-size: 17px;
	}
	.bottom_content {
		height: 180px;
		width: 100%;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		padding: 10px 0;
	}
</style>