<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="业主姓名">
              <j-input placeholder="请输入业主姓名" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="table-box">
        <div class="box" v-for="item in dataSource" :key="item.id">
          <div class="left">
            <div class="img-box">
              <img :src="item.image" alt="">
            </div>
            <div class="text">{{item.name}}</div>
            <div class="text">{{item.phone}}</div>
            <div class="text">{{item.job}}</div>
          </div>
          <div class="right">{{item.describe}}</div>
        </div>
      </div>
      <div style="text-align:right">
        <a-pagination
          :total="85"
          :show-total="total => `Total ${total} items`"
          :page-size="20"
          :default-current="1"
        />
      </div>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>

<script>
import { auditPropertyApi, freezeOrPropertyApi } from '@/api/api'

export default {
  name: 'PermissionListAsync',
  data() {
    return {
      queryParam: {},
      // 表头
      loading: false,
      dataSource: [
        {id: 'JD239423', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img2.baidu.com/it/u=2942449272,1418584815&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1148', describe: '【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改'},
        {id: 'sdf23422', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img1.baidu.com/it/u=316030150,2128050393&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=732', describe: '【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改'},
        {id: 'kjkjkl23', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img1.baidu.com/it/u=3635386112,2958829611&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', describe: '【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改'},
        {id: 'n23n4234', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img1.baidu.com/it/u=1288389997,496132515&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', describe: '【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改'},
        {id: 'pok23424', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img0.baidu.com/it/u=2791418870,625924969&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750', describe: '【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改'},
        {id: 'jh234h32', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img0.baidu.com/it/u=2405175533,3664722999&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', describe: '【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改'},
        {id: 'k2n3i234', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img2.baidu.com/it/u=428132418,1361442997&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800', describe: '【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改'},
        {id: '9sdjwfjw', name: '赵敏', phone: '13145981245', job: '业委会主任', image: 'https://img1.baidu.com/it/u=413302778,393661490&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500', describe: '理员修改审核信息，然后点击通过/驳回，再次查看详情，信息未修改【SAAS总平台】物业公司入驻审核时候，saas管理员修改审核信息，然后点击通过/驳未修改'},
      ]
    }
  },
  methods: {
    searchQuery() {},
    searchReset() {},
    onLoadDetail(record, type) {
      record['registAdress'] = [record.provinceCode, record.cityCode, record.countyCode]
      if (type === 'edit') {
        this.handleEdit(record)
      } else {
        this.handleDetail(record)
      }
    },
    loadData() {
      console.log('不请求')
    }
  },
}
</script>
<style scoped lang="less">
// @import '~@assets/less/common.less';
.table-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &::after {
    content: " ";
    width: 32%;
    height: 0;
    overflow: hidden;
  }
  .box {
    width: 32%;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #c3c3c3;
    display: flex;
    margin-bottom: 20px;
    .left {
      .img-box {
        width: 130px;
        height: 145px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .text {
        margin-top: 5px;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #c3c3c3;
      }
    }
    .right {
      word-break: break-all;
      padding-left: 10px;
      height: 250px;
      overflow-y: auto;
    }
  }
}
</style>