<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-document-add"
      size="mini"
      @click="addNew"
      style="float: right; position: fixed; right: 40px; bottom: 2%; z-index: 10"
      :loading="loading"
      v-if="itemInfo.type != 'lookElse'"
    >{{ itemInfo.type != "look" ? "新增" : "修改" }}
    </el-button
    >
    <el-button
      size="mini"
      @click="addClose"
      style="float: right; position: fixed; right: 120px; bottom: 2%; z-index: 10"
      v-if="itemInfo.type == 'look'"
    >取消
    </el-button
    >
    <el-card shadow="never" class="card-show" v-if="itemJson" style="margin-bottom: 24px">
      <div>
        <h3 style="font-weight: blod">
          {{ itemJson.itemTitle }}( {{ itemJson.itemId }})
          <el-button
            type="primary"
            icon="el-icon-document-add"
            size="mini"
            @click="addNew"
            style="float: right"
            :loading="loading"
            v-if="itemInfo.type != 'look' && itemInfo.type != 'lookElse'"
          >{{ itemInfo.type != "look" ? "新增" : "修改" }}
          </el-button
          >
        </h3>
      </div>
    </el-card>
    <el-row :gutter="24" v-if="itemJson">
      <el-col :span="6">
        <el-card shadow="never" class="card-show">
          <div>
            <img :src="itemJson.itemImgUrl" alt="" style="width: 100%; height: auto"/>
          </div>
          <div>
            <div class="swiper">
              <swiper ref="mySwiper" :options="swiperOptions">
                <swiper-slide
                  v-for="(item, index) in itemJson.itemGalleryUrls"
                  :key="index"
                >
                  <el-image
                    style="width: 100%; height: auto"
                    :src="item"
                    :preview-src-list="itemJson.itemGalleryUrls"
                  >
                  </el-image>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" v-if="itemJson">
        <el-card shadow="never" class="card-show">
          <el-card shadow="never" class="card-show">
            <h4><span class="prefix"></span>基本信息</h4>
            <div style="width: 100%" class="item-name-calss dh-data">
              <p>
                店铺名称：{{
                  judgeStatus == 2 ? itemJson.sellerNickName : itemJson.shopTitle
                }}
              </p>
              <p v-if="judgeStatus == 1">
                小店星级：{{ itemJson.shopStar }} | 小店评分：{{ itemJson.shopScore }}
              </p>
              <p v-if="judgeStatus == 1">
                店铺服务分：{{ itemJson.mallServiceScore }} | 店铺质量分：{{
                  itemJson.mallQualityScore
                }}
              </p>

              <p v-if="judgeStatus == 1">
                到手价格：¥{{ itemJson.zkFinalPrice / 100 }}元
              </p>
              <p v-if="judgeStatus == 2">商品价格：¥{{ itemJson.itemPrice / 100 }}元</p>
              <p>服务费率：{{ (itemJson.regimentalPromotionRate / 10).toFixed(2) }}%</p>
              <p>佣金率：{{ (itemJson.commissionRate / 10).toFixed(2) }}%</p>
              <p>
                领样要求：
                <span v-if="!editSampleRequirement">{{
                    itemInfo.sampleRequirement
                  }}</span>
                <el-input
                  v-else
                  v-model="itemInfo.sampleRequirement"
                  placeholder="请输入内容"
                  style="width: 240px"
                ></el-input>
                <a
                  v-if="itemInfo.type != 'lookElse'"
                  :class="!editSampleRequirement ? 'el-icon-edit' : 'el-icon-check'"
                  @click="editSampleRequirement = !editSampleRequirement"
                  style="color: deepskyblue; margin-left: 10px; display: inline"
                ></a>

                | 样品数量：

                <span v-if="!editSampleCount">{{ itemInfo.sampleCount }}</span>
                <el-input
                  v-else
                  v-model.number="itemInfo.sampleCount"
                  placeholder="请输入内容"
                  style="width: 240px"
                ></el-input>
                <a
                  v-if="itemInfo.type != 'lookElse'"
                  :class="!editSampleCount ? 'el-icon-edit' : 'el-icon-check'"
                  @click="editSampleCount = !editSampleCount"
                  style="color: deepskyblue; margin-left: 10px; display: inline"
                ></a>
              </p>
              <p>
                类目：{{
                  judgeStatus == 1 ? itemJson.categoryName : itemJson.itemCategoryName
                }}
              </p>


              <p v-if="itemInfo.isPresale == '1'">是否预售：否</p>
              <p v-if="itemInfo.isPresale == '2'">是否预售：是</p>
              <p v-if="judgeStatus == 2">商品状态：下架</p>

              <p>
                商品链接：<a
                style="display: inline"
                :href="itemJson.detailUrl"
                target="_block"
              >{{ itemJson.detailUrl }}</a
              >
              </p>
            </div>
          </el-card>
          <el-card shadow="never" class="card-show main-top" v-if="judgeStatus == 1">
            <h4><span class="prefix"></span>商品信息</h4>
            <div style="width: 100%" class="item-name-calss dh-data">
              <p v-for="(item, index) in itemJson.skuList" :key="index">
                ¥{{ item.skuPrice / 100 }}元 | {{ item.specification }}
              </p>
            </div>
          </el-card>
          <el-card shadow="never" class="card-show main-top">
            <h4><span class="prefix"></span>发货信息</h4>
            <div style="width: 100%" class="item-name-calss dh-data">
              <p>发货地：{{ itemJson.postArea }}</p>
              <p>
                不发货地区：<span v-if="!editNoPostArea">{{ itemInfo.noPostArea }}</span>
                <el-input
                  v-else
                  v-model="itemInfo.noPostArea"
                  placeholder="请输入内容"
                  style="width: 240px"
                ></el-input>
                <a
                  v-if="itemInfo.type != 'lookElse'"
                  :class="!editNoPostArea ? 'el-icon-edit' : 'el-icon-check'"
                  @click="editNoPostArea = !editNoPostArea"
                  style="color: deepskyblue; margin-left: 10px; display: inline"
                ></a>
              </p>
              <p>发货时间：{{ itemJson.deliveryRate }}</p>
            </div>
          </el-card>
          <el-card shadow="never" class="card-show main-top">
            <h4>
              <span class="prefix"></span>商品卖点
              <a
                v-if="itemInfo.type != 'lookElse'"
                :class="!editDesc ? 'el-icon-edit' : 'el-icon-check'"
                @click="editDesc = !editDesc"
                style="color: deepskyblue; margin-left: 10px; display: inline"
              ></a>
            </h4>
            <div style="width: 100%" class="item-name-calss dh-data">
              <!-- {{ itemInfo.partnerRecommendText }} -->
              <p v-if="!editDesc" v-html="itemInfo.partnerRecommendText"></p>
              <el-input
                v-else
                type="textarea"
                :rows="2"
                v-model="itemInfo.partnerRecommendText"
                placeholder="请输入内容"
                style="width: 100%"
                minlength="5"
              ></el-input>
            </div>
          </el-card>
          <el-card shadow="never" class="card-show main-top" v-if="judgeStatus == 1">
            <h4><span class="prefix"></span>商品备注</h4>
            <div style="width: 100%" class="item-name-calss dh-data">
              <pre>{{ itemJson.itemDesc }}</pre>
            </div>
          </el-card>
          <el-card shadow="never" class="card-show main-top">
            <h4><span class="prefix"></span>商品详情</h4>
            <div
              style="
                width: 50%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                position: relative;
                left: 50%;
                margin-left: -25%;
              "
              class="item-name-calss dh-data"
            >
              <img
                :src="item"
                alt=""
                v-for="(item, index) in itemJson.itemDescUrls"
                style="width: 100%"
                :key="index"
              />
              <!-- <el-image
                style="width: 200px; height: 200px; margin-bottom: 20px"
                :src="item"
                :previewSrcList="itemJson.itemDescUrls"
                v-for="(item, index) in itemJson.itemDescUrls"
                :key="index"
              >
              </el-image>
              <div
                v-for="i in 4"
                :key="i"
                style="
                  height: 0;
                  margin-bottom: 0;
                  border: none;
                  padding: 0;
                  width: 200px;
                "
              ></div> -->
            </div>
          </el-card>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  getItemPreview,
  insertItem,
  editItem,
  getItemDetailByItemId,
} from "@/api/goodsManagement/goods";
import {swiper, swiperSlide} from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";

export default {
  name: "goods-preview",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      editNoPostArea: false,
      editSampleRequirement: false,
      editSampleCount: false,
      editDesc: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: null,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 字典表格数据
      typeList: [],
      //上传文件类型
      fileType: [".doc", ".xls", ".xlsx", ".ppt", ".pdf", ".csv"],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      openFp: false,
      formFp: {},
      // 是否可编辑
      edit: false,
      // 分配销售
      openAllocation: false,
      // 选择的销售id
      saleId: undefined,
      // 销售列表
      saleList: [],
      // 分配销售确定loading
      confirmLoadingSale: false,
      // 日期范围
      dateRange: [],
      superiorList: [],
      // 查询参数
      itemInfo: null,
      itemJson: null,
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination", //与slot="pagination"处 class 一致
          clickable: true, //轮播按钮支持点击
        },
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
      },
      judgeStatus: 1,
    };
  },
  created() {
    this.itemInfo = JSON.parse(localStorage.getItem("addItemInfo"));
    console.log(1111111);
    console.log(this.itemInfo);
  },
  mounted() {
    this.getItemPreview();
    this.$nextTick(() => {
    });
  },
  filters: {},
  watch: {},
  methods: {
    getItemPreview() {
      if (this.itemInfo.type != "look" && this.itemInfo.type != "lookElse") {
        getItemPreview({
          activityId: this.itemInfo.activityId,
          itemId: this.itemInfo.itemId,
          regId: this.itemInfo.regId,
          mediaId: this.itemInfo.mediaId,
          ownershipId: this.itemInfo.dataOwnership,
          userName: this.$store.getters.name,
          byteDanceItemType: this.itemInfo.byteDanceItemType,
        }).then((res) => {
          this.itemJson = res.itemJson;
          this.judgeStatus = res.judgeStatus;
        });
      } else {
        getItemDetailByItemId({
          itemId: this.itemInfo.itemId,
          mediaId: this.itemInfo.mediaId,
          byteDanceItemType: this.itemInfo.byteDanceItemType
        }).then((res) => {
          this.itemJson = res.itemJson
            ? {
              ...res.itemJson,
              skuList: JSON.parse(res.itemJson.skuList),
              itemDescUrls: JSON.parse(res.itemJson.itemDescUrls),
              itemGalleryUrls: JSON.parse(res.itemJson.itemGalleryUrls),
            }
            : null;

          this.judgeStatus = res.judgeStatus;
        });
      }
    },
    addClose() {
      const obj = {
        path: "/goodsManagement/list",
      };
      localStorage.removeItem("addItemInfo");
      this.$tab.closeOpenPage(obj);
    },
    addNew() {
      this.loading = true;
      console.log(this.itemJson);
      if (this.judgeStatus == 1) {
        var params = {
          ...this.itemInfo,
          ...this.itemJson,
          itemGalleryUrls: this.itemJson.itemGalleryUrls
            ? JSON.stringify(this.itemJson.itemGalleryUrls)
            : null,
          itemDescUrls: this.itemJson.itemDescUrls
            ? JSON.stringify(this.itemJson.itemDescUrls)
            : null,
          skuList: this.itemJson.skuList ? JSON.stringify(this.itemJson.skuList) : null,
          sampleRequirement: this.itemInfo.sampleRequirement,
          sampleCount: this.itemInfo.sampleCount,
          noPostArea: this.itemInfo.noPostArea,
          partnerRecommendText: this.itemInfo.partnerRecommendText,
          ownershipId: this.itemInfo.dataOwnership,
          userName: this.$store.getters.name,
        };
      } else if (this.judgeStatus == 2) {
        var params = {
          ...this.itemInfo,
          ...this.itemJson,
          categoryName: this.itemJson.categoryName,
          activityItemStatus: 5,
          detailUrl: this.itemJson.detailUrl,
          categoryId: this.itemJson.categoryId,
          postArea: this.itemJson.postArea,
          deliveryRate: this.itemJson.deliveryRate,
          commissionRate: this.itemJson.commissionRate,
          ownershipId: this.itemInfo.dataOwnership,
          userName: this.$store.getters.name,
          itemGalleryUrls: this.itemJson.itemGalleryUrls
            ? JSON.stringify(this.itemJson.itemGalleryUrls)
            : null,
          itemDescUrls: this.itemJson.itemDescUrls
            ? JSON.stringify(this.itemJson.itemDescUrls)
            : null,
          skuList: this.itemJson.skuList ? JSON.stringify(this.itemJson.skuList) : null,
        };
      }

      if (this.itemInfo.type != "look") {
        params.userId = this.$store.getters.userId;
        params.userName = this.$store.getters.name;
        insertItem(params)
          .then((res) => {
            this.loading = false;
            const obj = {
              path: "/goodsManagement/list",
            };
            localStorage.removeItem("addItemInfo");
            this.$tab.closeOpenPage(obj);
            this.$message.success("新增成功");
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error(err);
          });
      } else {
        editItem(params)
          .then((res) => {
            this.loading = false;
            const obj = {
              path: "/goodsManagement/list",
            };
            localStorage.removeItem("addItemInfo");
            this.$tab.closeOpenPage(obj);
            this.$message.success("修改成功");
          })
          .catch((err) => {
            this.loading = false;
            this.$message.error(err);
          });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.entire-line {
  width: 100%;

  ::v-deep .el-form-item__content {
    width: 60%;
  }
}

::v-deep .el-form-item__label {
  white-space: nowrap;
}

::v-deep a {
  color: #409eff;
  display: block;
  text-align: left;
}

.item-name-calss p {
  margin: 0;
  text-align: left;
}

.tableBox {
  width: 100%;
}

::v-deep .el-tabs__content {
  overflow: initial;
}

.main-top {
  margin-top: 24px;
}

.swiper {
  width: 100%;
  margin-top: 20px;

  & > > > .swiper-container {
    width: 100%;

    .swiper-slide {
      width: 100%;
      padding-bottom: 28.1%;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

    .swiper-pagination {
      .swiper-pagination-bullet-active {
        background-color: #f29b76;
      }
    }
  }

  .swiper-pagination-fraction,
  .swiper-pagination-custom,
  .swiper-container-horizontal > .swiper-pagination-bullets {
    display: none;
  }
}

::v-deep a {
  color: #409eff;
  display: block;
  text-align: left;
  line-height: 30px;
}

.item-name-calss p {
  margin: 0;
  text-align: left;
  line-height: 30px;
}

.tableBox {
  width: 100%;
}

.prefix {
  display: inline-block;
  width: 3px;
  height: 15px;
  background: rgb(104, 163, 253);
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.dh p {
  font-size: 14px;
}

.dh-data p {
  font-size: 16px;
}

.main-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
