<template>
  <div class="new-tab">
    <div class="wrapper">
      <div class="btn" :style="countStyle" @click="navShow = !navShow">
        {{ option.text }}
      </div>
      <div class="navList" v-show="navShow">
        <div v-for="(item, index) in option.listArr" :key="index">
          <div class="line" :style="lineStyle"></div>
          <div class="list" :style="listStyle">
            <div class="listImg">
              <!-- <img v-if="item.img" :src="item.img" alt="" /> -->
              <el-image
                style="width: 100%; height: 100%"
                :src="item.img"
                :preview-src-list="[item.img]"
              >
              </el-image>
            </div>
            <div
              class="text"
              @click="openUrl(item.src)"
              :style="{ lineHeight: option.listBtnHeight + 'px' }"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "new-tab",
  props: ["option", "lineObj"],
  data() {
    return {
      navShow: false,
    };
  },
  computed: {
    countStyle() {
      let { color, fontSize, btnHeight, bgTop, bgBottom, btnRadius, btnWidth } =
        this.option;
      return {
        color: color,
        fontSize: fontSize + "px",
        backgroundImage: "linear-gradient(" + bgTop + "," + bgBottom + ")",
        height: btnHeight + "px",
        width: btnWidth + "px",
        lineHeight: btnHeight + "px",
        borderRadius: btnRadius + "px",
      };
    },
    lineStyle() {
      let { lineColor, lineWidth, lineHeight } = this.option;
      return {
        borderColor: lineColor,
        borderWidth: lineWidth + "px",
        height: lineHeight + "px",
      };
    },
    listStyle() {
      let {
        listColor,
        listFontSize,
        listBgtop,
        listBgbottom,
        listBtnHeight,
        listBtnRudius,
        listBtnWidth,
      } = this.option;
      return {
        color: listColor,
        fontSize: listFontSize + "px",
        backgroundImage:
          "linear-gradient(" + listBgtop + "," + listBgbottom + ")",
        height: listBtnHeight + "px",
        borderRadius: listBtnRudius + "px",
        width: listBtnWidth + "px",
      };
    },
  },
  methods: {
    openUrl(url) {
      if (url !== "") {
        window.open(url);
      }
    },
  },
};
</script>
<style lang="scss">
.new-tab {
  overflow: hidden;
  .wrapper {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    cursor: pointer;
    z-index: 999;
    display: flex;
    flex-direction: column;
    .btn {
      font-weight: bold;
      margin: 0 auto;
    }
    .navList {
      flex: 1;
      margin: 0 auto;
      .line {
        width: 0px;
        border-style: dashed;
        margin: 0 auto;
      }
      .list {
        width: 100%;
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        .listImg {
          width: 40%;
          margin-right: 10px;
          padding: 5px;
          box-sizing: border-box;
        }
        .listImg img {
          width: 100%;
          height: 100%;
        }
        .text {
          flex: 1;
          font-size: 18px;
          font-weight: bold;
          text-align: start;
          line-height: 40px;
          text-decoration: underline;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
