<template>
  <div class="main_box">
    <navbar title="特色商户标签" v-if="!flag"></navbar>
    <div :class="[!flag?'main_f':'','main']">
      <div class="card" v-for="(item,index) in tableData" :key="index">
        <div class="card-item" v-for="(temp, num) in columns" :key="num">
          <span class="label">{{ temp }}</span>
          <span class="value">{{ item[temp] }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "../../components/navbar/navbar.vue";
import { systemCustBaseInfoSpecialTagList } from "@/service/api/custome";
export default {
  props:{
    flag: {
      type: Boolean,
      default: false,   
    },
  },
  data() {
    return {
      tableData: [],
      columns: []
    };
  },
  components: {
    navbar: navbar,
  },
  created() {
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const socialCreditCode =  sessionStorage.getItem("socialCreditCode");
      systemCustBaseInfoSpecialTagList(socialCreditCode).then(res => {
        this.tableData = res.data
        if (this.tableData.length !== 0) {
          this.columns = Object.keys(this.tableData[0])
        }
      })
    }
  },
};
</script>

<style lang="less" scoped>
.main_f{
  padding-top: 46px;
  min-height: 100vh;
  padding-bottom: 60px;
}
.card {
  background: rgb(235, 246, 255);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08)
}

.card-item {
  display: flex;
  margin: 8px 0;
  font-size: 14px;
}
.label {
  color: #999;
  width: 60px;
  flex-shrink: 0;
}
.value {
  flex: 1;
  color: #000;
}
</style>
