
<!-- 合同付款详情 -->
<template>
  <div class="container-wrap">
    <div style="margin-bottom:10px">
		<Form ref="formInline" inline :label-width="100" style="float:left">
          <Form-item  label="按供应商查找">
              <select-input v-model="params.supplierName" type="2"></select-input>
              
          </Form-item>
          <Form-item label="按物料查找">
            <select-input v-model="params.materialName" type="3"></select-input>
          </Form-item>
          <Button type="primary" @click="searchFn()">搜索</Button>
      </Form>
        <date-select v-model="params" @change="selectTime"></date-select>
    </div>
    <div style="background:#fff;padding:10px;margin-bottom:10px; position: relative">
        <Tabs v-model="salesVolumeCompanyTotalType" @on-click="tabsChange">
            <TabPane  label="全部" name="1"></TabPane>
            <TabPane :label="(h) => {
                return h('div', [
                    h('span', '50万以上('),
                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['50up']),
                    h('span', ')')])
            }" name="2"></TabPane>
            <TabPane :label="(h) => {
                return h('div', [
                    h('span', '20-50万('),
                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['20-50']),
                    h('span', ')')])
            }" name="3"></TabPane>
            <TabPane :label="(h) => {
                return h('div', [
                    h('span', '10-20万('),
                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['10-20']),
                    h('span', ')')])
            }" name="4"></TabPane>
            <TabPane :label="(h) => {
                return h('div', [
                    h('span', '5-10万('),
                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['5-10']),
                    h('span', ')')])
            }" name="5"></TabPane>
            <TabPane :label="(h) => {
                return h('div', [
                    h('span', '5万以下('),
                    h('span',{style:{color:'red'}}, salesVolumeCompanyTotal['5down']),
                    h('span', ')')])
            }" name="6"></TabPane>
        </Tabs>
        <span style="position: absolute; top: 10px; line-height: 37px; right: 20px;">
          合计: 
          <span style="color: red">{{ getACombined() }}</span>
        </span>
        <div>
            <Button style="margin:0 10px 5px 0" :type="params.supplierId == null || params.supplierId =='' ? 'primary' : 'default'" @click="changeCompany(null,0,'')" >全部</Button>
            <Button 
                style="margin:0 10px 5px 0" 
                @click="changeCompany(i.supplierId,index,i.supplierName)" 
                v-for="(i,index) in statisticsData" 
                :type="params.supplierId == i.supplierId ? 'primary' : 'default'"
                :key="i.supplierId"
                v-if="i.type == salesVolumeCompanyTotalType || salesVolumeCompanyTotalType == '1'">
                {{i.supplierName}}<span :style="params.companySelectId == i.supplierId ?  'color:#ffc107' : 'color:red'"> ({{i.total}})</span>
            </Button>
        </div>
    </div>
    <div class="container">
      
      <!-- 表格 -->
      <div class="table-content">
        <div v-if="data && data.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" :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.check.payDate }}</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.materialSpec }}</div>
                  </div>
                  <div class="col">
                    <div class="label">采购数量：</div>
                    <div class="value">{{ item.purchaseQty * 1 }}</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 * 1 }}元</div>
                  </div>
                  <div class="col">
                    <div class="label">质检金额：</div>
                    <div class="value">{{ item.adjustAmount * 1 }}元</div>
                  </div>
                  <div class="col">
                    <div class="label">已付金额：</div>
                    <div class="value">{{ item.hadPayAmount * 1 }}元</div>
                  </div>
                  <div class="col" style="flex: 1">
                    <Tooltip
                      placement="bottom"
                      @on-popper-show="getData(item)"
                      max-width="600"
                    >
                      <div class="label">
                        <div class="label">本次应付：</div>
                        <div class="value">
                          <span style="color: red">{{ item.actAmount  }}</span>元
                        </div>
                      </div>
                      <div slot="content">
                        <div v-for="(itemPay, index) in paymentList" :key="index">
                          <span style="text-align: left; white-space: normal">
                            物料编码: {{ itemPay.materialcode }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            合同批次: {{ itemPay.batchno }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            退货日期: {{ itemPay.outDate }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            退货数量: {{ itemPay.quantity }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            单价: {{ itemPay.price }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            金额: {{ itemPay.amount }}
                          </span>
                          <span
                            style="
                              padding-left: 16px;
                              text-align: left;
                              white-space: normal;
                            "
                          >
                            原因: {{ itemPay.applyreason }}
                          </span>
                        </div>
                      </div>
                    </Tooltip>
                    
                  </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.check.inoutBillCheck" 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.check.quantityCheck" 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.check.ContractCheck" 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.check.invoiceCheck" 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.check.invoiceCheck" 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.pageNum" :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'
import  dateSelect  from '@/components/dateSelect/dateSelect'
import  selectInput  from '@/components/form/select-input'
import axios from 'axios'
export default {
  name: 'material_pay_detail',
  components: {
    MyTable,
    PassModal,
    MyFormPay,
    StoreInForm,
    QualityForm,
    InvoiceForm,
    ContractForm,
    ApplyForm,
    dateSelect,
    selectInput
  },
  data () {
    return {
        statisticsData:[],
      salesVolumeCompanyTotalType:'1',
      salesVolumeCompanyTotal:{
            '50up':0,
            '20-50':0,
            '10-20':0,
            '5-10':0,
            '5down':0,
        },
        company:[],
      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: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        supplierId: '',
        supplierName: '',
        strTime: '',
        endTime: '',
      },
      paymentList:[],
    }
  },
  methods: {
    getData(item) {
      this.paymentList = [];
      axios
        .post("/cloudApi/stockWater/contractPaymentList", {
          balancePurBillNo: item.purchaseBillNo,
        })
        .then((res) => {
          this.paymentList = res.data.data;
        });
    },
    getSupplierSelectList(req){
			const v = this
			v.loading = true
			axios
				.post('/cloudApi/supplier/selectList', {search:this.params.search})
				.then((res) => {
				v.supplierList = res.data.data
				v.loading = false
				console.log(v.supplierList)
				})
		},
    searchFn(){
      const v = this
      v.getStatistics()
      v.changePage(1)

    },
    selectTime(){
      const v = this
      v.params.supplierId = ''
      v.params.pageNum = 1
      v.getList()
      v.getStatistics()
    },
    changeCompany(_id,index,_name){
			const v = this
			v.params.pageNum = 1
			if(v.params.supplierId == _id || _id == null){
				// v.showList = v.showListCopy.slice(0,10)
				v.params.supplierId = null
        
			}else{
				v.params.supplierId =  _id
        
			}
			v.getList()
			
		},
    tabsChange(){
        const v = this
        v.params.supplierId = null
        //v.searchFn()
    },
    filterChange () {
      this.params.pageNum = 1
      this.params.materialCode = ''
      this.getHistoryPaymentMaterial()
      this.getList()
    },
    materialChange () {
      this.params.pageNum = 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 (pageNum) {
      this.params.pageNum = pageNum
      this.getList()
    },
    showForm (type, item) {
      this.currentItem = { ...item }
      switch (type) {
        // 申购单
        case 0:
          this.currentItem.id = this.currentItem.payBillId
          GetApplyPurchasePageList({
            pageNum: 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
            }
          })
        }
      })
    },
    getStatistics(){
        const v = this
        axios
            .post('/cloudApi/purchaseContract/pay/statistics', v.params)
            .then((res) => {
                this.statisticsData = res.data.data
                v.salesVolumeCompanyTotal = {
                    '50up':0,
                    '20-50':0,
                    '10-20':0,
                    '5-10':0,
                    '5down':0,
                }
                for (let i = 0; i < res.data.data.length; i++) {
                    const element = res.data.data[i];
                    element.total = element.sumMoney * 1
                    const totalkeyName = 
                        element.total < 50000 ? '5down' : 
                        element.total >= 50000 && element.total < 100000 ? '5-10' :
                        element.total >= 100000 && element.total < 200000 ? '10-20' :
                        element.total >= 200000 && element.total < 500000 ? '20-50' :
                        element.total >= 500000 ? '50up' : '';
                    element.type = 
                        element.total < 50000 ? '6' : 
                        element.total >= 50000 && element.total < 100000 ? '5' :
                        element.total >= 100000 && element.total < 200000 ? '4' :
                        element.total >= 200000 && element.total < 500000 ? '3' :
                        element.total >= 500000 ? '2' : '';
                    v.salesVolumeCompanyTotal[totalkeyName] ++

                }
            })
            
    },
    getList () {
        const v = this
        this.$Spin.show();
        axios
            .post('/cloudApi/purchaseContract/pay/list', v.params).then(res=>{
                this.data = res.data.data
                console.log(this.data)
                this.$Spin.hide();
            })
        axios
            .post('/cloudApi/purchaseContract/pay/list/count', v.params).then(res=>{
                this.params.total = res.data.data
            })
        
      
    },
    getACombined() {
      let total = 0
      if (this.statisticsData && this.statisticsData.length > 0) {
        for (let i = 0; i < this.statisticsData.length; i++) {
          if (this.salesVolumeCompanyTotalType == '1' && this.statisticsData[i].total) {
            total = parseFloat(Number(total) + Number(this.statisticsData[i].total)).toFixed(2)
          } else if (this.statisticsData[i].type == this.salesVolumeCompanyTotalType && this.statisticsData[i].total) {
            total = parseFloat(Number(total) + Number(this.statisticsData[i].total)).toFixed(2)
          }
        }
      }
      return total
    }
  },
  mounted () {
    this.getStatistics()
    // this.getHistoryPaymentMaterial()
    this.getList()
    this.getSupplierSelectList()
  }
}
</script>

<style lang="less" scoped>
.container-wrap {
  
  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>



