<template>
  <div class="page-wrap">
    <!-- <div style="width: 100%;padding: 10px;background-color: #fff;border-bottom: 1px solid #666666;box-sizing: border-box;">
      <c-select v-model="selectFileName" placeholder="请选择" @change="handleChangeFile">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </c-select>
    </div> -->
    <div class="form-content">
      <div
        class="field-item"
        v-for="(fieldItem, fieldIndex) in frameFieldList"
        :key="fieldIndex"
      >
        <div
          v-if="fieldItem.gridValues && fieldItem.gridValues.length"
          style="position: absolute;"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
          }"
        >
          <MTable :gridValues="fieldItem.gridValues" :tableWidth="fieldItem.width" :tableHeight="fieldItem.height"></MTable>
        </div>
        <div
          v-if="['Label'].includes(fieldItem.viewType) && fieldItem.visible !== '0' && decludesLabel(fieldItem)"
          style="position: absolute;font-size: 10px;overflow: hidden;font-weight: bold;"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
            height: fieldItem.height + 'px',
            lineHeight: fieldItem.height + 'px'
          }"
          >{{ fieldItem.value }}</div>
        <button 
          v-if="(fieldItem.viewType === 'Button' && fieldItem.value.indexOf('用户确认') === -1 && fieldItem.visible !== '0') || (activePanel == 'Attachments' && fieldItem.viewType === 'Button' && fieldItem.visible !== '0')"
          disabled
          class="cus-btn"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
            width: formatButtonWidth(fieldItem.width) + 'px',
            height: fieldItem.height + 'px'
          }"
        >{{ replaceCode(fieldItem.value) }}</button>
        <el-input
          v-if="['Amount'].includes(fieldItem.viewType) && fieldItem.visible !== '0'"
          size="mini"
          disabled
          class="amount"
          placeholder=" "
          v-model.trim="fieldItem.value"
          style="position: absolute;font-size: 10px;"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
            width: formatAmountWidth(fieldItem.width) + 'px',
            height: formatHeight(fieldItem.height) + 'px',
            borderBottom: ['1', '2'].includes(fieldItem.checkvalue) ? borderLineType[fieldItem.checkvalue] : ''
          }"
        ></el-input>
        <el-input
          v-if="['Date'].includes(fieldItem.viewType) && fieldItem.visible !== '0'"
          size="mini"
          disabled
          class="amount"
          placeholder=" "
          v-model.trim="fieldItem.value"
          style="position: absolute;font-size: 10px;"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
            width: formatDateWidth(fieldItem.width) + 'px',
            height: formatHeight(fieldItem.height) + 'px',
            borderBottom: ['1', '2'].includes(fieldItem.checkvalue) ? borderLineType[fieldItem.checkvalue] : ''
          }"
        ></el-input>
				<!-- Number(fieldItem.width) < 0 ? (50 - Number(fieldItem.width)) + 'px' : Number(fieldItem.width) -->
        <el-input
          v-if="['Input'].includes(fieldItem.viewType) && fieldItem.visible !== '0'"
          size="mini"
          class="cus-input"
          disabled
          placeholder=" "
          v-model.trim="fieldItem.value"
          style="position: absolute;font-size: 10px;box-sizing: border-box;"
					:class="[fieldItem.isRedCode == 'Y' || fieldItem.isRedCode == '0' ? 'is-red-input' : '']"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
            width: formatInputWidth(fieldItem.width, activePanel) + 'px',
            height: formatHeight(fieldItem.height) + 'px',
            borderBottom: ['1', '2'].includes(fieldItem.checkvalue) ? borderLineType[fieldItem.checkvalue] : ''
          }"
        ></el-input>
				<!--  Number(fieldItem.width) < 0 ? (40 - Number(fieldItem.width)) + 'px' : fieldItem.width +  -->
        <el-input
          v-if="['Combobox'].includes(fieldItem.viewType) && fieldItem.visible !== '0'"
          class="combobox"
          size="mini"
          disabled
          placeholder=" "
          suffix-icon="el-icon-arrow-down"
          v-model.trim="fieldItem.value"
          style="position: absolute;font-size: 10px;"
					:class="[fieldItem.isRedCode == 'Y' || fieldItem.isRedCode == '0' ? 'is-red-input' : '']"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
            width: formatComboboxWidth(fieldItem.width, activePanel) + 'px',
            height: formatHeight(fieldItem.height)  + 'px',
            borderBottom: ['1', '2'].includes(fieldItem.checkvalue) ? borderLineType[fieldItem.checkvalue] : ''
          }"
        >
        </el-input>
        <el-checkbox
          v-if="['Checkbox'].includes(fieldItem.viewType) && fieldItem.visible !== '0'"
          class="checkbox"
          size="mini"
          disabled
          placeholder=" "
          suffix-icon="el-icon-arrow-down"
          v-model.trim="fieldItem.value"
          style="position: absolute;font-size: 10px;line-height: 22px;"
          true-label="1"
          false-label="0"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
            width: formatCheckboxWidth(fieldItem.width) + 'px',
            height: '20px',
						borderBottom: ['1', '2'].includes(fieldItem.checkvalue) ? borderLineType[fieldItem.checkvalue] : ''
          }"
        >
        </el-checkbox>
				<!-- Number(fieldItem.width) < 0 ? (180 - Number(fieldItem.width)) + 'px' : fieldItem.width + 'px' -->
        <div
          v-if="(['Block'].includes(fieldItem.viewType) && fieldItem.visible=='1') ||
					(activePanel == 'Warnings' && !['Button'].includes(fieldItem.viewType) && fieldItem.visible == '1') ||
					(['Attachments', '附件'].includes(activePanel) && !['Button', 'Label', 'Checkbox'].includes(fieldItem.viewType) && fieldItem.value && fieldItem.visible=='1')"
          class="type-block"
          v-html="fieldItem.value"
          :style="{
            left: fieldItem.left + 'px',
            top: fieldItem.top + 'px',
            width: formatBlockWidth(fieldItem.width) + 'px',
            height: formatBlockHeight(fieldItem.height) + 'px',
            borderBottom: ['1', '2'].includes(fieldItem.checkvalue) ? borderLineType[fieldItem.checkvalue] : ''
          }"
          ></div>
      </div>
    </div>
    <div class="form-tab" v-if="panelList && panelList.length">
      <div
        class="tab-item"
        v-for="(item, index) in panelList"
        :key="index"
        @click="handleChangeTab(item.name)"
				:style="{borderBottom: ['1', '2'].includes(item.isRedLine) ? borderLineType[item.isRedLine] : ''}"
      >
        <el-tag
					v-if="item.name !== 'Text Difference vs. System'"
          size="small"
          :type="activePanel === item.name ? '' : 'info'"
          effect="plain"
        >{{ replaceCode(item.name) }}</el-tag>
      </div>
    </div>
		<c-function-btn :isHistory='true'></c-function-btn>
  </div>
</template>
<script>
import Api from "~/service/Api"
import MTable from './components/Table'
import moment from 'moment'
import HisRec from "./model"
export default {
	name: 'HistoryRecord',
	provide() {
    return {
      root: this
    };
  },
  components: {
    MTable
  },
  data () {
    return {
			model: new HisRec().data,
			trnName:'nitame',
      options: [
        {
          value: '10000059.DSP',
          label: '10000059.DSP'
        }, {
          value: '10000302.DSP',
          label: '10000302.DSP'
        }, {
          value: '10000400.DSP',
          label: '10000400.DSP'
        }, {
          value: '10000401.DSP',
          label: '10000401.DSP'
        },
        {
          value: '10000402.DSP',
          label: '10000402.DSP'
        },
        {
          value: '10000403.DSP',
          label: '10000403.DSP'
        },
        {
          value: '10000404.DSP',
          label: '10000404.DSP'
        },
        {
          value: '10000557.DSP',
          label: '10000557.DSP'
        },
        {
          value: '10000594.DSP',
          label: '10000594.DSP'
        },
        {
          value: '10000595.DSP',
          label: '10000595.DSP'
        },
        {
          value: '10004105.DSP',
          label: '10004105.DSP'
        },
        {
          value: '10004145.DSP',
          label: '10004145.DSP'
        },
        {
          value: '10004200.DSP',
          label: '10004200.DSP'
        },
        {
          value: '10004205.DSP',
          label: '10004205.DSP'
        },
        {
          value: '10004208.DSP',
          label: '10004208.DSP'
        },
        {
          value: '10004218.DSP',
          label: '10004218.DSP'
        },
        {
          value: '10004221.DSP',
          label: '10004221.DSP'
        },
        {
          value: '10004230.DSP',
          label: '10004230.DSP'
        },
        {
          value: '10004244.DSP',
          label: '10004244.DSP'
        },
        {
          value: '10004248.DSP',
          label: '10004248.DSP'
        },
        {
          value: '10004256.DSP',
          label: '10004256.DSP'
        },
        {
          value: '10004259.DSP',
          label: '10004259.DSP'
        },
        {
          value: '10004260.DSP',
          label: '10004260.DSP'
        },
        {
          value: '10004279.DSP',
          label: '10004279.DSP'
        }
      ],
      selectFileName: '10000059.DSP',
      panelList: [],
      activePanel: '',
			frameFieldList: [],
			borderLineType: {
				'1': '2px solid red',
				'2': '2px solid green'
			}
    }
  },
  mounted () {
    this.getConfigData()
    console.log('$attrs', this.$attrs)
  },
  methods: {
    buildCommonData(){
      return {
        rec:{
          ownref:this.model.gidgrp.rec.ownref
        }
      }
    },
    handleChangeFile () {
      this.getConfigData()
		},
		formatButtonWidth (val) {
			if (Number(val) < 0) {
				let valNum = Number(val)
				if (valNum === -10) {
					return 62
				} else if (valNum === -3) {
					return 15
				} else if (valNum === -6) {
					return 38
				} else if (valNum === -16) {
					return 68
				} else if (valNum === -18) {
					return 100
				} else if (valNum === -24) {
					return 126
				} else if (valNum === -25) {
					return 140
				} else {
					return 72
				}
			} else {
				return Number(val)
			}
		},
		formatDateWidth (val) {
			if (Number(val) < 0) {
				let valNum = Number(val)
				if (valNum === -12) {
					return 66
				} else {
					return 100
				}
			} else {
				return Number(val)
			}
		},
		formatInputWidth (val, activePanel) {
			if (Number(val) < 0) {
				let valNum = Number(val)
				if (valNum === -16) {
					if (['单据概况', '银行明细'].includes(activePanel)) {
						return 120
					} else {
						return 94
					}
				}
				// 币种
				else if (valNum === -3) {
					return 46
				}else if (valNum === -4) {
					return 40
				}else if (valNum === -5) {
					return 50
				}else if (valNum === -6) {
					return 60
				}else if (valNum === -8) {
					return 70
				}else if (valNum === -9) {
					return 70
				}else if (valNum === -10) {
					return 70
				}else if (valNum === -11) {
					return 70
				}else if (valNum === -12) {
					return 70
				}else if (valNum === -13) {
					return 80
				}else if (valNum === -14) {
					return 90
				}else if (valNum === -18) {
					return 140
				}else if (valNum === -20) {
					return 140
				}else if (valNum === -35) {
					return 200
				}else if (valNum === -40) {
					return 238
				}else if (valNum === -44) {
					return 244
				}else if (valNum === -60) {
					return 280
				}else if (valNum === -64) {
					return 310
				}else if (valNum === -80) {
					return 154
				}else if (valNum === -100) {
					return 590
				}else if (valNum === -110) {
					return 554
				} else {
					return 200
				}
			} else {
				return Number(val)
			}
		},
		formatAmountWidth (val) {
			if (Number(val) < 0) {
				let valNum = Number(val)
				if (valNum === -5) {
					// 税率
					return 52
				}else if (valNum === -2) {
					return 60
				}else if (valNum === -3) {
					return 40
				}else if (valNum === -4) {
					return 48
				}else if (valNum === -6) {
					return 72
				}else if (valNum === -8) {
					return 70
				}else if (valNum === -14) {
					return 100
				}else if (valNum === -18) {
					// 金额
					return 120
				}else if (valNum === -44) {
					return 200 - valNum
				}else if (valNum === -60) {
					return 200 - valNum
				} else {
					return 200
				}
			} else {
				return Number(val)
			}
		},
		formatComboboxWidth (val, activePanel) {
			if (Number(val) < 0) {
				let valNum = Number(val)
				if (valNum === -1) {
					if (activePanel === '统一授信') {
						return 52
					} else {
						return 36
					}
				}else if (valNum === -2) {
					return 54
				}
				// 币种
				else if (valNum === -3) {
					return 42
				} else if (valNum === -4) {
					return 60
				} else if (valNum === -5) {
					return 50
				} else if (valNum === -6) {
					return 60
				} else if (valNum === -7) {
					return 70
				} else if (valNum === -8) {
					return 80
				} else if (valNum === -10) {
					return 90
				} else if (valNum === -11) {
					return 110
				}else if (valNum === -12) {
					return 103
				}else if (valNum === -14) {
					return 120
				}else if (valNum === -16) {
					return 150
				}else if (valNum === -19) {
					return 156
				}else if (valNum === -20) {
					return 146
				}else if (valNum === -44) {
					return 200 - valNum
				}else if (valNum === -60) {
					return 280
				}else if (valNum === -40) {
					return 280
				}else if (valNum === -70) {
					return 450
				}else if (valNum === -80) {
					return 280
				} else {
					return 200
				}
			} else {
				return Number(val)
			}
		},
		formatBlockWidth (val) {
			if (Number(val) < 0) {
				let valNum = Number(val)
				if (valNum === -22) {
					return 150
				} else if (valNum === -35)  {
					return 200
				} else if (valNum === -63)  {
					return 390
				} else if (valNum === -65)  {
					return 260
				} else if (valNum === -80)  {
					return 300
				} else if (valNum === -90)  {
					return 550
				} else {
					return 200
				}
			} else {
				return Number(val)
			}
		},
		formatBlockHeight (val) {
			if (Number(val) < 0) {
				let valNum = Number(val)
				if (valNum === -5) {
					return 70
				} else if (valNum === -3) {
					return 45
				} else if (valNum === -4) {
					return 60
				} else if (valNum === -6) {
					return 90
				} else if (valNum === -7) {
					return 70
				} else if (valNum === -10) {
					return 120
				} else if (valNum === -12) {
					return 165
				} else if (valNum === -15) {
					return 130
				} else if (valNum === -17) {
					return 150
				} else if (valNum === -31 || valNum === -36) {
					return 450
				} else {
					return 22
				}
			} else {
				return Number(val)
			}
		},
		formatHeight (val) {
			let curVal = 0
			if (isNaN(Number(val))) {
				curVal = 20
			} else {
				curVal = Number(val)
			}
			// 此处加2为了显示红色下划线
			if (curVal < 0) {
				return 22
			} else {
				return curVal + 2
			}
		},
    formatCheckboxWidth(val, type) {
      if (Number(val) < 0) {
				return 20
			} else {
				return Number(val)
			}
      // if (type === 1) {
      //   let curNum = 0
      //   if (Number(val) > 0) {
      //     curNum = Number(val)
      //   } else {
      //     curNum = Math.abs(val)
      //   }
      //   if (curNum < 42) {
      //     return 42
      //   } else if (curNum < 80) {
      //     return 80
      //   } else if (curNum >= 80) {
      //     return curNum
      //   }
      // } else {
      //   if (Number(val) > 0) {
      //     return Number(val)
      //   } else {
      //     console.log('----------------->as', Math.abs(val))
      //     return Math.abs(val)
      //   }
      // }
      
		},
		decludesLabel(fileItem) {
			if (fileItem.value == '操作类型' && fileItem.left == '147') {
				return false
			}
			
			if (fileItem.value == '              类型' && fileItem.left == '15'){
				return false
			} 
			else {
				return true
			}
		},
		// let res = await Api.post('/manager/api/dspfile?file=' + this.selectFileName)
    async getConfigData () {
			let params = {
        "file": this.$route.query.businessInr
      }
      // let res = await Api.post('/manager/api/dspfile/',params)
			let res;
      if(this.$route.query.businessInr.length == 8) {
        res = await Api.post('/public/display/dspfile/',params)
      }else if(this.$route.query.businessInr.length == 16){
        res = await Api.post('/manager/api/dspfile/',params)
      }
			console.log('res===', res)
      if (res.success) {
				if(res.data && res.data.panelLists){
					this.panelList = res.data.panelLists
				}
				if(res.data && res.data.trnInfo){
					this.model.gidgrp.rec.ownref = res.data.trnInfo.ownref
					this.model.trnInfo.imginr = res.data.trnInfo.imginr
					this.trnName = res.data.trnInfo.inifrm
				}
        this.activePanel = this.panelList[0].name
        this.frameFieldList = this.panelList[0].list
      }else{
				 this.$alert(`${res.message}`, '提示', {
          confirmButtonText: '确定'
        });
			}
    },
    handleChangeTab (name) {
      this.activePanel = name
      this.frameFieldList = this.panelList.filter((item) => {
        return item.name === name
      })[0].list
    },
    replaceCode (str) {
      return str.replace(/\u001f|&/g, '')
    },
    replaceSpecialCode (str) {
      return str.replace(/&/g, '')
    }
  }
}
</script>
<style lang="less" scoped>
.page-wrap {
  width: 100%;
  height: 95%;
  // position: absolute;
  // left: 0;
  // top: 0;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  border: 1px solid #707070;
  .form-content {
    width: 100%;
    flex: 1;
    position: relative;
    border: 1px solid #B1B1B1;
    overflow-y: auto;
    background-color: #F0F0F0;
    padding: 5px 0;
    .field-item {
      .cus-btn {
        background-color: #fff!important;
        color: black!important;
        position: absolute;font-size: 10px;
        padding: 0;overflow: hidden;white-space: nowrap;
        z-index: 1;
        font-weight: bold;
				text-align: center;
				transform: scale(0.9);
      }
      .type-block {
        position: absolute;font-size: 10px;
        background-color: #fff;overflow: auto;
				/deep/ ul {
					list-style: inside;
				}
			}
    }
  }
  .form-tab {
    padding: 5px 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    border-top: 1px solid #B1B1B1;
    background-color: #F7F7F7;
    max-height: 152px;
    overflow-y: auto;
    .tab-item {
      color: black;
      text-align: center;
      border-radius: 2px;
      cursor: pointer;
      margin-right: 16px;
      margin-bottom: 4px;
    }
    .tab-item-active {
      color: #409eff;
      border: 1px solid #409eff;
    }
  }
  ::v-deep .el-input__inner {
    padding: 0;
    height: 20px;
    line-height: 20px;
    background-color: #fff;
		color: black;
		font-size: 10px!important;
  }
  ::v-deep .el-input__suffix {
    right: -2px!important;
    display: flex;
    align-items: center;
  }
  ::v-deep .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff!important;
    color: black!important;
    padding: 0!important;
  }
  ::v-deep .el-tag--plain.el-tag--info {
    color: black!important;
  }
}
.is-red-input {
	/deep/ .el-input__inner {
		color: red;
	}
}
</style>