<template>
  <div class="dec-modify-content">
    <div class="dec-flex-list middle">
      <span class="d-left">页面名称：</span>
      <div class="d-right">
        <a-input v-model="tab.pageName" @change="nameChange" placeholder="请输入标题" />
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">页面描述：</span>
      <div class="d-right">
        <a-textarea v-model="tab.pageDesc" @change="descChange" placeholder="用户通过微信分享给朋友时，会自动显示页面描述" :auto-size="{ minRows: 2, maxRows: 4 }" />
      </div>
    </div>
    <div class="d-splitline"></div>
    <div class="dec-flex-list middle">
      <span class="d-left">背景颜色：</span>
      <div class="d-right">
        <a-checkbox @change="bgColorChange('')" :checked="tab.bgColor == ''">默认</a-checkbox>
        <a-checkbox @change="bgColorChange('1')" :checked="tab.bgColor != ''">自定义</a-checkbox>
      </div>
    </div>
    <div class="dec-flex-list middle" v-if="!!tab.bgColor">
      <span class="d-left">颜色设定：</span>
      <div class="d-right">
        <color-picker :color="tab.bgColor" @change="ensure" />
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">背景图片：</span>
      <div class="d-right">
        <div class="dec-float-box">
          <template v-if="tab.bgImg">
            <div class="float-item">
              <a-icon type="close-circle" class="ic-close" @click="tab.bgImg = ''" />
              <img :src="decImgDomain(tab.bgImg)" alt draggable="false" />
            </div>
          </template>
          <div class="float-item ic-plus" @click="addGood" v-else>
            <a-icon type="plus" />
          </div>
        </div>
      </div>
    </div>
    <div v-if="!!tab.bgImg" class="dec-flex-list middle">
      <span class="d-left">图片占宽比：</span>
      <div class="d-right">
        <a-input-number v-model:value="tab.bgImgW" :min="0" :max="100" :precision="1" style="width: 80px" />
        &nbsp;%
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">图片平铺：</span>
      <div class="d-right">
        <a-checkbox :disabled="!tab.bgImg" v-model:checked="tab.repeat"></a-checkbox>
      </div>
    </div>
    <!-- <div class="dec-flex-list middle">
      <span class="d-left">顶部固定：</span>
      <div class="d-right">
        <a-checkbox :disabled="!tab.bgImg" v-model:checked="tab.fix"></a-checkbox>
      </div>
    </div> -->
  </div>
</template>
<script>
import Vue from 'vue'
import colorPicker from '../modal/colorPicker'
export default {
  props: ['tab'],
  inject: ['decImgDomain'],
  components: {
    colorPicker,
  },
  methods: {
    ensure(val) {
      this.tab.bgColor = val
    },
    bgColorChange(val) {
      if (val == '') {
        this.tab.bgColor = ''
      } else {
        this.tab.bgColor = 'transparent'
      }
    },
    addGood() {
      Vue.prototype.$decImgMdRef.show('pageSet', '48 * 48')
      Vue.prototype.$decImgMdRef.$once('promise', (res) => {
        if (res.success) {
          this.tab.bgImg = res.fileUrl
        }
      })
    },
    nameChange() {
      const str = this.tab.pageName
      if (str.length > 14) {
        this.tab.pageName = str.substring(0, 14)
      }
    },
    descChange() {
      const str = this.tab.pageDesc
      if (str.length > 30) {
        this.tab.pageDesc = str.substring(0, 30)
      }
    },
  },
}
</script>
