<template>
  <div v-if="productInfo" class="root" :style="style">
    <div class="header">
      <img v-if="productInfo.ImgUrl" :src="productInfo.ImgUrl" alt srcset />
      <mt-cell :title="productInfo.Name||''"></mt-cell>
    </div>
    <div style="background:#fff;">
      <mt-cell title="商品介绍"></mt-cell>
      <template v-for="item in productInfo.Parameters">
        <mt-cell v-if="item.mark!='enclosure'" :title="item.Key+'：'+(item.Value?item.Value:'-')"></mt-cell>
        <div v-else style="padding:0 10px;border-top:1px solid #dbdde0;">
          <div>
            <p>{{item.Key}}:</p>
            <div v-for="(k,index) in item.Value" :key="index">
              <img
                :src="k.url"
                v-show="k.type.toLowerCase()!='.pdf'"
                style="display: block;margin:5px auto;"
              />
              <div class="pdf-box" v-show="k.type=='.pdf'" @click="openPDF(k.url)">
                <svg
                  style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="820"
                >
                  <path
                    d="M903.542857 256.8c6.857143 6.857143 10.742857 16.114286 10.742857 25.828571V987.428571c0 20.228571-16.342857 36.571429-36.571428 36.571429H146.285714c-20.228571 0-36.571429-16.342857-36.571428-36.571429V36.571429c0-20.228571 16.342857-36.571429 36.571428-36.571429h485.371429c9.714286 0 19.085714 3.885714 25.942857 10.742857l245.942857 246.057143zM829.942857 299.428571L614.857143 84.342857V299.428571h215.085714zM650.537143 655.154286c-17.348571-0.571429-35.794286 0.765714-56.742857 3.382857-27.771429-17.131429-46.468571-40.662857-59.748572-75.234286l1.222857-5.005714 1.417143-5.92c4.914286-20.72 7.554286-35.84 8.342857-51.085714 0.594286-11.508571-0.045714-22.125714-2.091428-31.965715-3.771429-21.245714-18.8-33.668571-37.737143-34.434285-17.657143-0.72-33.885714 9.142857-38.034286 24.422857-6.754286 24.708571-2.8 57.222857 11.52 112.674285-18.24 43.485714-42.342857 94.468571-58.514285 122.902858-21.588571 11.131429-38.4 21.257143-52.525715 32.48-18.628571 14.822857-30.262857 30.057143-33.462857 46.057142-1.554286 7.417143 0.788571 17.108571 6.125714 25.051429 6.057143 9.005714 15.177143 14.857143 26.114286 15.702857 27.6 2.137143 61.52-26.32 98.971429-90.582857 3.76-1.257143 7.737143-2.582857 12.594285-4.228571l13.6-4.594286c8.605714-2.902857 14.845714-4.982857 21.017143-6.982857 26.742857-8.708571 46.971429-14.205714 65.371429-17.337143 31.977143 17.12 68.937143 28.342857 93.828571 28.342857 20.548571 0 34.434286-10.651429 39.451429-27.417143 4.4-14.72 0.914286-31.794286-8.548572-41.234286-9.782857-9.611429-27.771429-14.205714-52.171428-14.994285zM367.12 801.92v-0.411429l0.148571-0.388571c1.451429-3.908571 3.6-8.011429 6.4-12.297143 4.891429-7.52 11.622857-15.428571 19.965715-23.851428 4.48-4.514286 9.142857-8.914286 14.617143-13.851429 1.222857-1.097143 9.04-8.057143 10.502857-9.428571l12.765714-11.885715-9.28 14.777143c-14.08 22.445714-26.811429 38.605714-37.714286 49.142857-4.011429 3.885714-7.542857 6.742857-10.4 8.582857a18.777143 18.777143 0 0 1-2.982857 1.622858c-0.468571 0.194286-0.88 0.308571-1.291428 0.342857a2.514286 2.514286 0 0 1-1.28-0.171429 2.365714 2.365714 0 0 1-1.451429-2.182857zM511.051429 552.457143l-2.582858 4.571428-1.6-5.005714c-3.542857-11.234286-6.148571-28.16-6.868571-43.428571-0.822857-17.371429 0.56-27.794286 6.045714-27.794286 7.702857 0 11.234286 12.342857 11.508572 30.914286 0.251429 16.32-2.32 33.302857-6.514286 40.742857z m-6.64 66.811428l1.748571-4.628571 2.388571 4.342857c13.36 24.274286 30.697143 44.525714 49.76 58.64l4.114286 3.04-5.017143 1.028572c-18.662857 3.862857-36.045714 9.668571-59.817143 19.257142 2.48-1.005714-24.708571 10.125714-31.588571 12.765715l-6 2.297143 3.2-5.577143c14.114286-24.571429 27.154286-54.08 41.2-91.165715z m180.137142 87.154286c-8.982857 3.542857-28.32 0.377143-62.365714-14.16l-8.64-3.68 9.371429-0.685714c26.628571-1.977143 45.485714-0.514286 56.48 3.508571 4.685714 1.714286 7.805714 3.874286 9.188571 6.342857a5.302857 5.302857 0 0 1-1.554286 7.211429 7.657143 7.657143 0 0 1-2.48 1.462857z"
                    p-id="821"
                  />
                </svg>
                <a href="javascript:;">附件{{index+1}}</a>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="rich" v-html="productInfo.RichText||''"></div>
  </div>
</template>
<script>
import apiHelper from "../assets/js/apiHelper.js";
import eventBus from "../assets/js/eventBus.js";
export default {
  name: "CompProduct",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {
      style: {},
      productInfo: {
        ImgUrl: "",
        Name: "",
        Parameters: []
      },
      fakeData: {
        Code: "",
        ProductId: "p001",
        BrandId: "b001",
        Name: "降噪蓝牙耳机-测试",
        ImgUrl:
          "http://image.supercarrier8.com/antifaketemplae/%E6%AD%A3%E5%93%81%E5%9B%BE%E7%89%87.png",
        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: "HS-x"
          },
          {
            Key: "型号",
            Value: "1115-165"
          },
          {
            Key: "规格",
            Value: "3.5mm"
          }
        //   {
        //     Key: "检疫附件",
        //     "mark": "enclosure",
        //     Value:
        //       [
        //         {"url":"https://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/04e34c64d32a47479b7b2d6769b33461.pdf","type":".pdf"},
        //         {"url":"https://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/04e34c64d32a47479b7b2d6769b33461.pdf","type":".pdf"},
        //         {"url":"http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/b29ba5f71cf44ac5a08d0d2862128ed1.jpg?Expires=253402271999&OSSAccessKeyId=LTAIohjt8boJ8dHY&Signatu","type":".jpg"},
        //         {"url":"http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/b29ba5f71cf44ac5a08d0d2862128ed1.jpg?Expires=253402271999&OSSAccessKeyId=LTAIohjt8boJ8dHY&Signatu","type":".jpg"}
        //       ]
        //   },
        //   {
        //     Key: "质检附件",
        //     "mark": "enclosure",
        //     Value:
        //       [{"url":"https://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/04e34c64d32a47479b7b2d6769b33461.pdf","type":".pdf"},
        //       {"url":"https://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/04e34c64d32a47479b7b2d6769b33461.pdf","type":".pdf"},
        //       {"url":"http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/b29ba5f71cf44ac5a08d0d2862128ed1.jpg?Expires=253402271999&OSSAccessKeyId=LTAIohjt8boJ8dHY&Signatu","type":".jpg"},
        //       {"url":"http://beta-sup8-images.oss-cn-shanghai.aliyuncs.com/b29ba5f71cf44ac5a08d0d2862128ed1.jpg?Expires=253402271999&OSSAccessKeyId=LTAIohjt8boJ8dHY&Signatu","type":".jpg"}]
        //   },
        //   {
        //     Key: "型ada号",
        //     Value: "1115-165"
        //   },
        //   {
        //     Key: "规ada格",
        //     Value: "3.5mm"
        //   }
        ]
      }
    };
  },
  methods: {
    openPDF(url) {
      window.open(url);
    },
    initStyle() {
      var that = this;
      that.style = {};
      var CompHeader02 = _.find(that.selectedPage.components, {
        componentViewName: "CompHeader02"
      });

      var CompNavBar = _.find(that.selectedPage.components, {
        componentViewName: "CompNavBar"
      });

      switch (that.sup8.env) {
        case that.sup8._def.env.design:
          break;
        case that.sup8._def.env.preview:
          if (CompHeader02) {
            that.style.paddingTop = "70px";
          }
          if (CompNavBar) {
            that.style.paddingBottom = "110px";
          }
          break;
        case that.sup8._def.env.run:
          if (CompHeader02) {
            that.style.paddingTop = "70px";
          }

          if (CompNavBar) {
            that.style.paddingBottom = "130px";
          }
          break;
      }
    }
  },
  created: function() {
    console.log("CompProduct:created");
    var that = this;
    // debugger

    that.mergeCompProps(that.comp);
    switch (that.sup8.env) {
      case that.sup8._def.env.preview:
        that.selectedPage = _.find(that.cfg.pages, {
          type: that.sup8.context.ptype
        });
        that.productInfo.ImgUrl = that.fakeData.ImgUrl;
        that.productInfo.Name = that.fakeData.Name;
        eventBus.$on(that.sup8._def.eventKey.previewdataChange, function(res) {
          that.productInfo.Parameters = res.Parameters;
          if (res.ImgUrl) {
            that.productInfo.ImgUrl = res.ImgUrl;
          }
          that.productInfo.RichText = res.Content;
        });
        break;
      case that.sup8._def.env.design:
        that.sup8.productInfo = that.fakeData;
        that.productInfo = that.fakeData;
        break;
      case that.sup8._def.env.run: // 查询数据集中是否有产品信息，如果没有再查一次
        if (!that.sup8.productInfo) {
          apiHelper.getProductInfo(
            that.sup8.codeInfo.Code,
            that.sup8.codeInfo.EnterpriseNo,
            that.sup8.portalInfo.NavigatingData,
            that.sup8.codeInfo.ProductId,
            function(res) {
              // that.sup8.productInfo = res.data;
              // that.productInfo = res.data;
              if (res.data.Parameters.length > 0) {
                let arr = [];
                res.data.Parameters.forEach(v => {
                  let data = null;
                  try {
                    data = JSON.parse(v.Value);
                  } catch (error) {
                    data = v.Value;
                  }
                  if (Array.isArray(data)) {
                    let dataArr = [];
                    data.forEach(k => {
                      k.type.toLowerCase() == ".pdf"
                        ? dataArr.push(k)
                        : dataArr.unshift(k);
                    });
                    arr.push({
                      mark: "enclosure",
                      Key: v.Key,
                      Value: dataArr
                    });
                  } else {
                    arr.push(v);
                  }
                });
                console.log(JSON.parse(JSON.stringify(arr)));
                res.data.Parameters = arr;
              }
              that.sup8.productInfo = res.data;
              that.productInfo = res.data;
            }
          );
        } else {
          that.productInfo = that.sup8.productInfo;
          if (that.productInfo.Parameters.length > 0) {
            let arr = [];
            that.productInfo.Parameters.forEach(v => {
              let data = null;
              try {
                data = JSON.parse(v.Value);
              } catch (error) {
                data = v.Value;
              }
              if (Array.isArray(data)) {
                let dataArr = [];
                data.forEach(k => {
                  k.type.toLowerCase() == ".pdf"
                    ? dataArr.push(k)
                    : dataArr.unshift(k);
                });
                arr.push({
                  mark: "enclosure",
                  Key: v.Key,
                  Value: dataArr
                });
              } else {
                arr.push(v);
              }
            });
            console.log(JSON.parse(JSON.stringify(arr)));
            that.productInfo.Parameters = arr;
          }
        }
        break;
      default:
    }

    that.initStyle();
  },
  mounted: function() {
    console.log("CompProduct:mounted:this.comp", this.comp);
    var that = this;
  }
};
</script>
<style scoped>
.root img {
  width: 100%;
}

.root .header {
  margin-bottom: 15px;
}
.pdf-box {
  padding: 5px 0;
}
.pdf-box svg {
  color: #da6363;
}
.pdf-box a {
  color: #666;
  font-size: 0.9rem;
}
</style>
