<template>
  <view class="draw-box" v-if="!loading">
    <view class="show-box">
      <view class="ad-box" :style="{ width: adWidth + 'px' }">
        <style1
          :auto-height="adHeight"
          :bg-color="generterConfig.bgColor"
          :bg-type="generterConfig.bgType"
          :images="generterConfig.images"
          ref="shareImageContent"
          :info="info"
          v-if="adHeight > 0 && generterConfig.themeSty == '1'"
        ></style1>
        <style2
          :auto-height="adHeight"
          :bg-color="generterConfig.bgColor"
          :bg-type="generterConfig.bgType"
          :images="generterConfig.images"
          ref="shareImageContent"
          :info="info"
          v-if="adHeight > 0 && generterConfig.themeSty == '2'"
        ></style2>
        <style3
          :auto-height="adHeight"
          :bg-color="generterConfig.bgColor"
          :bg-type="generterConfig.bgType"
          :images="generterConfig.images"
          ref="shareImageContent"
          :info="info"
          v-if="adHeight > 0 && generterConfig.themeSty == '3'"
        ></style3>
        <style4
          :auto-height="adHeight"
          :bg-color="generterConfig.bgColor"
          :bg-type="generterConfig.bgType"
          :images="generterConfig.images"
          ref="shareImageContent"
          :info="info"
          v-if="adHeight > 0 && generterConfig.themeSty == '4'"
        ></style4>
      </view>
    </view>
    <view class="op-box">
      <view class="filed">
        <view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
        <view class="name">样式</view>
        <view class="content">
          <view
            class="item"
            v-for="(x, i) in config.poster_style"
            :key="i"
            :style="[i == chosens.style ? activeStyle : {}]"
            @click="changeChosenHandler('style', i)"
          >
            样式{{ x }}
            <view
              class="chosen"
              :style="[i == chosens.style ? chosenStyle : {}]"
            >
              <u-icon
                style="display: inline-block;"
                name="success"
                color="#FFF"
                size="24"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="filed">
        <view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
        <view class="name">排版</view>
        <view class="content">
          <view
            class="item"
            v-for="(x, i) in config.image_style"
            :key="i"
            :style="[i == chosens.image ? activeStyle : {}]"
            @click="changeChosenHandler('image', i)"
          >
            <view class="fill">&nbsp;</view>
            <text>{{ x }}张图</text>
            <view
              class="chosen"
              v-if="i == chosens.image"
              :style="[chosenStyle]"
            >
              <u-icon
                style="display: inline-block;"
                name="success"
                color="#FFF"
                size="24"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="filed">
        <view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
        <view class="name">类型</view>
        <view class="content">
          <view
            class="item"
            v-for="(x, i) in types"
            :key="i"
            :style="[i == chosens.type ? activeStyle : {}]"
            @click="changeChosenHandler('type', i)"
          >
            <view :class="[x.clsName]"></view>
            <text>{{ x.name }}</text>
            <view
              class="chosen"
              v-if="i == chosens.type"
              :style="[chosenStyle]"
            >
              <u-icon
                style="display: inline-block;"
                name="success"
                color="#FFF"
                size="24"
              ></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="filed">
        <view class="sty" :style="{ borderColor: mainColor }">&nbsp;</view>
        <view class="name">颜色</view>
        <view class="content">
          <view>
            <view class="color-box">
              <view
                class="color-item"
                v-for="(x, i) in config.color"
                :key="i"
                :style="{ background: x }"
                @click="changeChosenHandler('color', i)"
              >
                &nbsp;
                <view
                  class="chosen"
                  v-if="i == chosens.color"
                  :style="[chosenStyle]"
                >
                  <u-icon
                    style="display: inline-block;"
                    name="success"
                    color="#FFF"
                    size="24"
                  ></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view style="margin: 0 5vw; margin-bottom: 20rpx;">
        <u-button
          @click="gerenalPicHandler"
          :ripple="true"
          :hair-line="false"
          :custom-style="btn2"
          >保存图片</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
import style1 from "./components/draw/style1";
import style2 from "./components/draw/style2";
import style3 from "./components/draw/style3";
import style4 from "./components/draw/style4";
export default {
  components: { style1, style2, style3, style4 },
  data() {
    return {
      mainColor: "",
      activeStyle: {},
      chosenStyle: {},
      id: 0,
      config: {},
      info: {},
      loading: true,
      chosens: {
        style: 0,
        image: 0,
        color: 0,
        type: 0,
      },
      generterConfig: {
        bgColor: "",
        bgType: 1,
        images: [],
        themeSty: "1",
      },
      types: [
        {
          clsName: "fill",
          name: "纯色",
        },
        {
          clsName: "change",
          name: "渐变",
        },
      ],
      btn2: {
        flex: 1,
        height: "100%",
        borderRadius: "40px",
        border: "none",
        color: "#FFF",
        fontSize: "13px",
        width: "100%",
      },
      adWidth: 10,
      adHeight: 0,
    };
  },
  onLoad(option) {
    uni.setNavigationBarTitle({
      title: "商品海报",
    });
    this.mainColor = this.$uiConfig.mainColor;
    this.activeStyle = {
      background: "#FFF",
      border: "2rpx solid " + this.mainColor,
      color: this.mainColor,
    };
    this.chosenStyle = {
      background: this.mainColor,
      color: "#FFF",
    };
    this.id = option.id || 56978;
    this.btn2.background = this.mainColor;
    this.init();
  },
  onShow() {
    setTimeout(() => {
      this.queryHeight();
    }, 1000);
  },
  methods: {
    gerenalPicHandler() {
      this.$refs.shareImageContent.saveImage();
    },
    queryHeight() {
      let that = this;
      let info = uni.createSelectorQuery().select(".ad-box");
      info
        .boundingClientRect(function (data) {
          that.adHeight = data.height;
          that.adWidth = data.height * 0.5622;
        })
        .exec();
    },
    changeChosenHandler(k, v) {
      this.chosens[k] = v;
      if (k == "style") {
        this.generterConfig.themeSty = this.config.poster_style[v];
      } else if (k == "color") {
        this.generterConfig.bgColor = this.config.color[v];
      } else if (k == "image") {
        let temp = parseInt(this.config.image_style[v]);
        this.generterConfig.images = [];
        for (let i = 0; i < temp; i++) {
          this.generterConfig.images.push(this.info.multi_map[i]);
        }
      } else if (k == "type") {
        this.generterConfig.bgType = this.types[v].clsName == "fill" ? 1 : 2;
      }
    },
    // init() {
    //   let h = this.apiheader();
    //   this.request(
    //     {
    //       url: "",
    //       header: h,
    //       data: {
    //         r: "plugin/quick_share/api/poster/config",
    //         goods_id: this.id,
    //       },
    //     },
    //     (res) => {
    //       this.config = res.data.config;
    //       this.info = res.data.info;
    //       this.loading = false;
    //       this.generterConfig.bgColor = this.config.color[0];
    //       let temp = parseInt(this.config.image_style[0]);
    //       for (let i = 0; i < temp; i++) {
    //         this.generterConfig.images.push(this.info.multi_map[i]);
    //       }
    //       this.newInit();
    //     }
    //   );
    // },
    init() {
      let u = uni.getStorageSync("mall_UserInfo");
	  let SmallShopId = uni.getStorageSync("mall_UserInfo")
	    ? uni.getStorageSync("mall_UserInfo").SmallShopId
	    : 0;
		if(SmallShopId == 0){//如果微店id为0 去找所属微店id
			SmallShopId = uni.getStorageSync("mall_UserInfo")
			  ? uni.getStorageSync("mall_UserInfo").UserSmallShopId
			  : 0;
		}
		let Up = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo").UserPageType:0;
		var IsOpenSchool = uni.getStorageSync("mall_UserInfo").IsOpenSchool;
      this.request2(
        {
          url: "/api/Mall/GetGoosPoster",
          data: {
            goodsId: this.id,
            // path: "/pages/goods/goods?id=" + this.id + "&user_id=" + u.UserId,
            path: "/pages/index/index?id=" + this.id + "&user_id=" + u.UserId+ "&SmallShopId=" + SmallShopId+ "&Up=" + Up+'&JumpType=1',
			IsOpenSchool:IsOpenSchool
          },
        },
        (res) => {
          this.config = res.data.config;
          this.info = res.data.info;
          this.loading = false;
          this.generterConfig.bgColor = this.config.color[0];
          let temp = parseInt(this.config.image_style[0]);
          this.info.qrcode_url=this.host2+this.info.qrcode_url
          for (let i = 0; i < temp; i++) {
            this.generterConfig.images.push(this.info.multi_map[i]);
          }
        }
      );
    },
  },
};
</script>

<style>
.draw-box {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "a";
}
.draw-box .show-box {
  background: #f5f5f5;
  flex: 1;
  height: 1rpx;
  padding: 40rpx;
}

.ad-box {
  height: 100%;
  width: 56%;
  margin: 0 auto;
}
.draw-box .op-box {
  padding: 20rpx 20rpx 40rpx 20rpx;
  background: #fff;
}
.draw-box .op-box .filed {
  margin-bottom: 17rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.draw-box .op-box .filed .sty {
  width: 20rpx;
  height: 20rpx;
  border: 5rpx solid transparent;
  border-radius: 20rpx;
  margin-right: 20rpx;
  overflow: hidden;
}
.draw-box .op-box .filed .name {
  width: 60rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
  color: #000;
}
.draw-box .op-box .filed .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  width: 1rpx;
  padding-top: 13rpx;
  overflow: auto;
}
.draw-box .op-box .filed .content .item {
  padding: 10rpx 14rpx;
  background: #f5f5f5;
  color: #000;
  position: relative;
  font-size: 26rpx;
  margin-right: 30rpx;
  border-radius: 4rpx;
}
.draw-box .op-box .filed .content .item .fill {
  display: inline-block;
  height: 24rpx;
  width: 24rpx;
  vertical-align: middle;
  background: #ddd;
  margin-right: 10rpx;
}
.draw-box .op-box .filed .content .item .change {
  display: inline-block;
  height: 24rpx;
  width: 24rpx;
  vertical-align: middle;
  background: linear-gradient(to bottom, #ddd, transparent);
  margin-right: 10rpx;
}
.draw-box .op-box .filed .content .chosen {
  border-radius: 26rpx;
  height: 28rpx;
  width: 28rpx;
  position: absolute;
  top: -13rpx;
  right: -13rpx;
  text-align: center;
  line-height: 30rpx;
}
.draw-box .op-box .filed .content .color-box {
  display: block;
  white-space: nowrap;
}
.draw-box .op-box .filed .content .color-box .color-item {
  position: relative;
  margin-right: 30rpx;
  border-radius: 4rpx;
  width: 58rpx;
  height: 58rpx;
  display: inline-block;
}
</style>
