<template>
  <div class="dec-modify-content dec-set-title">
    <div class="dec-flex-list side" style="margin-bottom: 10px">
      <span class="d-left big">编辑标题</span>
    </div>
    <div>
      <a-input
        style="width: 100%"
        v-model="arg.title"
        placeholder="点击编辑『标题』"
      ></a-input>
      <span class="d-error" v-if="arg.title === ''">标题不能为空</span>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left big">文本样式</span>
      <div class="d-right">
        <a-radio-group v-model="arg.titleStyle" button-style="solid">
          <a-radio-button :value="'left'">居左</a-radio-button>
          <a-radio-button :value="'center'">中间</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="dec-flex-list side">
      <span class="d-left big">更多按钮</span>
      <div class="d-right">
        <a-radio-group
          v-model="arg.more"
          @change="clearLink"
          button-style="solid"
        >
          <a-radio-button :value="'yes'">是</a-radio-button>
          <a-radio-button :value="'no'">否</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div
      class="dec-flex-list side"
      style="margin-bottom: 10px"
      v-if="arg.more === 'yes'"
    >
      <span class="d-left big"> 链接 </span>
      <div class="d-right">
        <a-button
          class="linkTarget"
          @click="selectLink($event, arg)"
          style="width: 300px"
        >
          <a class="dec-link-name" style="width: 220px">{{
            getLinkName(arg.linkArg)
          }}</a>
        </a-button>
      </div>
    </div>
    <div class="d-error" v-if="arg.more == 'yes' && $isEmptyObj(arg.linkArg)">
      请选择链接
    </div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  inject: ["$isEmptyObj"],
  props: ["tab", "checked"],
  data() {
    return {
      arg: null,
    };
  },
  created() {
    // 获取下拉框的数据集
    this.arg = this.tab.arg;
  },
  methods: {
    getLinkName(item) {
      console.log(item, "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;
        }
      });
    },
    clearLink() {
      this.arg.linkArg = {};
    },
  },
};
</script>
