<template>
  <view class="dec-search">
    <!-- 顶部搜索框 -->
    <template v-if="arg.styleArg === 'top'">
      <view class="top" :style="{ backgroundColor: arg.outColor }">
        <view
          @tap.stop="toSearchPage"
          class="wrap radius"
          :style="{ backgroundColor: arg.inColor }"
        >
          <text :style="{ color: arg.fontColor }" class="search"
            >在店铺内搜索</text
          >
          <view class="ic-search">
            <uni-icons
              type="search"
              :color="arg.fontColor"
              size="22"
            ></uni-icons>
          </view>
        </view>
        <view class="ic-person" @tap.stop="toNavLink">
          <img
            class="img"
            mode="widthFix"
            v-if="arg.rightImg"
            :src="decImgDomain(arg.rightImg)"
          />
          <uni-icons
            v-else
            type="contact"
            :color="arg.fontColor"
            size="38"
          ></uni-icons>
        </view>
      </view>
    </template>
    <!-- 普通搜索框 -->
    <view v-else class="ordinary" :style="{ backgroundColor: arg.outColor }">
      <view
        @tap.stop="toSearchPage"
        class="wrap"
        :class="{ border: arg.border, radius: arg.radius }"
        :style="{ backgroundColor: arg.inColor }"
      >
        <text :style="{ color: arg.fontColor }" class="search"
          >在店铺内搜索</text
        >
        <view class="ic-search">
          <uni-icons type="search" :color="arg.fontColor" size="20"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  inject: ["decImgDomain", "decAxios"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: {},
    };
  },
  created() {
    this.arg = this.tab.arg;
  },
  methods: {
    toSearchPage() {
      this.decAxios.decEventHandler(
        {
          moudle: "search",
          type: "activity",
          desc: "跳搜索页",
        },
        null,
        null
      );
    },
    toNavLink() {
      const link = this.arg.linkArg;
      if (link && (link.path || link.argValue)) {
        this.decAxios.decEventHandler(
          {
            moudle: "search",
            type: "detail",
            desc: "跳绑定的链接",
          },
          link,
          null
        );
      }
    },
  },
};
</script>
