<template>
  <el-table border :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form
          label-position="right"
          inline
          class="demo-table-expand"
          label-width="100px"
        >
          <el-form-item label="开户银行">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="银行账号">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="账户名称">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="税务登记证号">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="发票地址">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="发票电话">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="发票类型">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      type="index"
      label="编号"
      width="80px"
      align="center"
    ></el-table-column>
    <el-table-column
      label="供应商编号"
      prop="id"
      align="center"
    ></el-table-column>
    <el-table-column
      label="供应商名称"
      prop="name"
      align="center"
    ></el-table-column>
    <el-table-column
      label="结算厂编"
      prop="desc"
      align="center"
    ></el-table-column>
    <el-table-column
      label="往来状态"
      prop="status"
      align="center"
    ></el-table-column>
    <el-table-column
      label="生效日期"
      prop="desc"
      align="center"
    ></el-table-column>
    <el-table-column
      label="结算周期"
      prop="desc"
      align="center"
    ></el-table-column>
    <el-table-column
      label="付款周期"
      prop="desc"
      align="center"
    ></el-table-column>
  </el-table>
</template>

<script>
  export default {
    name: 'AccountInfoConfirm',
    data() {
      return {
        tableData: [
          {
            id: '12987122',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            status: '在线',
            shopId: '10333',
          },
          {
            id: '12987123',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            status: '在线',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
          },
          {
            id: '12987125',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
            status: '在线',
          },
          {
            id: '12987126',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
            status: '在线',
          },
        ],
      }
    },
  }
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .el-table th.el-table__cell {
    background: #4091ff;
  }

  .el-table th .cell {
    color: #fff !important;
  }
</style>