<template>
  <div class="dec-modify-content">
    <div class="dec-flex-list side" style="margin-bottom: 0">
      <span class="d-left big">显示风格</span>
      <div class="d-right">
        <a-radio-group
          v-model="arg.styleArg"
          @change="styleArgChange"
          button-style="solid"
        >
          <a-radio-button :value="'group'">分组</a-radio-button>
          <a-radio-button :value="'row'">滑动</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="dec-border-box">
      <div class="dec-flex-list middle">
        <span class="d-left"
          >{{ arg.styleArg == "row" ? "一行" : "一屏" }}显示：</span
        >
        <div class="d-right">
          <a-select
            v-model="arg.rowNum"
            @change="refreshShow"
            style="width: 100px"
          >
            <a-select-option :value="2">2个导航</a-select-option>
            <a-select-option :value="3">3个导航</a-select-option>
            <a-select-option :value="4">4个导航</a-select-option>
            <a-select-option :value="5">5个导航</a-select-option>
            <a-select-option :value="6">6个导航</a-select-option>
            <a-select-option :value="7">7个导航</a-select-option>
            <a-select-option :value="8">8个导航</a-select-option>
          </a-select>
        </div>
      </div>
      <div class="dec-flex-list middle">
        <span class="d-left">图标显示：</span>
        <div class="d-right">
          <a-radio-group v-model="arg.iconStyle">
            <a-radio :value="'top'">居上</a-radio>
            <a-radio :value="'left'">居左</a-radio>
            <a-radio :value="'no'">不显示</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="dec-flex-list middle" v-if="arg.iconStyle != 'no'">
        <span class="d-left">图标大小：</span>
        <div class="d-right">
          <a-slider v-model="arg.iconSize" :min="30" :max="80" />
        </div>
        <span class="d-left value-wrap">{{ arg.iconSize }}像素</span>
      </div>
      <div class="dec-flex-list middle">
        <span class="d-left">文字颜色：</span>
        <div class="d-right">
          <color-picker
            :color="arg.color"
            @change="(val) => (arg.color = val)"
            :reset="true"
          ></color-picker>
        </div>
      </div>
      <div class="dec-flex-list middle">
        <span class="d-left">背景颜色：</span>
        <div class="d-right">
          <color-picker
            :color="arg.bgColor"
            @change="(val) => (arg.bgColor = val)"
            :reset="true"
          ></color-picker>
        </div>
      </div>
      <div class="dec-flex-list middle">
        <span class="d-left">上下间距：</span>
        <div class="d-right">
          <a-slider v-model="arg.space" :min="10" :max="40" />
        </div>
        <span class="d-left value-wrap">{{ arg.space }}像素</span>
      </div>
    </div>
    <div class="dec-flex-list side" style="margin-bottom: 0">
      <span class="d-left big">导航内容</span>
      <div class="d-right">
        共<em style="padding: 0 4px">{{ ids.length }}</em
        >个
      </div>
    </div>
    <!-- 添加导航 -->
    <div class="dec-border-box" v-for="(item, index) in ids" :key="index">
      <a-icon type="close-circle" class="ic-close" @click="delNav(index)" />
      <div class="dec-flex-list" style="margin: 0">
        <div
          class="d-left"
          @click="selectImg(item)"
          style="width: 64px; padding-top: 10px"
        >
          <div class="img-wrap">
            <img
              class="custom-img"
              :src="decAxios.decImgDomain(item.img, 'img-list.png')"
              alt
            />
            <span class="img-select">重新选择</span>
          </div>
          <div></div>
        </div>
        <div class="d-right">
          <div class="dec-flex-list middle">
            <span class="d-left">文字：</span>
            <div class="d-right">
              <a-input
                v-model="item.title"
                placeholder="我是导航"
                class="navTitle"
              ></a-input>
            </div>
          </div>
          <div class="dec-flex-list middle">
            <span class="d-left">链接：</span>
            <div class="d-right" style="width: 200px">
              <a-button
                class="linkTarget"
                @click="selectLink($event, item)"
                style="width: 207px"
              >
                <a class="dec-link-name" style="width: 180px">{{
                  getLinkName(item.linkArg)
                }}</a>
              </a-button>
            </div>
          </div>
        </div>
      </div>
      <div
        style="float: right"
        v-if="arg.iconStyle != 'no' && !item.img"
        class="d-error mt-15"
      >
        请添加图片
      </div>
    </div>
    <div class="dec-flex-list" style="margin-top: 20px">
      <div class="d-right" style="width: 100%" @click="addNav">
        <a-button style="width: 100%">添加导航</a-button>
      </div>
    </div>
    <div class="d-error" v-if="arg.ids.length == 0">请添加导航</div>
  </div>
</template>

<script>
import Vue from "vue";
import colorPicker from "../../../modal/colorPicker";
export default {
  components: {
    colorPicker,
  },
  props: ["tab", "checked"],
  inject: ["decAxios", "$isEmptyObj"],
  data() {
    return {
      arg: null,
      ids: [], // 导航列表数据
      temp: {
        img: "", // 导航项图片地址
        title: "标题", // 导航项文字
        linkArg: {},
      },
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.ids = this.arg.ids;
  },
  methods: {
    // 添加导航
    addNav() {
      this.ids.push(JSON.parse(JSON.stringify(this.temp)));
      this.refreshShow();
    },
    // 选中图片区
    selectImg(item) {
      Vue.prototype.$decImgMdRef.show("shopNav", "160 * 160");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          item.img = res.fileUrl;
        }
      });
    },
    getLinkName(item) {
      if (!this.$isEmptyObj(item)) {
        return item.pathName + (item.argName ? `-${item.argName}` : "");
      } else {
        return "选择链接";
      }
    },
    //选取链接项时触发弹窗
    selectLink(e, target) {
      console.log(e);
      Vue.prototype.$decLinkBoxRef.show(e, "linkTarget");
      Vue.prototype.$decLinkBoxRef.$once("promise", (res) => {
        console.log(res);
        if (res.success) {
          target.linkArg = res;
        }
      });
    },
    // 删除一项
    delNav(index) {
      this.ids.splice(index, 1);
    },
    styleArgChange() {
      this.refreshShow();
    },
    ensure1(val, item) {
      item.color = val;
    },
    ensure2(val, item) {
      item.bgColor = val;
    },
    refreshShow() {
      this.arg.ids = this.ids;
      this.tab.refresh = !this.tab.refresh;
    },
  },
};
</script>
