<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input
        size="mini"
        v-model="search.keyWord"
        placeholder="关键字"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="searchData"/>
      <el-input
        size="mini"
        v-model="search.logisticName"
        placeholder="物流名称"
        style="width: 100px;"
        class="filter-item"
        @keyup.enter.native="tableRefresh"/>
      <el-input
        size="mini"
        v-model="search.sendKind"
        placeholder="配送方式"
        style="width: 100px;"
        class="filter-item"
        @keyup.enter.native="tableRefresh"/>
      <el-input
        size="mini"
        v-model="search.orderDeliverSendKind"
        placeholder="发货方式"
        style="width: 100px;"
        class="filter-item"
        @keyup.enter.native="tableRefresh"/>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button
        size="mini"
        type="success"
        icon="el-icon-s-order"
        class="iconfont"
        title="发货反馈"
        @click.stop="showFeedbackDialog">发货反馈
      </el-button>
      <el-button size="mini" type="warning" style="margin:20px;" @click="exportExcelSelect">导出表格</el-button>

      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getList"/>
        </el-tooltip>
      </div>

      <el-table
        :data="tableData"
        v-loading="listLoading"
        ref="deliverItemTable"
        @row-click="handleRowClick"
        :row-style="customRowStyle"
        row-key="id"
        border
        @selection-change="onTableSelectionChange"
        :size="sizeType"
        max-height="720"
        style="margin-top: 10px">
        <el-table-column
          fixed
          reserve-selection
          type="selection"
          width="55">
        </el-table-column>

        <el-table-column fixed label="操作" align="center" width="200px" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button
              title="查看订单"
              @click.stop="openDetail(row)"
              type="primary"
              class="iconfont"
              icon="el-icon-view"
              size="mini">
            </el-button>
            <el-button
              size="mini"
              type="info"
              icon="el-icon-back"
              class="iconfont"
              title="发货退回"
              @click.stop="showDialogBackToDeliver(row)">
            </el-button>
            <el-button
              size="mini"
              type="success"
              icon="el-icon-s-order"
              class="iconfont"
              title="发货反馈"
              @click.stop="feedbackSingle(row)">
            </el-button>

          </template>
        </el-table-column>
        <el-table-column
          fixed
          prop="index"
          label="序号"
          width="55">
        </el-table-column>
        <template v-for="column in columnNames1">
          <el-table-column
            :key="column.field"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            :formatter="columnFormatter"
            show-overflow-tooltip>
          </el-table-column>
        </template>
        <el-table-column
          label="订单消息"
          width="150"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">
            <template v-if="row.orderMessage">
              <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
              <a href="javascript:;" style="color: #20a0ff" @click="openMessage(row)">{{ row.orderMessage }}</a>
            </template>
            <template v-else>
              <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
            </template>
          </template>
        </el-table-column>
        <template v-for="column in columnNames2">
          <el-table-column
            :key="column.field"
            :prop="column.field"
            :label="column.name"
            :width="column.width"
            :formatter="columnFormatter"
            show-overflow-tooltip>
          </el-table-column>
        </template>
        <el-table-column
          label="订单制单人"
          prop="createMan"
          width="90px"
          show-overflow-tooltip>
          <template slot-scope="{row}">
            {{ row.printOrder.createMan }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="listData.total>0"
        :total="listData.total"
        :page.sync="listData.page"
        :limit.sync="listData.pageSize"
        @pagination="getList"/>

      <el-drawer
        title="发货反馈"
        ref="deliverFeedbackDrawer"
        :visible.sync="showDrawer"
        :before-close="drawerClose"
        direction="rtl"
        :destroy-on-close=true
        :show-close=false
        :wrapperClosable=false
        size="35%"
      >
        <div>
          <el-card v-if="feedbackItem" class="box-card" style="margin-bottom: 20px; margin-left: 20px">
            <div slot="header" class="clearfix">
              <div style="color: #f60808">当前选中订单数量: {{ selectedFeedbackItem.length }}</div>
              <br><br>
              <span>{{ feedbackItem.referenceCode }}</span>
            </div>
            <div class="text item">
              产品类型: {{ feedbackItem.productName }}
            </div>
            <div class="text item">
              订单名称: {{ feedbackItem.orderName }}
            </div>
            <div class="text item">
              客户名称: {{ feedbackItem.clientName }}
            </div>
            <div class="text item">
              订单金额: {{ feedbackItem.orderMoneyTotal }}
            </div>
            <div class="text item">
              收款方式: {{ feedbackItem.payKind }}
            </div>
          </el-card>
          <el-form :model="form" size="mini" :label-width="formLabelWidth" label-position="left" style="margin:0 20px">
            <el-form-item label="物流">
              <el-select
                v-model="form.deliveryFeedBackInfo.idLogisticsInfo"
                filterable
                placeholder="请输入关键词"
                :loading="deliverDocLoading">
                <el-option
                  v-for="item in deliverDocOptions"
                  :key="item.id"
                  :label="item.logisticName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="物流单号">
              <el-input
                placeholder="请输入内容"
                v-model="form.deliveryFeedBackInfo.logisticsCode"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item label="物流单日期">
              <el-date-picker
                v-model="form.deliveryFeedBackInfo.logisticsDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="收款方式">
              <el-radio-group v-model="form.deliveryFeedBackInfo.chargeKind">
                <el-radio :label="0">现金</el-radio>
                <el-radio :label="1">物流代收</el-radio>
                <el-radio :label="2">全额担保</el-radio>
                <el-radio :label="3">预存</el-radio>
                <el-radio :label="4">预收款</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-show="form.deliveryFeedBackInfo.chargeKind in [0,1]" label="代收金额">
              <el-input
                placeholder="请输入金额"
                type="number"
                min="0"
                v-model="form.deliveryFeedBackInfo.logisticsRecMoney">
              </el-input>
            </el-form-item>
            <el-form-item label="担保人">
              <el-select
                v-model="form.deliveryFeedBackInfo.idGuarantor"
                filterable
                remote
                placeholder="请输入关键词"
                :remote-method="getGuarantorInfo"
                :loading="guarantorLoading">
                <el-option
                  v-for="item in guarantorOptions"
                  :key="item.id"
                  :label="item.guaranInfo"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="担保金额">
              <el-input
                placeholder="请输入金额"
                type="number"
                min="0"
                v-model="form.deliveryFeedBackInfo.guarantorMoney">
              </el-input>
            </el-form-item>
            <el-form-item label="收款说明">
              <el-input
                placeholder="请输入内容"
                v-model="form.deliveryFeedBackInfo.chargeMemo"
                type="textarea"
                :rows="5"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="submitForm" :loading="formLoading">
                {{ formLoading ? '提交中 ...' : '确 定' }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>

      <el-dialog title="发货反馈" :visible.sync="dialogFeedBackVisible" width="100%">
        <el-table
          :data="selectedFeedbackItem"
          ref="selectedFeedbackItemTable"
          row-key="id"
          border
          :size="sizeType"
          style="margin-top: 10px">
          <!--          <el-table-column-->
          <!--            label="产品类型"-->
          <!--            prop="productName"-->
          <!--            width="80px">-->
          <!--          </el-table-column>-->
          <el-table-column
            label="订单编号"
            prop="orderCode"
            width="100px"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="订单名称"
            prop="orderName"
            width="80px"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="客户名称"
            prop="clientName"
            width="100px"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="订单金额"
            prop="orderMoneyTotal"
            width="80px">
          </el-table-column>
          <el-table-column
            label="物流"
            width="150px">
            <template slot-scope="{row}">
              <el-select
                size="mini"
                v-model="row.deliveryFeedBackInfo.idLogisticsInfo"
                filterable
                placeholder="请输入关键词"
                :loading="deliverDocLoading"
                style="width:110px">
                <el-option
                  v-for="item in deliverDocOptions"
                  :key="item.id"
                  :label="item.logisticName"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-tooltip effect="dark" content="填充" placement="top">
                <el-button size="mini" type="warning" icon="el-icon-d-caret" circle
                           @click="fillOtherRow('idLogisticsInfo', row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            label="物流单号"
            width="150px">
            <template slot-scope="{row}">
              <el-input
                size="mini"
                placeholder="请输入内容"
                v-model="row.deliveryFeedBackInfo.logisticsCode"
                clearable
                style="width:110px">
              </el-input>
              <el-tooltip effect="dark" content="填充" placement="top">
                <el-button size="mini" type="warning" icon="el-icon-d-caret" circle
                           @click="fillOtherRow('logisticsCode', row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            label="物流单日期"
            width="170px">
            <template slot-scope="{row}">
              <el-date-picker
                size="mini"
                v-model="row.deliveryFeedBackInfo.logisticsDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width:130px">
              </el-date-picker>
              <el-tooltip effect="dark" content="填充" placement="top">
                <el-button size="mini" type="warning" icon="el-icon-d-caret" circle
                           @click="fillOtherRow('logisticsDate', row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            label="收款方式"
            width="120px">
            <template slot-scope="{row}">
              <el-select
                v-model="row.deliveryFeedBackInfo.chargeKind"
                size="mini"
                @change="chargeKindChange(row)"
                placeholder="请输入关键词"
                style="width:80px">
                <el-option
                  v-for="item in chargeKindOptions"
                  :key="item.id"
                  :label="item.chargeKind"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-tooltip effect="dark" content="填充" placement="top">
                <el-button size="mini" type="warning" icon="el-icon-d-caret" circle
                           @click="fillOtherRow('chargeKind', row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            key="logisticsRecMoney"
            prop="logisticsRecMoney"
            label="代收金额"
            width="100px"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-input
                placeholder="请输入金额"
                size="mini"
                type="number"
                min="0"
                v-model="row.deliveryFeedBackInfo.logisticsRecMoney"
                style="width:90px">
              </el-input>
              <!--              <el-tooltip effect="dark" content="填充" placement="top">-->
              <!--                <el-button size="mini" type="warning" icon="el-icon-d-caret" circle-->
              <!--                           @click="fillOtherRow('logisticsRecMoney', row)"></el-button>-->
              <!--              </el-tooltip>-->
            </template>
          </el-table-column>
          <el-table-column
            key="idGuarantor"
            prop="idGuarantor"
            label="担保人"
            width="150px"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-select
                v-model="row.deliveryFeedBackInfo.idGuarantor"
                clearable
                filterable
                remote
                placeholder="请输入关键词"
                size="mini"
                :remote-method="getGuarantorInfo"
                :loading="guarantorLoading"
                style="width:140px">
                <el-option
                  v-for="item in guarantorOptions"
                  :key="item.id"
                  :label="item.guaranInfo"
                  :value="item.id">
                </el-option>
              </el-select>
              <!--              <el-tooltip effect="dark" content="填充" placement="top">-->
              <!--                <el-button size="mini" type="warning" icon="el-icon-d-caret" circle-->
              <!--                           @click="fillOtherRow('idGuarantor', row)"></el-button>-->
              <!--              </el-tooltip>-->
            </template>
          </el-table-column>
          <el-table-column
            key="guarantorMoney"
            prop="guarantorMoney"
            label="担保金额"
            width="100px"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-input
                placeholder="请输入金额"
                size="mini"
                type="number"
                min="0"
                v-model="row.deliveryFeedBackInfo.guarantorMoney"
                style="width:90px">
              </el-input>
              <!--              <el-tooltip effect="dark" content="填充" placement="top">-->
              <!--                <el-button size="mini" type="warning" icon="el-icon-d-caret" circle-->
              <!--                           @click="fillOtherRow('guarantorMoney', row)"></el-button>-->
              <!--              </el-tooltip>-->
            </template>
          </el-table-column>
          <el-table-column
            label="订单收款方式"
            prop="payKind"
            width="150px"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            key="chargeMemo"
            prop="chargeMemo"
            label="收款说明"
            width="300px"
            show-overflow-tooltip>
            <template slot-scope="{row}">
              <el-input
                placeholder="请输入内容"
                size="mini"
                v-model="row.deliveryFeedBackInfo.chargeMemo"
                clearable>
              </el-input>
            </template>
          </el-table-column>
        </el-table>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFeedBackVisible = false">取 消</el-button>
          <el-button type="primary" @click="toFeedbackItemEx" :loading="formLoading">
            {{ formLoading ? '提交中 ...' : '确 定' }}
          </el-button>
        </div>
      </el-dialog>

      <el-dialog title="发货退回" :visible.sync="dialogBackVisible" width="30%">
        <el-form label-position="top" label-width="80px">
          <el-form-item label="发货退回原因">
            <el-input type="textarea" v-model="backForm.feedBackReturnMemo"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogBackVisible = false">取 消</el-button>
          <el-button type="success" @click="backToDeliver(1)">退回重发</el-button>
          <el-button type="primary" @click="backToDeliver(2)">等待通知</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="订单详情"
        :close-on-click-modal="false"
        class="orderDetailDialog"
        :visible.sync="detailVisible"
        width="1200px">
        <order-detail ref="orderDetail"></order-detail>
      </el-dialog>
      <el-drawer
        title="订单消息"
        :reverse="true"
        :visible.sync="memoDrawer"
        size="600px">
        <order-message ref="orderMessage" @addMessageHandle="addMessageHandle"></order-message>
      </el-drawer>
      <!--预览弹窗表格-->
      <el-dialog title="表格导出预览" width="1100px" :visible.sync="selectWindow">
        <el-table border size="mini" :data="selectData" id="selectTable" height="380px">
          <el-table-column
            label="序号"
            width="50px"
            align="center"
            type="index"
            :index="indexMethod">
          </el-table-column>
          <el-table-column
            width="100"
            prop="orderCode"
            label="订单编号"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            width="80"
            prop="clientName"
            label="客户名称"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="orderMoneyTotal"
            label="订单金额"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="chargeMoney"
            label="应收金额"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="feedBackPayKind"
            label="收款方式"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="logisticsRecMoney"
            label="代收金额"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="guarantorName"
            label="担保人"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="guarantorMoney"
            label="担保金额"
          ></el-table-column>
          <el-table-column
            width="110"
            prop="guarantorReturnMemo"
            label="担保退回原因"
          ></el-table-column>
          <el-table-column
            width="80"
            prop="createMan"
            label="订单制单人"
          ></el-table-column>
          <el-table-column
            width="120"
            prop="sendDate"
            label="发货时间"
          >
            <template slot-scope="{row}">
              <div v-if="row.sendDate">{{ row.sendDate | getTime }}</div>
            </template>
          </el-table-column>

        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="exportExcel">确定导出</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  deliverFeedback,
  deliveryBack,
  getGuarantorInfoListFront,
  getLogisticsInfoList,
  getSendBillItemList
} from '@/api/delivery/delivery'
import OrderDetail from '@/components/orderDetail/orderDetail'
import OrderMessage from '@/components/orderMessage/orderMessage'
import {parseTime} from '@/utils/index.js'
import htmlToExcel from '@/utils/htmlToExcel'

const defaultItems1 = [
  {
    name: '订单编号/发货单号', field: 'referenceCode', width: '220'
  },
  {
    name: '产品类型', field: 'productName', width: '150'
  },
  {
    name: '客户名称', field: 'clientName', width: '100'
  },
  {
    name: '订单名称', field: 'orderName', width: '150'
  }]

const defaultItems2 = [
  {
    name: '订单总额', field: 'orderMoneyTotal', width: ''
  },
  {
    name: '应收金额', field: 'chargeMoney', width: ''
  },
  {
    name: '订单收款方式', field: 'payKind', width: '110'
  },
  {
    name: '收款方式', field: 'feedBackPayKind', width: ''
  },
  {
    name: '发货方式', field: 'orderDeliverSendKind', width: '80'
  },
  {
    name: '发货司机', field: 'sendMan', width: '80'
  },
  {
    name: '配送方式', field: 'sendKind', width: '80'
  },
  {
    name: '发货时间', field: 'sendDate', width: '80'
  },
  {
    name: '平台订单编号', field: 'platformOrderID', width: '80'
  },
  {
    name: '代收金额', field: 'logisticsRecMoney', width: ''
  },
  {
    name: '担保人', field: 'guarantorName', width: '80'
  },
  {
    name: '担保金额', field: 'guarantorMoney', width: ''
  },
  {
    name: '担保退回原因', field: 'guarantorReturnMemo', width: '80'
  },
  {
    name: '发货反馈人', field: 'feedBackMan', width: '100'
  },
  {
    name: '状态', field: 'itemState', width: '80'
  },
  {
    name: '物流货号', field: 'logisticsCode', width: '80'
  },
  {
    name: '物流', field: 'logisticName', width: '80'
  },
  {
    name: '发货备注', field: 'sendMemo', width: '80'
  }
]

export default {
  components: {
    OrderDetail,
    OrderMessage
  },
  data() {
    return {
      search: {
        keyWord: '',
        logisticName: '',
        sendKind: '',
        orderDeliverSendKind: ''
      },
      columnNames1: Object.assign([], defaultItems1),
      columnNames2: Object.assign([], defaultItems2),
      sizeType: 'mini',
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      memoDrawer: false,
      showDrawer: false,
      dialogBackVisible: false,
      dialogFeedBackVisible: false,
      formLoading: false,
      deliverDocLoading: false,
      guarantorLoading: false,

      detailVisible: false,

      deliverDocOptions: [],
      guarantorOptions: [],
      chargeKindOptions: [
        {
          id: 0,
          chargeKind: '现金'
        },
        {
          id: 1,
          chargeKind: '物流代收'
        },
        {
          id: 2,
          chargeKind: '全额担保'
        },
        {
          id: 3,
          chargeKind: '预存'
        },
        {
          id: 4,
          chargeKind: '预收款'
        }
      ],

      listLoading: false,
      tableData: [],

      feedbackItem: null,
      selectedFeedbackItem: [],

      backForm: {
        id: 0,
        feedBackReturnMemo: '',
        backKind: 0
      },
      form: {
        deliveryFeedBackInfo: {
          idSendBillItem: 0, // 关联发货明细id
          idOrder: 0, // 关联订单id,
          idLogisticsInfo: 0, // 物流档案id
          logisticsCode: '', // 物流单号
          logisticsDate: parseTime(new Date(), '{y}-{m}-{d}'), // 物流单日期
          chargeKind: 0, // 收款方式
          logisticsRecMoney: 0, // 代收金额
          idGuarantor: 0, // 担保人
          guarantorMoney: 0, // 担保金额
          chargeMemo: '' // 收款说明
        }
      },
      feedbackRequest: [],
      selectData: [],
      selectWindow: false,
      formLabelWidth: '100px'

    }
  },
  mounted() {
    // this.testEval()
    this.getList()
    this.getDeliverDocInfo()
  },
  methods: {
    //导出
    exportExcel() {
      htmlToExcel.getExcel('#selectTable', '发货反馈导出')
    },
    //显示预览弹窗
    exportExcelSelect() {
      if (this.selectData.length < 1) {
        this.$message.error('请选择要导出的内容！');
        return false;
      }
      this.selectWindow = true;
    },
    fillOtherRow(field, row) {
      this.selectedFeedbackItem.forEach(x => {
        x.deliveryFeedBackInfo[field] = row.deliveryFeedBackInfo[field]
      })
    },

    addMessageHandle(data) {
      const _that = this
      _that.tableData.forEach(item => {
        if (item.idOrder == data.idBill) {
          item.orderMessage = data.messageStr
        }
      })
    },
    chargeKindChange(row) {
      // 如果是现金或物流代收,则初始化代收金额
      // 解析一下收款方式
      var payKinds = []
      var payKind = []
      payKind = row.payKind.split('+')
      payKind.forEach(item => {
        item = item.split(':')
        payKinds.push(item)
      })

      if (row.deliveryFeedBackInfo.chargeKind === 0) {
        row.deliveryFeedBackInfo.logisticsRecMoney = 0
        payKinds.forEach(x => {
          if (x[0] === '0') {
            // 现金
            row.deliveryFeedBackInfo.logisticsRecMoney = x[2]
          }
        })
      } else if (row.deliveryFeedBackInfo.chargeKind === 1) {
        row.deliveryFeedBackInfo.logisticsRecMoney = 0
        payKinds.forEach(x => {
          if (x[0] === '1') {
            // 物流代收
            row.deliveryFeedBackInfo.logisticsRecMoney = x[2]
          }
        })
      } else {
        row.deliveryFeedBackInfo.logisticsRecMoney = 0
      }
    },
    handleRowClick(row, event, column) {
      this.$refs.deliverItemTable.toggleRowSelection(row);
      const _that = this;
      this.selectedFeedbackItem.forEach(item => {
        this.$set(item, 'deliveryFeedBackInfo', Object.assign({}, this.form.deliveryFeedBackInfo));

        // item.deliveryFeedBackInfo = Object.assign({}, this.form.deliveryFeedBackInfo)
        item.deliveryFeedBackInfo.idSendBillItem = item.id
        item.deliveryFeedBackInfo.idOrder = item.idOrder

        var payKinds = []
        var payKind = []
        payKind = item.payKind.split('+')
        payKind.forEach(item => {
          item = item.split(':')
          payKinds.push(item)
        })
        payKinds.forEach(x => {
          if (x[0] === '2') {
            // 担保人
            item.deliveryFeedBackInfo.guarantorMoney = x[2]
          }
        })

        item.deliveryFeedBackInfo.idLogisticsInfo = item.idLogisticsInfo
        item.deliveryFeedBackInfo.logisticsCode = item.logisticsCode
        // 手动初始化一下代收金额
        _that.chargeKindChange(item)
      })
    },
    onTableSelectionChange(selections) {
      this.selectedFeedbackItem = selections;
      const _that = this
      this.selectedFeedbackItem.forEach(item => {
        this.$set(item, 'deliveryFeedBackInfo', Object.assign({}, this.form.deliveryFeedBackInfo));

        // item.deliveryFeedBackInfo = Object.assign({}, this.form.deliveryFeedBackInfo)
        item.deliveryFeedBackInfo.idSendBillItem = item.id
        item.deliveryFeedBackInfo.idOrder = item.idOrder

        var payKinds = []
        var payKind = []
        payKind = item.payKind.split('+')
        payKind.forEach(item => {
          item = item.split(':')
          payKinds.push(item)
        })
        payKinds.forEach(x => {
          if (x[0] === '2') {
            // 担保人
            item.deliveryFeedBackInfo.guarantorMoney = x[2]
          }
        })

        item.deliveryFeedBackInfo.idLogisticsInfo = item.idLogisticsInfo
        item.deliveryFeedBackInfo.logisticsCode = item.logisticsCode
        // 手动初始化一下代收金额
        _that.chargeKindChange(item)
      })
    },
    getList() {
      const _that = this;
      _that.selectData = [];
      _that.listLoading = true
      const params = _that.search
      if (_that.listData.pageSize === 10) {
        _that.sizeType = 'medium'
      } else {
        _that.sizeType = 'mini'
      }
      const page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      const data = {
        'params': JSON.stringify(params),
        'page': JSON.stringify(page),
        'orderBy': 'sendDateLong asc'
      }
      // console.log(data);
      getSendBillItemList(data).then(response => {
        // console.log(response)
        // //  组合表单数据
        const tableData = response.data
        const pageNum = response.pageNum
        const pageSize = response.pageSize
        let currentIndex = 1
        tableData.forEach(x => {
          var excelParms = {
            orderCode: "",
            clientName: "",
            orderMoneyTotal: "",
            chargeMoney: "",
            sendDate: "",
            feedBackPayKind:"",
            logisticsRecMoney:"",
            guarantorName:"",
            guarantorMoney:"",
            guarantorReturnMemo:"",
            createMan:""
          }
          excelParms.orderCode = x.orderCode
          excelParms.clientName = x.clientName
          excelParms.orderMoneyTotal = x.orderMoneyTotal
          excelParms.chargeMoney = x.chargeMoney
          excelParms.sendDate = x.sendDate
          excelParms.feedBackPayKind = x.feedBackPayKind
          excelParms.logisticsRecMoney = x.logisticsRecMoney
          excelParms.guarantorName = x.guarantorName
          excelParms.guarantorMoney = x.guarantorMoney
          excelParms.createMan = x.printOrder.createMan
          _that.selectData.push(excelParms)
          x.referenceCode = x.orderCode + '/' + x.sendBillCode
          x.orderMessage = x.printOrder.orderMessage
          x.index = pageSize * (pageNum - 1) + currentIndex
          currentIndex++
        })
        _that.tableData = tableData
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },

    // 订单消息
    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()
      })
    },

    tableRefresh() {
      this.getList()
    },
    searchData() {
      this.listData.page = 1
      this.getList()
    },

    handleDBclickTableRow(row, column, event) {
      this.showFeedbackDrawer()
    },

    feedbackSingle(row) {
      this.$refs.deliverItemTable.clearSelection()
      this.$refs.deliverItemTable.toggleRowSelection(row, true)
      this.form.deliveryFeedBackInfo.logisticsCode = row.logisticsCode
      this.showFeedbackDrawer()
    },

    showFeedbackDrawer() {
      if (this.selectedFeedbackItem.length <= 0) {
        this.$message.error('请选择反馈记录')
        return
      }
      const row = this.selectedFeedbackItem[0]
      this.feedbackItem = row

      // 解析一下收款方式
      var payKinds = []
      var payKind = []
      if (row.payKind) {
        payKind = row.payKind.split('+')
        payKind.forEach(item => {
          item = item.split(':')
          payKinds.push(item)
        })
        payKinds.forEach(x => {
          if (x[0] === '2') {
            // 担保人
            this.form.deliveryFeedBackInfo.guarantorMoney = x[2]
          }
        })
      }

      this.form.deliveryFeedBackInfo.idLogisticsInfo = this.feedbackItem.idLogisticsInfo

      this.showDrawer = true
    },

    showFeedbackDialog() {
      const _that = this;
      if (this.selectedFeedbackItem.length <= 0) {
        this.$message.error('请选择反馈记录')
        return
      }
      // 解析一下收款方式
      this.selectedFeedbackItem.forEach(item => {
        this.$set(item, 'deliveryFeedBackInfo', Object.assign({}, this.form.deliveryFeedBackInfo));

        // item.deliveryFeedBackInfo = Object.assign({}, this.form.deliveryFeedBackInfo)
        item.deliveryFeedBackInfo.idSendBillItem = item.id
        item.deliveryFeedBackInfo.idOrder = item.idOrder

        var payKinds = []
        var payKind = []
        if (item.payKind) {
          payKind = item.payKind.split('+')
          payKind.forEach(item => {
            item = item.split(':')
            payKinds.push(item)
          })
          payKinds.forEach(x => {
            if (x[0] === '2') {
              // 担保人
              item.deliveryFeedBackInfo.guarantorMoney = x[2]
            }
          })
          // 手动初始化一下代收金额
          _that.chargeKindChange(item)
        }

        item.deliveryFeedBackInfo.idLogisticsInfo = item.idLogisticsInfo
        item.deliveryFeedBackInfo.logisticsCode = item.logisticsCode
      })

      this.dialogFeedBackVisible = true
    },

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

      if (row.guarantorCheckBackFlag == 1) {
        return {
          color: '#f60808'
          // background: '#f7b1b1'
        }
      }
    },

    // 发货退回
    showDialogBackToDeliver(row) {
      this.backForm.id = row.id
      this.backForm.feedBackReturnMemo = ''
      this.dialogBackVisible = true
    },

    backToDeliver(backKind) {
      this.$confirm('确定要发货退回吗？')
        .then(_ => {
          this.backForm.backKind = backKind
          const data = this.backForm
          // console.log(data);
          const _that = this
          deliveryBack(data).then(response => {
            console.log(response)
            _that.dialogBackVisible = false
            _that.$message.success('发货已退回')
            _that.tableRefresh()
          }).catch(err => {
            _that.$message.error(err)
          })
        })
        .catch(_ => {
        })
    },
    // 获取订单信息
    openDetail(row) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.idOrder
        _that.$refs.orderDetail.getInfo()
      })
    },
    // 获取担保人档案
    getGuarantorInfo(query) {
      if (query !== '') {
        this.guarantorLoading = true

        const params = {
          params: {
            keyWord: query
          }
        }
        const _that = this
        getGuarantorInfoListFront(params).then(response => {
          console.log(response)
          _that.guarantorLoading = false
          _that.guarantorOptions = response.data
          _that.guarantorOptions.forEach(x => {
            x.guaranInfo = x.personName + '(' + x.overMoney + ')'
          })
        }).catch(err => {
          _that.$message.error(err)
        })
      } else {
        this.guarantorOptions = []
      }
    },
    // 获取物流档案
    getDeliverDocInfo() {
      this.deliverDocLoading = true

      const params = {
        params: {
          keyWord: ''
        }
      }
      const _that = this
      getLogisticsInfoList(null).then(response => {
        console.log(response)
        _that.deliverDocLoading = false
        _that.deliverDocOptions = response.data
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    submitForm() {
      if (this.formLoading) {
        return
      }
      // 数据校验
      if (this.form.deliveryFeedBackInfo.chargeKind === 2 &&
        this.form.deliveryFeedBackInfo.idGuarantor <= 0) {
        this.$message.error('请选择担保人')
        return
      }

      if (this.form.deliveryFeedBackInfo.guarantorMoney > 0 &&
        this.form.deliveryFeedBackInfo.idGuarantor <= 0) {
        this.$message.error('请选择担保人')
        return
      }

      if (this.form.deliveryFeedBackInfo.guarantorMoney <= 0 &&
        this.form.deliveryFeedBackInfo.idGuarantor > 0) {
        this.$message.error('请填写担保金额')
        return
      }

      let msg = '确定要提交反馈吗？'
      if (this.selectedFeedbackItem.length >= 2)
        msg = '此次反馈会将勾选的订单全部反馈为当前输入内容,确定要提交反馈吗？'
      this.$confirm(msg)
        .then(_ => {
          this.formLoading = true
          this.toFeedbackItem()
        })
        .catch(_ => {
        })
    },

    toFeedbackItem() {
      // 改为支持批量
      this.feedbackRequest = [];
      this.selectedFeedbackItem.forEach(x => {
        const deliveryFeedBackInfo = Object.assign({}, this.form.deliveryFeedBackInfo)
        deliveryFeedBackInfo.idSendBillItem = x.id
        deliveryFeedBackInfo.idOrder = x.idOrder

        this.feedbackRequest.push(deliveryFeedBackInfo)
      })

      // this.form.deliveryFeedBackInfo.idSendBillItem = this.feedbackItem.id
      // this.form.deliveryFeedBackInfo.idOrder = this.feedbackItem.idOrder

      const params = JSON.stringify(this.feedbackRequest)

      const _that = this
      deliverFeedback(params).then(response => {
        console.log(response)
        if (response.httpCode === 200) {
          _that.$message.success('发货反馈完成')

          _that.$refs.deliverItemTable.clearSelection();

          // 动画关闭需要一定的时间
          setTimeout(() => {
            _that.tableRefresh()
            _that.$refs.deliverFeedbackDrawer.closeDrawer()
          }, 400)
        } else {
          _that.$message.error(response.msg)
        }
        _that.feedbackRequest = [];
      }).catch(err => {
        _that.$message.error(err)
        _that.feedbackRequest = [];
      })
      _that.formLoading = false
    },
    toFeedbackItemEx() {
      // 改为支持批量
      const _that = this
      if (this.formLoading) return
      _that.feedbackRequest = [];
      for (const x of _that.selectedFeedbackItem) {
        // const deliveryFeedBackInfo = Object.assign({}, this.form.deliveryFeedBackInfo)
        // deliveryFeedBackInfo.idSendBillItem = x.id
        // deliveryFeedBackInfo.idOrder = x.idOrder

        // 数据校验
        if (x.deliveryFeedBackInfo.chargeKind === 2 &&
          x.deliveryFeedBackInfo.idGuarantor <= 0) {
          this.$message.error('请选择担保人')
          return;
        }

        if (x.deliveryFeedBackInfo.guarantorMoney > 0 &&
          x.deliveryFeedBackInfo.idGuarantor <= 0) {
          this.$message.error('请选择担保人')
          return;
        }

        if (x.deliveryFeedBackInfo.idGuarantor > 0 &&
          x.deliveryFeedBackInfo.guarantorMoney <= 0) {
          this.$message.error('请填写担保金额')
          return;
        }

        _that.feedbackRequest.push(x.deliveryFeedBackInfo)
      }

      // this.form.deliveryFeedBackInfo.idSendBillItem = this.feedbackItem.id
      // this.form.deliveryFeedBackInfo.idOrder = this.feedbackItem.idOrder
      let msg = '确定要提交反馈吗？'
      _that.formLoading = true
      this.$confirm(msg)
        .then(_ => {
          const params = JSON.stringify(this.feedbackRequest)
          deliverFeedback(params).then(response => {
            console.log(response)
            if (response.httpCode === 200) {
              _that.$message.success('发货反馈完成')

              _that.$refs.deliverItemTable.clearSelection();

              _that.tableRefresh()
              _that.dialogFeedBackVisible = false
            } else {
              _that.$message.error(response.msg)
            }
            _that.feedbackRequest = [];
            _that.formLoading = false
          }).catch(err => {
            _that.$message.error(err)
            _that.feedbackRequest = [];
            _that.formLoading = false
          })
        })
        .catch(_ => {
          _that.formLoading = false
        })
    },
    cancelForm() {
      this.formLoading = false
      this.$refs.deliverFeedbackDrawer.closeDrawer()
    },
    drawerClose(done) {
      this.feedbackItem = null
      // 关掉之后清除数据
      this.form = {
        deliveryFeedBackInfo: {
          idSendBillItem: 0, // 关联发货明细id
          idOrder: 0, // 关联订单id,
          idLogisticsInfo: 0, // 物流档案id
          logisticsCode: '', // 物流单号
          logisticsDate: parseTime(new Date(), '{y}-{m}-{d}'), // 物流单日期
          chargeKind: 0, // 收款方式
          logisticsRecMoney: 0, // 代收金额
          idGuarantor: 0, // 担保人
          guarantorMoney: 0, // 担保金额
          chargeMemo: '' // 收款说明
        }
      }
      done()
    },
    columnFormatter(row, column) {
      if (column.property === 'itemState') {
        switch (row[column.property]) {
          case 3: {
            return '待反馈'
          }
          case 4: {
            return '待反馈'
          }
          case 5: {
            return '待审核'
          }
          case 6: {
            return '审核完成'
          }
        }
      } else return row[column.property]
    },
    indexMethod(index) {
      return index + 1;
    }
  }
}
</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>
