<template>
  <div class="container">
    <div class="card">
      <div class="title">物料申购</div>
      <div class="item" @click="go(1)">物料采购申请</div>
      <div class="item" @click="go(2)">预付款申请</div>
    </div>
    <div class="card">
      <div class="title">物料出库</div>
      <div class="item" @click="go(3)">领料申请</div>
      <div class="item" @click="go(4)">物料归还申请</div>
      <div class="item" @click="go(5)">退货申请</div>
      <div class="item" @click="go(6)">报损申请</div>
    </div>
    <div class="card">
      <div class="title">供应商管理</div>
      <div class="item" @click="go(7)">价格调整</div>
    </div>
    <!-- 预付款申请 -->
    <apply-pay-form v-model="payShow"></apply-pay-form>
  </div>
</template>

<script>
import ApplyPayForm from './apply-pay-form'
export default {
  name: 'other_apply',
  components: {
    ApplyPayForm
  },
  data () {
    return {
      payShow: false
    }
  },
  methods: {
    go (type) {
      switch (type) {
        case 1 :
          this.$router.push({ name: 'material_apply' })
          break
        case 2 :
          this.payShow = true
          break
        case 3 :
          this.$router.push({ name: 'apply_manage' })
          break
        case 7 :
          this.$router.push({ name: 'provider_price_maintenance' })
          break
        case 6 :
          this.$router.push('test')
          break
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  .card {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .title {
    margin-bottom: 10px;
    width: 280px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #c4c4c4;
  }
  .item {
    padding-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }
}
</style>
