<template>
  <layout-body>
    <layout-filter>
      <filter-item>
        <p><span class="bold-title">状态：提现成功</span><br/><span class="no">交易成功时间：2020-03-31 23:43:21</span></p>
      </filter-item>
      <filter-item>
        <p><span class="no">创建时间：2020-3-30 21:34:23</span><span class="no">店铺：一件代发店铺</span>
          <span class="no">供应商:一件代发供应商</span></p>
      </filter-item>
    </layout-filter>
    <layout-list>
      <table border class="table-body">
        <tr class="tr-body" v-for="(row, outerIndex) in dataArray" :key="outerIndex">
          <!-- flex: 0 0 x% 自适应布局，每一大列的宽度按百分比显示 -->
          <div class="td-box" :style="{flex: '0 0 ' + 100 / row.length + '%'}" v-for="(col, innerIndex) in row" :key="innerIndex">
            <td class="td-key">{{ col.key }}</td>
            <td class="td-value">{{ col.value }}</td>
          </div>
        </tr>
      </table>
    </layout-list>
    <layout-filter>
      <filter-item>
        <i-button type="primary" @click="backList">返回列表</i-button>
        <i-button type="ghost" @click="handleTeacherData">测试数据展示</i-button>
      </filter-item>
    </layout-filter>
  </layout-body>
</template>
<script>
// import _ from 'lodash';
import {Detail} from './store';

export default {
        //     return
data() {
  return Detail.call(this);
},
props: {
  dataArray: {
    type: Array,
    require: true
  }
},
methods: {
  backList() {
    this.$router.push({name: 'finance.withdraw.withdrawlist'});
  },
  handleTeacherData() {
    // if (!teacher) {
    // }
      let table = [], // 大表格
      let tmpRow = [], // 临时数组，表示 row，一行数据

      tmpRow.push({key: '业务单据号', value: "20200330200040011100100086516385"}),
      tmpRow.push({key: '类型', value: "提现"}),
      table.push(tmpRow),
      tmpRow = [],

      tmpRow.push({key: '收款账户', value: "张三商贸有限公司（caomei@yoho.cn）"}),
      tmpRow.push({key: '付款账户', value: "有货商贸有限公司（yh@yoho.cn）"}),
      table.push(tmpRow),
      tmpRow = [],

      tmpRow.push({key: '申请金额（元）', value: "10000.00"}),
      tmpRow.push({key: '服务费', value: '100.00'}),
      table.push(tmpRow),
      tmpRow = [],

      tmpRow.push({key: '成功金额（元）', value: "9900.00"}),
      tmpRow.push({key: '操作人', value: "商家/平台"}),
      table.push(tmpRow),
      tmpRow = [],

      tmpRow.push({key: '说明', value: "提现转账扣款（2020-03-23至2020-03-28）"}),
      tmpRow.push({key: '失败原因', value: "付款账户余额不足"}),
      table.push(tmpRow),
      tmpRow = [],

      tmpRow.push({key: '备注', value: "++++++------++++++"}),
      table.push(tmpRow),
      tmpRow = [],
      this.dataArray = table;
    },
  },
}
</script>

<style lang="scss" scoped>
  .bold-title {
    font-size: 20px;
    font-weight: bold;
  }

  .table-body {
    width: 100%;
    border: 1px solid #333333;

    .tr-body {
      display: flex;
      border-bottom: 1px solid #333333;

      &:last-child {
        border-bottom: 0;
      }

      .td-box {
        display: flex;
        border-left: 1px solid #333333;

        &:first-child {
          border-left: 0;
        }

        .td-key {
          width: 120px;
          padding: 10px;
          line-height: 20px;
          text-align: center;
          background-color: #999999;
          border-right: 1px solid #444444;
        }

        .td-value {
          flex: 1 0;
          line-height: 20px;
          padding: 10px 20px;
        }
      }
    }
  }
</style>