<template>
  <div id="pdf_3" v-if="vshowD">
    <div style="width: 1750px;">
      <template v-for="(i,index) in feature.detailsImageList">
        <img :key="index+100000" :src="i" style="width:100%;display: block;">
      </template>
    </div>
  </div>
</template>
<script>
  import Header from "./components/header";
  export default {
    components: {
      Header
    },
    props: ['dataAll', 'tripList', 'orderMsg', 'orderTripdiff', 'vshowD', 'vshowK','feature'],
    data() {
      return {
        title: this.$t('objFill.v101.LeaveGroupDownload.beijmdlsg'),
        day: 'DAY',
        backgroundColor: '',
        backgroundColor2: '',
        textColor: '',
        textColorOne: '',
      };
    },

    methods: {
      getHtmlPlainText(html_str) {
        //提取字符串中的文字
        let re = new RegExp('<[^<>]+>', 'g')
        if (html_str) {
          let text = html_str.replace(re, '')
          return text
        } else {
          return ''
        }
      },
      getFontSize(title) {
        let size = 30;
        if (title && title.length > 0 && title.length > 80) {
          var tempSize = Number(80) / Number(title.length);
          tempSize = tempSize * 30;
          size = tempSize.toFixed(1);
        }
        return size + "px";
      },
      getImgColor(img, id) {
        return "#fff"
      },
      // 获取图片颜色
      canvasImgColor(imgs, ids, callback) {
        var imgSrc = imgs
        var upload = document.getElementById(ids)
        const imgEle = document.createElement('img')
        const canvas = document.createElement('canvas')
        imgEle.src = imgSrc
        imgEle.crossOrigin = '';
        imgEle.onload = () => {
          var ctx = canvas.getContext("2d");
          var naturalImgSize = [imgEle.naturalWidth, imgEle.naturalHeight];
          canvas.width = naturalImgSize[0];
          canvas.height = naturalImgSize[1];

          //绘制到canvas
          ctx.drawImage(imgEle, 0, 0);
          //获取imageData：rgba像素点
          var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const leftSectionData = []
          const rightSectionData = []
          const oneLineImgDataLen = canvas.width * 4;

          imgData.data.forEach((colorVal, i) => {
            if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 *
              oneLineImgDataLen) {
              const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen
              if (i % 4 === 0) {
                // 获取rgb均值
                const curAverageRGB = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
                let leftOrRightRef = inLeft ? leftSectionData : rightSectionData;
                //每个数组里存四个值：本颜色值中的r、g、b的均值，以及r、g、b三个值。
                //均值一方面用于累加计算本区域的整体均值，然后再跟每个均值对比拿到与整体均值最接近的项的索引，再取该数组里的后三个值：rgb，对应着颜色
                leftOrRightRef[leftOrRightRef.length] = [curAverageRGB, imgData.data[i], imgData.data[i + 1],
                  imgData.data[i + 2]
                ]
              }
            }
          })
          //generate average rgb
          const averageOfLeft = Math.round(leftSectionData.reduce((_cur, item) => {
            return _cur + item[0]
          }, 0) / leftSectionData.length)
          const averageOfRight = Math.round(rightSectionData.reduce((_cur, item) => {
            return _cur + item[0]
          }, 0) / rightSectionData.length)
          //find the most near color
          const findNearestIndex = (averageVal, arrBox) => {
            let _gapValue = Math.abs(averageVal - arrBox[0])
            let _nearColorIndex = 0
            arrBox.forEach((item, index) => {
              const curGapValue = Math.abs(item - averageVal)
              if (curGapValue < _gapValue) {
                _gapValue = curGapValue
                _nearColorIndex = index
              }
            })
            return _nearColorIndex
          }
          const leftNearestColor = leftSectionData[findNearestIndex(averageOfLeft, leftSectionData)]
          const rightNearestColor = rightSectionData[findNearestIndex(averageOfRight, rightSectionData)]
          upload.style.backgroundColor =
            `rgba(${leftNearestColor[1]},${leftNearestColor[2]},${leftNearestColor[3]},1) 0%,rgba(${rightNearestColor[1]},${rightNearestColor[2]},${rightNearestColor[3]},1)`
          callback(upload.style.backgroundColor)
        }
      }
    },
    computed: {},
    watch: {
      dataAll: {
        handler(val, oldVal) {
          if (val && val.tripColor) {
            this.backgroundColor = this.hexToRgb(val.tripColor, 0.2)
            this.backgroundColor2 = this.hexToRgb(val.tripColor, 0.1)
            let rgba = this.hexToRgb(val.tripColor, 1)
            rgba = rgba.split(',')
            let rgba0 = rgba[0].split('(')
            let arr = [rgba0[1], rgba[1], rgba[2]]
            if (this.getRgbLevel(arr) > 50) {
              this.textColor = "#fff"
            } else {
              this.textColor = "#333"
            }
          }
        },
        deep: true,
        immediate: true
      },
      tripList: {
        handler(val, oldVal) {

        },
        deep: true,
        immediate: true
      },
    },
    mounted() {

    }
  };

</script>

<style>


</style>