<template>
  <div class="mall bg-F5">
    <div class="banner">
      <img src="@assets/zxsc-banner.png" alt="" />
    </div>
    <div class="container" v-if="params">
      <div class="category">
        <div class="dalei">
          <div class="flag ">
            {{ $t("page.views.mall.category") }}
            <div class="t"></div>
          </div>
          <div class="items ">
            <div
              v-for="{ id, title } in items"
              :key="`items${id}`"
              :class="`item fl ${currPid === id ? 'curr' : ''}`"
              @mouseover="currPid = id"
              @click="() => paramsChange({ typeId: id })"
            >
              {{ title }}
            </div>
          </div>
        </div>
        <div class="xiaolei">
          <div
            class="block fl"
            :class="{ single: subs.length === 1 }"
            v-for="({ title, arr }, index) in subs"
            :key="`subs${index}`"
          >
            <span class="fl">{{ title }}</span>
            <div class="items fl">
              <div
                :class="`item fl ${params.typeId === id ? 'curr' : ''}`"
                v-for="({ id, title: st }, i) in arr"
                :key="`sitem${i}`"
                @click="() => paramsChange({ typeId: id })"
              >
                {{ st }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="filter">
        <div
          :class="`sort fl ${params.orderByColumn === '' ? 'curr' : ''}`"
          @click="() => paramsChange({ orderByColumn: '' })"
        >
          <span> {{ $t("page.views.mall.comprehensiveSort") }}</span>
        </div>
        <div
          :class="
            `sort fl ${params.orderByColumn === 'createTime' ? 'curr' : ''}`
          "
          @click="
            () => paramsChange({ orderByColumn: 'createTime', isAsc: 'asc' })
          "
        >
          <span> {{ $t("page.views.mall.newProducts") }}</span>
        </div>
        <div
          :class="`sort fl ${params.orderByColumn === 'price' ? 'curr' : ''}`"
        >
          <span
            :class="`price ${params.isAsc}`"
            @click="
              () =>
                paramsChange({
                  orderByColumn: `price`,
                  isAsc:
                    params.orderByColumn === `price` && params.isAsc === `asc`
                      ? `desc`
                      : `asc`
                })
            "
            >{{ $t("page.views.mall.price") }}</span
          >
          <input
            v-model="search.beginPrice"
            :placeholder="
              `${$t(`inputPlaceholder`)}${$t(`page.views.mall.minPrice`)}`
            "
            type="number"
          />
          -
          <input
            v-model="search.endPrice"
            :placeholder="
              `${$t(`inputPlaceholder`)}${$t(`page.views.mall.maxPrice`)}`
            "
            type="number"
          />
        </div>
        <div class="search fr">
          <input
            :placeholder="
              `${$t(`inputPlaceholder`)}${$t(
                `page.views.mall.productsOrCompanyName`
              )}`
            "
            v-model="search.name"
          />
          <span @click="() => paramsChange(search)">
            {{ $t("page.views.mall.search") }}</span
          >
        </div>
      </div>
      <div class="products">
        <load-more
          url="/goods/info/page"
          :rows="20"
          :params="params"
          v-slot="{
            item: { id, name, companyId, price, cover, companyName }
          }"
        >
          <router-link
            :to="`/shop/${companyId}/${id}`"
            class="product"
            :title="name"
          >
            <div class="img">
              <img :src="`${$basePath}${cover}`" />
            </div>
            <div class="amount"><span>¥</span>{{ price }}</div>
            <div class="name">{{ name }}</div>
            <div class="shop">{{ companyName }}</div>
          </router-link>
        </load-more>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import menu from "@/store/modules/menu";
import i18n from "@/lang";
@Component
export default class extends Vue {
  private currPid = 0;
  private params: IAny | null = null;
  private search = {
    name: "",
    beginPrice: "",
    endPrice: ""
  };
  @Prop(String) private q!: string;
  @Watch("q", { immediate: true })
  qChange() {
    const [kw, id = 0] = (this.q || "").split("-");
    let typeId = 0,
      pId = 0;
    if (id) {
      const item = menu.info(Number(id) | 0);
      if (item) {
        ({ pId, id: typeId } = item);
      }
    }

    this.currPid = pId;
    this.params = {
      name: this.search.name = kw,
      orderByColumn: "",
      isAsc: "asc",
      typeId
    };
  }

  // activated() {
  //   console.log(this.$route);
  // }
  get items() {
    return [
      {
        id: 0,
        title: `${i18n.t(`page.views.mall.all`)}`
      },
      ...menu.pList
    ];
  }
  get subs() {
    if (this.currPid === 0)
      return this.items
        .filter(({ id }) => id)
        .map(({ id, title }) => ({
          title,
          arr: menu.subList(id)
        }));
    const { id, title } = this.items.find(({ id }) => id === this.currPid)!;
    return [{ title, arr: menu.subList(id) }];
  }
  paramsChange(x: IAny) {
    this.params = this.params && { ...this.params, ...x };
  }
}
</script>
<style lang="scss" scoped>
.mall {
  .banner {
    width: 100%;
    height: 240px;
    line-height: 240px;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    background: rgb(220, 220, 220);
    img {
      width: 100%;
      height: 100%;
    }
  }
  .container {
    padding: 2rem 0;
    overflow: hidden;
    .category {
      background: #fff;
      border-radius: 4px;
      // height: 218px;
      overflow: hidden;
      .dalei {
        height: 58px;
        box-sizing: border-box;
        width: 100%;
        padding: 1rem;
        overflow: hidden;
        border-bottom: 1px rgb(229, 229, 229) solid;
        display: table;
        .flag {
          display: table-cell;
          width: 50px;
          vertical-align: middle;
          color: rgb(153, 153, 153);
          // padding-right: 1rem;
          // border-right: 1px solid rgb(153, 153, 153);
          position: relative;
          .t {
            width: 1px;
            height: 15px;
            background: #999;

            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
          }
        }
        .items {
          display: table-cell;
          vertical-align: middle;
          .item {
            padding: 0.2rem 1.5rem;
            margin-left: 3rem;
            cursor: pointer;
            &.curr {
              background: rgb(253, 85, 34);
              border-radius: 20px;
              color: #fff;
            }
          }
        }
      }
      .xiaolei {
        height: 160px;
        overflow: scroll;
        box-sizing: border-box;
        .block {
          // border: 1px red solid;
          width: 337px;
          height: 110px;
          // margin: 30px 60px 0 20px;
          margin-left: 20px;
          margin-right: 24px;
          overflow: hidden;

          padding-top: 20px;
          box-sizing: border-box;
          &.single {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            > span {
              width: auto;
              margin-right: 10px;
              display: inline-block;
            }
            .items {
              width: 80%;
            }
          }
          > span {
            width: 80px;
          }
          .items {
            width: 250px;

            overflow: hidden;

            .item {
              margin-right: 1rem;
              margin-bottom: 1rem;
              font-size: 1.2rem;
              color: rgb(102, 102, 102);
              cursor: pointer;
              &.curr {
                color: rgb(253, 85, 34);
              }
            }
          }
        }
      }
    }
    .filter {
      height: 60px;
      line-height: 60px;
      background: #fff;
      margin-top: 20px;
      padding: 0 20px;
      border-radius: 4px;
      overflow: hidden;
      input {
        border-radius: 4px;
        height: 36px;
        padding-left: 1rem;
        font-size: 1.4rem;
        border: 1px solid #eaeaea;
      }
      .sort {
        margin-right: 40px;
        cursor: pointer;
        &.curr {
          span {
            color: rgb(253, 85, 34);
          }
          .price.asc::before {
            border-bottom-color: rgb(253, 85, 34);
          }
          .price.desc::after {
            border-top-color: rgb(253, 85, 34);
          }
        }
        .price {
          position: relative;
          margin-right: 20px;
          &::before {
            content: "";
            position: absolute;

            border-top-color: transparent;
            border-left-color: transparent;
            border-bottom-color: #acacac;
            border-right-color: transparent;
            border-width: 5px;
            border-style: solid;
            top: -2px;
            right: -10px;
          }
          &::after {
            content: "";
            position: absolute;

            border-top-color: #acacac;
            border-left-color: transparent;
            border-bottom-color: transparent;
            border-right-color: transparent;
            border-width: 5px;
            border-style: solid;
            bottom: -2px;
            right: -10px;
          }
        }
        input {
          width: 100px;
        }
      }
      .search {
        input {
          width: 387px;
          margin-right: 20px;
        }
        span {
          padding: 6px 22px;
          background: #fd5522;
          color: #fff;
          cursor: pointer;
          border-radius: 4px;
        }
      }
    }
    .products {
      margin-top: 20px;
      overflow: hidden;

      .product {
        background: #fff;
        border-radius: 4px;
        width: 216px;
        height: 340px;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 20px;
        box-sizing: border-box;
        cursor: pointer;
        &:nth-child(5n + 5) {
          margin-right: 0;
        }
        .img {
          width: 176px;
          height: 200px;
          line-height: 200px;
          border: 1px #e5e5e5 solid;
          margin-bottom: 20px;
          position: relative;
          img {
            width: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .amount {
          color: #fd5522;
          font-size: 18px;
          margin-bottom: 10px;
          span {
            font-size: 12px;
          }
        }
        .name {
          font-size: 14px;
          color: rgb(51, 51, 51);
          margin-bottom: 10px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .shop {
          font-size: 12px;
          color: rgb(102, 102, 102);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
