<template>
  <div class="bg-F5">
    <div class="bannerDiv">
      <img src="@assets/shrz-banner.png" alt="" />
      <router-link class="applyBtn" to="/shopEnter/add">{{
        $t("page.views.shops.enter.index.title1")
      }}</router-link>
    </div>
    <div class="container">
      <div class="partTitle">
        <span class="orangeLine"></span
        >{{ $t("page.views.shops.enter.index.title2") }}
      </div>
      <div class="cxtj">
        <span>{{ $t("page.views.shops.enter.add.companyName") }}：</span>
        <el-input
          v-model="companyName"
          clearable
          size="small"
          :placeholder="
            `${$t(`inputPlaceholder`)}${$t(
              `page.views.shops.enter.add.companyName`
            )}`
          "
          style="width:38rem;"
        ></el-input>
        <span class="ml2rem"
          >{{ $t("page.views.shops.enter.index.auditStatus") }}：</span
        >
        <el-select v-model="status" size="small" style="width:14rem;">
          <el-option
            v-for="{ key, value } in statusList"
            :key="`status${key}`"
            :label="key"
            :value="value"
          ></el-option>
        </el-select>
        <el-button class="searchBtn" size="small" @click="search">{{
          $t("page.views.shops.enter.index.search")
        }}</el-button>
      </div>
      <el-table
        :empty-text="`${$t(`loading`)}`"
        class="qyrzgs"
        stripe
        v-if="items"
        :data="items"
      >
        <el-table-column
          type="index"
          :label="`${$t(`page.views.shops.enter.index.serialNumber`)}`"
        ></el-table-column>
        <el-table-column
          prop="companyName"
          :label="`${$t(`page.views.shops.enter.add.companyName`)}`"
        ></el-table-column>
        <el-table-column
          prop="detailAddress"
          :label="`${$t(`page.views.shops.enter.add.detailAddress`)}`"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          :label="`${$t(`page.views.shops.enter.index.applyDate`)}`"
        ></el-table-column>
        <el-table-column
          prop="address"
          :label="`${$t(`page.views.shops.enter.index.auditStatus`)}`"
          width="120px"
        >
          <template slot-scope="{ row: { status } }">
            {{ getStatusText(status) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          :label="`${$t(`page.views.shops.enter.index.auditDate`)}`"
          width="120px"
        >
          <template slot-scope="{ row: { companyExamine } }">
            {{ companyExamine && companyExamine.examineDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          :label="`${$t(`page.views.shops.enter.index.rejectReason`)}`"
        >
          <template slot-scope="{ row: { companyExamine } }">
            {{ companyExamine && companyExamine.rejectReason }}
          </template>
        </el-table-column>
      </el-table>
      <load-more
        url="/company/enterPublicity"
        :params="params"
        @getItems="setItems"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import dict from "@/store/modules/dict";
import i18n from "@/lang";
@Component({ name: "shopEnter" })
export default class extends Vue {
  private companyName = "";
  private status = i18n.t(`pleaseChoose`);
  private params = {};
  private items: any[] | null = [];
  get statusList() {
    return dict.examineStatus;
  }
  getStatusText(status: string) {
    const dict = this.statusList.find(({ value }) => value == status);
    return dict && dict.key;
  }
  search() {
    const { companyName, status } = this;
    this.params = { companyName, status: Number(status) | 0 };
  }
  setItems(items: any[]) {
    this.items = items.length ? items : null;
  }
}
</script>
<style scoped lang="scss">
.bannerDiv {
  width: 100%;
  height: 24rem;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .applyBtn {
    display: inline-block;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.8rem;
    color: #fd5522;
    padding: 0 2rem;
    background: #fff;
    border-radius: 1.5rem;
    position: absolute;
    bottom: 23%;
    left: 27%;
  }
}
.partTitle {
  padding: 3rem 0 2rem 0;
  font-size: 1.8rem;
  color: #333;
  .orangeLine {
    display: inline-block;
    height: 1.8rem;
    width: 0.3rem;
    background: #fd5522;
    vertical-align: middle;
    border-radius: 0.15rem;
    margin-right: 1rem;
  }
}
.cxtj {
  span {
    display: inline-block;
    height: 3.6rem;
    line-height: 3.6rem;
    font-size: 1.4rem;
    color: #333;
    margin-right: 1rem;
  }
  .searchBtn {
    font-size: 1.4rem;
    margin-left: 1rem;
    background: #fd5522;
    color: #fff;
    border-color: #fd5522;
  }
}
.qyrzgs {
  width: 100%;
  margin-top: 2rem;
}
.pageDiv {
  text-align: right;
  margin-top: 0.5rem;
  padding: 3rem 0;
}
.ml2rem {
  margin-left: 2rem;
}
</style>
<style lang="scss">
.qyrzgs th {
  background: #fd5522;
  color: #fff;
  padding: 0.6rem 0;
  text-align: center;
}
.qyrzgs .cell {
  text-align: center;
}
.qyrzgs.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fff6f4;
}
.qyrzgs.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #fff6f4;
}
.pageDiv.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #fd5522;
}
.pageDiv.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #fd5522;
}
</style>
