// 组件：显示商品简介及企业logo，一般放置在页面顶部
<template keep-alive>
  <div v-show="show" class="root comp-product01" v-cloak>
    <!-- 风格1 -->
    <div v-if="comp.props.theme.val=='1'" class="theme theme1">
      <div class="header" :style="{backgroundColor:comp.props.bgColor.val }">
        <!-- 企业logo -->
        <img
          :class="{thumbnail:comp.props.logoStyle.val==0,thumbnail2:comp.props.logoStyle.val==1,}"
          :src="sup8.context.logourl||defaultLogoUrl"
        />
        <!-- <img class="thumbnail2" src="http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/h5plus/NIO%20Life-bk.png"> -->

        <!-- 产品名称 -->
        <div v-if="productInfo.Name" class="procuct-name" @click="onClick">
          {{productInfo.Name}}
          <i
            class="mint-cell-allow-right"
            style="position: relative;right: -35px"
            v-show="comp.props.linkType.val!=-1 && comp.props.linkType.val!=''"
          ></i>
        </div>

        <!-- 企业名称 -->
        <div class="enterprise-name" :style="{color:comp.props.coNameColor.val }">
          <img :src="iconEnterprise" width="18" height="18" alt />
          {{sup8.urlparams.ename||sup8.context.ename||productInfo.EnterpriseName}}
        </div>
      </div>
      <div v-if="productInfo.ImgUrl" class="content">
        <img :src="productInfo.ImgUrl||''" alt />
      </div>

      <div class="footer" v-if="productInfo.Intro">
        <mt-cell title="商品简介"></mt-cell>
        <div v-if="productInfo.Intro" class="intro">{{productInfo.Intro}}</div>
      </div>
    </div>

    <!-- 风格2 -->
    <div v-else-if="comp.props.theme.val=='2'" class="theme theme2" @click="onClick">
      <div class="header" :style="{backgroundColor:comp.props.bgColor.val,'min-height':'130px'}">
        <!-- 默认是放产品图片，如果没有产品图片则放企业logo -->
        <img v-if="productInfo.ImgUrl" class="blackCat" :src="productInfo.ImgUrl" />
        <img
          v-else
          :class="{thumbnail:comp.props.logoStyle.val==0,thumbnail2:comp.props.logoStyle.val==1,}"
          style="margin:20px 0"
          :src="sup8.context.logourl||defaultLogoUrl"
        />

        <!-- 遮罩层 -->
        <div class="coverShadow" :style="{height:!productInfo.ImgUrl?'30px':''}"></div>
        <!-- 产品名称 -->
        <div v-if="productInfo.Name" class="procuct-name">{{productInfo.Name}}</div>

        <!-- 企业名称 -->
        <div
          class="enterprise-name"
          v-if="sup8.urlparams.ename||sup8.context.ename||productInfo.EnterpriseName"
          :style="{color:comp.props.coNameColor.val }"
        >
          <img :src="iconEnterprise" width="18" height="18" alt />
          {{sup8.urlparams.ename||sup8.context.ename||productInfo.EnterpriseName||'上海中商网络股份有限公司'}}
        </div>
      </div>
    </div>
    <!-- 风格3 -->
    <div v-else-if="comp.props.theme.val=='3'" class="theme theme2" @click="onClick">
      <div class="header" :style="{backgroundColor:comp.props.bgColor.val,'min-height':'130px'}">
        <!-- 风格2的背景图片 -->
        <img v-if="productInfo.ImgUrl" class="blackCat" :src="productInfo.ImgUrl" />
      </div>
    </div>
  </div>
</template>
<script>
import apiHelper from "../assets/js/apiHelper.js";
import eventBus from "../assets/js/eventBus.js";
import { sign, aes } from "../assets/js/cryptoHelper.js";
export default {
  name: "CompProduct01",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      show: false,
      compShow: true,
      productInfo: {
        Name: "",
        Thumbnail: "",
        EnterpriseName: "",
        ImgUrl: ""
      },
      defaultLogoUrl: "http://image.supercarrier8.com/logo/super8/logo_v3.png",
      defaultProductImg:
        "http://image.supercarrier8.com/h5_template/defaultProduct.png",
      iconEnterprise:
        "http://image.supercarrier8.com/h5_template/1003/icon004.png" // 企业名称前面的小图标
    };
  },
  methods: {
    onClick: function(e) {
      var that = this;
      switch (that.sup8.env) {
        case that.sup8._def.env.design:
          break;
        case that.sup8._def.env.run:
          switch (that.comp.props.linkType.val) {
            case that.sup8._def.linkType.innerPage.value:
              //   debugger;
                // let newPage = _.find(that.cfg.pages, {
                //   id: that.comp.props.linkVal.val
                // });
              let newPage = _.find(that.cfg.pages, {
                type: that.comp.props.linkVal.val
              });
              if(!newPage){
                    newPage = _.find(that.cfg.pages, {
                        id: that.comp.props.linkVal.val
                    });
              }

              that.$emit("changeData", {
                selectedPage: newPage
              });

              break;
            case that.sup8._def.linkType.outerPage.value:
              var url = that.comp.props.linkVal.val;
              if (url && url.length > 0) {
                url = that.sup8.$utils.replaceUrlParams(url, that.sup8.context);
                if (that.sup8._appConf.sign.open) {
                  url = that.sup8.$utils.generateUrl(url, true, true);
                }
              }

              window.location.href = url;
            case that.sup8._def.linkType.otherTemplate.value:
              // window.location.href = that.comp.props.linkVal.val;
              // window.location.href =
              //   location.origin +
              //   "?tid=" +
              //   that.comp.props.linkVal.val +
              //   "&code=" +
              //   (this.sup8.codeInfo.Querycode || this.sup8.codeInfo.Code);
              let p = {
                tid: that.comp.props.linkVal.val,
                code: this.sup8.codeInfo.Code || this.sup8.codeInfo.Querycode,
                timestamp: that.sup8.$utils.getTimestamp()
              };

              if ((that.sup8._appConf.sign.open = true)) {
                p.sign = sign(that.sup8._appConf.sign.key, p);
              }

              var paramsStr = "?";
              _.forEach(p, function(value, key) {
                paramsStr += key + "=" + value + "&";
              });

              paramsStr = _.trimEnd(paramsStr, "&");
              window.location.href = location.origin + paramsStr;

              break;
          }
          break;
        default:
          break;
      }
    },

    getEntersprise() {
      var that = this;

      // 如果已经有了企业信息，则不再调接口
      if (that.sup8.context.ename) {
        that.productInfo = that.productInfo || {};

        that.productInfo.EnterpriseName =
          that.productInfo.EnterpriseName || that.sup8.context.ename;
        that.productInfo.Thumbnail =
          that.productInfo.Thumbnail || that.sup8.context.logourl;
        return;
      }

      apiHelper.getEnterprise(that.sup8.context.eno, function(res) {
        if (res.flag && res.data) {
          that.productInfo = that.productInfo || {};
          //           that.productInfo.ImgUrl =
          //   that.productInfo.ImgUrl || that.defaultProductImg;

          that.productInfo.Thumbnail = res.data.logoUrl || that.defaultLogoUrl;
          // 接口回来的企业名称字段是name,这里改写下 防止重复
          res.data.ename = res.data.name;
          res.data.enterpriseNo = that.sup8.context.eno;
          that.sup8.$utils.updateContext(that.sup8.context, res.data);
        }

        that.$forceUpdate();
      });
    },

    init(isForce) {
      var that = this;
      switch (that.sup8.env) {
        case that.sup8._def.env.design:
        case that.sup8._def.env.preview:
          that.show = true;
          that.sup8.productInfo = {
            Code: "",
            ProductId: "p001",
            BrandId: "b001",
            Name: "降噪蓝牙耳机",
            EnterpriseName: "上海中商网络",
            Thumbnail: "http://image.supercarrier8.com/product/earphone/sm.png",
            ImgUrl: "http://image.supercarrier8.com/product/earphone/1.png",
            Intro:
              "更优秀的音量优化处理技术，配载双麦克风降噪系统，让你随时尽享清晰通话，把我每一个关键信息",
            //http://image.supercarrier8.com/product/coffee/1.jpg
            RichText:
              '<p>可在此处编辑更多信息<img src="http://image.supercarrier8.com/antifaketemplae/%E5%95%86%E5%93%81%E4%BB%8B%E7%BB%8D%E5%9B%BE%E7%89%87.png" style="max-width: 100%;"></p>',
            Parameters: [
              {
                Key: "品牌",
                Value: "降噪蓝牙耳机"
              },
              {
                Key: "名称",
                Value: "RP-HD605N"
              },
              {
                Key: "产地",
                Value: "中国"
              },
              {
                Key: "规格",
                Value: "3.5mm"
              }
            ]
          };

          that.productInfo = that.sup8.productInfo;

          break;
        case that.sup8._def.env.run:
          that.productInfo.EnterpriseName = that.sup8.codeInfo.EnterpriseName;
          // 查询数据集中是否有产品信息，如果没有再查一次
          if (isForce || that.sup8.productInfo === undefined) {
            apiHelper.getProductInfo(
              that.sup8.codeInfo.Code,
              that.sup8.codeInfo.EnterpriseNo,
              that.sup8.portalInfo.NavigatingData,
              that.sup8.codeInfo.ProductId,
              function(res) {
                if (res.flag || res.data) {
                  that.sup8.productInfo = res.data;
                  that.productInfo = res.data;
                  that.productInfo.EnterpriseName =
                    that.sup8.codeInfo.EnterpriseName;

                  that.show = true;
                } else {
                  that.show = that.comp.props.compShow.val == 0 ? true : false;
                }
              }
            );
            // that.getEntersprise();
          } else {
            that.productInfo = that.sup8.productInfo;
            that.productInfo.EnterpriseName =
              that.productInfo.EnterpriseName || that.sup8.context.ename;
            that.productInfo.Thumbnail =
              that.productInfo.Thumbnail || that.sup8.context.logourl;
            that.show = true;
          }

          that.getEntersprise();

          break;
        default:
      }
    }
  },
  created: function() {
    console.log("CompProduct01.1:created");
    var that = this;
    that.mergeCompProps(that.comp);
    that.init();
  },
  mounted: function() {
    console.log("CompProduct01:mounted:this.comp", this.comp);
    var that = this;
    //that.productInfo.EnterpriseName=that.sup8.urlparams.ename;
    // 订阅事件
    eventBus.subscribe(eventBus.eventKey.pruductChange, function(e) {
      that.init(true);
      that.show = true;
    });

    eventBus.subscribe(eventBus.eventKey.antifakeFalse, function(e) {
      //that.show = false;
      that.show = true;
    });
  }
};
</script>
<style scoped>
.root.comp-product01 {
  margin-bottom: 0px;
  overflow: hidden;
}
/* 选择样式2单独的样式设置 */
.root .theme2 .header {
  /* 'background-image':'url(http://image.supercarrier8.com/00064f17b6bc4bbbbdb3b9cff5196d0b.jpg)',
  'background-size':'100%',
  'background-repeat':'no-repeat' */
  padding: 0;
  position: relative;
}
.blackCat {
  display: block;
  margin-bottom: -4px;
  width: 100%;
  height: 100%;
}
.coverShadow {
  display: block;
  width: 100%;
  height: 50px;
  background-color: #000;
  opacity: 0.1;
  position: absolute;
  bottom: 0;
}
.root .theme2 .header .procuct-name {
  position: absolute;
  color: white;
  /* font-size: 1.2rem; */
  font-size: 1.1rem;
  margin: 0px;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  font-weight: normal;
}
.root .theme2 .header .enterprise-name {
  position: absolute;
  /* color: #bab1a5; */
  color: #ffffff;
  font-size: 0.9rem;
  left: 0;
  right: 0;
  bottom: 0.4rem;
}

.root .theme2 .header .enterprise-name img {
  position: relative;
  top: 4px;
}

/* 样式1和样式2之间的公共样式 */
.root {
  background-color: white;
  width: 100%;
  height: 100%;
}

.root .header {
  /* background-color: #13a4f5; */
  text-align: center;
  padding: 20px;
}

.root .header .thumbnail {
  height: 50px;
  width: 50px;
  /* background-color: white; */
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}
.root .header .thumbnail2 {
  width: 100px;
  /* background-color: white; */
}

.root .header .procuct-name {
  color: white;
  font-size: 1.2rem;
  margin: 10px;
}

.root .header .enterprise-name {
  /* color: #bab1a5; */
  font-size: 0.8rem;
}

.root .header .enterprise-name img {
  width: 18px;
  /* padding-top: 5px; */
  position: relative;
  top: 4px;
}

/* .root .content {
  padding: 10px;
} */

.root .content img {
  width: 100%;
  background: white;
  display: block;
}

.root .footer .intro {
  padding: 0 10px 10px;
  font-size: 1rem;
  color: #898989;
  line-height: 22px;
}

/* .root .footer .title {
  margin-bottom: 4px;

} */
</style>