<template>
  <div class="dec-modify-content">
    <div class="dec-flex-list side">
      <span class="d-left">选择风格</span>
      <div class="d-right">
        <a-radio-group
          v-model="arg.styleArg"
          @change="styleArgChange"
          button-style="solid"
          size="small"
        >
          <a-radio-button value="ordinary">普通</a-radio-button>
          <a-radio-button value="top">顶部</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.outColor"
            @change="(val) => ensure(val, 'outColor')"
          ></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.inColor"
            @change="(val) => ensure(val, 'inColor')"
          ></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="back3"
            :color="arg.fontColor"
            @change="(val) => ensure(val, 'fontColor')"
          ></color-picker>
        </div>
      </div>
    </div>
    <template v-if="arg.styleArg == 'ordinary'">
      <div class="dec-flex-list side">
        <span class="d-left">
          显示边框
          <strong style="marginleft: 5px">{{
            arg.border ? "是" : "否"
          }}</strong>
        </span>
        <div class="d-right">
          <a-switch v-model:checked="arg.border" />
        </div>
      </div>
      <div class="dec-flex-list side">
        <span class="d-left">
          显示圆角
          <strong style="marginleft: 5px">{{
            arg.radius ? "是" : "否"
          }}</strong>
        </span>
        <div class="d-right">
          <a-switch v-model:checked="arg.radius" />
        </div>
      </div>
    </template>
    <template v-else>
      <div class="dec-flex-list side">
        <span class="d-left">左侧图标</span>
        <div class="d-right">
          <div class="dec-float-box">
            <template v-if="arg.rightImg">
              <div class="float-item" style="float: right">
                <a-icon
                  type="close-circle"
                  class="ic-close"
                  @click="arg.rightImg = ''"
                />
                <img :src="decImgDomain(arg.rightImg)" alt draggable="false" />
              </div>
            </template>
            <div
              class="float-item ic-plus"
              style="float: right"
              @click="addGood"
              v-else
            >
              <a-icon type="plus" />
            </div>
          </div>
        </div>
      </div>
      <div class="dec-flex-list side" style="margin-bottom: 10px">
        <span class="d-left">图标链接</span>
        <div class="d-right" style="width: 286px">
          <a-button
            class="linkTarget"
            @click="selectLink($event, arg)"
            style="width: 100%"
          >
            <a class="dec-link-name" style="width: 100%">{{
              getLinkName(arg.linkArg)
            }}</a>
          </a-button>
        </div>
      </div>
      <div
        class="d-error"
        style="text-align: right"
        v-if="$isEmptyObj(arg.linkArg)"
      >
        请选择链接
      </div>
    </template>
  </div>
</template>

<script>
import Vue from "vue";
import colorPicker from "../../../modal/colorPicker";
export default {
  components: {
    colorPicker,
  },
  inject: ["decImgDomain", "$isEmptyObj"],
  props: ["tab", "checked"],
  data() {
    return {
      arg: null,
      back1: "",
      back2: "",
      back3: "",
    };
  },
  created() {
    this.arg = this.tab.arg;
  },
  methods: {
    getLinkName(item) {
      if (!this.$isEmptyObj(item)) {
        return item.pathName + (item.argName ? `-${item.argName}` : "");
      } else {
        return "选择链接";
      }
    },
    //选取链接项时触发弹窗
    selectLink(e, target) {
      Vue.prototype.$decLinkBoxRef.show(e, "linkTarget");
      Vue.prototype.$decLinkBoxRef.$once("promise", (res) => {
        if (res.success) {
          target.linkArg = res;
        }
      });
    },
    styleArgChange() {
      const val = this.arg.styleArg;
      if (val === "top") {
        this.arg.outColor = "#FF6633";
        this.arg.inColor = "#E64514";
        this.arg.fontColor = "#FFFFFF";
        this.arg.radius = false;
        this.arg.border = false;
        this.back1 = "#FF6633";
        this.back2 = "#E64514";
        this.back3 = "#FFFFFF";
      } else {
        this.arg.outColor = "transparent";
        this.arg.inColor = "#FFFFFF";
        this.arg.fontColor = "#333333";
        this.arg.radius = false;
        this.arg.border = true;
        this.back1 = "transparent";
        this.back2 = "#FFFFFF";
        this.back3 = "#333333";
      }
    },
    ensure(val, key) {
      this.arg[key] = val;
    },
    addGood() {
      Vue.prototype.$decImgMdRef.show("shopSearch", "60 * 60");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg.rightImg = res.fileUrl;
        }
      });
    },
  },
};
</script>
