<template>
  <div class="app-container">
    <!-- 表格 -->


    <div class="flex">
      <!-- <div v-for="(item,index) in tableData" :key="index" style="width:50%;padding:10px;"> -->
      <div   style="padding:10px;">
        <table class="table" border>
          <tr>
            <td align="right" class="column"><span>客户名称：</span></td>
            <td align="left" class="item">{{ item.customerName }}</td>
            <td align="right" class="column"><span>状态：</span></td>
            <td v-if="item.delFlag==1" align="left" class="item">暂停</td>
            <td v-if="item.delFlag==0" align="left" class="item">正常</td>
          </tr>
          <tr>
            <td align="right" class="column"><span>法定代表人:</span></td>
            <td align="left" class="item">{{ item.legalPerson }}</td>
            <td align="right" class="column"><span>联系电话:</span></td>
            <td align="left" class="item">{{ item.phone }}</td>
          </tr>
          <tr>
            <td align="right" class="column"><span>邮箱：</span></td>
            <td align="left" class="item">{{ item.email }}</td>
            <td align="right" class="column"><span>公司类型：</span></td>
            <!-- <td align="left" class="item">{{ item.type }}</td> -->
            <td align="left" class="item" v-if="item.type === 1" size="small">有限责任公司（自然人独资）</td>
            <td align="left" class="item" v-if="item.type === 2" size="small">有限责任公司(自然人投资或控股)</td>
            <td align="left" class="item" v-if="item.type === 3" size="small">股份有限公司</td>
            <td align="left" class="item" v-if="item.type === 4" size="small">有限合伙企业</td>
            <td align="left" class="item" v-if="item.type === 5" size="small">外商独资公司</td>
            <td align="left" class="item" v-if="item.type === 6" size="small">个人独资企业</td>
            <td align="left" class="item" v-if="item.type === 7" size="small">国有独资公司</td>
            <td align="left" class="item" v-if="item.type === 8" size="small">其他</td> 
            <!-- <td v-if="item.status==2" align="left" class="item">暂停</td>
            <td v-if="item.status==1" align="left" class="item">正常</td> -->
          </tr>
          <tr>
            <td align="right" class="column"><span>经营范围:</span></td>
            <td align="left" class="item">{{ item.businessScope}}</td>
            <td align="right" class="column"><span>注册资本：</span></td>
            <td align="left" class="item">{{ item.registeredCapital}}</td>
          </tr>
        
          <tr>
            <td align="right" class="column"><span>成立日期：</span></td>
            <td align="left" class="item">{{ item.dateOfEstablishment }}</td>
            <td align="right" class="column"><span>营业日期：</span></td>
            <td align="left" class="item">{{ item.businessDate }}</td>
          </tr>
           <tr>
            <td align="right" class="column"><span>创建时间：</span></td>
            <td align="left" class="item">{{item.createDate}}</td>
            <td align="right" class="column"><span>修改时间：</span></td>
            <td align="left" class="item">{{item.updateTime}}</td>
          </tr>
          <tr>
            <td align="right" class="column"><span>住所：</span></td>
            <td align="left" class="item">{{ item.residence }}</td>
            <td align="right" class="column" />
            <td align="left" class="item" />
          </tr>
        </table>
      </div>
    </div>

    <!-- 分页 -->
    <!-- <div class="pagination">
      <el-pagination current-page.sync="body.current" :current-page="body.current" :page-sizes="[10, 20, 50, 100]" :page-size="body.size" layout="total, sizes, prev, pager, next, jumper" :total="total" background @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>-->
  </div>
</template>

<script>
import { userList } from '@/api/record'
export default {
  data() {
    return {
      item: {},
      body: {
        size: 20,
        current: 1
      },
      // total: 25
    }
  },
  created() {
    this.getData()
    console.log("商户后台")
  },
  methods: {
    // 请求数据
    getData() {
      userList(this.body).then(res => {
        if (res.status == 200) {
          console.log('牛逼的gitlab')
          this.item = res.data.data
          console.log(this.item)
          // this.body.size = res.data.data.size
          // this.body.current = res.data.data.current
          // this.total = res.data.data.total
        }
      })
    },
    // 分页
    handleSizeChange: function (val) {
      this.body.size = val
      console.log(this.body.size, 'size')
    },
    handleCurrentChange: function (val) {
      this.body.current = val
      console.log(this.body.current)
    }

  }
}
</script>
<style scoped>
.flex {
  /* display: flex; */
  flex-direction: row;
  width: 100%;
 
  font-size: 14px;
  flex-wrap: wrap;
}
.table {
  width: 90%;
  /* width: 800px; */
  height: 200px;
  /* border: 0.1px solid #fafafa; */
  border:1px solid #ebeef5 !important;
  border-collapse: collapse !important;
  margin-bottom: 10px;
  /* margin: 0 auto; */
}
.column {
  width: 15%;
  padding: 15px 10px 15px 10px;
  -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none !important;
  border:1px solid #ebeef5 !important;
  font-weight: 400;
  background: #fafafa;
  color: #909399;
}
.item {
  width: 35%;
  border:1px solid #ebeef5 !important;
  padding: 0 3px 0 10px;
  word-break: break-all !important;
}
</style>
