<template>
  <div>
    <el-col :span="16">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>积分兑换申请列表</span>
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="date" label="申请日期" width="100">
          </el-table-column>
          <el-table-column prop="name" label="昵称" width="80">
          </el-table-column>
          <el-table-column prop="phone" label="操作号码"> </el-table-column>
          <el-table-column prop="tophone" label="充值号码"> </el-table-column>
          <el-table-column prop="vilage" label="小区名"> </el-table-column>
          <el-table-column prop="address" label="住址"> </el-table-column>
          <el-table-column prop="score" label="积分" width="50">
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
              <el-button type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="8">
      <div class="right">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>积分兑换查询</span>
          </div>
          <div>
            <el-form :inline="true">
              <el-form-item>
                <el-input v-model="phone" placeholder="充值号码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="申请日期" width="100">
              </el-table-column>
              <el-table-column prop="tophone" label="充值号码">
              </el-table-column>
              <el-table-column prop="score" label="积分" width="50">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="24">
      <div class="chart"></div>
    </el-col>
  </div>
</template>
<script>
export default {
  name: "app",
  data() {
    return {
      phone: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          phone: "13588296107",
          tophone: "13588296107",
          vilage: "上海小区",
          score: 100,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          phone: "13588296107",
          tophone: "13588296107",
          vilage: "上海小区",
          score: 100,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          phone: "13588296107",
          tophone: "13588296107",
          vilage: "上海小区",
          score: 100,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          phone: "13588296107",
          tophone: "13588296107",
          vilage: "上海小区",
          score: 100,
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  },
  methods: {
    search() {
      console.log("查询");
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    handleClick(row) {
      console.log(row);
    }
  }
};
</script>
<style scoped>
.box-card {
  height: 450px;
}
.about {
  height: 100%;
}
.clearfix {
  text-align: left;
}
.right {
  margin-left: 20px;
}
.card-body {
  padding: 10px;
}
.chart{
  width: 100%;
  height: 200px;
  background-color: white;
  margin-top: 20px;
}
</style>
