<style>
/*-----------------设置部分--------------*/
.diy-goods .diy-component-edit .diy-goods-label {
  width: 85px;
}

.diy-goods .diy-component-edit .cat-item {
  border: 1px solid #e2e2e2;
  margin-bottom: 5px;
  padding: 15px;
  max-width: 400px;
}

.diy-goods .diy-component-edit .goods-list {
  flex-wrap: wrap;
}

.diy-goods .diy-component-edit .goods-item,
.diy-goods .diy-component-edit .goods-add {
  width: 50px;
  height: 50px;
  position: relative;
  margin-right: 15px;
  margin-bottom: 15px;
}

.diy-goods .diy-component-edit .goods-add .el-button {
  width: 100%;
  height: 100%;
  border-radius: 0;
  padding: 0;
}

.diy-goods .diy-component-edit .goods-pic {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.diy-goods .diy-component-edit .goods-delete {
  position: absolute;
  left: calc(100% - 10px);
  top: -10px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0 0;
  visibility: hidden;
  z-index: 1;
}

.diy-goods .diy-component-edit .goods-item:hover .goods-delete {
  visibility: visible;
}

.diy-goods .diy-component-edit .cat-item-options {
  position: relative;
}

.diy-goods .diy-component-edit .cat-item-options .el-button {
  height: 25px;
  line-height: 25px;
  width: 25px;
  padding: 0;
  text-align: center;
  border: none;
  border-radius: 0;
  position: absolute;
  margin-left: 0;
  top: -16px;
  right: -40px;
}

/*-----------------预览部分--------------*/

.diy-goods .diy-component-preview .cat-list {
}

.diy-goods .diy-component-preview .cat-list-top {
}

.diy-goods .diy-component-preview .cat-list-left {
  width: 160px;
}

.diy-goods .diy-component-preview .cat-item {
  height: 104px;
  padding: 0 10px;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
}

.diy-goods .diy-component-preview .cat-list-left .cat-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.diy-goods .diy-component-preview .cat-item.active {
  color: #ff4544;
}

.diy-goods .diy-component-preview .cat-list-top .cat-item {
  margin: 0 20px;
}

.diy-goods .diy-component-preview .cat-list-top {
  overflow-x: auto;
}

.diy-goods .diy-component-preview .cat-list-top.cat-style-1 .cat-item {
  border-bottom: 4px solid transparent;
}

.diy-goods .diy-component-preview .cat-list-top.cat-style-2 .cat-name {
  background: #ff4544;
  color: #fff;
  border-radius: 100px;
  padding: 0 18px;
}

.diy-goods .diy-component-preview .cat-list-top .cat-item.active {
  border-bottom-color: #ff4544;
}

.diy-goods .diy-component-preview .cat-list-left .cat-item {
  border-left: 2px solid transparent;
}

.diy-goods .diy-component-preview .cat-list-left .cat-item.active {
  border-left-color: #ff4544;
}

.diy-goods .diy-component-preview .goods-list {
  padding: 11px;
}

.diy-goods .diy-component-preview .goods-item {
  padding: 11px;
}

.diy-goods .diy-component-preview .goods-pic {
  background-size: cover;
  background-position: center;
  width: 99.8%;
  height: 700px;
  background-color: #f6f6f6;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 10px 10px 0 0;
}

.diy-goods .diy-component-preview .goods-pic-3-2 {
  height: 471px;
}

.diy-goods .diy-component-preview .goods-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}

.diy-goods .diy-component-preview .goods-name-static {
  height: 94px;
}

.diy-goods .diy-component-preview .goods-name-staticList {
  white-space: normal !important;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 76px;
}

.diy-goods .diy-component-preview .goods-name-StaticName {
  margin-top: 40px;
  height: 32px;
}

.diy-goods .diy-component-preview .goods-price {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ff4544;
  line-height: 48px;
}

.diy-goods .diy-component-preview .goods-list-style--1 .goods-item,
.diy-goods .diy-component-preview .goods-list-style-1 .goods-item,
.diy-goods .diy-component-preview .goods-list-style-4 .goods-item {
  width: 100%;
}

.diy-goods .diy-component-preview .goods-list-style-2 .goods-item {
  width: 50%;
}

.diy-goods .diy-component-preview .goods-list-style-3 .goods-item {
  width: 33.333333%;
}

.diy-goods .diy-component-preview .goods-list-style-0 .goods-item {
  width: 249px;
}

.diy-goods .diy-component-preview .goods-list-style--1 .goods-pic {
  width: 200px;
  height: 200px;
  border-radius: 10px 0 0 10px;
}

.diy-goods .diy-component-preview .goods-list-style-4 .goods-pic {
  width: 250px;
  height: 170px;
  border-radius: 10px;
}

.diy-goods .diy-component-preview .goods-list-style-2 .goods-pic {
  height: 342px;
  border-radius: 10px 10px 0 0;
}

.diy-goods .diy-component-preview .goods-list-style-0 .goods-pic,
.diy-goods .diy-component-preview .goods-list-style-3 .goods-pic {
  height: 200px;
  border-radius: 10px 10px 0 0;
}

.diy-goods .diy-component-preview .goods-pic-fill-0 {
  background-size: contain;
}

.diy-goods .diy-component-preview .buy-btn {
  border-color: #ff4544;
  color: #ff4544;
  padding: 0 20px;
  height: 48px;
  line-height: 50px;
  font-size: 24px;
}

.diy-goods .diy-component-preview .buy-btn.el-button--primary {
  background-color: #ff4544;
  color: #fff;
}

.diy-goods .diy-component-preview .goods-tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  z-index: 1;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.diy-goods hr {
  border: none;
  height: 1px;
  background-color: #e2e2e2;
}

.diy-goods .diy-component-preview .goods-item .buy-btn.is-round {
  border-radius: 24px;
}

.diy-goods .goods-item.goods-cat-list {
  border-top: 1px solid #e2e2e2;
}

.diy-goods .goods-item.goods-cat-list:first-of-type {
  border-top: 0;
}

.diy-goods .cat-list {
  max-height: 500px;
  overflow: auto;
}

.Goodspic-box {
  width: 70px;
  height: 70px;
  border: 1px solid #ccc;
  cursor: pointer;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.Goodspic-box i {
  font-size: 22px;
  color: #909399;
}

.Goodspic-box .size-tip {
  line-height: 1.35;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  letter-spacing: -1px;
}

.goodsDialog .el-dialog__body {
  padding: 10px 20px;
}
.goods-priceScore {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 48px;
}
.goods-price .el-rate__icon {
  font-size: 30px;
}
.diy-goods .gd_Price {
  font-size: 12px !important;
}
/* ------------------瀑布流样式------------------------ */
.goods-item-pb {
  width: 330px;
  height: auto;
  background-color: #ffffff;
  border-radius: 30px;
}
.goods-pic-pb {
  /* background-size: cover;
  background-position: center; */
  width: 100%;
  height: auto;
  /* background-color: #f6f6f6;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 10px 10px 0 0; */
}
.creatManInfo {
  height: 90px;
  border-radius: 0px 0px 30px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 20px;
}
.creatManInfo-name {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111111;
}
</style>
<template>
  <div :class="{ active: goodData.isCked }">
    <div class="diy-component-options" v-if="goodData.isCked">
      <el-button
        type="primary"
        icon="el-icon-delete"
        style="left: -25px; top: 0px"
        @click="delPlugin()"
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-document-copy"
        style="left: -25px; top: 30px"
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-arrow-up"
        v-if="index > 0"
        @click="resetSord(0)"
        style="right: -25px; top: 0"
      ></el-button>
      <el-button
        type="primary"
        icon="el-icon-arrow-down"
        v-if="index != dataLeng - 1"
        @click="resetSord(1)"
        style="right: -25px; top: 30px"
      ></el-button>
    </div>
    <div class="diy-goods">
      <div class="diy-component-preview" :style="cListStyle">
        <div :flex="cMainFlex">
          <div
            :flex="cCatFlex"
            class="cat-list"
            v-if="
              data.showCat &&
              (data.catPosition == 'left' ||
                (data.catPosition == 'top' && cCatList.length > 1))
            "
            :class="
              'cat-list-' + data.catPosition + ' cat-style-' + data.catStyle
            "
          >
            <div
              class="cat-item"
              v-for="(item, index) in cCatList"
              :class="index === 0 ? 'active' : ''"
              :key="index"
              flex="main:center cross:center"
            >
              <div class="cat-name">{{ item.menuName }}</div>
            </div>
          </div>
          <div class="goods-list" :class="'goods-list-style-' + data.listStyle">
            <div v-for="(cat, catIndex) in cCatList" :key="catIndex">
              <div
                v-if="data.catPosition === 'left'"
                style="color: #666666; margin: 24px 11px; font-size: 24px"
              >
                {{ cat.menuName }}
              </div>
              <div :style="cGoodsListStyle" flex>
                <div
                  v-if="data.listStyle === 5"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                  "
                >
                  <div style="width: 100%">
                    <div
                      v-for="(goods, goodsIndex) in cCatGoodsList(
                        cat,
                        catIndex
                      )"
                      class="goods-item-pb"
                      :key="goodsIndex"
                      :class="
                        data.catPosition === 'left' ? 'goods-cat-list' : ''
                      "
                      v-if="goodsIndex % 2 === 0"
                    >
                      <div
                        style="display: inline-block"
                        :style="cGoodsItemWidth"
                      >
                        <div
                          :style="cGoodsItemStyle"
                          :flex="cGoodsItemFlex"
                          style="position: relative; margin-bottom: 30px"
                        >
                          <el-image
                            class="goods-pic-pb"
                            :src="goods.picUrl"
                            fit="cover"
                          ></el-image>
                          <div class="creatManInfo">
                            <div class="creatManInfo-name">
                              <el-image
                                style="
                                  width: 50px;
                                  height: 50px;
                                  border-radius: 50%;
                                  margin-right: 10px;
                                "
                                :src="goods.Photo"
                                fit="cover"
                              ></el-image>
                              {{ goods.CreateBy }}
                            </div>
                            <div class="creatManInfo-name">
                              <el-image
                                style="
                                  width: 26px;
                                  height: 28px;
                                  margin-right: 10px;
                                "
                                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weizan.png"
                                fit="cover"
                              ></el-image>
                              {{ goods.DianZanNum }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="width: 100%">
                    <div
                      v-for="(goods, goodsIndex) in cCatGoodsList(
                        cat,
                        catIndex
                      )"
                      class="goods-item-pb"
                      :key="goodsIndex"
                      :class="
                        data.catPosition === 'left' ? 'goods-cat-list' : ''
                      "
                      v-if="goodsIndex % 2 === 1"
                    >
                      <div
                        style="display: inline-block"
                        :style="cGoodsItemWidth"
                      >
                        <div
                          :style="cGoodsItemStyle"
                          :flex="cGoodsItemFlex"
                          style="position: relative"
                        >
                          <div>
                            <el-image
                              class="goods-pic-pb"
                              :class="
                                'goods-pic-' +
                                data.goodsCoverProportion +
                                ' goods-pic-fill-' +
                                data.fill
                              "
                              :src="goods.picUrl"
                              fit="cover"
                            ></el-image>
                            <div class="creatManInfo">
                              <div class="creatManInfo-name">
                                <el-image
                                  style="
                                    width: 50px;
                                    height: 50px;
                                    border-radius: 50%;
                                    margin-right: 10px;
                                  "
                                  :src="goods.Photo"
                                  fit="cover"
                                ></el-image>
                                {{ goods.CreateBy }}
                              </div>
                              <div class="creatManInfo-name">
                                <el-image
                                  style="
                                    width: 26px;
                                    height: 28px;
                                    margin-right: 10px;
                                  "
                                  src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weizan.png"
                                  fit="cover"
                                ></el-image>
                                {{ goods.DianZanNum }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <div
                    v-for="(goods, goodsIndex) in cCatGoodsList(cat, catIndex)"
                    class="goods-item"
                    :key="goodsIndex"
                    :class="data.catPosition === 'left' ? 'goods-cat-list' : ''"
                  >
                    <div style="display: inline-block" :style="cGoodsItemWidth">
                      <div
                        :style="cGoodsItemStyle"
                        :flex="cGoodsItemFlex"
                        style="position: relative"
                      >
                        <div
                          class="goods-pic"
                          :class="
                            'goods-pic-' +
                            data.goodsCoverProportion +
                            ' goods-pic-fill-' +
                            data.fill
                          "
                          :style="
                            'background-image: url(' +
                            getIconLink(goods.picUrl) +
                            ')'
                          "
                        >
                          <div
                            v-if="data.showGoodsTag"
                            class="goods-tag"
                            :style="
                              'background-image: url(' +
                              getIconLink(data.goodsTagPicUrl) +
                              ')'
                            "
                          ></div>
                        </div>
                        <div :style="cGoodsItemInfoStyle">
                          <div
                            class="goods-name"
                            :class="{
                              'goods-name-static': data.listStyle === -1,
                              'goods-name-staticList': data.listStyle === 4,
                            }"
                          >
                            <template v-if="data.showGoodsName">{{
                              goods.name
                            }}</template>
                          </div>
                          <div
                            flex="box:last"
                            :class="{
                              'goods-name-StaticName': data.listStyle === 4,
                            }"
                          >
                            <div class="goods-price">
                              <template
                                v-if="
                                  data.showGoodsPrice && data.listStyle != 4
                                "
                                >￥{{ goods.price }}</template
                              >
                              <template
                                v-if="data.showScore && data.listStyle == 4"
                              >
                                <el-rate
                                  v-model="ScoreStar"
                                  disabled
                                  show-score
                                  :colors="ScoreArr"
                                  :text-color="ScoreArr[0]"
                                  score-template="{value}分"
                                >
                                </el-rate>
                              </template>
                            </div>
                            <div>
                              <div
                                v-if="
                                  data.showGoodsPrice && data.listStyle == 4
                                "
                                style="color: #ff003f"
                              >
                                <span class="gd_Price">￥</span
                                >{{ goods.price }}
                              </div>
                              <template v-if="cShowBuyBtn">
                                <template v-if="data.buyBtn === 'cart'">
                                  <i
                                    style="font-size: 48px; color: #ff4544"
                                    class="el-icon-shopping-cart-1"
                                  ></i>
                                </template>
                                <template v-if="data.buyBtn === 'add'">
                                  <i
                                    style="font-size: 48px; color: #ff4544"
                                    class="el-icon-circle-plus-outline"
                                  ></i>
                                </template>
                                <template v-if="data.buyBtn === 'text'">
                                  <div
                                    :style="cButtonStyle"
                                    style="
                                      font-size: 24px;
                                      border: 1px solid;
                                      color: #ffffff;
                                    "
                                  >
                                    {{ data.buyBtnText }}
                                  </div>
                                </template>
                              </template>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="diy-component-edit" v-if="goodData.isCked">
        <el-form label-width="150px" @submit.native.prevent>
          <el-form-item label="显示分类">
            <el-switch
              v-model="data.showCat"
              @change="showCatChange"
              :active-value="true"
              :inactive-value="false"
            >
            </el-switch>
          </el-form-item>
          <template v-if="data.showCat">
            <el-form-item label="分类栏位置">
              <el-radio
                v-model="data.catPosition"
                @change="catPositionChange"
                label="top"
                >顶部</el-radio
              >
              <!-- <el-radio v-model="data.catPosition" label="left">左侧</el-radio> -->
              <div style="color: #909399; line-height: normal">
                只有一个分类时顶部不会显示分类栏
              </div>
            </el-form-item>
            <el-form-item label="分类样式" v-if="data.catPosition === 'top'">
              <el-radio v-model="data.catStyle" :label="1">样式1</el-radio>
              <!-- <el-radio v-model="data.catStyle" :label="2">样式2</el-radio> -->
            </el-form-item>
            <el-form-item label="分类列表">
              <div
                v-for="(cat, catIndex) in data.catList"
                class="cat-item"
                :key="catIndex"
              >
                <div class="cat-item-options">
                  <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="deleteCat(catIndex)"
                  ></el-button>
                </div>
                <div flex="box:first">
                  <div class="diy-goods-label">分类名称</div>
                  <div v-if="cat.isCustom === 0">{{ cat.name }}</div>
                  <el-input v-else v-model="cat.name" size="small"></el-input>
                </div>
                <div flex="box:first" v-if="cat.isCustom === 1">
                  <div class="diy-goods-label">帖子范围</div>
                  <div>
                    <el-radio-group
                      v-model="cat.range"
                      @change="summaryChange($event, cat)"
                    >
                      <el-radio :label="1">全部</el-radio>
                      <el-radio :label="2">关注</el-radio>
                      <el-radio :label="3">手动关联</el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div flex="box:first" v-if="cat.isCustom === 0">
                  <div class="diy-goods-label">菜单名称</div>
                  <div>
                    <el-input v-model="cat.menuName" size="small"></el-input>
                  </div>
                </div>
                <div flex="box:first" v-if="cat.isCustom === 0">
                  <div class="diy-goods-label">自定义帖子</div>
                  <div>
                    <el-switch
                      v-model="cat.staticGoods"
                      :active-value="true"
                      :inactive-value="false"
                    ></el-switch>
                  </div>
                </div>
                <!-- 系统分类 -->
                <div v-if="cat.isCustom === 0">
                  <div flex="box:first" v-if="!cat.staticGoods">
                    <div class="diy-goods-label">贴子数量</div>
                    <div>
                      <el-input
                        v-model.number="cat.goodsNum"
                        type="number"
                        min="1"
                        max="30"
                        size="small"
                        @change="catGoodsNumChange(catIndex)"
                      ></el-input>
                    </div>
                  </div>
                  <div flex="box:first" v-if="cat.staticGoods">
                    <div class="diy-goods-label">贴子列表</div>
                    <div>
                      <draggable
                        v-model="cat.goodsList"
                        class="goods-list"
                        style="display: flex"
                      >
                        <div
                          class="goods-item"
                          v-for="(goods, goodsIndex) in cat.goodsList"
                          :key="goodsIndex"
                        >
                          <el-tooltip
                            effect="dark"
                            content="移除商品"
                            placement="top"
                          >
                            <el-button
                              @click="deleteGoods(goodsIndex, catIndex)"
                              circle
                              class="goods-delete"
                              type="danger"
                              icon="el-icon-close"
                            ></el-button>
                          </el-tooltip>
                          <div
                            class="goods-pic"
                            :style="
                              'background-image:url(' +
                              getIconLink(goods.picUrl) +
                              ')'
                            "
                          ></div>
                        </div>
                      </draggable>
                      <div class="goods-add">
                        <el-button
                          @click="
                            showGoodsDialog(catIndex), (ckGoods = cat.goodsNum)
                          "
                          icon="el-icon-plus"
                        >
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 自定义分类 -->
                <div v-if="cat.isCustom === 1">
                  <div
                    flex="box:first"
                    v-if="cat.range === 1 || cat.range === 2"
                  >
                    <div class="diy-goods-label">贴子数量</div>
                    <div>
                      <el-input
                        v-model.number="cat.goodsNum"
                        type="number"
                        min="1"
                        max="30"
                        size="small"
                        @change="catGoodsNumChange(catIndex)"
                      ></el-input>
                    </div>
                  </div>
                  <div flex="box:first" v-if="cat.range === 3">
                    <div class="diy-goods-label">贴子列表</div>
                    <div>
                      <draggable
                        v-model="cat.goodsList"
                        class="goods-list"
                        style="display: flex"
                      >
                        <div
                          class="goods-item"
                          v-for="(goods, goodsIndex) in cat.goodsList"
                          :key="goodsIndex"
                        >
                          <el-tooltip
                            effect="dark"
                            content="移除商品"
                            placement="top"
                          >
                            <el-button
                              @click="deleteGoods(goodsIndex, catIndex)"
                              circle
                              class="goods-delete"
                              type="danger"
                              icon="el-icon-close"
                            ></el-button>
                          </el-tooltip>
                          <div
                            class="goods-pic"
                            :style="
                              'background-image:url(' +
                              getIconLink(goods.picUrl) +
                              ')'
                            "
                          ></div>
                        </div>
                      </draggable>
                      <div class="goods-add">
                        <el-button
                          @click="
                            showGoodsDialog(catIndex), (ckGoods = cat.goodsNum)
                          "
                          icon="el-icon-plus"
                        >
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <el-button size="small" @click="isFenlei = true"
                >添加系统分类</el-button
              >
              <el-button size="small" @click="customFenLei"
                >添加自定义分类</el-button
              >
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="贴子添加">
              <el-radio v-model="data.addActivityType" :label="0"
                >自动添加</el-radio
              >
              <el-radio v-model="data.addActivityType" :label="1"
                >手动添加</el-radio
              >
            </el-form-item>
            <el-form-item v-show="data.addActivityType == 0" label="贴子数量">
              <el-input
                size="small"
                v-model.number="data.activityLength"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item v-show="data.addActivityType == 1" label="贴子列表">
              <draggable
                v-model="data.list"
                class="goods-list"
                style="display: flex"
              >
                <div
                  class="goods-item"
                  v-for="(goods, goodsIndex) in data.list"
                  :key="goodsIndex"
                >
                  <el-tooltip effect="dark" content="移除商品" placement="top">
                    <el-button
                      @click="deleteGoods(goodsIndex, null)"
                      circle
                      class="goods-delete"
                      type="danger"
                      icon="el-icon-close"
                    ></el-button>
                  </el-tooltip>
                  <div
                    class="goods-pic"
                    :style="
                      'background-image:url(' + getIconLink(goods.picUrl) + ')'
                    "
                  ></div>
                </div>
              </draggable>
              <div class="goods-add">
                <el-button
                  size="small"
                  @click="showGoodsDialog(null)"
                  icon="el-icon-plus"
                ></el-button>
              </div>
            </el-form-item>
          </template>
          <hr />
          <el-form-item label="列表样式" v-if="data.catPosition === 'top'">
            <el-radio v-model="data.listStyle" :label="5">瀑布流模式</el-radio>
            <el-radio v-model="data.listStyle" :label="-1">卡片模式</el-radio>
          </el-form-item>
          <!-- <el-form-item label="列表样式" v-if="data.catPosition==='top'">
            <el-radio v-model="data.listStyle" :label="-1">列表模式</el-radio>
            <el-radio v-model="data.listStyle" :label="0">左右滑动</el-radio>
            <el-radio v-model="data.listStyle" :label="1">一行一个</el-radio>
            <el-radio v-model="data.listStyle" :label="2">一行两个</el-radio>
            <el-radio v-model="data.listStyle" :label="3">一行三个</el-radio>
            <el-radio v-model="data.listStyle" :label="4">新列表模式</el-radio>
          </el-form-item> -->
          <!-- <el-form-item label="商品封面图宽高比例" v-if="data.listStyle==1">
            <el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
            <el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
          </el-form-item>
          <el-form-item label="商品封面图填充">
            <el-radio v-model="data.fill" :label="1">填充</el-radio>
            <el-radio v-model="data.fill" :label="0">留白</el-radio>
          </el-form-item>
          <el-form-item label="商品样式">
            <el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
            <el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
            <el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
          </el-form-item>
          <el-form-item label="显示商品名称">
            <el-switch v-model="data.showGoodsName" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <el-form-item label="显示商品价格">
            <el-switch v-model="data.showGoodsPrice" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <el-form-item label="显示星级" v-if="data.listStyle==4">
            <el-switch v-model="data.showScore" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <el-form-item label="星星颜色" v-if="data.listStyle==4">
            <div class="input-color" flex="dir:left cross:center">
              <el-color-picker size="small" v-model="data.scoreColor"></el-color-picker>
              <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.scoreColor"></el-input>
            </div>
          </el-form-item>
          <el-form-item v-if="data.listStyle!==-1" label="文本样式">
            <el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
            <el-radio v-model="data.textStyle" :label="2">居中</el-radio>
          </el-form-item>
          <el-form-item label="显示购买按钮" v-if="data.textStyle !== 2">
            <el-switch v-model="data.showBuyBtn" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <el-form-item label="购买按钮样式" v-if="data.textStyle !== 2&&data.showBuyBtn">
            <el-radio v-model="data.buyBtn" label="cart">购物车</el-radio>
            <el-radio v-model="data.buyBtn" label="add">加号</el-radio>
            <el-radio v-if="data.listStyle!=3" v-model="data.buyBtn" label="text">文字</el-radio>
          </el-form-item>
          <el-form-item label="购买按钮文字样式" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
            <el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
            <el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
            <el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
            <el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
          </el-form-item>
          <el-form-item label="购买按钮颜色" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
            <el-color-picker v-model="data.buttonColor"></el-color-picker>
          </el-form-item>
          <el-form-item label="购买按钮文字" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
            <el-input maxlength="4" size="small" v-model="data.buyBtnText"></el-input>
          </el-form-item>
          <el-form-item label="显示商品角标">
            <el-switch v-model="data.showGoodsTag" :active-value="true" :inactive-value="false"></el-switch>
          </el-form-item>
          <el-form-item label="商品角标" v-if="data.showGoodsTag">
            <el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
              @change="goodsTagChange">
              {{tag.name}}
            </el-radio>
            <el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义</el-radio>
          </el-form-item>
          <el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag">
            <div flex="main:center cross:center" @click="choicImg=true" class="Goodspic-box"
              :style="{backgroundImage:'url('+getIconLink(data.goodsTagPicUrl)+')'}">
              <i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
              <div class="size-tip">64 × 64</div>
            </div>
          </el-form-item>-->
          <el-form-item label="背景颜色">
            <div class="input-color" flex="dir:left cross:center">
              <el-color-picker
                size="small"
                v-model="data.backgroundColor"
              ></el-color-picker>
              <el-input
                size="small"
                style="width: 80px; margin-right: 25px"
                v-model="data.backgroundColor"
              ></el-input>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 选择分类 -->
    <el-dialog title="选择分类" :visible.sync="isFenlei" width="800px">
      <ChoiceSystemFenlei ref="ChooseFenlei"></ChoiceSystemFenlei>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="quxiaoFenlei()">取 消</el-button>
        <el-button size="small" type="danger" @click="getChoiceFenlei()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 选择贴子 -->
    <el-dialog
      title="选择贴子"
      :visible.sync="isShowGoods"
      custom-class="goodsDialog"
    >
      <ChoicePosts ref="choiceGood"></ChoicePosts>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowGoods = false">取 消</el-button>
        <el-button size="small" type="danger" @click="getGoodsChoice()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import ChooseImg from "@/components/global/ChooseImg.vue";
import ChooseFenlei from "../../common/choiceFenlei.vue";
import choiceGood from "../../common/choiceGood.vue";
import ChoiceSystemFenlei from "../../common/choiceSystemFenlei.vue";
import ChoicePosts from "../../common/choicePosts.vue";

export default {
  props: ["goodData", "index", "dataLeng"],
  components: {
    draggable,
    ChooseImg,
    ChooseFenlei,
    choiceGood,
    ChoiceSystemFenlei,
    ChoicePosts,
  },
  data() {
    return {
      //可以选择的商品数
      ckGoods: 0,
      data: this.goodData.data,
      position: "center center",
      repeat: "no-repeat",
      choicImg: false,
      isFenlei: false,
      isShowGoods: false,
      ScoreStar: 5, //分数
      ScoreArr: [], //颜色数组
      //添加的下标
      comIndex: -1,
      goodsTags: [
        {
          name: "热销",
          picUrl: this.domainManager().ImageUrl + "/Static/goods-tag-rx.png",
        },
        {
          name: "新品",
          picUrl: this.domainManager().ImageUrl + "/Static/goods-tag-xp.png",
        },
        {
          name: "折扣",
          picUrl: this.domainManager().ImageUrl + "/Static/goods-tag-zk.png",
        },
        {
          name: "推荐",
          picUrl: this.domainManager().ImageUrl + "/Static/goods-tag-tj.png",
        },
      ],
      postsOptions: [
        {
          value: 1,
          label: "全部帖子",
        },
        {
          value: 2,
          label: "用户关注",
        },
        {
          value: 3,
          label: "手动关联",
        },
      ],
    };
  },
  created() {},
  methods: {
    //向父组件传值 并调用排序
    resetSord(IsUp) {
      this.$emit("getSord", this.index, IsUp);
    },
    //点击触发父组件删除
    delPlugin() {
      this.$emit("comDelPlugin", this.index);
    },
    cCatGoodsList(cat, catIndex) {
      const goodsList = cat.goodsList;
      let newList = [];
      if (this.data.catPosition == "top" && catIndex > 0) {
        newList = [];
      } else {
        if (goodsList && goodsList.length) {
          newList = goodsList;
        } else {
          const defaultGoodsItem = {
            id: 0,
            name: "商品名称",
            picUrl: "",
            price: "100.00",
          };
          newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
        }
      }
      return newList;
    },
    goodsTagChange(e) {
      this.data.goodsTagPicUrl = e;
      this.data.customizeGoodsTag = false;
    },
    catPositionChange(e) {
      if (e === "left") {
        this.data.listStyle = -1;
      }
    },
    customizeGoodsTagChange(e) {
      this.data.goodsTagPicUrl = "";
      this.data.customizeGoodsTag = true;
    },
    deleteCat(index) {
      this.data.catList.splice(index, 1);
    },
    showGoodsDialog(catIndex) {
      if (catIndex !== null) {
        this.comIndex = catIndex;
      } else {
        this.comIndex = null;
      }
      this.isShowGoods = true;
    },
    deleteGoods(goodsIndex, catIndex) {
      if (catIndex !== null) {
        this.data.catList[catIndex].goodsList.splice(goodsIndex, 1);
      } else {
        this.data.list.splice(goodsIndex, 1);
      }
    },
    listStyleChange(listStyle) {
      if (listStyle === -1 && this.data.textStyle === 2) {
        this.data.textStyle = 1;
      }
      if (this.data.textStyle === 2 && this.data.buyBtn === "text") {
        this.data.buyBtn = "cart";
      }
    },
    catGoodsNumChange(catIndex) {
      // if (this.data.catList[catIndex].goodsNum > 3) {
      //   this.data.catList[catIndex].goodsNum = 3;
      // }
      // if (this.data.catList[catIndex].goodsNum < 1) {
      //   this.data.catList[catIndex].goodsNum = 1;
      // }
    },
    showCatChange(value) {
      if (!value) {
        this.data.catPosition = "top";
      }
    },
    //选择图片
    SelectId(msg) {
      this.data.goodsTagPicUrl = msg.url;
      this.choicImg = false;
    },
    //选择商品分类
    getChoiceFenlei() {
      var ckedArr = this.$refs.ChooseFenlei.getChoicedFenlei();
      var myCatArray = [];
      if (ckedArr && ckedArr.length > 0) {
        ckedArr.forEach((item) => {
          myCatArray.push({
            isCustom: 0,
            goodsList: [],
            goodsNum: 1,
            id: item.id,
            menuName: item.menuName,
            name: item.name,
            range: 1,
            staticGoods: 1,
          });
        });
      }
      this.data.catList = this.data.catList.concat(myCatArray);
      this.isFenlei = false;
      this.$refs.ChooseFenlei.toggleSelection();
    },
    customFenLei() {
      let obj = {
        isCustom: 1,
        goodsList: [],
        goodsNum: 1,
        id: 0,
        menuName: "",
        name: "",
        range: 1,
        staticGoods: 1,
      };
      this.data.catList.push(obj);
    },
    //取消商品分类选择
    quxiaoFenlei() {
      this.isFenlei = false;
      this.$refs.ChooseFenlei.toggleSelection();
    },
    //选择商品
    getGoodsChoice() {
      var ckedArr = this.$refs.choiceGood.getChoicedGoods();
      var myArray = [];
      if (ckedArr && ckedArr.length > 0) {
        ckedArr.forEach((element) => {
          myArray.push({
            id: element.Id,
            name: element.ActivityTitle,
            picUrl: element.ImageList[0],
            CreateBy: element.UserName,
            DianZanNum: element.DianZanNum,
            Photo: element.Photo,
            userId: element.UserId,
          });
        });
      }
      if (this.comIndex !== null) {
        this.data.catList[this.comIndex].goodsList =
          this.data.catList[this.comIndex].goodsList.concat(myArray);
      } else {
        this.data.list = this.data.list.concat(myArray);
      }
      this.isShowGoods = false;
      this.$refs.choiceGood.toggleSelection();
    },
    //取消选择商品
    quxiaoGoods() {
      this.isShowGoods = false;
      this.$refs.choiceGood.toggleSelection();
    },
    summaryChange(e, cat) {
      if (e === 3) {
        cat.staticGoods = 1;
      } else {
        cat.staticGoods = 0;
      }
    },
  },
  computed: {
    cListStyle() {
      if (this.data.backgroundColor) {
        return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`;
      } else {
        return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`;
      }
    },
    cMainFlex() {
      if (this.data.catPosition === "left") {
        return "dir:left box:first";
      }
      if (this.data.catPosition === "top") {
        return "dir:top";
      }
    },
    cCatFlex() {
      if (this.data.catPosition === "left") {
        return "dir:top";
      }
      if (this.data.catPosition === "top") {
        return "dir:left";
      }
    },
    cCatList() {
      if (this.data.showCat) {
        if (this.data.catList && this.data.catList.length) {
          return this.data.catList;
        } else {
          const defaultCatItem = {
            id: 0,
            name: "分类名称",
            menuName: "分类名称",
            goodsList: [],
            goodsNum: 3,
          };
          return [defaultCatItem, defaultCatItem];
        }
      } else {
        return [
          {
            id: null,
            name: null,
            menuName: null,
            goodsList: this.data.list,
          },
        ];
      }
    },
    cCatStyle() {},
    cGoodsListStyle() {
      if (this.data.listStyle === 0) {
        return "flex-wrap: nowrap;overflow-x:auto;";
      } else {
        return "flex-wrap: wrap;";
      }
    },
    cGoodsItemFlex() {
      if (this.data.listStyle === -1 || this.data.listStyle === 4) {
        return "dir:left box:first cross:center";
      }
      return "dir:top";
    },
    cGoodsItemStyle() {
      let style;
      if (this.data.goodsStyle != 3) {
        if (this.data.listStyle === -1) {
          style =
            "border: 1px solid #e2e2e2;border-radius:10px;background:#fff;";
        } else {
          style =
            "border: 1px solid #e2e2e2;border-radius:10px;background:#fff;";
        }
      } else {
        return style;
      }
      if (this.data.goodsStyle === 2) {
        return style;
      } else if (this.data.goodsStyle === 1) {
        if (this.data.listStyle === -1) {
          return "border-radius:10px;background:#fff;";
        } else {
          return "border-radius:10px;background:#fff;";
        }
      } else {
        return "background:#fff;";
      }
    },
    cShowBuyBtn() {
      if (!this.data.showBuyBtn) {
        return false;
      }
      if (this.data.textStyle === 2 || this.data.listStyle === 0) {
        return false;
      }
      if (this.data.listStyle == 4) {
        return false;
      }
      return true;
    },
    cGoodsItemInfoStyle() {
      let style = "";
      if (this.data.textStyle === 2) {
        style += `text-align: center;`;
      }
      if (this.data.listStyle === -1 || this.data.listStyle === 4) {
        style += `height: 200px;padding: 20px 24px 20px 32px;`;
      } else {
        style += `padding:24px 24px;`;
      }
      return style;
    },
    cGoodsItemWidth() {
      if (this.data.listStyle === 0) {
        return "width: 200px;";
      }
      return "width: 100%;";
    },
    cButtonStyle() {
      let style = `background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:46px;padding:0 20px;`;
      if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
        style += `border-radius:999px;`;
      }
      if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
        style += `background:#fff;color:${this.data.buttonColor}`;
      }
      return style;
    },
  },
  mounted() {
    if (this.data.scoreColor) {
      this.ScoreArr.push(this.data.scoreColor);
      this.ScoreArr.push(this.data.scoreColor);
      this.ScoreArr.push(this.data.scoreColor);
    }
  },
  watch: {
    "data.scoreColor"(val) {
      this.ScoreArr = [];
      this.ScoreArr.push(val);
      this.ScoreArr.push(val);
      this.ScoreArr.push(val);
      this.$forceUpdate();
    },
    "data.listStyle"(val) {
      if (val == 4) {
        this.data.showBuyBtn = false;
      } else {
        this.data.showBuyBtn = true;
      }
    },
  },
};
</script>