<template>
  <div class="engine-container">
    <div class="portal">
      <div class="portalmen">租户管理</div>
      <div class="portalexp">
        <el-button round class="export">导出</el-button>
        <el-button type="primary" round>+新建租户</el-button>
      </div>
    </div>

    <div class="portalcon">
      <div class="portalconTop">
        <div class="left">
          <el-input
            placeholder="搜索您的客户..."
            prefix-icon="el-icon-search"
            v-model="input2"
            style="width: 200px; margin-right: 15px"
          >
          </el-input>
          <el-input
            placeholder="筛选"
            v-model="input2"
            style="width: 200px; margin-right: 15px"
          >
          </el-input>
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="right">
          <el-col :span="1.5">
            <el-button
              plain
              @click="handleAdd"
              v-hasPermi="['system:user:add']"
              style="
                border-radius: 15px;
                margin-right: 20px;
                border: 0px solid #fff;
              "
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:user:remove']"
            ></el-button>
          </el-col>
        </div>
      </div>
      <div class="portalconBottom">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="selection" width="55"> 
          </el-table-column>
          <el-table-column prop="tenantName" label="租户" width="180">
          </el-table-column>
          <el-table-column prop="tenantCode" label="租户编号" width="180">
          </el-table-column>
          <el-table-column prop="owner" label="负责人"> 
          </el-table-column>
          <el-table-column prop="contactInfo" label="联系方式" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="180">
          </el-table-column>
          <el-table-column prop="createTime" label="有效期" width="180">
          </el-table-column>
          <el-table-column label="状态" width="180">
          </el-table-column>
          <el-table-column label="操作" width="180">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

// 引入请求方法
import { getTenant } from "@/api/system/PortalEngine";

// 我把步骤写在这里，然后你按照流程，自己写一边
// 1.创建api。js文件，引入相应的请求方法
// 2.引入后，在页面创建后调用方法，传递参数，
// 3.在请求方法响应后,编辑自己的业务逻辑
export default {
  data() {
    return {
      tableData: [],
    };
  },
  // 页面创建后调用
  mounted() {
    // 调用请求的方法，.then是什么方法，一会儿自己百度。
    getTenant({
      // 参数
      tenantName:'',
      createTime:'',
      tenantName:'',
      tenantName:'',
    }).then((res) => {
      console.log(res);
      this.tableData = res.rows;
      // this.tableData = 后端返回的数据，就是最大的那个数据，赋值给前面的就可以了。
      //  前面  =    后面
    });
  },
  // 方法调用
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.engine-container {
  background-color: #f5f5fa;
  padding: 40px 60px 40px 40px;
}
.portal {
  width: 1200px;
  height: 30px;
  margin-bottom: 20px;
  /* background-color: #f0f811; */
  /* float: left; */
}
.portalmen {
  font-size: 26px;
  font-weight: bolder;
  float: left;
}
.portalexp {
  float: right;
}
.export {
  margin-right: 20px;
}
.portalcon {
  height: 800px;
  background-color: #fff;
}
.left {
  float: left;
}
.right {
  float: right;
}
</style>
