<!--
  @description: 对账发票管理
  @Modifier: dijia
  @routerPath: /personalCenter/reconCiliationLogisticsList
  @date： 2021/8/26
-->
<template>
  <div>
    <div class="shopmall-page-title">
      对账发票管理
    </div>
    <div class="search-content clearfix">
      <section class="fl">
        <el-form ref="reconciliatioForm" :inline="true" :model="infoFrom">
          <el-form-item label="账单标题">
            <el-input v-model="infoFrom.statementName" placeholder="" />
          </el-form-item>
          <el-form-item label="出账日期">
            <el-date-picker
              v-model="statementTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="timestamp"
            />
          </el-form-item>
        </el-form>
      </section>
      <div class="fr">
        <el-button type="purple" @click="searchList">
          搜索
        </el-button>
        <el-button type="gray" @click="resetList">
          重置
        </el-button>
      </div>
    </div>
    <div class="list-title font_normal">
      <div>订单编号</div>
      <div>供货方订单编号</div>
      <div>订单金额（元）</div>
      <div>订单开票状态</div>
      <div>操作</div>
    </div>
    <div
      v-for="(item, index) in allList"
      :key="index"
      class="all-order refund font_normal"
    >
      <div class="item-title">
        <span>对账单标题：{{ item.statementName }}</span>
        <span>店铺：{{ item.supplierName }}</span>
        <span>应付总金额：{{ item.paymentAmount }}元</span>
        <span v-if="item.bilingType == '1'">申请开票类型：集中开票</span>
        <span v-if="item.bilingType != '1'">申请开票类型：分开开票</span>
      </div>
      <div
        v-for="(goodslist, ind) in item.orderInvoicePage"
        :key="ind"
        class="item"
      >
        <div class="item-left">
          <div class="shop-item">
            <span class="count">{{ goodslist.orderNo }}</span>
          </div>
        </div>
        <div class="item-right">
          <div class="total-count">
            <div>
              <span class="count">{{ goodslist.supplierOrderId }}</span>
            </div>
          </div>
          <div class="sleep-fk">
            <div style="color:#1f94f4;">
              ￥{{ goodslist.orderInvoiceAmount }}
            </div>
          </div>
          <div class="assess">
            <div v-if="goodslist.orderInvoiceStatus != '01'">
              未寄出
            </div>
            <div v-if="goodslist.orderInvoiceStatus == '01'">
              已寄出
            </div>
          </div>
          <div
            v-if="
              goodslist.orderInvoiceType === null ||
                goodslist.orderInvoiceType === '01'
            "
            style="color: #1f94f4; cursor: pointer; white-space: nowrap; flex:3; text-align:center;"
            @click="
              orderDetailBtns(
                goodslist,
                goodslist.orderMarkId,
                item.supplierName
              )
            "
          >
            物流详情
          </div>
          <div
            v-if="goodslist.orderInvoiceType == '00'"
            style="color: #1f94f4; cursor: pointer; white-space: nowrap; flex:3; text-align:center;"
            @click="
              downloadBtn(
                goodslist.orderMarkId,
                item.supplierName,
                goodslist.orderNo
              )
            "
          >
            普通电子发票下载
          </div>
        </div>
      </div>
    </div>
    <el-row class="pagination shopmall-pagination p16" style="clear:both;margin:20px 0">
      <div class="page-number fl" style="font-size:14px;">
        共{{ Math.ceil(total / infoFrom.pageSize) }}页 {{ total }}条
      </div>
      <el-pagination
        :current-page="infoFrom.pageNo"
        :total="total"
        :page-sizes="[10, 30, 50]"
        class="fr"
        background
        layout="prev, pager, next, sizes"
        @current-change="pickHandle"
        @size-change="handleSizeChange"
      />
    </el-row>
    <!-- 物流详情 -->
    <!-- <order-detail
      v-if="childenData.dialog"
      :childen-data="childenData"
      :order-detail-obj="orderDetailObj"
      :order-wl-obj="orderWlObj"
    /> -->
    <logisticsDetail
      v-if="dialog.visible"
      :dialog="dialog"
      :order-wl-obj="orderWlObj"
    />
  </div>
</template>
<script>
// KPlogistics
import {
  getStatementInvoiceList,
  logisticsKp,
  getJdInvoiceInfo
} from '@/api/shoppingmall/order'
// import orderDetail from '../purchaser/order-detail'
import logisticsDetail from './logisticsDetail-dialog'

export default {
  components: {
    // orderDetail: orderDetail,
    logisticsDetail
  },
  data() {
    return {
      total: 0,
      current: 1,
      formInline: {
        name: '',
        date: '',
        groundValue: ''
      },
      statementTime: '',
      orderDetailObj: {},
      infoFrom: {
        // applyEndDate: null,
        // applyStartDate: null,
        // goodsName: null,
        // pageNo: 1,
        // pageSize: 15,
        // status: null,
        // userId: null

        startDate: null,
        endDate: null,
        pageNo: 1,
        pageSize: 10,
        supplier: null,
        statementName: null
      },
      childenData: {
        dialog: false // 弹框
      },
      dialog: {
        visible: false // 弹框
      },
      allList: [],
      orderWlObj: []
    }
  },
  created() {
    this.searchList()
  },
  methods: {
    searchList() {
      // 调用获取列表接口
      getStatementInvoiceList(this.infoFrom).then((res) => {
        // this.allList = res.data.records
        this.allList = [
          {
            id: '8d19d25ecc2d429fb7a4b0765a1a6ee1',
            statementCode: '100042021081510002803471208',
            statementName:
              '京东商城/光大生物能源（定远）有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 9493.92,
            orderAmount: 9493.92,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21080203535312705',
                supplierOrderId: '215695172566',
                orderInvoiceAmount: '980.00',
                orderMarkId: 'b2e9879e80df435ea502364d882d0955',
                orderInvoiceType: '00',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: '842ad37dafae4e26867e123bfae04777',
            statementCode: '100042021081510002603831251',
            statementName:
              '京东商城/光大环保能源（玉林）有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 32858.85,
            orderAmount: 32858.85,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21070904535582625',
                supplierOrderId: '212422127606',
                orderInvoiceAmount: '1170.12',
                orderMarkId: '87480df6006c41c7aca72ab6799bb4d4',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: '68bea4efca4f46baaa510c87d0a45235',
            statementCode: '100042021081510003101731260',
            statementName: '京东商城/光大新能源（砀山）有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 5414.17,
            orderAmount: 5414.17,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21072605215553910',
                supplierOrderId: '215322889024',
                orderInvoiceAmount: '1765.84',
                orderMarkId: '4d7080896cee4b439a26944431aed37c',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: '8c771114ca2e4d9f8004763e45c19030',
            statementCode: '100042021081510002803471198',
            statementName:
              '京东商城/光大水务随州水环境治理有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 11939.48,
            orderAmount: 13955.48,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21070604373251167',
                supplierOrderId: '212037231545',
                orderInvoiceAmount: '1267.18',
                orderMarkId: '23e1ce3df13646dcab03feade964633e',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: 'b428e36126104e7c82a324d2c2194553',
            statementCode: '100042021081510003103831305',
            statementName:
              '京东商城/光大哈电环保能源（哈尔滨）有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 131866.67,
            orderAmount: 131866.67,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21071905033535937',
                supplierOrderId: '213600471197',
                orderInvoiceAmount: '83729.13',
                orderMarkId: '5659ad53c9044d95b0304bc0fb347913',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: '6ff107c2eef64c328c7daaff9562cc15',
            statementCode: '100042021081510002603831239',
            statementName: '京东商城/上田环境修复有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 5749.7,
            orderAmount: 5749.7,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21080302375480173',
                supplierOrderId: '216524990600',
                orderInvoiceAmount: '114.80',
                orderMarkId: 'b89baa5d9c754d178dcb7fcb7caad728',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: '5196b00272e64724a497098cbdf92366',
            statementCode: '100042021081510002700701124',
            statementName: '京东商城/光大生物能源(威海)有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 21952.31,
            orderAmount: 21952.31,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21080208503285532',
                supplierOrderId: '215497866288',
                orderInvoiceAmount: '349.00',
                orderMarkId: '6a1f2d18c46543c0a8847cc64f2f7c93',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: '5ca577c1ebf447d9b9274559fa9f3179',
            statementCode: '100042021081510003003841239',
            statementName:
              '京东商城/光大生物能源（涟水）有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 4390.54,
            orderAmount: 4390.54,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21080206565827867',
                supplierOrderId: '215717394462',
                orderInvoiceAmount: '935.74',
                orderMarkId: 'bd09a5ea2121448d9e1c3ed4960693da',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: '009393da34bb4b2c9a035356124ecc03',
            statementCode: '100042021081510002703841187',
            statementName:
              '京东商城/光大环保能源（江山）有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 15306.07,
            orderAmount: 15306.07,
            bilingType: 1.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21071802330057273',
                supplierOrderId: '214018222794',
                orderInvoiceAmount: '12220.87',
                orderMarkId: 'a62e325532a24675876e7f4a0cbd4085',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          },
          {
            id: 'fcf9471ac8f344b7867472ac5586c5c7',
            statementCode: '100042021081510002700701120',
            statementName:
              '京东商城/光大绿色环保固废处置（黄石）有限公司202108期对账单',
            supplierName: '京东商城',
            paymentAmount: 34509.17,
            orderAmount: 34509.17,
            bilingType: 2.0,
            invoiceType: null,
            markId: null,
            orderInvoicePage: [
              {
                id: null,
                orderNo: 'D21071502260388115',
                supplierOrderId: '213665009060',
                orderInvoiceAmount: '7166.02',
                orderMarkId: '3430bc30ad3046b09a28eb37fab5e210',
                orderInvoiceType: '01',
                orderInvoiceStatus: '01'
              }
            ],
            invoiceStatus: '01'
          }
        ]
        this.total = res.data.total
        // this.current = res.data.current
      })
    },
    resetList() {
      // 搜素条件置空
      this.infoFrom.status = null
      this.infoFrom.goodsName = null
      this.infoFrom.applyStartDate = null
      // 调用获取列表接口
      this.searchList()
    },
    pickHandle(val) {
      this.infoFrom.pageNo = val
      this.searchList()
    },
    handleSizeChange(val) {
      this.infoFrom.pageSize = val
      this.searchList()
    },
    // 详情
    orderDetailBtns(item, orderMarkId, name) {
      // console.log(item)
      // this.childenData = {
      //   dialog: true,
      //   type: '01' // 01 新增
      // }
      this.dialog = {
        visible: true
      }
      logisticsKp(orderMarkId, name)
        .then((res) => {
          if (res.header.ret === '0') {
            this.orderWlObj = res.data
            // this.dialog = {
            //   visible: true
            // }
          }
        })
        .catch((err) => {
          throw new Error('查看物流信息失败' + err)
        })
    },
    // 下载
    downloadBtn(orderMarkId, name, orderNo) {
      getJdInvoiceInfo(orderNo, name, orderMarkId)
        .then((res) => {
          var fileUrl = res.data[0].fileUrl
          // 打开下载地址
          window.open(fileUrl, '_blank')
        })
        .catch((err) => {
          throw new Error('下载失败' + err)
        })
    }
  }
}
</script>

<style scoped lang="less">
// @import '../../index.less';
.refund {
  padding: 0 12px;
}
.list-title {
  margin: 12px 12px 0;
  border: 1px solid #f2f2f2;
  background: #fafafa;
  height: 40px;
  line-height: 40px;
  div {
    float: left;
    text-align: center;
    &:nth-child(1) {
      width: 20%;
    }

    &:nth-child(2) {
      width: 20%;
    }

    &:nth-child(3) {
      width: 20%;
    }

    &:nth-child(4) {
      width: 20%;
    }
    &:nth-child(5) {
      width: 20%;
    }
  }
}
.item-title {
  margin-top: 20px;
  width: 100%;
  background-color: #fafafa;
  height: 40px;
  line-height: 40px;
  border: 1px solid #f2f2f2;
  border-bottom: 0;

  span {
    display: inline-block;

    &:nth-child(1) {
      margin-left: 15px;
      width: 40%;
    }
    &:nth-child(2) {
      width: 10%;
    }
    &:nth-child(3) {
      width: 15%;
    }
    &:nth-child(4) {
      width: 15%;
    }
  }
}

.item {
  display: flex;

  .item-left {
    width: 20%;
    border-top: 1px solid #f2f2f2;
    line-height: 42px;
    .shop-item {
      text-align: center;
      border-left: 1px solid #f2f2f2;
      border-bottom: 1px solid #f2f2f2;
      height: 43px;
    }
  }

  .item-right {
    width: 80%;
    border: 1px solid #f2f2f2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    line-height: 42px;
    .total-count {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-right: 1px solid #f2f2f2;
      height: 100%;
      flex: 3;
    }

    .sleep-fk {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      flex: 3;
      height: 100%;
      border-right: 1px solid #f2f2f2;
    }

    .assess {
      flex: 3;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-right: 1px solid #f2f2f2;
    }
  }
}

.gooslist_count {
  margin-left: 30px;
  flex: 5;
  width: 60px;
  color: red;
  display: flex;
  justify-items: center;
  align-items: center;
}
.font_normal {
  font-family: 'PingFangSC-Regular', 'PingFang SC';
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
}
</style>
