<template>
  <div class="app-container">
    <!--    <el-container style=" border: 1px solid #eee">-->
    <!--      <el-aside width="420px" style="background-color: rgb(238, 241, 246)">-->
    <div class="filter-container">
      <div style="margin: auto; left: 0; right: 0; top: 0; bottom: 0">
        <el-input
          size="mini"
          clearable
          v-model="search.keyWord"
          placeholder="关键字"
          style="width: 150px;"
          class="filter-item"
          @keyup.enter.native="searchData"/>

        <el-select style="width: 95px;" size="mini" v-model="search.chargeKind" placeholder="收款方式">
          <el-option
            v-for="item in chargeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select style="width: 95px;" size="mini" v-model="search.guarantorCheckFlag" placeholder="担保状态">
          <el-option
            label="全部"
            value="">
          </el-option>
          <el-option
            label="担保未审核"
            value="0">
          </el-option>
          <el-option
            label="担保已审核"
            value="1">
          </el-option>
        </el-select>

        <el-date-picker
          size="mini"
          v-model="valueDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy - MM - dd "
          value-format="yyyy-MM-dd"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>

        <el-date-picker
          size="mini"
          v-model="checkDate"
          type="daterange"
          range-separator="至"
          start-placeholder="审核开始日期"
          end-placeholder="审核结束日期"
          format="yyyy - MM - dd "
          value-format="yyyy-MM-dd"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>

        <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
          搜索
        </el-button>
        <el-button size="mini" class="filter-item" type="primary" icon="el-icon-document" @click="exportData">
          导出
        </el-button>
        <el-checkbox :true-label="1" :false-label="0" v-model="search.chargeMoneyFlag" @change="getList">查询过滤金额为0的数据</el-checkbox>
        <br><br>
        <el-button size="mini" class="filter-item" type="success" icon="el-icon-finished"
                   @click="showDialogReviewMulti(0)">
          审核
        </el-button>
        <el-button size="mini" class="filter-item" type="warning" icon="el-icon-s-release"
                   @click="showDialogReviewMulti(1)">
          取消审核
        </el-button>

        <el-tag>您一共勾选了{{ selectBillItems.length }}条</el-tag>

        <div class="top-right-btn">
          <el-switch
            size="mini"
            class="filter-item"
            v-model="queryReviewed"
            style="margin-right: 1em"
            inactive-color="#13ce66"
            active-text="已审核"
            inactive-text="待审核"
            @change="getList"
          >
          </el-switch>

          <el-tooltip effect="dark" content="刷新" placement="top">
            <el-button size="mini" circle icon="el-icon-refresh" @click="tableRefresh()"/>
          </el-tooltip>
        </div>
      </div>
      <div class="rowHoverNone">
        <el-table
          :data="billTableData"
          v-loading="billListLoading"
          @row-click="handleClickTableRow"
          size="mini"
          ref="sendBillTable"
          row-key="id"
          border
          max-height="600"
          :row-style="customRowStyle"
          @selection-change="onTableSelectionChange"
          style="margin-top: 10px">
          <!--          <el-table-column fixed label="操作" align="center" width="80" class-name="small-padding fixed-width">-->
          <!--            <template slot-scope="{row}">-->
          <!--              <el-button-->
          <!--                size="mini"-->
          <!--                type="success"-->
          <!--                icon="el-icon-finished"-->
          <!--                class="iconfont"-->
          <!--                v-show="row.itemState === 5"-->
          <!--                title="审核"-->
          <!--                @click.stop="showDialogReview(row,0)">-->
          <!--              </el-button>-->
          <!--              <el-button-->
          <!--                size="mini"-->
          <!--                type="info"-->
          <!--                icon="el-icon-s-release"-->
          <!--                class="iconfont"-->
          <!--                v-show="row.itemState === 6"-->
          <!--                title="取消审核"-->
          <!--                @click.stop="showDialogReview(row,1)">-->
          <!--              </el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            type="selection"
            width="55"
            :reserve-selection="true">
          </el-table-column>
          <el-table-column
            key="productName"
            prop="productName"
            label="产品类型"
            width="100"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <a href="javascript:;" style="color: #20a0ff" @click.stop="openOrderDetail(row)">{{ row.productName }}</a>
            </template>
          </el-table-column>
          <el-table-column
            key="orderCode"
            prop="orderCode"
            label="订单编号"
            width="120"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <a href="javascript:;" style="color: #20a0ff" @click.stop="getOrderStep(row)">{{ row.orderCode }}</a>
            </template>
          </el-table-column>
          <template v-for="column in billColumnNames">
            <el-table-column
              :key="column.field"
              :prop="column.field"
              :label="column.name"
              :width="column.width"
              :formatter="columnFormatter"
              sortable
              show-overflow-tooltip>
            </el-table-column>
          </template>
        </el-table>
        <pagination
          v-show="listData.total>0"
          :total="listData.total"
          :page.sync="listData.page"
          :limit.sync="listData.pageSize"
          :page-sizes="[10, 20, 30, 50,100]"
          @pagination="getList()"/>
      </div>
    </div>

    <el-dialog title="发货单审核" :visible.sync="dialogReviewVisible" width="40%">
      <el-card v-if="reviewSendItem.chargeKind === 1" class="box-card">
        <div class="text item"><b>订单编号: </b> {{ reviewSendItem.orderCode }}</div>
        <div class="text item"><b>物流名称: </b> {{ reviewSendItem.logisticName }}</div>
        <div class="text item"><b>物流货号: </b> {{ reviewSendItem.logisticsCode }}</div>
        <div class="text item"><b>物流单日期: </b> {{ reviewSendItem.logisticsBillDate }}</div>
      </el-card>

      <el-form label-position="top" label-width="80px">
        <el-form-item label="发货审核说明">
          <el-input type="textarea" v-model="reviewForm.reviewMemo"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogReviewVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSendBillReview">确 定</el-button>
      </div>
    </el-dialog>

    <order-step ref="orderStep"></order-step>
    <el-dialog title="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" width="1200px" top="20px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
  </div>
</template>

<script>
import {sendBillReview, sendBillReviewBack, sendBillReviewPage} from '@/api/delivery/delivery'
import OrderDetail from '@/components/orderDetail/orderDetail'
import OrderStep from "@/components/orderStep/orderStep";
import OrderMessage from "@/components/orderMessage/orderMessage";
import {exportData} from "@/api/orderCharge/orderCollection";

const defaultItems = [
  {
    name: '客户名称', field: 'clientName', width: '100'
  },
  {
    name: '平台单号', field: 'platformOrderID', width: '120'
  },
  {
    name: '订单总额', field: 'orderMoneyTotal', width: '60'
  },
  {
    name: '应收金额', field: 'chargeMoney', width: '60'
  },
  {
    name: '已收金额', field: 'payMoney', width: '60'
  },
  {
    name: '发货时间', field: 'sendDate', width: '120'
  },
  {
    name: '代收金额', field: 'logisticsRecMoney', width: '60'
  },
  {
    name: '代收情况', field: 'collectDetail', width: '60'
  },
  {
    name: '订单收款方式', field: 'payKind', width: '160'
  },
  {
    name: '物流名称', field: 'logisticName', width: '120'
  },
  {
    name: '物流货号', field: 'logisticsCode', width: '160'
  },
  {
    name: '订单名称', field: 'orderName', width: '120'
  },
  {
    name: '发货单号', field: 'sendBillCode', width: '160'
  },
  {
    name: '担保人', field: 'guarantorName', width: '80'
  },
  {
    name: '担保金额', field: 'guarantorMoney', width: '60'
  },
  {
    name: '担保状态', field: 'guarantorCheckFlag', width: '60'
  },
  {
    name: '发货反馈人', field: 'feedBackMan', width: '100'
  },
  {
    name: '收款方式', field: 'chargeKind', width: ''
  },
  {
    name: '担保审核退回原因', field: 'guarantorReturnMemo', width: '160'
  },
  {
    name: '发货方式', field: 'sendKind', width: '80'
  },
  {
    name: '发货包数', field: 'sendBoxCount', width: '60'
  },
  {
    name: '生产备注', field: 'orderMemo', width: '160'
  },
  {
    name: '审核说明', field: 'sendCheckMemo', width: '160'
  },
  {
    name: '审核时间', field: 'sendCheckDate', width: '160'
  }
]

export default {
  name: 'sendBillReview',
  components: {
    OrderStep,
    OrderDetail,
    OrderMessage
  },
  data() {
    return {
      valueDate: null,
      checkDate: null,
      queryReviewed: false,
      search: {
        keyWord: '',
        beginTime: '',
        endTime: '',
        checkBeginTime: '',
        checkEndTime: '',
        guarantorCheckFlag: '',
        chargeKind: -1,
        itemState: 5,
        chargeMoneyFlag: 0
      },
      billColumnNames: Object.assign([], defaultItems),

      chargeOptions: [
        {label: '全部', value: -1},
        {label: '现金', value: 0},
        {label: '物流代收', value: 1},
        {label: '全额担保', value: 2},
        {label: '预存', value: 3},
        {label: '预收款', value: 4}
      ],

      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },

      detailVisible: false,
      dialogReviewVisible: false,

      billListLoading: false,
      billTableData: [],
      selectBillItems: [],

      reviewSendItem: {},
      reviewOperation: 0, //0审核1取消审核
      reviewForm: {
        ids: '',
        reviewMemo: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getpayKind(payKind) {
      const _that = this
      // console.log(payKind);
      var htmls = ''
      var payKinds = []
      var payKindArray = []
      payKindArray = payKind.split('+')
      payKindArray.forEach(item => {
        var kindItem = item.split(':')
        payKinds.push(kindItem)
      })
      for (let i = 0; i < payKinds.length; i++) {
        var item = payKinds[i]
        if (item[1] == '担保人') {
          htmls += item[1] + '-' + item[2] + '-' + item[3]
        } else {
          htmls += item[1] + '-' + item[2]
        }
      }
      // payKind = payKind.split('+')
      // payKind.forEach(item => {
      //   var kindItem = item.split(':')
      //   payKinds.push(kindItem)
      // })
      // console.log(payKinds);
      return htmls
    },
    handleClickTableRow(row, column, event) {
      this.$refs.sendBillTable.toggleRowSelection(row)
    },
    // 获取订单信息
    openOrderDetail(row) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.idOrder
        _that.$refs.orderDetail.getInfo()
      })
    },
    // 订单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true
      _that.$nextTick(function () {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.idOrder
        _that.$refs.orderMessage.getList()
      })
    },
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.$refs.orderStep.idOrder = row.idOrder
      _that.$refs.orderStep.getOrderStep()
    },
    getList() {
      const _that = this
      _that.billListLoading = true

      if (this.queryReviewed) {
        this.search.itemState = 6
      } else this.search.itemState = 5

      if (this.search.chargeKind === -1) {
        delete this.search.chargeKind
      }

      if (this.search.beginTime === '') {
        delete this.search.beginTime
      }

      if (this.search.endTime === '') {
        delete this.search.endTime
      }
      if (this.search.guarantorCheckFlag === '') {
        delete this.search.guarantorCheckFlag
      }
      const params = _that.search
      const page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      const data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      // console.log(data);
      sendBillReviewPage(data).then(response => {
        console.log(response)
        console.log('我选中了' + this.selectBillItems.length + '条')
        response.data.forEach(x => {
          x.orderSendKind = x.orderSendKind + '(' + x.linkMan + ')'
          if (x.logisticsBillDate) {
            x.logisticsBillDate = x.logisticsBillDate.substring(0, 10)
          }
          // x.orderMemo = x.printOrder.orderMemo
          // 代收情况改为  应收chargeMoney - 代收logisticsRecMoney
          // 2022-02-14  代收情况改为  代收logisticsRecMoney - 应收chargeMoney
          x.collectDetail = x.logisticsRecMoney - x.chargeMoney
          // x.collectDetail = x.logisticsRecMoney - x.orderMoneyTotal - x.payMoney
        })
        _that.billTableData = response.data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.billListLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.billListLoading = false
      })
    },

    // 发货单审核
    doSendBillReview() {
      if (this.selectBillItems.length <= 0) {
        this.$message.error('未选择记录')
        return
      }

      let msg = '确定要审核反馈记录吗？'
      if (this.reviewOperation === 1) {
        msg = '确定要取消审核反馈记录吗？'
      }

      this.$confirm(msg)
        .then(_ => {
          this.reviewForm.ids = this.selectBillItems.map(x => x.id).join(',')

          const data = this.reviewForm
          const _that = this
          if (this.reviewOperation === 0) {
            sendBillReview(data).then(response => {
              console.log(response)
              _that.dialogReviewVisible = false
              _that.$message.success('发货单已审核')
              _that.tableRefresh()
            }).catch(err => {
              _that.$message.error(err)
            })
          } else if (this.reviewOperation === 1) {
            sendBillReviewBack(data).then(response => {
              console.log(response)
              _that.dialogReviewVisible = false
              _that.$message.success('发货单已取消审核')
              _that.tableRefresh()
            }).catch(err => {
              _that.$message.error(err)
            })
          }
        })
        .catch(_ => {
        })
    },

    tableRefresh() {
      this.selectBillItems = []
      this.$refs.sendBillTable.clearSelection()
      this.getList()
    },

    searchData() {
      if (this.valueDate) {
        this.search.beginTime = Date.parse(this.valueDate[0] + ' 00:00:00')
        this.search.endTime = Date.parse(this.valueDate[1] + ' 23:59:59')
      } else {
        this.search.beginTime = ''
        this.search.endTime = ''
      }
      if (this.checkDate) {
        this.search.checkBeginTime = this.checkDate[0]
        this.search.checkEndTime = this.checkDate[1]
      } else {
        this.search.checkBeginTime = ''
        this.search.checkEndTime = ''
      }
      this.listData.page = 1
      this.getList()
    },

    exportData() {
      const _that = this
      const data = {
        code: 'SendBillItem_Exporter',
        exportName: '发货单审核清单导出',
        params: _that.search
      }
      exportData(data).then(res => {
        console.log(res)
        if (res.httpCode === 200) {
          _that.$message.success('导出成功，请前至系统管理-我的任务中进行查看和下载')
        }
      })
    },

    customRowStyle({row, rowIndex}) {
      if (row.voidFlag === 1) {
        return {
          color: '#F56C6C'
        }
      }
      // if (column.property === 'boxCount') {
      //   return 'background-color:#1989fa80;color:#fff;font-weight:600;'
      // }
    },

    onTableSelectionChange(val) {
      this.selectBillItems = val
    },

    showDialogReview(row, operation) {
      this.reviewForm.id = row.id
      this.reviewForm.reviewMemo = ''
      this.reviewOperation = operation
      this.reviewSendItem = row
      this.dialogReviewVisible = true
    },

    showDialogReviewMulti(operation) {
      this.reviewForm.reviewMemo = ''
      this.reviewOperation = operation
      this.dialogReviewVisible = true
    },

    // 获取订单信息
    openDetail(row) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.idOrder
        _that.$refs.orderDetail.getInfo()
      })
    },
    columnFormatter(row, column) {
      if (column.property === 'createTime' || column.property === 'sendDate') {
        return row[column.property] ? row[column.property].substring(0, 19) : row[column.property]
      } else if (column.property === 'chargeKind') {
        switch (row[column.property]) {
          case 0: {
            return '现金'
            break
          }
          case 1: {
            return '物流代收'
            break
          }
          case 2: {
            return '全额担保'
            break
          }
          case 3: {
            return '预存'
            break
          }
          case 4: {
            return '预收款'
            break
          }
        }
      } else if (column.property === 'guarantorCheckFlag') {
        if (row['idGuarantor'] > 0) {
          switch (row[column.property]) {
            case 0: {
              return '未审核'
              break
            }
            case 1: {
              return '已审核'
              break
            }
          }
        } else return ''
      } else return row[column.property]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.el-drawer {
  overflow: scroll
}

:focus {
  outline: 0;
}
</style>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>

<style lang="scss" scoped>
.filter-container {
  margin-bottom: 15px;
}

.board-column {
  min-width: 100px;
  min-height: 100px;
  height: auto;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 3px;

  .board-column-header {
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10px solid transparent;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    .board-item {
      cursor: pointer;
      width: 100%;
      height: 64px;
      margin: 5px 0;
      background-color: #fff;
      text-align: left;
      line-height: 54px;
      padding: 5px 10px;
      box-sizing: border-box;
      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
