<template>
  <div class="newStoreApprovalList">
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="建店审批" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="content">
      <div class="approvalList">
        <div
          class="approvalItem"
          v-for="(item, index) in approvalList"
          :key="index"
          @click="enterApprovalDetail(item)">
          <div class="item itemtitle">
            {{ item.storeName }} (<span style="color: #0057ba">{{ item.storeCode }}</span
            >)
          </div>
          <div class="item storeType">
            <div class="label">门店类型：</div>
            <div class="value">{{ item.storeCategoryName }}</div>
          </div>
          <div class="item applicationUserName">
            <div class="label">提交人员：</div>
            <div class="value">{{ item.applicationUserName }}</div>
          </div>
          <div class="item applicationTime">
            <div class="label">提交时间：</div>
            <div class="value">{{ item.applicationTime }}</div>
          </div>
          <div class="itemBtn">审批</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStoreApprovalList } from '@/api/index';
export default {
  data() {
    return {
      approvalList: [],
    };
  },
  activated() {
    this.getApprovalList();
  },
  methods: {
    getApprovalList() {
      getStoreApprovalList().then((res) => {
        if (res.code == 200) {
          this.approvalList = res.data;
        }
      });
    },
    // 进入审批详情
    enterApprovalDetail(item) {
      this.$router.push({
        path: '/newStoreApprovalDetail',
        query: { id: item.storeId, approvalId: item.approvalId, source: 'newStoreApprovalList' },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.newStoreApprovalList {
  .content {
    padding: 56px 10px 10px 10px;
    .approvalList {
      .approvalItem {
        background: #fff;
        padding: 10px 15px;
        margin-bottom: 15px;
        border-radius: 8px;
        position: relative;
        .item {
          display: flex;
          align-items: center;
          padding: 5px 0;
          font-size: 14px;
          color: #999;
        }
        .itemtitle {
          font-size: 14px;
          font-weight: bold;
          color: #333;
        }
        .itemBtn {
          position: absolute;
          top: 20px;
          right: 20px;
          font-size: 14px;
          font-weight: bold;
          color: #333;
          color: #0057ba;
        }
      }
    }
  }
}
</style>
