<template>
  <div class="dec-modify-content">
    <div class="dec-flex-list side" style="margin-bottom: 0">
      <span class="d-left">显示样式：</span>
    </div>
    <div class="dec-border-box">
      <a-radio-group v-model="arg.styleArg">
        <a-radio :value="'type1'">样式一</a-radio>
        <a-radio :value="'type2'">样式二</a-radio>
        <a-radio :value="'type3'">样式三</a-radio>
        <a-radio :value="'type4'">样式四</a-radio>
      </a-radio-group>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">店铺名字</span>
      <div class="d-right pdr20">
        <a-input v-model="arg.shopName" placeholder="请输入店铺名称"></a-input>
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">个性签名</span>
      <div class="d-right pdr20">
        <a-textarea
          v-model="arg.intro"
          placeholder="请输入个性签名"
          :auto-size="{ minRows: 2, maxRows: 4 }"
        />
      </div>
    </div>
    <div class="dec-flex-list middle">
      <span class="d-left">店铺logo</span>
      <div class="d-right" style="width: 120px">
        <div class="dec-float-box">
          <template v-if="arg.logoImg">
            <div class="float-item">
              <a-icon
                type="close-circle"
                class="ic-close"
                @click="arg.logoImg = ''"
              />
              <img :src="decImgDomain(arg.logoImg)" alt draggable="false" />
            </div>
          </template>
          <div class="float-item ic-plus" @click="addGood" v-else>
            <a-icon type="plus" />
          </div>
        </div>
      </div>
      <div class="d-right">
        <div class="d-error" v-if="!arg.logoImg">请选择logo</div>
      </div>
    </div>
    <div @click="addGood2" style="margin: 10px 0">
      <a-button style="width: 100%">添加背景图片</a-button>
    </div>

    <div class="d-error" v-if="!arg.bgImg">请选择背景图片</div>
    <div v-else>
      <img
        style="width: 100%"
        :src="decImgDomain(arg.bgImg)"
        alt
        draggable="false"
      />
    </div>
    <div class="d-tips">背景图片建议尺寸：750x374 像素</div>
    <div class="d-tips">尺寸不匹配时，图片将被压缩或拉伸以铺满画面</div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  inject: ["decImgDomain"],
  props: ["tab", "checked"],
  data() {
    return {
      arg: null,
    };
  },
  created() {
    this.arg = this.tab.arg;
  },
  methods: {
    addGood() {
      Vue.prototype.$decImgMdRef.show("shopLogo", "100 * 100");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg.logoImg = res.fileUrl;
        }
      });
    },
    addGood2() {
      Vue.prototype.$decImgMdRef.show("shopFront", "750 * 374");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg.bgImg = res.fileUrl;
        }
      });
    },
  },
};
</script>
