<template>
  <div id="el-card-div" class="el-card-div">
    <el-card id="el-card" class="el-card" :body-style="{ padding: '0px'}" bottomShadowHeight="5px">
      <div class="button-close-div" id="button-close-div">
        <img id="close-button" class="close-button" src="../../static/img/close.svg" alt="" @click="closeCard()">
      </div>
      <el-carousel trigger="click" id="el-carousel">
        <el-carousel-item v-for="imgUrl in imgArr" :key="imgUrl">
          <img v-bind:src="imgUrl" class="image" id="img">
        </el-carousel-item>
      </el-carousel>
      <div class="background">
        <div class="title" id="title">{{ title | ellipsis_title}}</div>
<!--        <div class="bottom clearfix">-->
          <div class="info" id="info">{{ info | ellipsis_info}}</div>
<!--        </div>-->
        <!-- <button id="button-show-all" class="button-show-all" onclick="">{{ '阅读全文' }}</button> -->
      <a
         :href="url"
         target='_blank'
       >
         <button
           v-show="url !== null"
           id="button-show-all"
           class="button-show-all"
         >
           {{ '阅读全文' }}
         </button>
      </a>
      </div>
    </el-card>
  </div>
</template>
<script>
import bus from '../../static/js/eventBus'
let _that
export default {
  props: {
    title: {
      type: String,
      default: '我是标题我是标题我是标题我是标题我是标题我是标题'
    },
    info: {
      type: String,
      default: '我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息我是消息'
    },
    url: {
      type: String,
      default: null
    },
    isMobile: {
      type: Boolean,
      default: false
    },
    // 图片链接
    img: {
      type: String,
      default: 'https://i.loli.net/2021/09/26/SAI1gWCvB8DMsTi.png'
    }
  },
  name: 'phoneCard',
  data () {
    return {
      button: '',
      flag: '',
      imgArr: ['https://i.loli.net/2021/09/26/SAI1gWCvB8DMsTi.png'],
      showMore: false,
      screenSize: window.screen.width
    }
  },
  mounted () {
    /**
     * @description: 当页面为pc端时就切换成pc端的样式
     */
    if (this.isMobile) {
      this.setMobileCardSize()
    } else {
      this.setPcCardSize()
    }
  },
  beforeCreate () {
    _that = this
  },
  methods: {
    /**
     * @description: 隐藏 卡片（本组件）
     */
    closeCard () {
      bus.$emit('closePopup')
    },

    /**
     * @description:根据设备动态设置内部尺寸(移动端)
    */
    setMobileCardSize () {
      let card = document.getElementById('el-card')
      // let cardDiv = document.getElementById('el-card-div')

      let title = document.getElementById('title')
      let elcarousel = document.getElementById('el-carousel')
      let info = document.getElementById('info')
      let buttonshowall = document.getElementById('button-show-all')
      let buttonclose = document.getElementById('button-close-div')
      let buttoncloseImg = document.getElementById('close-button')

      var cardWidth = window.screen.width - 64
      var cardHeight = parseInt(cardWidth * 1.414)

      card.style.width = cardWidth + 'px'
      card.style.height = cardHeight + 'px'
      // cardDiv.style.marginLeft = '-' + cardWidth / 2 + 'px'
      // cardDiv.style.marginTop = '-' + cardHeight / 2 + 'px'
      // cardDiv.style.top = '50%'
      // cardDiv.style.transform = 'translate(-50%, -50%)'

      elcarousel.style.height = cardHeight * 0.43 + 'px'
      elcarousel.style.width = cardWidth + 'px'

      title.style.height = cardHeight * 0.15 + 'px'
      title.style.width = cardWidth * 0.9 + 'px'
      title.style.marginTop = cardHeight * 0.0119 + 'px'
      title.style.marginRight = cardWidth * 0.05 + 'px'
      title.style.marginLeft = cardWidth * 0.05 + 'px'
      title.style.fontSize = cardWidth * 0.075 + 'px'

      info.style.width = cardWidth * 0.9 + 'px'
      info.style.height = cardHeight * 0.196 + 'px'
      info.style.fontSize = cardWidth * 0.045 + 'px'
      info.style.marginRight = cardWidth * 0.05 + 'px'
      info.style.marginLeft = cardWidth * 0.05 + 'px'
      info.style.marginTop = cardHeight * 0.0119 + 'px'

      buttonshowall.style.width = cardWidth * 0.73 + 'px'
      buttonshowall.style.height = cardHeight * 0.089 + 'px'
      buttonshowall.style.marginTop = cardHeight * 0.0476 + 'px'
      buttonshowall.style.marginBottom = cardHeight * 0.0476 + 'px'
      buttonshowall.style.fontSize = cardWidth * 0.045 + 'px'

      buttonclose.style.height = cardWidth * 0.05 + 'px'
      buttonclose.style.width = cardWidth * 0.05 + 'px'
      buttonclose.style.right = cardWidth * 0.05 + 'px'
      buttonclose.style.marginTop = cardWidth * 0.05 + 'px'

      buttoncloseImg.style.height = cardWidth * 0.05 + 'px'
      buttoncloseImg.style.width = cardWidth * 0.05 + 'px'
    },

    /**
     * @description:根据设备动态设置内部尺寸(PC端)
    */
    setPcCardSize () {
      let card = document.getElementById('el-card-div')
      card.style.cssText = ' -webkit-transform: translate(60%);\n' +
        '-moz-transform: translate(60%);\n' +
        '-ms-transform: translate(60%);\n' +
        '-o-transform: translate(60%);\n' +
        'transform: translate(60%);\n' +
        'top: 50%;\n' +
        'left: 50%;\n' +
        'position: absolute'
    }
  },
  watch: {
    screenSize: function () {
      this.Mobile()
    },

    img (val) {
      if (val !== null) {
        val = val.replace(/\s+/g, '')
      }

      if (val !== null && val !== '') {
        this.imgArr = [val]
      } else {
        this.imgArr = ['https://i.loli.net/2021/09/26/SAI1gWCvB8DMsTi.png']
      }
    }
  },
  filters: {
    /**
     * @description:标题过滤器
     */
    ellipsis_title: function (value) {
      if (!value) return ''
      if (value.length > 22) {
        return value.slice(0, 22) + '......'
      }
      return value
    },

    /**
     * @description:内容过滤器
     */
    ellipsis_info: function (value) {
      if (!value) return ''
      if (_that.url !== null) {
        if (value.length > 60) {
          return value.slice(0, 60) + '......'
        }
      }
      return value
    }
  }
}
</script>

<style>
@media all {
  /deep/ .el-card__body {
    margin-left: 16px !important;
    margin-right: 16px;
  }

  #el-carousel {
    overflow: hidden;
  }

  .el-card-div {
    -moz-border-radius: 24px !important; /* Firefox */
    -webkit-border-radius: 24px !important; /* Safari 和 Chrome */
    border-radius: 24px !important; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    text-align: center;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 70;
  }
  /*卡片设置*/
  .el-card {
    -moz-border-radius: 24px !important; /* Firefox */
    -webkit-border-radius: 24px !important; /* Safari 和 Chrome */
    border-radius: 24px !important; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    border: none;
    filter: drop-shadow(0px 16px 16px #475837);
    position: center;
    background: url("../../static/img/card-background.png");
    background-size: cover;

  }

  .image {
    width: inherit;
    position: center;
  }

  .title {
    line-height: 150%;
    text-align: left;
    font-family: "Noto Sans SC";
    font-weight: 500;
    color: black;
    vertical-align: top;
    z-index: 70;
    overflow: hidden;
  }

  /*.bottom {*/
  /*  line-height: 12px;*/
  /*}*/

  .info {
    line-height: 150%;
    text-align: left;
    font-family: "Noto Sans SC";
    font-weight: 300;
    color: black;
    vertical-align: top;
    /*overflow: hidden;*/
    text-indent: 30px;
    overflow-y:scroll
  }

  .button-close-div {
    cursor: pointer;
    position: absolute;
    z-index: 999;
  }

  .button-show-all {
    position: center;
    background-color: #87BF96;
    color: black;
    border-radius: 30px;
    filter: drop-shadow(0px 10px 10px #797979);
    font-family: "Noto Sans SC";
    border: none;
    padding: 0;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
}

@media screen and (min-width: 480px) {
  .el-card-div {
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -168px;
    /*-webkit-transform: translate(-50%, -50%);*/
    /*-moz-transform: translate(-50%, -50%);*/
    /*-ms-transform: translate(-50%, -50%);*/
    /*-o-transform: translate(-50%, -50%);*/
    /*transform: translate(-50%, -50%);*/
    position: absolute
  }
  .el-card {
    width:240px;
    height:336px;
    filter: drop-shadow(0px 8px 8px #475837);

  }
  .el-card__body {
    width:240px;
    height:336px;
    padding:0
  }
  .el-carousel__arrow{
    height:18px !important;
    width:18px !important;
    top:38%;
    font-size: 6px;
  }
  .el-icon-arrow-left:before,.el-icon-arrow-right:before{
    height:6px !important;
    width:6px !important;
  }
  .el-carousel__arrow--left{
    left:16px;
  }
  .el-carousel__arrow--right{
    right:16px;
  }
  .el-carousel__button{
    width: 15px;
    height: 1px;
  }
  #el-carousel {
    overflow: hidden;
    height:146px;
  }
  .title{
    font-size: 18px;
    width: 216px;
    height: 52px;
    margin-top: 4px;
    margin-right: 12px;
    margin-left: 12px;
  }
  .info {
    margin-top: 4px;
    margin-right: 12px;
    margin-left: 12px;
    text-indent: 15px;
    width: 216px;
    height: 68px;
    font-size: 11px;
    overflow-y:scroll
  }
  .button-close-div {
    height: 12px;
    width: 12px;
    margin-top: 12px;
    right: 12px;
  }
  .close-button {
    height: 12px;
    width: 12px;
  }
  .button-show-all {
    width: 176px;
    height: 30px;
    font-size: 11px;
    margin-top: 16px;
    margin-bottom: 16px;
    filter: drop-shadow(0px 5px 5px #797979);

  }
}

</style>
