<template>
  <div class="dec-modify-content dec-set-base">
    <div class="dec-flex-list side">
      <span class="d-left big">模式选择</span>
      <div class="d-right">
        <a-radio-group v-model="arg.mode" size="small" button-style="solid">
          <a-radio-button value="">原生</a-radio-button>
          <a-radio-button value="custom">自定义</a-radio-button>
          <!-- <a-radio-button value="phone">手机App</a-radio-button> -->
        </a-radio-group>
      </div>
    </div>
    <div class="d-tips" v-if="arg.mode == 'custom'">
      使用高级模式后，全局顶部导航在当前微页面会失效。
    </div>
    <div class="d-tips" v-else>
      普通模式下，与“小程序导航-顶部导航”处配置保持一致。
    </div>
    <div class="d-splitline"></div>

    <template v-if="arg.mode == 'custom'">
      <div class="dec-flex-list side">
        <span class="d-left big">风格设置</span>
        <div class="d-right">
          <a-radio-group
            :disabled="disabled"
            v-model="arg.styleArg"
            size="small"
            button-style="solid"
          >
            <a-radio-button value="">标准</a-radio-button>
            <a-radio-button value="fix">沉浸</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="d-tips">沉浸式导航会将导航固定在页面顶部</div>
      <div class="d-splitline"></div>

      <div class="dec-flex-list side">
        <span class="d-left big">文字风格</span>
        <div class="d-right right">
          <a-radio-group
            size="small"
            v-model="arg.fontColor"
            button-style="solid"
          >
            <a-radio-button value="black">黑色</a-radio-button>
            <a-radio-button value="white">白色</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="d-splitline"></div>

      <div class="dec-flex-list side">
        <span class="d-left big">左图标设定</span>
        <div class="d-right">
          <a-radio-group size="small" v-model="arg.lIcon" button-style="solid">
            <a-radio-button value="">不显示</a-radio-button>
            <a-radio-button value="back">返回</a-radio-button>
            <a-radio-button value="link">链接</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <template v-if="arg.lIcon == 'link'">
        <div class="dec-flex-list side">
          <span class="d-left ml"> 选择图标 </span>
          <div class="d-right">
            <div class="dec-float-box">
              <template v-if="arg.lIconImg">
                <div class="float-item" style="float: right">
                  <a-icon
                    type="close-circle"
                    class="ic-close"
                    @click="arg.lIconImg = ''"
                  />
                  <img
                    :src="decImgDomain(arg.lIconImg)"
                    alt
                    draggable="false"
                  />
                </div>
              </template>
              <div
                class="float-item ic-plus"
                style="float: right"
                @click="addGood('lIconImg')"
                v-else
              >
                <a-icon type="plus" />
              </div>
            </div>
          </div>
        </div>
        <div class="dec-flex-list side">
          <span class="d-left ml">选择链接</span>
          <div class="d-right">
            <a-button
              class="linkTarget"
              @click="selectLink($event, 'lIconLink')"
              style="width: 240px"
            >
              <a class="dec-link-name" style="width: 220px">{{
                getLinkName(arg.lIconLink)
              }}</a>
            </a-button>
          </div>
        </div>
      </template>
      <div class="d-tips">点击返回图标将会返回页面上一级</div>
      <div class="d-splitline"></div>

      <div class="dec-flex-list side">
        <span class="d-left big">标题设置</span>
        <div class="d-right">
          <a-radio-group size="small" v-model="arg.title" button-style="solid">
            <a-radio-button value="">不显示</a-radio-button>
            <a-radio-button value="text">文字</a-radio-button>
            <a-radio-button value="shop">门店</a-radio-button>
          </a-radio-group>
        </div>
      </div>
      <div class="d-tips">
        文字模式会显示页面名称，门店可在页面中进行门店切换
      </div>
      <div class="d-splitline"></div>

      <div class="dec-flex-list side">
        <span class="d-left big">搜索框设置</span>
        <div class="d-right">
          <a-switch :disabled="disabled" v-model:checked="arg.search" />
        </div>
      </div>
      <div class="dec-flex-list side" v-if="arg.search">
        <span class="d-left ml">搜索框底色</span>
        <div class="d-right">
          <div style="float: right; margin-right: 40px">
            <color-picker
              :back="arg.searchBg"
              :color="arg.searchBg"
              @change="(val) => (arg.searchBg = val)"
              :reset="true"
            ></color-picker>
          </div>
        </div>
      </div>
      <div class="d-tips">点击搜索框会跳转到搜索页面</div>
      <div class="d-splitline"></div>

      <div class="dec-flex-list side">
        <span class="d-left big">右图标显示</span>
        <div class="d-right">
          <a-switch :disabled="disabled" v-model:checked="arg.rIcon" />
        </div>
      </div>
      <template v-if="arg.rIcon">
        <div class="dec-flex-list side">
          <span class="d-left ml">右图标设定</span>
          <div class="d-right">
            <a-checkbox-group
              style="width: 85%"
              v-model="arg.rIconFn"
              @change="rIconChange"
            >
              <a-row>
                <a-col :span="7"
                  ><a-checkbox value="park">停车</a-checkbox></a-col
                >
                <a-col :span="8"
                  ><a-checkbox value="member">会员码</a-checkbox></a-col
                >
                <a-col :span="7"
                  ><a-checkbox value="link">链接</a-checkbox></a-col
                >
              </a-row>
            </a-checkbox-group>
          </div>
        </div>
        <template v-if="arg.rIconFn.includes('link')">
          <div class="dec-flex-list side">
            <span class="d-left ml"> 选择图标 </span>
            <div class="d-right">
              <div class="dec-float-box">
                <template v-if="arg.rIconImg">
                  <div class="float-item" style="float: right">
                    <a-icon
                      type="close-circle"
                      class="ic-close"
                      @click="arg.rIconImg = ''"
                    />
                    <img
                      :src="decImgDomain(arg.rIconImg)"
                      alt
                      draggable="false"
                    />
                  </div>
                </template>
                <div
                  class="float-item ic-plus"
                  style="float: right"
                  @click="addGood('rIconImg')"
                  v-else
                >
                  <a-icon type="plus" />
                </div>
              </div>
            </div>
          </div>
          <div class="dec-flex-list side">
            <span class="d-left ml">图标圆形</span>
            <div class="d-right">
              <a-switch
                size="small"
                :disabled="disabled"
                v-model:checked="arg.rIconCc"
              />
            </div>
          </div>
          <div class="dec-flex-list middle">
            <span class="d-left ml">选取链接：</span>
            <div class="d-right">
              <a-button
                class="linkTarget"
                @click="selectLink($event, 'rIconLink')"
                style="width: 240px"
              >
                <a class="dec-link-name" style="width: 220px">{{
                  getLinkName(arg.rIconLink)
                }}</a>
              </a-button>
            </div>
          </div>
        </template>
      </template>
      <div class="d-tips">停车图标为停车缴费快捷入口</div>
    </template>
  </div>
</template>
<script>
import Vue from "vue";
import colorPicker from "../../../modal/colorPicker";
export default {
  inject: ["$isEmptyObj", "decImgDomain"],
  props: ["tab"],
  components: {
    colorPicker,
  },
  data() {
    return {
      arg: null,
    };
  },
  created() {
    this.arg = this.tab;
  },
  computed: {
    disabled() {
      return this.arg.mode !== "custom";
    },
  },
  methods: {
    //选取链接项时触发弹窗
    selectLink(e, target) {
      Vue.prototype.$decLinkBoxRef.show(e, "linkTarget");
      Vue.prototype.$decLinkBoxRef.$once("promise", (res) => {
        if (res.success) {
          this.arg[target] = res;
        }
      });
    },
    getLinkName(item) {
      if (!this.$isEmptyObj(item)) {
        return item.pathName + (item.argName ? `-${item.argName}` : "");
      } else {
        return "选择链接";
      }
    },
    selectImg() {
      Vue.prototype.$decImgMdRef.show("shopBase", "750 * 84");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg.titleImg = res.fileUrl;
        }
      });
    },
    rIconChange(checkedValues) {},
    addGood(img) {
      Vue.prototype.$decImgMdRef.show("shopSearch", "60 * 60");
      Vue.prototype.$decImgMdRef.$once("promise", (res) => {
        if (res.success) {
          this.arg[img] = res.fileUrl;
        }
      });
    },
  },
};
</script>
