<!-- 合同付款详情 -->
<template>
  <div class="container-wrap">
    <div class="filter">
      <span style="font-size: 14px;font-weight: bold;">历史付款记录</span>
      <span style="padding: 0 10px">-</span>
      <Select v-model="params.supplierId" @on-change="filterChange" style="width:200px">
        <Option v-for="item in supplierList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <span style="float: right;cursor: pointer;" @click="back">&lt;&lt;返回</span>
    </div>
    <div class="filter">
      <DatePicker v-model="params.beginTime" @on-change="filterChange" type="month" placeholder="开始日期" style="width: 150px"></DatePicker>
      <span style="padding: 0 10px">-</span>
      <DatePicker v-model="params.endTime" @on-change="filterChange" type="month" placeholder="结束日期" style="width: 150px"></DatePicker>
      <span style="margin-left: 40px">物料名称：</span>
      <Select v-model="params.materialCode" @on-change="materialChange" clearable style="width:150px">
        <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <span style="margin-left: 10px;">
        共有
        <span style="color: red;">{{ data.payBillNum || 0 }}</span>
        个付款合同，总计付款
        <span style="color: red;">{{ data.totalAmount || 0 }}</span>
        元
      </span>
    </div>
    <div class="container">
      <!-- 表格 -->
      <div class="table-content">
        <div v-if="data.payBillItems && data.payBillItems.length === 0" style="height: 100%;display: flex;justify-content: center;align-items: center">
          暂无数据
        </div>
        <div v-else class="list">
          <div class="item" v-for="(item, index) in data.payBillItems" :key="index">
            <div class="content">
              <div class="item-left">
                <div class="row">
                  <div class="col">
                    <div class="label">合同编码：</div>
                    <div class="value">{{ item.purchaseBillNo }}</div>
                  </div>
                  <div class="col">
                    <div class="label">供应商：</div>
                    <div class="value">{{ item.supplierName }}</div>
                  </div>
                  <div class="col">
                    <div class="label">付款期限：</div>
                    <div class="value">{{ item.payTimeLimit }}</div>
                  </div>
                  <div class="col" style="flex: 1">
                    <div class="label">单价：</div>
                    <div class="value">{{ item.price }}</div>
                  </div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="label">物料名称：</div>
                    <div class="value">{{ item.materialName }}</div>
                  </div>
                  <div class="col">
                    <div class="label">规格：</div>
                    <div class="value">{{ item.spec }}</div>
                  </div>
                  <div class="col">
                    <div class="label">采购数量：</div>
                    <div class="value">{{ item.purchaseQty }}</div>
                  </div>
                  <div class="col" style="flex: 1"></div>
                </div>
                <div class="row">
                  <div class="col">
                    <div class="label">合同金额：</div>
                    <div class="value">{{ item.contractAmount }}元</div>
                  </div>
                  <div class="col">
                    <div class="label">质检金额：</div>
                    <div class="value">{{ item.qtyCheckAmount }}元</div>
                  </div>
                  <div class="col">
                    <div class="label">已付金额：</div>
                    <div class="value">{{ item.hadPayAmount }}元</div>
                  </div>
                  <div class="col" style="flex: 1">
                    <div class="label">本次应付：</div>
                    <div class="value">
                      <span style="color: red">{{ item.actAmount  }}</span>元
                    </div>
                  </div>
                </div>
              </div>
              <div class="item-right">
                <div class="forms">
                  <div class="row">
                    <div class="col">
                      <span class="text" @click="showForm(0, item)">申购单</span>
                      <Icon type="md-checkmark" color="#07C909" size="20" />
                    </div>
                    <div class="col">
                      <span class="text" @click="showForm(1, item)">入库单</span>
                      <Icon v-if="item.hasInStock" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                    <div class="col">
                      <span class="text" @click="showForm(2, item)">质检单</span>
                      <Icon v-if="item.hasQtyCheck" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                  </div>
                  <div class="row">
                    <div class="col">
                      <span class="text" @click="showForm(3, item)">合同</span>
                      <Icon v-if="item.hasContractFile" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                    <div class="col">
                      <span class="text" @click="showForm(4, item)">发票</span>
                      <Icon v-if="item.hasInvoiceFile" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                    <div class="col"></div>
                  </div>
                  <div class="row">
                    <div class="col" style="justify-content: flex-start">
                      <span class="text" style="text-decoration: none;cursor: auto">质检金额&lt;=发票金额</span>
                      <Icon v-if="item.hasGreaterCheckAmt" type="md-checkmark" color="#07C909" size="20" />
                      <Icon v-else type="md-close" color="red" size="20" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="other" style="margin-top: 2px" v-if="item.hasOtherPayBill">
              <Collapse :value="item.payObjList ? '1' : '0'" @on-change="open(item)">
                <Panel name="1">
                  合同付款记录
                  <div slot="content">
                    <div class="row" v-for="(payItem, payIndex) in item.payObjList" :key="payIndex">
                      <div class="col">
                        <div class="label">付款时间：</div>
                        <div class="value">{{ payItem.payTime }}</div>
                      </div>
                      <div class="col">
                        <div class="label">付款金额：</div>
                        <div class="value">
                          <span style="color: red">{{ payItem.payAmount }}</span>元
                        </div>
                      </div>
                      <div class="col">
                        <div class="label">审批状态：</div>
                        <div class="value" :style="{color: payItem.approvalStateStr === '待审批'? 'red' : '' }">
                          {{ payItem.approvalStateStr }}
                        </div>
                      </div>
                    </div>
                  </div>
                </Panel>
              </Collapse>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="table-page">
        <Page :current="params.pageIndex" :total="params.total" :show-total="true" :page-size="10" show-elevator @on-change="changePage" />
      </div>
    </div>
    <pass-modal v-model="passShow" :data="currentItem" @getlist="getList"></pass-modal>
    <my-form-pay v-model="payShow" type="form" :data="currentItem" :showSider="false"></my-form-pay>
    <store-in-form v-model="storeInShow" :data="currentItem"></store-in-form>
    <quality-form v-model="qualityShow" :data="qualityData"></quality-form>
    <invoice-form v-model="invoiceShow" :data="currentItem" @getlist="getList"></invoice-form>
    <contract-form v-model="contractShow" :data="currentItem" @getlist="getList"></contract-form>
    <apply-form v-model="applyShow" :data="currentItem" @getlist="getList"></apply-form>
  </div>
</template>

<script>
import {
  GetHistoryPaymentRecord,
  GetHistoryPaymentMaterial,
  GetApplyPurchasePageList,
  GetContractQtyCheckBill,
  GetApplyPayBill
} from '@/api/applyPurchase'
import MyTable from '_c/my-table/my-table'
import MyFormPay from '_c/my-modal-pay'
import PassModal from './modals/pass-modal'
import StoreInForm from './modals/store-in-form'
import QualityForm from './modals/quality-form'
import InvoiceForm from './modals/invoice-form'
import ContractForm from './modals/contract-form'
import ApplyForm from './modals/apply-pass-form'
import { GetInStockBill } from '@/api/stock'
export default {
  name: 'material_pay_detail',
  components: {
    MyTable,
    PassModal,
    MyFormPay,
    StoreInForm,
    QualityForm,
    InvoiceForm,
    ContractForm,
    ApplyForm
  },
  data () {
    return {
      titleDay: 0,
      tabsIndex: 0,
      access: this.$store.state.user.access,
      contractShow: false,
      invoiceShow: false,
      qualityShow: false,
      storeInShow: false,
      payShow: false, // 申购单
      passShow: false, // 驳回
      applyShow: false,
      currentItem: {},
      qualityData: [],
      list: [],
      supplierList: [],
      data: {},
      params: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
        supplierId: '',
        beginTime: '',
        endTime: '',
        materialCode: ''
      }
    }
  },
  methods: {
    filterChange () {
      this.params.pageIndex = 1
      this.params.materialCode = ''
      this.getHistoryPaymentMaterial()
      this.getList()
    },
    materialChange () {
      this.params.pageIndex = 1
      this.getList()
    },
    back () {
      this.$store.commit('closeTag', this.$route)
      setTimeout(() => {
        this.$router.push('pay_history')
      }, 500)
    },
    open (item) {
      if (!item.payObjList) {
        GetApplyPayBill({
          purchaseBillNo: item.purchaseBillNo,
          payBillId: item.payBillId
        }).then(res => {
          if (res.code === 0) {
            this.$set(item, 'payObjList', res.result)
          }
        })
      }
    },
    changePage (pageIndex) {
      this.params.pageIndex = pageIndex
      this.getList()
    },
    showForm (type, item) {
      this.currentItem = { ...item }
      switch (type) {
        // 申购单
        case 0:
          this.currentItem.id = this.currentItem.payBillId
          GetApplyPurchasePageList({
            pageIndex: 1,
            pageSize: 1,
            purBillState: 1,
            keyWord: this.currentItem.applyBillNo
          }).then(res => {
            if (res.code === 0) {
              this.currentItem = { ...this.currentItem, ...res.result.list[0] }
              this.payShow = true
              console.log(this.currentItem)
            }
          })
          break
        case 1:
          GetInStockBill({
            inOutStorageNo: this.currentItem.inOutStorageNo,
            applyBillNo: this.currentItem.applyBillNo
          }).then(res => {
            if (res.code === 0) {
              this.currentItem = { ...this.currentItem, ...res.result }
              this.storeInShow = true
            }
          })
          break
        case 2:
          GetContractQtyCheckBill({
            purchaseBillNo: this.currentItem.purchaseBillNo
          }).then(res => {
            if (res.code === 0) {
              this.qualityData = res.result
              this.qualityShow = true
            }
          })
          break
        case 3:
          this.contractShow = true
          break
        case 4:
          this.invoiceShow = true
          break
      }
    },
    getHistoryPaymentMaterial () {
      GetHistoryPaymentMaterial({
        beginTime: this.params.beginTime,
        endTime: this.params.endTime,
        supplierId: this.params.supplierId
      }).then(res => {
        if (res.code === 0) {
          this.list = res.result.map(item => {
            return {
              label: item.value,
              value: item.key
            }
          })
        }
      })
    },
    getList () {
      GetHistoryPaymentRecord({
        ...this.params
      }).then(res => {
        if (res.code === 0) {
          this.data = res.result
          this.params.total = res.result.payBillNum
        }
      })
    }
  },
  mounted () {
    this.params.supplierId = this.$route.query.supplierId
    this.params.beginTime = this.$route.query.beginTime
    this.params.endTime = this.$route.query.endTime
    this.supplierList = this.$route.query.supplierList
    this.getHistoryPaymentMaterial()
    this.getList()
  }
}
</script>

<style lang="less" scoped>
.container-wrap {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .filter {
    margin-bottom: 10px;
    height: 32px;
    line-height: 32px;
  }
  .container {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .table-content {
      flex: 1;
      overflow: hidden;
      .row {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        &:last-child {
          margin-bottom: 0;
        }
        .col {
          padding: 0 5px;
          flex: 2;
          overflow: hidden;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .value {
            flex: 1;
            overflow: hidden;
            word-break: break-all;
          }
        }
      }
      .list {
        height: 100%;
        overflow: auto;
        .item {
          margin-bottom: 10px;
          &:last-child {
            margin-bottom: 0;
          }
          .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border: 1px solid #d7d7d7;
            border-radius: 5px;
            background: #FFFFFF;
            .item-left {
              padding: 0 10px;
              flex: 1;
              border-right: 1px solid #333333;
            }
            .item-right {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .forms {
                padding: 0 10px;
                .col {
                  align-items: center;
                  .text {
                    text-decoration: underline;
                    cursor: pointer;
                  }
                }
              }
              .btn {
                display: flex;
                flex-direction: column;
              }
            }
          }
        }
      }
    }
    .table-page {
      padding: 10px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 43px;
      overflow: hidden;
    }
  }
}
</style>
