// 新计费账单
<template>
  <div class="steel_inbound" style="width:100%">
    <div class="sache">
      <el-form :inline="true">
        <el-input
          placeholder="请输入收货客户或承运商"
          v-model="input"
          clearable
        >
        </el-input>
        <el-date-picker
          v-model="startTime"
          type="date"
          placeholder="选择日期"
          style="width:150px"
        >
        </el-date-picker>
        <span>至</span>
        <el-date-picker
          v-model="endTime"
          type="date"
          placeholder="选择日期"
          style="width:150px"
        >
        </el-date-picker>
        <el-button type="primary" class="btn" @click="onclick">
          <i class="el-icon-search"></i>查询
        </el-button>
        <el-form-item
          ><label
            class="el-form-item__label"
            style="width: auto;font-size: 16px;line-height: auto;"
            >发票金额/账单金额/磅重/车数 :{{ totalStatementExcludTax }}元/{{
              totalStatementAmount
            }}元/{{ totalNetWeight }}吨/{{ totalCapacityNum }}车
          </label>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <dilTable v-bind.sync="options" @func="func">
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showPhoto(scope.row)">
              查看发票
            </el-button>
            <el-button type="text" size="small" @click="showDetails(scope.row)">
              查看详单
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deleteStatement(scope.row)"
            >
              删除账单
            </el-button>
          </template>
        </el-table-column>
      </dilTable>
    </div>
    <!-- 发票图片 -->
    <el-dialog title="发票图片" :visible.sync="isShowPhoto">
      <div v-for="(item, i) in photoList" :key="i">
        <el-image
          :src="item"
          fit="fill"
          :preview-src-list="photoList"
          style="width:300px;height:300px"
        >
          <div slot="error" class="image-slot">
            <span>图片加载失败</span>
          </div>
        </el-image>
      </div>
    </el-dialog>
    <!-- 查询账单底下的计费详单-->
    <el-dialog title="详单信息" :visible.sync="isShowDetails" width="80%">
      <div>
        <el-button
          icon="el-download"
          type="primary"
          @click="exportExcel('详单信息')"
          >导出Excel</el-button
        >
      </div>
      <div class="table1">
        <el-table
          :data="visibleList1"
          :span-method="objectSpanMethod1"
          ref="tableRef1"
          border
          style="width: 100%; margin-top: 20px"
          :height="350"
          id="details"
          individual-panel
        >
          <el-table-column
            width="40"
            label="序号"
            align="center"
            :resizable="false"
          >
            <template slot-scope="scope">{{ scope.row.group + 1 }}</template>
          </el-table-column>
          <el-table-column
            prop="orderTime"
            label="订单日期"
            width="110px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="saleMakeDate"
            label="制单日期"
            width="130px"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="newCapacityNo"
            column-key="newCapacityNo"
            label="车号"
            align="center"
            width="90px"
            sortable
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="consigneeName"
            label="客户"
            width="160px"
            align="center"
            column-key="consigneeName"
            sortable
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="materialName"
            column-key="materialNameList"
            label="物料名称"
            align="center"
            width="150px"
            sortable
          >
          </el-table-column>
          <el-table-column
            prop="materialSpe"
            label="规格型号"
            column-key="materialSpe"
            align="center"
            sortable
            width="120px"
          >
          </el-table-column>
          <el-table-column
            prop="materialPlanNumber"
            label="辅助数量"
            align="center"
            width="100px"
          >
          </el-table-column>
          <el-table-column
            prop="materialAcWeight"
            label="累计出库数量"
            align="center"
            width="100px"
          >
          </el-table-column>
          <el-table-column
            prop="materialNum"
            label="累计检斤通知单辅助数量"
            align="center"
            width="150px"
          >
          </el-table-column>
          <el-table-column prop="netWeight" label="磅重" show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="saleRemark"
            column-key="saleRemark"
            label="摘要"
            width="150px"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="carrierName"
            label="承运商"
            align="center"
            width="80px"
            column-key="carrierList"
            sortable
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="addressPlace"
            label="下货地点"
            width="300px"
            sortable
            column-key="actualAddress"
          >
          </el-table-column>
          <el-table-column prop="priceValue" label="单价" width="100px">
          </el-table-column>
          <el-table-column
            prop="detailsAmount"
            label="运费"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="closeEntryId"
            label="分录ID"
            width="120px"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="actualCity"
            label="卸货城市"
            width="120px"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="areaName"
            label="分区"
            width="150px"
            align="center"
            column-key="saleAreaList"
          >
          </el-table-column>
          <el-table-column prop="unloadType" label="卸货类型" width="60px">
          </el-table-column>
          <el-table-column
            prop="saleOrderReceiveCustomer"
            label="收款客户"
            width="120px"
            show-overflow-tooltip
          >
          </el-table-column>
          <!-- <el-table-column
                prop="addressPlace"
                label="收货地址"
                width="250px"
                sortable
                column-key="addressPlace"
                :filters="filteraddressPlace"
              >
              </el-table-column> -->
          <el-table-column
            prop="materialWeight"
            label="理重"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            prop="paymentCustomer"
            label="付款单位"
            width="120px"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="consingneeSettlementMethod"
            label="结算方式"
            width="120px"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            prop="recordUserName"
            label="操作人"
            width="120px"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="detailsRemark"
            label="直接修改备注"
            width="120px"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button
                @click="showPhoto2(scope.row)"
                type="text"
                size="small"
              >
                {{ scope.row.detailsRemark }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      title="查看凭证"
      :visible.sync="showPhotoPreview"
      :before-close="() => (showPhotoPreview = false)"
    >
      <img
        width="100%"
        v-for="(item, index) in previewList"
        :key="index"
        :src="item"
        alt=""
      />
    </el-dialog>
  </div>
</template>

<script>
import { getCookie } from '@/utils/util.js'
import { sjTime } from '@/utils/sharedJsFile'
import FileSaver from 'file-saver'
export default {
  data() {
    return {
      showPhotoPreview: false,
      previewList: [],
      input: '',
      userId: null,
      photoList: [],
      isShowPhoto: false,
      isShowDetails: false,
      startTime: null,
      endTime: null,
      spanArr1: [],
      visibleList1: [],
      options: {
        requestUrl: ''
      },
      totalCapacityNum: null,
      totalNetWeight: null,
      totalStatementAmount: null,
      totalStatementExcludTax: null,
      orgCodeList: [
        'wuliuyunshubu',
        'dagangadmin',
        'shichangxinxibu',
        'zidonghuabu'
      ],
      mergeList1: [
        '选择',
        '序号',
        '整车操作',
        '销售订单状态',
        '销售订单号',
        '发货单位',
        '司机电话',
        '运输订单号',
        '签收地址',
        '签收时间',
        '抵达地址',
        '抵达时间',
        '出厂时间',
        '进厂时间',
        '运单状态',
        '车号',
        '承运商',
        '收货地址',
        '下货地点',
        '业务员',
        '送货单打印',
        '收货客户电话',
        '是否自提',
        '订单日期',
        '短信发送',
        '销售片区',
        '抵达时间',
        '签收时间',
        '最终运价',
        '摘要',
        '净重',
        '皮重时间',
        '皮重',
        '毛重时间',
        '毛重'
      ]
    }
  },
  created() {
    if (!this.orgCodeList.includes(getCookie('orgCode'))) {
      this.userId = getCookie('userId')
    }
    this.startTime = new Date()
    this.endTime = new Date()
    this.startTime.setDate(26)
    this.endTime.setDate(25)
    console.log('month:', this.startTime.getMonth())
    if (this.startTime.getMonth() == 0) {
      this.startTime.setFullYear(this.startTime.getFullYear() - 1)
      this.startTime.setMonth(11)
    } else {
      this.startTime.setMonth(this.startTime.getMonth() - 1)
    }
    this.onclick()
  },
  methods: {
    func(res) {
      let list = res.list
      this.totalCapacityNum = list.reduce((prev, item) => {
        return prev + item.carNum
      }, 0)
      this.totalNetWeight =
        list.reduce((prev, item) => {
          return prev + item.totalNetWeight * 1000
        }, 0) / 1000
      this.totalStatementExcludTax =
        list.reduce((prev, item) => {
          return prev + item.statementExcludTax * 1000
        }, 0) / 1000
      this.totalStatementAmount =
        list.reduce((prev, item) => {
          return prev + item.sumAmout * 1000
        }, 0) / 1000
    },
    onclick() {
      if (this.startTime && this.endTime) {
        let startTime = sjTime(this.startTime)
        let endTime = sjTime(this.endTime)
        this.options.requestUrl =
          '/api/v1/bms/getTruckStatementList?apiId=179&con=' +
          this.input +
          '&userId=' +
          this.userId +
          '&i=' +
          new Date() +
          '&startTime=' +
          startTime +
          '&endTime=' +
          endTime
      } else {
        this.options.requestUrl =
          '/api/v1/bms/getTruckStatementList?apiId=179&con=' +
          this.input +
          '&userId=' +
          this.userId +
          '&i=' +
          new Date()
      }
    },
    showPhoto(row) {
      this.photoList = []
      this.isShowPhoto = true
      this.axios
        .post('/api/v1/bms/getStatementPhoto?statementId=' + row.statementId)
        .then(res => {
          console.log('statementPhoto:', res)
          if (res.data) {
            this.photoList = res.data
          }
        })
    },
    showPhoto2(row) {
      this.showPhotoPreview = true
      this.previewList = []
      this.axios
        .post('/api/v1/uc/getPicture', {
          urls: row.photo
        })
        .then(res => {
          console.log(res)
          this.previewList = res.data
        })
    },
    showDetails(row) {
      this.isShowDetails = true
      this.visibleList1 = []
      let map = {
        statementId: row.statementId
      }
      this.axios.post('/api/v1/bms/findDetailsForStatement', map).then(res => {
        console.log('findDetailsForStatement:', res)
        this.visibleList1 = res.data.data
        this.getSpanArr1(this.visibleList1)
      })
    },
    exportExcel(tableTitle) {
      let tables = document.getElementById('details') //此处是拿表格document元素,也可以取父div的ref
      let table_book = XLSX.utils.table_to_book(tables)
      console.log('table_book', table_book)
      var table_write = XLSX.write(table_book, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([table_write], { type: 'application/octet-stream' }),
          tableTitle + '.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, table_write)
      }
      return table_write
    },
    deleteStatement(row) {
      this.$confirm('此操作将永久删除该账单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.axios
            .post(
              '/api/v1/bms/deleteConvertedTruckStatement/' + row.statementId
            )
            .then(res => {
              this.$message.success(res.data.data)
              this.onclick()
            })
        })
        .catch(() => {})
    },
    getSpanArr1(data) {
      //每次调用方法初始化
      this.spanArr1 = []
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr1.push(1)
          data[i].group = i
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (
            data[i].saleOrderMaterialId === data[i - 1].saleOrderMaterialId ||
            (data[i].weightBatchId &&
              data[i].weightBatchId === data[i - 1].weightBatchId)
          ) {
            this.spanArr1[this.pos] += 1
            data[i].group = data[i - 1].group
            this.spanArr1.push(0)
          } else {
            this.spanArr1.push(1)
            this.pos = i
            data[i].group = data[i - 1].group + 1
          }
        }
      }
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (this.mergeList1.indexOf(column.label) != -1) {
        const _row = this.spanArr1[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>

<style lang="scss" scode>
.steel_inbound {
  .sache {
    padding: 1.25rem 0.375rem;
    .el-input {
      width: 20%;
      margin-right: 1.25rem;
    }
  }
}
</style>
