<template>
  <div class="dec-modify-content dec-set-blank">
    <div @click="addGood" style="margin: 10px 0">
      <a-button style="width: 100%">{{
        arg.img ? "更换图片" : "添加图片"
      }}</a-button>
    </div>
    <div v-if="!arg.img" class="d-error">请添加图片</div>
    <div v-else>
      <img
        style="width: 100%"
        :src="decImgDomain(arg.img)"
        alt
        draggable="false"
      />
    </div>
    <div class="dec-flex-list side">
      <span class="d-left big">关联视频号设置</span>
      <div class="d-right">
        <a-switch v-model:checked="arg.IsRelevance" />
      </div>
    </div>
    <div class="dec-border-box" v-if="arg.IsRelevance">
      <a-radio-group
        class="dec-radio"
        v-model="arg.lsActivity"
        @change="listStyleChange"
      >
        <a-radio :value="'yes'">关联视频号</a-radio>
        <a-radio :value="'no'">不关联视频号</a-radio>
      </a-radio-group>
      <div class="dec-flex-list middle">
        <span class="d-left">视频号id</span>
        <div class="d-right" style="width: 240px" v-if="arg.lsActivity == 'no'">
          <a-input
            placeholder="finderUserName视频号id"
            v-model="arg.finderUserNameId"
            class="navTitle"
          ></a-input>
        </div>
        <div
          class="d-right"
          style="width: 240px"
          v-if="arg.lsActivity == 'yes'"
        >
          <a-select
            style="width: 100%"
            placeholder="finderUserName视频号id"
            v-model="arg.finderUserNameId"
          >
            <a-select-option
              v-for="item in options"
              :key="item.state"
              :value="item.state"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </div>
      </div>
      <div class="dec-flex-list middle">
        <span class="d-left">feedId</span>
        <div class="d-right" style="width: 240px">
          <a-input
            placeholder="feedId"
            v-model="arg.feedId"
            class="navTitle"
          ></a-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 引入图片选择组件
import Vue from "vue";
export default {
  inject: ["decImgDomain"],
  props: ["tab"],
  data() {
    return {
      arg: null,
      options: [
        {
          label: "丽日视频号",
          state: "1",
        },
        {
          label: "河源丽日视频号",
          state: "2",
        },
      ],
    };
  },
  created() {
    this.arg = this.tab.arg;
  },
  methods: {
    listStyleChange(e) {
      this.arg.lsActivity = e.target.value;
      this.arg.feedId = null;
      this.arg.finderUserNameId = null;
    },
    addGood() {
      Vue.prototype.$decImgMdRef.show("imageBlock", "375 * 125");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg.img = res.fileUrl;
        }
      });
    },
  },
};
</script>
<style scoped>
.d-left {
  width: 60px;
}
</style>
