<template>
  <div class="dec-modify-content set-goodlist" v-if="!loading">
    <div class="dec-flex-list side" style="margin-bottom: 10px">
      <span class="d-left big">加载方式</span>
      <div class="d-right">
        <a-radio-group
          v-model="arg.styleArg"
          @change="styleArgChange"
          button-style="solid"
        >
          <a-radio-button :value="'fix'">手动</a-radio-button>
          <a-radio-button :value="'api'" v-if="!arg.onlyFix"
            >自动</a-radio-button
          >
        </a-radio-group>
      </div>
    </div>
    <template v-if="'fix'.indexOf(arg.styleArg) > -1">
      <div class="dec-border-box" v-if="manageData.length > 0">
        <div class="dec-float-box">
          <div class="float-item" v-for="(item, index) in showIds" :key="index">
            <a-icon
              type="close-circle"
              class="ic-close"
              @click="delAction(index)"
            />
            <img :src="decImgDomain(item.productImg)" alt draggable="false" />
          </div>
          <div v-if="more" class="float-item more">...</div>
          <div class="float-item manage" @click="manageGoods">维护</div>
        </div>
      </div>
      <div class="d-upload" @click="addGood">
        <a-icon type="plus" />添加商品
        <div
          v-if="!arg._hide.includes('import') && arg.import"
          class="import"
          @click.stop="() => {}"
        >
          <a-button @click.stop="importVisible = true" type="primary"
            >批量</a-button
          >
        </div>
      </div>
      <div class="dec-flex-list side" style="margin: 0">
        <span class="d-left">
          <div v-if="manageData.length === 0" class="d-error">请选择商品</div>
        </span>
      </div>
      <template v-if="arg.autoLoad && !arg._hide.includes('autoLoad')">
        <div class="dec-flex-list side" style="margin-bottom: 10px">
          <span class="d-left">在小程序中允许滚到页底后自动加载接口数据</span>
          <div class="d-right">
            <a-checkbox
              :checked="arg.autoLoad == 'Y'"
              @change="autoLoadChange"
            />
          </div>
        </div>
      </template>
      <template v-if="!arg._hide.includes('static')">
        <div class="dec-flex-list side" style="margin-bottom: 10px">
          <span class="d-left">是否保存成静态数据</span>
          <div class="d-right">
            <a-checkbox :checked="arg.static" @change="staticChange" />
          </div>
        </div>
      </template>
    </template>
    <template v-else>
      <template v-if="arg.autoLoad && !arg._hide.includes('autoLoad')">
        <div class="dec-flex-list side" style="margin-bottom: 10px">
          <span class="d-left">是否滚到页底后自动加载数据</span>
          <div class="d-right">
            <a-checkbox
              :checked="arg.autoLoad == 'Y'"
              @change="autoLoadChange"
            />
          </div>
        </div>
      </template>
      <div
        class="dec-flex-list middle"
        v-if="!arg.autoLoad || arg.autoLoad == 'N'"
      >
        <span class="d-left">显示个数：</span>
        <div class="d-right" style="width: 100px">
          <a-input-number
            v-model="dataNum"
            :min="2"
            :max="30"
            @blur="dataNumChange"
          />
        </div>
      </div>
    </template>
    <div class="d-splitline"></div>
    <div class="dec-flex-list side" style="margin-bottom: 0">
      <span class="d-left big">列表样式</span>
    </div>
    <div class="dec-border-box">
      <a-radio-group
        class="dec-radio"
        v-model="arg.listStyle"
        @change="listStyleChange"
      >
        <a-radio :value="'big'">大图</a-radio>
        <a-radio :value="'double'">双图</a-radio>
        <a-radio :value="'three'">三图</a-radio>
        <a-radio :value="'list-x'">列表</a-radio>
        <a-radio :value="'join'">拼图</a-radio>
        <a-radio :value="'concat'">组图</a-radio>
        <a-radio :value="'img'">字下图</a-radio>
        <a-radio :value="'scroll-two'">滚二图</a-radio>
        <a-radio :value="'scroll-three'">滚三图</a-radio>
      </a-radio-group>
    </div>
    <template v-if="['two', 'double', 'three'].includes(arg.listStyle)">
      <div class="dec-flex-list side" style="margin-bottom: 10px">
        <span class="d-left big">列表布局</span>
        <div class="d-right">
          <a-radio-group v-model="arg.layout" button-style="solid">
            <a-radio-button :value="'fluid'">流式</a-radio-button>
            <a-radio-button :value="''">对齐</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="d-tips">对齐布局具有等高的商品框，会出现空白占位。</div>
      <div class="d-tips">
        流式布局根据商品内容不同高度就会不同，不会出现空白占位。
      </div>
    </template>
    <!-- <div class="dec-flex-list side" style="margin-bottom: 0">
      <span class="d-left big">商品样式</span>
    </div>
    <div class="dec-border-box">
      <a-radio-group class="dec-radio2" v-model="arg.show.border">
        <a-radio style="width:40%;" value="">卡片投影</a-radio>
        <a-radio style="width:40%;" value="none">无边透明底</a-radio>
      </a-radio-group>
    </div> -->
    <div class="dec-flex-list side" style="margin-bottom: 0">
      <span class="d-left big">商品设定</span>
    </div>
    <div class="dec-border-box" style="padding: 0 10px">
      <div class="dec-flex-list side">
        <span class="d-left pdl10">是否圆角</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.radius"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
      <div class="dec-flex-list side">
        <span class="d-left pdl10">商品名称</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.name"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
      <div
        class="dec-flex-list side"
        v-if="!['join', 'scroll-two'].includes(arg.listStyle)"
      >
        <span class="d-left pdl10">商品价格</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.price"
            checked-children="开"
            un-checked-children="关"
            @change="showPriceChange"
          />
        </div>
      </div>
      <div
        class="dec-flex-list side"
        v-if="!['join', 'scroll-two'].includes(arg.listStyle)"
      >
        <span class="d-left pdl10">价格原价</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.origin"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
      <div class="dec-flex-list side" v-if="hasFontStyle">
        <span class="d-left pdl10">字体风格</span>
        <div class="d-right">
          <a-radio-group
            v-model:value="show.nameStyle"
            button-style="solid"
            size="small"
          >
            <a-radio-button value="">白色</a-radio-button>
            <a-radio-button value="black">黑色</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div
        class="dec-flex-list side"
        v-if="
          !show._hide.includes('desc') &&
          !['img', 'join', 'scroll-two'].includes(arg.listStyle)
        "
      >
        <span class="d-left pdl10">商品简介</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.desc"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
      <div
        class="dec-flex-list side"
        v-if="
          !show._hide.includes('shopName') &&
          !['img', 'join', 'scroll-two', 'scroll-three'].includes(arg.listStyle)
        "
      >
        <span class="d-left pdl10">所属店铺</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.shopName"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
      <div
        class="dec-flex-list side"
        v-if="
          !show._hide.includes('postType') &&
          ['one', 'big', 'two', 'double'].includes(arg.listStyle)
        "
      >
        <span class="d-left pdl10">发货形式</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.postType"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
      <div
        class="dec-flex-list side"
        v-if="
          !show._hide.includes('reward') &&
          ['one', 'big', 'two', 'double', 'three'].includes(arg.listStyle)
        "
      >
        <span class="d-left pdl10">佣金显示</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.reward"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
    </div>
    <template v-if="!['img', 'join', 'scroll-two'].includes(arg.listStyle)">
      <div
        class="dec-flex-list side"
        v-if="!['img', 'scroll-two'].includes(arg.listStyle)"
      >
        <span class="d-left big">商品角标</span>
        <div class="d-right">
          <a-switch
            v-model:checked="show.mark"
            @change="markChange"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
      <div
        class="dec-border-box"
        v-if="
          show.mark && !['img', 'join', 'scroll-two'].includes(arg.listStyle)
        "
      >
        <a-radio-group class="dec-radio2" v-model="show.markStyle">
          <a-radio :value="'new1'">新品1</a-radio>
          <a-radio :value="'new2'">新品2</a-radio>
          <a-radio :value="'new3'">新品3</a-radio>
          <a-radio :value="'new4'">新品4</a-radio>
          <a-radio :value="'hot1'">热卖1</a-radio>
          <a-radio :value="'hot2'">热卖2</a-radio>
          <a-radio :value="'hot3'">热卖3</a-radio>
        </a-radio-group>
      </div>
      <div class="dec-flex-list side" v-if="hasShop">
        <span class="d-left big">购买按钮</span>
        <div class="d-right">
          <a-switch
            v-model="show.bug"
            @change="buyChange"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </div>
      <div
        class="dec-border-box"
        v-if="!show._hide.includes('bug') && show.bug"
      >
        <a-radio-group
          class="dec-radio2"
          v-model="show.bugStyle"
          @change="bugChange"
        >
          <a-radio :value="'plus'">plus填充</a-radio>
          <a-radio :value="'plus2'">plus描边</a-radio>
          <a-radio :value="'shop'">shop填充</a-radio>
          <a-radio :value="'shop2'">shop描边</a-radio>
          <a-radio :value="'shop3'">shop实圈</a-radio>
          <a-radio :value="'custom'">文字填充</a-radio>
          <a-radio :value="'custom2'">文字描边</a-radio>
        </a-radio-group>
        <div
          v-if="['custom', 'custom2'].includes(show.bugStyle)"
          style="margin-top: 10px"
        >
          <a-input
            style="width: 140px"
            placeholder="最多输入四个字"
            v-model="show.bugTxt"
            @change="bugTxtChange"
          />
        </div>
      </div>
      <div
        class="dec-flex-list side"
        v-if="['scroll-three'].includes(arg.listStyle)"
      >
        <span class="d-left big">是否自动轮播</span>
        <div class="d-right">
          <a-switch
            @change="isWheelSeeding"
            checked-children="开"
            v-model="arg.isWheelSeed"
            un-checked-children="关"
          />
        </div>
      </div>
    </template>

    <div style="height: 60px"></div>
    <div class="d-tips info">
      *小程序仅支持显示非分销的实物、虚拟、电子卡券商品
    </div>
    <!-- 商品选择弹出窗 -->
    <table-modal ref="modalRef" />
    <!-- 商品管理 -->
    <manage-modal
      v-if="manageVisible"
      :goods="manageData"
      @close="handlerManage"
    />
    <!-- 批量导入数据框 -->
    <a-modal
      v-model="importVisible"
      title="批量数据导入"
      @ok="importOk"
      @cancel="importCancel"
    >
      <a-textarea
        style="width: 100%"
        v-model="importValue"
        @blur="importBlur"
        placeholder="请复制需要导入的商品条形码，多个条码时以英文逗号隔开，支持从Excel中复制一整列的商品条形码。"
        :auto-size="{ minRows: 3, maxRows: 10 }"
      />
    </a-modal>
  </div>
</template>
<script>
import tableModal from "../../../modal/goodTableModal";
import manageModal from "../../../modal/manageModal";
export default {
  props: ["tab", "checked"],
  inject: ["decAxios", "decImgDomain", "judgeAutoLoad"],
  components: {
    tableModal,
    manageModal,
  },
  data() {
    return {
      loading: true,
      arg: null,
      show: {},
      _hide: [],
      more: false,
      manageData: [],
      manageVisible: false,
      importVisible: false,
      importValue: "",
    };
  },
  computed: {
    showIds() {
      let arr = [],
        len;
      const idLen = this.manageData.length;
      if (idLen > 5) {
        len = 4;
        this.more = true;
      } else {
        this.more = false;
        len = idLen;
      }
      for (let i = 0; i < len; i++) {
        arr.push(this.manageData[i]);
      }
      return arr;
    },
    hasShop() {
      return !["three"].includes(this.arg.listStyle);
    },
    hasFontStyle() {
      const hasFontStyle = ["img", "join", "concat", "scroll-two"].includes(
        this.arg.listStyle
      );
      !hasFontStyle && (this.show.nameStyle = "");
      return hasFontStyle;
    },
  },
  watch: {
    "tab.inited": function (val) {
      if (val) {
        this.loading = false;
        this.arg = this.tab.arg;
        this.show = this.arg.show;
        this._hide = JSON.parse(JSON.stringify(this.show._hide));
        this.dataNum = this.arg.dataNum;
        this.manageData = this.arg.ids.length > 0 ? this.tab.selected : [];
        // this.show.bug =  this.arg.bugStyle == 'plus'
      }
    },
  },
  created() {
    if (this.tab.inited) {
      this.loading = false;
      this.arg = this.tab.arg;
      this.show = this.arg.show;
      this._hide = this.show._hide;
      this.dataNum = this.arg.dataNum;
      // this.show.bug =  this.arg.bugStyle  == 'plus'
      this.manageData = this.arg.ids.length > 0 ? this.tab.selected : [];
    }
  },
  beforeDestroy() {
    this.tab.selected = [...this.manageData];
  },
  methods: {
    isWheelSeeding(e) {
      this.arg.isWheelSeed = e;
    },
    showPriceChange() {
      if (!this.show.price) {
        this.show.origin = false;
        this.show.origin = false;
        this.show.bug = false;
      }
    },
    bugChange() {
      if (["custom", "custom2"].includes(this.show.bugStyle)) {
        this.show.bugTxt = "购买";
      } else {
        this.show.bugTxt = "";
      }
    },
    styleArgChange() {
      this.manageData = [];
      this.refreshShow();
    },
    listStyleChange() {
      console.log(this.arg);
      let listStyle = this.arg.listStyle;
      let bugStyle = this.arg.bugStyle;
      this.arg.layout = "";
      this.show.shopName = false;
      this.show.postType = false;
      this.show.reward = false;
      this.show._hide = this._hide;
      // this.show.bug =  this.arg.bugStyle == 'plus'
      if (listStyle === "three") {
        this.show.bug = false;
      } else if (listStyle.indexOf("row-img") !== -1) {
        this.show.bug = false;
        this.show.mark = false;
      }
    },
    dataNumChange() {
      this.arg.dataNum = this.dataNum;
      this.refreshShow();
    },
    addGood() {
      this.$refs.modalRef.show({ moulder: "getGoodListTable" });
      this.$refs.modalRef.$once("promise", (res) => {
        if (res.success) {
          let arr = [];
          const selected = this.manageData.map((item) => item.id);
          res.rows.forEach((item) => {
            if (!selected.includes(item.id)) arr.push(item);
          });
          this.manageData = this.manageData.concat(arr);
          this.refreshShow();
        }
      });
    },
    manageGoods() {
      this.manageVisible = true;
    },
    handlerManage(arr) {
      this.manageVisible = false;
      if (arr) {
        this.manageData = arr;
        this.refreshShow();
      }
    },
    // 删除选项
    delAction(index) {
      this.manageData.splice(index, 1);
      this.refreshShow();
    },
    refreshShow() {
      this.arg.ids = this.arg.static
        ? this.manageData
        : this.manageData.map((item) => item.id);
      this.tab.refresh = !this.tab.refresh;
    },
    buyChange() {
      this.show.bugStyle = this.show.bug ? "plus" : "";
    },
    markChange() {
      this.show.markStyle = this.show.mark ? "new1" : "";
    },
    autoLoadChange(e) {
      const val = e.target.checked;
      if (this.judgeAutoLoad(this.tab.id, val)) {
        this.arg.autoLoad = val ? "Y" : "N";
      } else {
        this.arg.autoLoad = "N";
      }
      this.refreshShow();
    },
    staticChange() {
      this.arg.static = !this.arg.static;
      this.arg.ids = this.arg.static
        ? this.manageData
        : this.manageData.map((item) => item.id);
    },
    bugTxtChange() {
      let str = this.show.bugTxt;
      if (str.length > 4) {
        this.show.bugTxt = str.substring(0, 4);
      }
    },
    importCancel() {
      this.importVisible = false;
      this.importValue = "";
    },
    importBlur() {
      let importValue = this.importValue;
      if (importValue) {
        importValue = importValue.replace(/\r\n/g, ",");
        importValue = importValue.replace(/\n/g, ",");
        importValue = importValue.replace(/\s+/g, " ");
        importValue = importValue.replace(/ /g, "@");
        this.importValue = importValue;
      }
    },
    importOk() {
      this.importBlur();
      let importValue = this.importValue;
      importValue &&
        this.decAxios.getImportGoodList(importValue).then((res) => {
          if (res.code == "200") {
            let arr = [];
            this.importValue = "";
            this.importVisible = false;
            const result = res.result.records || res.result || [];
            const selected = this.manageData.map((item) => item.id);
            result.forEach((item) => {
              if (!selected.includes(item.id)) arr.push(item);
            });
            this.manageData = this.manageData.concat(arr);
            this.refreshShow();
          }
        });
    },
  },
};
</script>

