<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.zoneName}}
        </strong>
      </div>
    </div>
    <div class="d-error" v-if="!option.id">请添加专区商品</div>
    <div class="d-splitline"></div>
    <div class="dec-flex-list middle">
      <span class="d-left">活动图大小</span>
      <div class="d-right">
        <a-slider v-model:value="arg.bgSize" :min="60" :max="100" />
      </div>
      <div class="d-left" style="margin:0 0 0 6px; width:90px;">
        <a-input-number v-model:value="arg.bgSize" :min="60" :max="100" style="width:60px;"/>%
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left">模块底色</span>
      <div class="d-right">
        <div style="float:right;margin-right:40px;">
          <color-picker :back="back" :color="arg.bgColor" @change="val=>arg.bgColor = val"></color-picker>
        </div>
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">模块圆角</span>
      <div class="d-right">
        <a-slider v-model:value="arg.radius" :min="0" :max="20" />
      </div>
      <div class="d-left" style="margin:0 0 0 6px; width:90px;">
        <a-input-number v-model:value="arg.radius" :min="0" :max="20" style="width:60px;"/>px
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">模块边距</span>
      <div class="d-right">
        <a-slider v-model:value="arg.space" :min="0" :max="30" />
      </div>
      <div class="d-left" style="margin:0 0 0 6px; width:90px;">
        <a-input-number v-model:value="arg.space" :min="0" :max="30" style="width:60px;"/>px
      </div>
    </div>
    <!-- 商品选择弹出窗 -->
    <table-modal :multiple="false" ref="modalRef"/>
  </div>
</template>

<script>
import tableModal from '../../../modal/tableModal'
import colorPicker from '../../../modal/colorPicker'
export default {
  props: ['tab'],
  components: {
    tableModal,
    colorPicker
  },
  data() {
    return {
      arg:null,
      option:'',
      back: '',
    }
  },
  created() {
    this.arg = this.tab.arg
    this.back = this.arg.bgColor
    this.option = this.arg.id || {}
  },
  methods: {
    addGood() {
      this.$refs.modalRef.show({moulder: 'goodSpecial'})
      this.$refs.modalRef.$once('promise',(res)=>{
        if(res.success){
          this.option = (res.rows || [])[0] || {}
          this.refreshShow()
        }
      })
    },
    refreshShow(){
      this.arg.id = this.option
      this.tab.refresh = !this.tab.refresh
    }
  }
}
</script>
