<template>
  <div class="dec-modify-content">
    <div class="dec-flex-list" style="margin-top: 20px">
      <div class="d-right" @click="addGood">
        <a-button style="width:100%;">{{option.id?'更换':'添加'}}限时抢购活动</a-button>
      </div>
    </div>
    <div class="dec-flex-list" v-if="option.id">
      <div class="d-right" >
        已选择的活动：
         <strong style="marginLeft:5px;">
          {{option.activityName}}
        </strong>
      </div>
    </div>
    <div class="d-error" v-if="!option.id">请添加限时抢购活动</div>
    <div class="d-tips" style="font-size:14px;"><em class="tip">T</em>在实际的小程序页面将不展示结束了的活动</div>
    <div class="d-splitline"></div>

    <div style="padding-left: 8px;padding-top:10px">列表样式：<strong>{{selectedTemp.name}}</strong></div>
    <div class="dec-select-list">
      <div class="item" v-for="item in tempType" :key="item.type">
        <div class="box" @click="changeType(item)" :class="{selected: arg.listStyle == item.type}">
          <a-tooltip placement="bottom" :title="item.name" :color="'red'">
            <div class="img-temp">
              <img :src="decAxios.decImgDomain('', item.icon)" alt draggable="false" />
            </div>
          </a-tooltip>
        </div>
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">页面边距：</span>
      <div class="d-right">
        <a-slider @afterChange="refreshShow" v-model:value="arg.space" :min="0" :max="30" />
      </div>
      <div class="d-left" style="margin:0 0 0 6px; width:60px;">
        <a-input-number @change="refreshShow" v-model:value="arg.space" :min="0" :max="30" style="width:60px;"/>
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">商品间距：</span>
      <div class="d-right">
        <a-slider @afterChange="refreshShow" v-model:value="arg.lacuna" :min="0" :max="30" />
      </div>
      <div class="d-left" style="margin:0 0 0 6px; width:60px;">
        <a-input-number @change="refreshShow" v-model:value="arg.lacuna" :min="0" :max="30" style="width:60px;"/>
      </div>
    </div>
    <div class="d-splitline"></div>

    <div style="padding-left: 8px;padding-top:10px">商品样式</div>
    <div class="dec-border-box">
      <a-radio-group class="dec-radio2" v-model="arg.show.border">
        <a-radio style="width:35%;" value="">无边白底</a-radio>
        <a-radio style="width:35%;" value="shadow">卡片投影</a-radio>
        <a-radio style="width:35%;" value="border">描边白底</a-radio>
        <a-radio style="width:35%;" value="none">无边透明底</a-radio>
      </a-radio-group>
    </div>

    <div class="dec-flex-list side">
      <span class="d-left">商品框角
        <strong style="marginLeft:5px;">{{arg.show.radius ? '圆角' : '直角'}}</strong>
      </span>
      <div class="d-right" style="text-align:right">
        <a-radio-group v-model="arg.show.radius" button-style="solid">
          <a-radio-button value="">直角</a-radio-button>
          <a-radio-button value="yes">圆角</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left">图片比例
        <strong style="marginLeft:5px;">{{arg.show.ratio}}</strong>
      </span>
      <div class="d-right" style="text-align:right">
        <a-radio-group @change="refreshShow" v-model="arg.show.ratio" button-style="solid">
          <a-radio-button v-if="arg.listStyle != 'list'" value="3-2">3:2</a-radio-button>
          <a-radio-button value="1-1">1:1</a-radio-button>
          <a-radio-button v-if="arg.listStyle != 'list'" value="3-4">3:4</a-radio-button>
          <a-radio-button v-if="arg.listStyle != 'list'" value="16-9">16:9</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <!-- <div class="dec-flex-list side">
      <span class="d-left">文本样式
        <strong style="marginLeft:5px;">{{arg.show.fontWeight == 'bold' ? '加粗体' : '常规'}}</strong></span>
      <div class="d-right" style="text-align:right">
        <a-radio-group v-model="arg.show.fontWeight" button-style="solid">
          <a-radio-button value="">常规</a-radio-button>
          <a-radio-button value="bold">加粗体</a-radio-button>
        </a-radio-group>
      </div>
    </div> -->
    <div class="d-splitline"></div>
    <div class="dec-flex-list side">
      <span class="d-left">商品描述
        <strong style="marginLeft:5px;">
          {{arg.show.title ? '显示' : '不显示'}}
        </strong>
      </span>
      <div class="d-right" style="text-align:right">
        <a-switch v-model="arg.show.desc" checked-children="开" un-checked-children="关"/>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left">商品价格
        <strong style="marginLeft:5px;">
          {{arg.show.title ? '显示' : '不显示'}}
        </strong>
      </span>
      <div class="d-right" style="text-align:right">
        <a-switch v-model="arg.show.price" checked-children="开" un-checked-children="关"/>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left">市场价
        <strong style="marginLeft:5px;">
          {{arg.show.origin ? '显示' : '不显示'}}
        </strong>
      </span>
      <div class="d-right" style="text-align:right">
        <a-switch @change="showPriceChange" v-model="arg.show.origin" checked-children="开" un-checked-children="关"/>
      </div>
    </div>
    <!-- <div class="dec-flex-list side" v-if="!_hide.includes('stock')">
      <span class="d-left">剩余库存
        <strong style="marginLeft:5px;">
          {{arg.show.stock ? '显示' : '不显示'}}
        </strong>
      </span>
      <div class="d-right" style="text-align:right">
        <a-switch v-model="arg.show.stock" checked-children="开" un-checked-children="关"/>
      </div>
    </div> -->
    <!-- 活动选择弹出窗 -->
    <table-modal :multiple="false" ref="modalRef"/>
  </div>
</template>
<script>
// 引入拼团活动弹窗
import tableModal from '../../../modal/tableModal'
export default {
  components: {
    tableModal
  },
  props: ['tab', 'checked'],
  inject: ['decImgDomain', 'decAxios'],
  data() {
    return {
      arg:null,
      _hide: [],
      show: null,
      option: {}, // 选中的列表id集
      selected: {},
      dataNum: null,
      selectedTemp: {},
      tempType:[
        {
          type:'one',
          name:'大图模式',
          icon:'layout1.png'
        },{
          type:'two',
          name:'一行两列',
          icon:'layout2.png'
        },{
          type:'three',
          name:'一行三列',
          icon:'layout3.png'
        },
        {
          type:'list',
          name:'列表',
          icon:'layout1.png'
        },
        {
          type:'scroll',
          name:'水平滚动',
          icon:'layout3.png'
        },
      ]
    }
  },
  created() {
    this.arg = this.tab.arg
    this.option = this.arg.id || {}
    this.show = this.arg.show
    this._hide = this.show._hide || []
    this.dataNum = this.arg.dataNum
  },
  methods: {
    addGood() {
      this.$refs.modalRef.show({moulder: 'goodDiscount'})
      this.$refs.modalRef.$once('promise',(res)=>{
        if(res.success){
          this.option = res.rows[0]
          this.refreshShow()
        }
      })
    },
    changeType(item){
      this.arg.listStyle = item.type
      if(['scroll','three'].includes(item.type)){
        this.arg.show.shop = '1'
      }
      this.refreshShow()
    },
    showPriceChange(){
      if(!this.show.price){
        this.show.origin = false
      }
    },
    refreshShow(){
      this.arg.id = this.option
      this.tab.refresh = !this.tab.refresh
    }
  }
}
</script>
