<template>
  <div class="dec-modify-content">
    <div class="dec-flex-list side" style="margin-bottom: 0">
      <span class="d-left">编辑公告</span>
    </div>
    <a-textarea
      style="width: 100%"
      v-model="title"
      placeholder="请输入公告内容"
      :auto-size="{ minRows: 3, maxRows: 5 }"
      @blur="titleChange"
    />
    <span class="d-error" v-if="!arg.title">请填写公告内容</span>
    <div class="d-splitline" style="margin-top: 20px"></div>

    <div class="dec-flex-list side">
      <span class="d-left">公告样式</span>
      <div class="d-right">
        <a-radio-group size="small" v-model="arg.styleArg" button-style="solid">
          <a-radio-button :value="'static'">静态</a-radio-button>
          <a-radio-button :value="'scroll'">滚动</a-radio-button>
        </a-radio-group>
      </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="back1"
            :color="arg.color"
            @change="ensure"
          ></color-picker>
        </div>
      </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="back2"
            :color="arg.bgColor"
            @change="ensure2"
          ></color-picker>
        </div>
      </div>
    </div>
    <div class="dec-border-box" style="margin-bottom: 30px">
      <div class="dec-flex-list side" style="margin: 0">
        <span class="d-left">添加公告图标</span>
        <div class="d-right">
          <div class="dec-float-box">
            <template v-if="arg.leftIcon">
              <div class="float-item" style="float: right">
                <a-icon
                  type="close-circle"
                  class="ic-close"
                  @click="arg.leftIcon = ''"
                />
                <img :src="decImgDomain(arg.leftIcon)" alt draggable="false" />
              </div>
            </template>
            <div
              class="float-item ic-plus"
              style="float: right"
              @click="selectImg"
              v-else
            >
              <a-icon type="plus" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-10">
      <div class="d-tips"><em class="tip">T</em>公告图标高度设定为26的倍数</div>
      <div class="d-tips">
        <em class="tip">T</em>不选公告图标则为系统默认图标
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import colorPicker from "../../../modal/colorPicker";
export default {
  props: ["tab", "checked"],
  inject: ["decImgDomain"],
  components: {
    colorPicker,
  },
  data() {
    return {
      arg: null,
      title: "",
      back1: "",
      back2: "",
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.title = this.arg.title;
    if (!this.arg.color) {
      this.arg.color = "#dddddd";
    }
    if (!this.arg.bgColor) {
      this.arg.color = "#FFF5E7";
    }
    this.back1 = this.arg.color;
    this.back2 = this.arg.bgColor;
  },
  methods: {
    selectImg() {
      Vue.prototype.$decImgMdRef.show("shopNotice", "72 * 72");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg.leftIcon = res.fileUrl;
        }
      });
    },
    titleChange() {
      this.arg.title = this.title;
      this.$emit("event");
    },
    ensure(val) {
      this.arg.color = val;
    },
    ensure2(val) {
      this.arg.bgColor = val;
    },
  },
};
</script>
