<template>
  <div style="height:100%;position: relative;">
    <div v-if="iaction!='read'" class="elc_tools-wrap">
      <el-button @click="genMessage" size="small" type="primary" style="margin-right: 10px;">保存</el-button>
      <el-button @click="validateMessage" size="small" type="primary" style="margin-right: 10px;">校验</el-button>
      <el-button @click="msgPreview" size="small" type="primary" style="margin-right: 10px;">预览</el-button>
      <el-button @click="handleBack" size="small" type="primary">退出</el-button>
    </div>
		<div style="height: calc(100% - 60px);overflow:auto;" class="elc-content-box">
			<el-form v-show="ishow" ref="form" :model="model" class="elc_page" size="mini" label-position='right' label-width='auto' style="background-color: #fff;">
				<el-tabs tab-position="top" type="card" v-model="activeName">
					<el-tab-pane label='业务信息' name="basic">
						<div style="padding: 20px 0px 10px 20px;background-color: #fff;border-bottom: 1px dashed var(--collapse-border-color);">
							报文类型:
							<c-select style="width:30%; text-align:center;padding-right:5%" v-model="regmsgtype" placeholder="请选择" uil="EN" dbCode="ELCTYP" label="" @change="handleChangeReg">
							</c-select>
							参与机构号:
							<c-select v-model="extact" style="width:30%;padding-left:10px">
								<el-option v-for="item in bchlst" :key="item" :value="item">
								</el-option>
							</c-select>
						</div>
						<h3 v-if="title" class="elc_page_title" @click="changeElctyp">{{title}}
							<el-icon :class="ishow ? 'arrow-up':'arrow-down'"></el-icon>
						</h3>
						<div style="padding: 20px;height: calc(100% - 112px);overflow: auto;">
							<el-row v-for="(item,index) in model.expTree" :key="item.path" style="width:100%;">
								<el-col :span="16">
									<div class="cus-form-wrap" v-if="item.isLeaf">
										<div class="cus-form-label">
											<p class='elc_title' :class="'elc_title_'+item.lvl">{{item.label}}</p>
										</div>
										
										<div class="cus-form-content">
											<component v-bind:is="MesgRender(imty,item,iaction).is" :index="index" v-bind="MesgRender(imty,item,iaction)" :node="item"></component>
										</div>
									</div>
								</el-col>
							</el-row>
						</div>

					</el-tab-pane>
					<el-tab-pane label="信用证单证影像" name="img" v-if="regmsgtypeImg">
						<c-content>
							<m-img :model="model" ref="img" :regmsgtype="regmsgtype"></m-img>
						</c-content>
					</el-tab-pane>
					<el-tab-pane label="发票影像" name="inv" v-if="regmsgtypeInv">
						<c-content>
							<m-inv :model="model" ref="inv"></m-inv>
						</c-content>
					</el-tab-pane>
				</el-tabs>
			</el-form>
		</div>
    <el-dialog title="预览" :visible.sync="visiable" left width="70%" v-if="visiable" @close="handleClose">
      <div style="height:100%;">
          <elc-view :formatData="formatData" :textContent="textContext"></elc-view>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import send from "./Service/post";
import { ElcsFactory } from "./MesgJson/index.js";
// import Mesgcode from './MesgJson/MsgCodes.js'
import { ExpandTree, fillUidValue, dealArrPath } from "./MesgValidator";
import MesgRender from "./MesgRender";
import { fixTreeValue } from "./FixTreeValue";
import elcs_coms from "./comps";
import Api from "~/service/Api";
// import { async } from "q";
import Pub from '~/components/business/commonModel/index.js';
import CodeTable from "~/config/CodeTable";
import ElcView from "~/components/business/ELCView";
import Img from "./img.vue"
import Inv from "./inv.vue"
import Elcadd from "./model.js"
// import {
// 		elcsCheck
// 	} from "~/service/public/message"

export default {
	name: 'Elcadd',
  props: ["mty", "action", "disabled"],
  components: {
    ElcView,
		"m-img":Img,
		"m-inv":Inv,
    //控件注册
    ...elcs_coms
  },
    provide() {
    return {
      root: this
    };
	},
	name:'Elcadd',
  data() {
    return {
      trnName:"elcadd",
      codes: {
        ...CodeTable
      },
      formatData:{},
      textContext:"",
      visiable: false,
      ishow: "false",
			activeName: "basic",
			model: new Elcadd().data,
      //联号列表
      bchlst: [],
      message: "", //原报文
      title: "", //标题
      imty: "",
      iaction: "",
      extact: "",
      regmsgtype: ""
    };
	},
	computed:{
		regmsgtypeImg(){
			switch(this.regmsgtype){
				case 'A01':
				case 'A03':
				case 'B01':
				case 'B02':	
					return true
					break
				default:
					return false
			}
		},
		regmsgtypeInv(){
			switch(this.regmsgtype){
				case 'B01':
				case 'B02':	
					return true
					break
				default:
					return false
			}
		}
	},
  methods: {
    MesgRender,
    fillMesgObject(msgObject) {
      let nmsgObject = dealArrPath(msgObject);
      for (let path in nmsgObject) {
        let fixPath = "";
        if (path.indexOf(".") > -1) {
          fixPath = path.substr(path.indexOf(".") + 1, path.length);
        } else {
          continue;
        }
        //兼容金额处理，将金额值解析出来
        let value = nmsgObject[path];
        if (path.indexOf("amount") > -1){
          fixPath = fixPath.substr(0,fixPath.indexOf(".amount"));
        }
        fillUidValue.call({ mty: this.imty }, fixPath, value);
      }
    },
    changeElctyp() {
      console.log("111" + this.ishow);
      this.ishow = !this.ishow;
    },
    handleClose() {
      this.visiable = false;
    },
    validateMessage() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
					if(this.regmsgtypeInv){
						if(this.model.invgrdm.invlst.length == 0){
							this.$notify({
            title: "失败",
            message: "请跳转发票影像页面录入发票信息",
            type: "warning"
					});
					return
						}
					this.$refs.inv.invTable()
					let flg = this.model.invgrdm.invlst.some(item =>{
						return !item.invnum || !item.invcod
					})
					if(flg){
						return
					}
						}
						if(this.regmsgtypeImg){
							if(this.model.imggrdm.imguseList.length >0){
								this.$refs.img.imgTable()
							let flg = this.model.imggrdm.imguseList.some(item =>{
								return item.imagid == '' || item.imgtyp == '' || item.imgdsp == '' || item.valflg == ''
							})
							if(flg){
								return
							}
							}
						}
          this.$notify({
            title: "成功",
            message: "校验成功",
            type: "success"
          });
        } else {
          this.$notify({
            title: "失败",
            message: "校验失败",
            type: "error"
					});
        }
      });
    },
    handleChangeReg() {
      if (!this.regmsgtype) {
        return;
      }
      this.buildMesgStructure();
    },
    buildMesgStructure() {
      window.SYS_DATE = new Date();
      // this.imty = this.mty|| (this.$route ? this.$route.params.mty :undefined)
      this.iaction =
        this.action || (this.$route ? this.$route.query.action : undefined);
      // if(this.imty)
      //     this.imty = this.imty.replace(/_/g,'.')
      let localCodes = localStorage.getItem("localCodes");
      let curCodes = [];
      if (localCodes) {
        curCodes = JSON.parse(localCodes)["ELCTYP_EN_COD"];
      }
      let curElctypList = curCodes.filter(item => {
        return item.value === this.regmsgtype;
      });
      let curElctyp = "";
      if (curElctypList && curElctypList.length > 0) {
        let curLabel = curElctypList[0].label;
        curElctyp = curLabel[0].toUpperCase() + curLabel.substr(1);
      }
      this.title = curElctyp;
      this.imty = curElctyp.split(".").join("_");
      // const tree = ElcsFactory(this.imty)
      let tree = require("./MesgJson/" + this.imty + ".js").default;
      console.log("tree", tree);
      let { expTree, directMap, msgTree } = ExpandTree(tree);
      console.log('expTree', expTree)
      this.model.expTree = expTree;

      window[this.imty] = {
        expTree,
        directMap,
        msgTree,
        form: this.$refs["form"]
      };

      window.SELF_ELC_CODE = "303100000006";
      //应从服务端读取当前经办柜员机构信息
      window.PTY_CODE = this.extact;
      window.PTY_NAME = "TESTNAME";
      fixTreeValue(curElctyp.toLowerCase(), directMap, this.disabled);

      // this.fillInitData(); //加载初始化数据
      // if(this.iaction == 'new')  //如果是新建，MesgID应该自动新建
      // {
      //     let msgidItem =  directMap["GrpHdr.MsgId"]
      //     msgidItem.value = "MESG_ID"
      // }
    },
    fillPathToObject(path, value, msgobj) {
      let idx = path.indexOf(".");
      if (idx == -1) {
        msgobj[path] = value;
        return;
      }
      let key = path.substring(0, idx);
      if (!msgobj[key]) msgobj[key] = {};
      this.fillPathToObject(path.substring(idx + 1), value, msgobj[key]);
    },
    simpleStringify(object) {
      var simpleObject = {};
      for (var prop in object) {
        if (!object.hasOwnProperty(prop)) {
          continue;
        }
        if (typeof object[prop] == "object") {
          continue;
        }
        if (typeof object[prop] == "function") {
          continue;
        }
        simpleObject[prop] = object[prop];
      }
      return JSON.stringify(simpleObject);
    },
    msgPreview: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          //如果切换预览页面
          let msgobj = {};
          for (let item of this.model.expTree) {
            let value = item.value;
            if (value === null || value === undefined || value === "") {
              continue;
            }
            if (item.type == "ActiveCurrencyAndAmount")
              value = { Ccy: "CNY", amount: value };
            this.fillPathToObject(item.path, value, msgobj);
            // msgobj[item.path] = item.value
          }
          //开立，修改影像
          if(this.regmsgtype=='A01' || this.regmsgtype=='A03'){
          let imgInfos = this.model.imggrdm.imguseList.map((imgItem) => {
            return {
              ID: imgItem.imagid,
              Type: imgItem.imgtyp,
              Desc: imgItem.imgdsp,
              VldFlg: imgItem.valflg,
            }
          });
          this.fillPathToObject("LCInfo.ContInfo.ContImgInfo.ImgInfo", imgInfos, msgobj);
          }
          //寄单，寄单修改影像发票
          if(this.regmsgtype=='B01' || this.regmsgtype=='B02'){
            //影像
          let imgInfos = this.model.imggrdm.imguseList.map((imgItem) => {
            return {
              ID: imgItem.imagid,
              Type: imgItem.imgtyp,
              Desc: imgItem.imgdsp,
              VldFlg: imgItem.valflg,
            }
          });
          this.fillPathToObject("PresnInfo.DocsInfo.AttachOfDoc.ImgInfo", imgInfos, msgobj);
          //发票
          let invInfos = this.model.invgrdm.invlst.map((invItem) => {
            return {
              ID: invItem.imagid,
              InvTp: invItem.invtyp,
              InvNb: invItem.invnum,
              InvCd: invItem.invcod,
              UntaxAmt: { Ccy: "CNY", amount: invItem.untamt },
              InvDt: invItem.invdat,
              VldFlg: invItem.valflg,
            }
          });
          this.fillPathToObject("PresnInfo.DocsInfo.InvOfPresn.InvImgInfo", invInfos, msgobj);
          }

          let header = {};
          let directMap = window[this.imty].directMap;
           let rcvItem;
          if(this.regmsgtype=='304'){
            rcvItem =
            directMap["GrpHdr02.InstdPty02.InstdDrctPty02"];
          }
          else{
            rcvItem =
            directMap["GrpHdr.InstdAgt.MmbId"] ||
            directMap["GrpHdr.InstdPty.InstdDrctPty"];
          }
          header.OrigSender = SELF_ELC_CODE;
          header.OrigReceiver = rcvItem.value;
          let msgidItem = directMap["GrpHdr.MsgId"];
          if (msgidItem) header.MesgID = msgidItem.value;

          let data = {
            msgTree: msgobj,
            msgHeader: header,
            msgType: this.regmsgtype,
            id: this.$route.query.id
          };
          console.log(data);
          Api.post(`/Domlc/msgeditor/msgPreview`, data).then(res => {
            this.formatData = res.data.textResultVo.formatData;
            this.textContext = res.data.textResultVo.data;
            this.visiable = true;
          });
        } else {
          this.$notify({
            title: "失败",
            message: "校验失败",
            type: "error"
          });
          return;
        }
      });
		},
		handleBack () {
			this.$store.commit('delTagsArry', this.$route.path);
			this.$router.back()
		},
    genMessage: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
					if(this.regmsgtypeInv){
						if(this.model.invgrdm.invlst.length == 0){
							this.$notify({
            title: "失败",
            message: "请跳转发票影像页面录入发票信息",
            type: "warning"
					});
					return
						}
					this.$refs.inv.invTable()
					let flg = this.model.invgrdm.invlst.some(item =>{
						return !item.invnum || !item.invcod
					})
					if(flg){
						return
					}
						}
						if(this.regmsgtypeImg){
							if(this.model.imggrdm.imguseList.length >0){
								this.$refs.img.imgTable()
							let flg = this.model.imggrdm.imguseList.some(item =>{
								return item.imagid == '' || item.imgtyp == '' || item.imgdsp == '' || item.valflg == ''
							})
							if(flg){
								return
							}
							}
							}
          let msgobj = {};
          for (let item of this.model.expTree) {
            let value = item.value;
            if (value === null || value === undefined || value === "") {
              continue;
            }
            if (item.type == "ActiveCurrencyAndAmount")
              value = { Ccy: "CNY", amount: value };
            this.fillPathToObject(item.path, value, msgobj);
            // msgobj[item.path] = item.value
            //   console.log(item.value)
          }

          //开立，修改影像
          if(this.regmsgtype=='A01' || this.regmsgtype=='A03'){
          let imgInfos = this.model.imggrdm.imguseList.map((imgItem) => {
            return {
              ID: imgItem.imagid,
              Type: imgItem.imgtyp,
              Desc: imgItem.imgdsp,
              VldFlg: imgItem.valflg,
            }
          });
          this.fillPathToObject("LCInfo.ContInfo.ContImgInfo.ImgInfo", imgInfos, msgobj);
          }
          //寄单，寄单修改影像发票
          if(this.regmsgtype=='B01' || this.regmsgtype=='B02'){
            //影像
          let imgInfos = this.model.imggrdm.imguseList.map((imgItem) => {
            return {
              ID: imgItem.imagid,
              Type: imgItem.imgtyp,
              Desc: imgItem.imgdsp,
              VldFlg: imgItem.valflg,
            }
          });
          this.fillPathToObject("PresnInfo.DocsInfo.AttachOfDoc.ImgInfo", imgInfos, msgobj);
          //发票
          let invInfos = this.model.invgrdm.invlst.map((invItem) => {
            return {
              ID: invItem.imagid,
              InvTp: invItem.invtyp,
              InvNb: invItem.invnum,
              InvCd: invItem.invcod,
              UntaxAmt: { Ccy: "CNY", amount: invItem.untamt },
              InvDt: invItem.invdat,
              VldFlg: invItem.valflg,
            }
          });
          this.fillPathToObject("PresnInfo.DocsInfo.InvOfPresn.InvImgInfo", invInfos, msgobj);
          }

          let header = {};
          let directMap = window[this.imty].directMap;
          let rcvItem;
          if(this.regmsgtype=='304'){
            rcvItem =
            directMap["GrpHdr02.InstdPty02.InstdDrctPty02"];
          }
          else{
            rcvItem =
            directMap["GrpHdr.InstdAgt.MmbId"] ||
            directMap["GrpHdr.InstdPty.InstdDrctPty"];
          }

          header.OrigSender = SELF_ELC_CODE;
          header.OrigReceiver = rcvItem.value;

          let msgidItem;
          if(this.regmsgtype=='304'){
            msgidItem =directMap["GrpHdr02.MsgId"];
          }
          else{
            msgidItem =directMap["GrpHdr.MsgId"];
          }

          if (msgidItem) header.MesgID = msgidItem.value;

          let sss = this.model.expTree;
          console.log(sss);
          console.log(this.simpleStringify(sss));

          let data = {
            msgTree: msgobj,
            msgHeader: header,
            msgType: this.regmsgtype,
						id: this.$route.query.id,
						//保存的时候给查询编号增加已使用的状态
						imfref: (this.regmsgtypeImg || this.regmsgtypeInv) ? this.model.fftref : ''
					};
					console.log('dasdadas',this.regmsgtypeImg,this.regmsgtypeInv,this.model.fftref)
          Api.post(`/Domlc/msgeditor/msgsave`, data).then(res => {
            if (res.respCode == SUCCESS) {
              if(res.data.retcod=="0"){
              this.$notify({
                title: "成功",
                message: "保存成功",
                type: "success"
              });
              this.$store.commit("delTagsArry", this.$route.path);
              this.$router.back();
              }
            else if(res.data.retcod=="-1") {
              this.$message.error(res.data.errmsg);
            }
            } else {
              this.$message.error("文件存储失败!");
            }
          });
        } else {
          this.$notify({
            title: "失败",
            message: "校验失败",
            type: "error"
          });
          // return;
        }
      });
    },
    getImgData (jsonData, type) {
      let resList = []
      if (jsonData) {
        let jsonKeys = Object.keys(jsonData)
        let path = type == 'A' ? 'LCInfo.ContInfo.ContImgInfo.ImgInfo' : 'PresnInfo.DocsInfo.AttachOfDoc.ImgInfo'
        let num = 0
        let targetPath = ''
        jsonKeys.forEach((item, index) => {
          if (item.indexOf(`${path}_${num}.ID`) > -1) {
            let pathItem = item.substr(0, item.indexOf(path)) || ''
            resList.push({
              imagid: jsonData[`${pathItem}${path}_${num}.ID`],
              imgtyp: jsonData[`${pathItem}${path}_${num}.Type`],
              imgdsp: jsonData[`${pathItem}${path}_${num}.Desc`],
              valflg: jsonData[`${pathItem}${path}_${num}.VldFlg`],
            })
            num++
          }
        })
      }
      return resList
    },
    getInvImgData (jsonData) {
      let resList = []
      if (jsonData) {
        let jsonKeys = Object.keys(jsonData)
        let path = 'PresnInfo.DocsInfo.InvOfPresn.InvImgInfo'
        let num = 0
        let targetPath = ''
        jsonKeys.forEach((item, index) => {
          if (item.indexOf(`${path}_${num}.ID`) > -1) {
            let pathItem = item.substr(0, item.indexOf(path)) || ''
            resList.push({
              imagid: jsonData[`${pathItem}${path}_${num}.ID`],
              invtyp: jsonData[`${pathItem}${path}_${num}.InvTp`],
              invnum: jsonData[`${pathItem}${path}_${num}.InvNb`],
              invcod: jsonData[`${pathItem}${path}_${num}.InvCd`],
              untamt: jsonData[`${pathItem}${path}_${num}.UntaxAmt.amount`],
              invdat: jsonData[`${pathItem}${path}_${num}.InvDt`],
              valflg: jsonData[`${pathItem}${path}_${num}.VldFlg`],
            })
            num++
          }
        })
      }
      return resList
    },
    async getMsgIdList () {
      let sessionStrg = sessionStorage.getItem('msgIdList')
      if (sessionStrg && JSON.parse(sessionStrg)) {
        return;
      }
      let datas = {}
      let res = await Api.post(`/Domlc/msgeditor/getMsgIdByElcadd`, datas)
      if (res.respCode == SUCCESS) {
        let msgIdList = res.data
        sessionStorage.setItem('msgIdList', JSON.stringify(msgIdList))
      }
    }
  },
  mounted() {
    this.getMsgIdList();
    Api.post(`/Domlc/msgeditor/getBranchList`).then(res => {
      if (res.respCode == SUCCESS) {
        this.bchlst = res.data;
        if (this.bchlst.length != 0) {
          this.extact = this.bchlst[0];
        }
      }
    });
    //挂载函数
    let id = this.$route ? this.$route.query.id : "";
    if (id) {
      let action = this.$route.query.action;
      Api.post(`/Domlc/msgeditor/msgbyid`, id).then(res => {
        if (res.respCode == SUCCESS) {
          this.regmsgtype = res.data.msgType;
          // this.imty = res.data.msgType;
          this.iaction = action;
          this.buildMesgStructure();
          this.fillMesgObject(res.data.json);
          if(this.regmsgtype=='A01' || this.regmsgtype=='A03'){
            this.model.imggrdm.imguseList = this.getImgData(res.data.json,'A')
          }
          if(this.regmsgtype=='B01' || this.regmsgtype=='B02'){
            this.model.imggrdm.imguseList = this.getImgData(res.data.json,'B');
            this.model.invgrdm.invlst = this.getInvImgData(res.data.json);
          }
        }
      });
    } else {
      if (!this.regmsgtype) {
        return;
      }
      this.buildMesgStructure();
    }
  },
  destroyed() {
    window[this.imty] = undefined;
  }
  // watch:{
  //     treeData(newVal){
  //         this.buildMesgStructure() //初始化数据发生修改，重建数据结构
  //     }
  // }
};
</script>

<style>
.arrow-up .el-icon__inner {
  display: flex;
}
.arrow-down .el-icon__inner {
  display: none;
}
.elc_page {
  overflow: auto;
}

.elc_page_title {
  margin: 0px;
  padding: 10px 20px;
  color: var(--black);
  font-size: 18px;
  font-weight: 800;
  background-color: #fff;
}
.el-icon-arrow-right:after {
  content: "\e791";
}
p.elc_title {
  margin: 0;
  padding: 0;
  /* text-align: right; */
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  line-height: 22px;
  margin-bottom: 18px;
  /* border-bottom: 1px solid #606266; */
}
p.elc_title.elc_notleaf {
  color: #169bff;
  /*  border-bottom:1px dotted #169BFF; */
}
p.elc_title.elc_title_1 {
  margin-left: 16px;
  font-size: 16px;
}
p.elc_title.elc_title_2 {
  margin-left: 16px;
  width: 150px;
}
p.elc_title.elc_title_3 {
  margin-left: 16px;
}
p.elc_title.elc_title_4 {
  margin-left: 16px;
}
p.elc_fix_label {
  color: #169bff;
}
.elc_tools {
	position: fixed;
	width: 100%;
  bottom: 0;
  left: 0;
  z-index: 9;
}
</style>
<style lang="less" scoped>
.elc_page {
	/deep/ .el-form-item__label:before {
		display: none;
	}
}
.cus-form-wrap {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	.cus-form-label {
		width: 150px;
	}
	.cus-form-content {
		width: calc(100% - 150px);;
	}
}
.elc_tools-wrap {
	width: 100%;
	height: 60px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 9;
	border-top: 1px dashed var(--collapse-border-color);
}
.elc-content-box {
	/deep/ .el-form {
		width: 100%;
		height: 100%;
		.el-tabs {
			height: 100%;
		}
		.el-tabs__content {
			height: calc(100% - 48px);
			.el-tab-pane {
				height: 100%;
			}
		}
	}
}
</style>