<!-- 在途金额 -->
<template>
  <div class="container">
    <div class="up">
      <div class="up-second">
        <div class="item">
          <p class="text">总金额</p>
          <p class="number">{{ data.totalAmount || 0 }}元</p>
        </div>
        <div class="item">
          <p class="text">在途金额</p>
          <p class="number">{{ data.onWayAmount || 0 }}元</p>
        </div>
        <div class="item">
          <p class="text">库存金额</p>
          <p class="number">{{ data.stockAmount || 0 }}元</p>
        </div>
        <div class="item">
          <p class="text">现场库存金额</p>
          <p class="number">{{ data.sceneAmount || 0 }}元</p>
        </div>
      </div>
    </div>
    <div class="bar-wrap">
      <div class="bar-title">在途金额统计:
        <p class="bar-title red">{{ data.onWayAmount || 0}}元</p>
      </div>
      <div class="bar">
        <div class="item">
          <div class="left">本月</div>
          <div class="center" :class="tabIndex === 0 ? 'active' : ''" @click="dateClick(titleData.curOnWayAmt.firDateTime, 0)">
            <p>{{ new Date(titleData.curOnWayAmt.firDateTime).getDate() || 0 }}日</p>
            <p class="number">
              {{ titleData.curOnWayAmt.firAmount || 0 }}元
            </p>
          </div>
          <div class="center" :class="tabIndex === 1 ? 'active' : ''" @click="dateClick(titleData.curOnWayAmt.secDateTime, 1)">
            <p>{{ new Date(titleData.curOnWayAmt.secDateTime).getDate() || 0 }}日</p>
            <p class="number">
              {{ titleData.curOnWayAmt.secAmount || 0 }}元
            </p>
          </div>
        </div>
        <div class="item">
          <div class="left">下月</div>
          <div class="center" :class="tabIndex === 2 ? 'active' : ''" @click="dateClick(titleData.nextOnWayAmt.firDateTime,2)">
            <p>{{ new Date(titleData.nextOnWayAmt.firDateTime).getDate() || 0 }}日</p>
            <p class="number">
              {{ titleData.nextOnWayAmt.firAmount || 0 }}元
            </p>
          </div>
          <div class="center" :class="tabIndex === 3 ? 'active' : ''" @click="dateClick(titleData.nextOnWayAmt.secDateTime,3)">
            <p>{{ new Date(titleData.nextOnWayAmt.secDateTime).getDate() || 0 }}日</p>
            <p class="number">
              {{ titleData.nextOnWayAmt.secAmount || 0 }}元
            </p>
          </div>
        </div>
        <div class="item">
          <div class="left">隔月</div>
          <div class="center" :class="tabIndex === 4 ? 'active' : ''" @click="dateClick(titleData.lastOnWayAmt.firDateTime,4)">
            <p>{{ new Date(titleData.lastOnWayAmt.firDateTime).getDate() || 0 }}日</p>
            <p class="number">
              {{ titleData.lastOnWayAmt.firAmount || 0 }}元
            </p>
          </div>
          <div class="center" :class="tabIndex === 5 ? 'active' : ''" @click="dateClick(titleData.lastOnWayAmt.secDateTime,5)">
            <p>{{ new Date(titleData.lastOnWayAmt.secDateTime).getDate() || 0 }}日</p>
            <p class="number">
              {{ titleData.lastOnWayAmt.secAmount || 0 }}元
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="tables">
      <my-table :data="tabledata" :columns="columns" :table-page="params" :is-show-filter="false" @on-change="changePage"></my-table>
    </div>
  </div>
</template>

<script>
import MyTable from '_c/my-table/my-table'
import { GetPurchaseOnWay } from '@/api/supplierShip'
export default {
  name: 'pay_transit',
  components: {
    MyTable
  },
  data () {
    return {
      data: {},
      tabledata: [],
      tabIndex: '',
      columns: [
        {
          title: '申购时间',
          key: 'applyTime',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '申购人',
          key: 'userName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '合同编码',
          key: 'purchaseBillNo',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '供应商',
          key: 'supplierName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '物料名称',
          key: 'materialName',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '规格',
          key: 'spec',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '采购数量',
          key: 'quantity',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '单价',
          key: 'price',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '合同金额',
          key: 'amount',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '在途金额',
          key: 'onWayAmount',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '在途数量',
          key: 'onWayQty',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '预计付款时间',
          key: 'payTime',
          minWidth: 150,
          align: 'center'
        }
      ],
      params: {
        pageIndex: 1,
        pageSize: 15,
        total: 0
      },
      titleData: {
        'curOnWayAmt': {
          'firDateTime': '',
          'firAmount': 0,
          'secDateTime': '',
          'secAmount': 0
        },
        'nextOnWayAmt': {
          'firDateTime': '',
          'firAmount': 0,
          'secDateTime': '',
          'secAmount': 0
        },
        'lastOnWayAmt': {
          'firDateTime': '',
          'firAmount': 0,
          'secDateTime': '',
          'secAmount': 0
        }
      }
    }
  },
  methods: {
    dateClick (date, index) {
      if (this.tabIndex === index) {
        this.tabIndex = ''
        this.params.payTime = ''
        this.params.pageIndex = 1
      } else {
        this.tabIndex = index
        this.params.payTime = date
        this.params.pageIndex = 1
      }
      this.getList()
    },
    getList () {
      GetPurchaseOnWay(this.params).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.titleData = res.result
          this.tabledata = res.result.onWayItems
          this.params.total = res.result.totalCount
        }
      })
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .up {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .up-second {
      border: 1px solid lightgray;
      display: flex;
      .item {
        flex: 1;
        text-align: center;
        padding: 20px 20px;
        &:first-child {
          border-right: 1px solid lightgray;
        }
        .text {
          font-size: 14px;
          margin-bottom: 10px;
        }
        .number {
          font-size: 16px;
          font-weight: bold;
          color: black;
        }
      }
    }
  }
  .bar-wrap {
    /*flex: 1;*/
    /*height:300px;*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /*margin-top: 30px;*/
    background: #FFFFFF;
    border-radius: 3px;
    .bar-title {
      padding: 0 15px;
      line-height: 60px;
      border-radius: 3px 3px 0 0;
      background: #dcdee2;
      font-weight: bold;
      font-size: 16px;
      color: black;
      display: flex;
      &.red {
        font-size: 20px;
        font-weight: bold;
        color: red;
      }
    }
    .bar {
      padding: 10px 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .item {
        flex: 1;
        margin-right: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 5px;
        background-color: #FFFFFF;
        .left, .center, .right {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          text-align: center;
          border: 1px solid gray;
          margin-right: -1px;
          &.active {
            border: 2px solid dodgerblue;
            margin-right: 0;
          }
          .number {
            margin: 5px 0;
            font-size: 16px;
            font-weight: bold;
            color: black;
            white-space: nowrap;
          }
        }
        .left {
          flex: 4;
          font-size: 16px;
          font-weight: bold;
        }
        .center {
          flex: 5;
          padding: 10px 0;
          cursor: pointer;
        }
        .right {
          flex: 5;
          cursor: pointer;
        }
      }
    }
  }
  .tables {
    /*padding: 0 20px;*/
    /*margin-right: 10px;*/
    /*height: 650px;*/
    height: 100%;
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
  }
}
</style>
