<template>
  <div>
    <el-button type="primary" @click="handleAdd">申请活动</el-button>
    <div style="height: 20px"></div>
    <el-table border :data="list" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="table-expand" v-if="props.row.others.length">
            <template v-for="(item, index) in props.row.others">
              <div class="table-expand-item" :key="index">
                <el-form-item label="随同关系" v-if="item.product">
                  <span>{{ item.product.name }}</span>
                </el-form-item>
                <el-form-item label="姓名">
                  <span>{{ item.personal_name }}</span>
                </el-form-item>
                <el-form-item label="手机号">
                  <span>{{ item.telephone }}</span>
                </el-form-item>
              </div>
            </template>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="personal.personal_name"></el-table-column>
      <el-table-column label="参与方式" prop="personal.product.name"></el-table-column>
      <el-table-column label="手机号" prop="personal.telephone"></el-table-column>
      <el-table-column label="班级" prop="personal.class_name"></el-table-column>
      <el-table-column label="支付方式" prop="type">
        <template slot-scope="props">{{ props.row.type === 1 ? '微信' : '支付宝' }}</template>
      </el-table-column>
      <el-table-column label="支付状态" prop="status">
        <template slot-scope="props">{{ props.row.status === 1 ? '已支付' : '未支付' }}</template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="page.currentPage"
      layout="total, prev, pager, next, jumper"
      :total="page.total"
      :page-size="page.size"
      :hide-on-single-page="true"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
import * as api from '../../api/index'
export default {
  props: { affairId: { type: String } },
  data() {
    return {
      list: [],
      page: { currentPage: 1, total: 0, size: 20 }
    }
  },
  methods: {
    handleAdd() {
      this.$router.push({ name: 'graduationAdd', query: { id: this.affairId } })
    },
    getList() {
      api.getGraduationOrderList({ product_type_id: 1000, page: this.page.currentPage }).then(response => {
        const { list, total } = response
        this.page.total = total
        this.list = list.map(item => {
          let list = item.product_desc ? JSON.parse(item.product_desc) || [] : []
          list = list.map(item => {
            item.product = item.product ? JSON.parse(item.product) || {} : {}
            return item
          })
          const [personal, ...others] = list
          item.personal = personal
          item.others = others || []
          return item
        })
      })
    },
    handleCurrentChange() {
      this.getList()
    }
  },
  beforeMount() {
    this.getList()
  }
}
</script>

<style scoped>
.table-expand {
  font-size: 0;
}
.table-expand label {
  width: 90px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table-expand-item + .table-expand-item {
  border-top: 1px solid #ebeef5;
}
.el-pagination {
  padding: 20px 0;
  text-align: right;
}
</style>
