<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="html-box">
      <div id="userinfo">
        <div style="text-align: center; font-size: 18px;" v-if="datas.show_list.length <= 0">请设置显示板块内容</div>
        <ul v-if="datas.show_list.length > 0">
          <template v-for="(item,index) in datas.show_list">
            <li @click="goUrl(item.url)" :key="index">
              <span><small style="font-size:10px;">{{item.unit}}</small>{{ item.value }}</span>
              <span>{{ item.name }}</span>
              <img class="love-icon" v-show="item.is_change == 1" :src="other.mark_sound && other.mark_sound.notice_img" />
            </li>
          </template>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// 自定义样式
const css = function () {
  if(this.datas.preview_color) {
    const {preview_color,} = this.datas;

    return `
		    .component-${this.id} .html-box {
		        background-color: ${preview_color.color};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
		    }
		`;
  }
};

export default {
  props: ["id", "datas", "member_item","other"],
  data() {
    return {};
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
  },
  mounted() {
  },
  methods: {
    goUrl(str,query={}) {
      let _query = query;
      if(str == 'cat_integral') _query.name = 'cat';
      else if(str == 'extension') str = 'withdrawal';

      this.$router.push(this.fun.getUrl(str,_query));
    },
  }
};
</script>

<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  // 默认
  .component-wrapper {
    width: 375/37.5rem;
  }

  .html-box {
    min-height: 30px;
    padding: 10px 0;
  }

  #userinfo {
    /* background: #fff; */

    /* border-top: solid 1px #ebebeb; */
    ul {
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;

      li {
        flex: 1;
        margin: 5px;
        box-sizing: border-box;
        border: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        position: relative;
      }
      .love-icon {
        position: absolute;
        width:0.9375rem;
        height: 0.9375rem;
        right:0.3125rem;
        top:-0.3125rem;
        z-index:5;
      }

      li span {
        color: #222;
        font-size: 14px;
        margin-bottom: 5px;
        height: 20px;
        line-height: 20px;
        // display: inline-block; //修复#93730样式问题
      }

      li small {
        font-size: 12px;
      }
    }
  }
</style>
