<template>
  <div class="billOfLadingDetail-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="billOfLadingDetail-header" >
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="billOfLadingDetail-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
        </template>
        <!-- 操作区，位于 title 行的行尾 -->
        <template slot="extra">
          <a-button
            key="3"
            type="default"
            class="button-info"
            v-if="$hasPermissions('B_printPickUp')"
            id="billOfLadingDetail-preview-btn"
            @click="handlePrint('preview')">打印预览</a-button>
          <a-button
            key="2"
            type="primary"
            class="button-info"
            v-if="$hasPermissions('B_printPickUp')"
            id="billOfLadingDetail-print-btn"
            @click="handlePrint('print')">快捷打印</a-button>
          <a-divider type="vertical" />
          <a-button
            key="1"
            type="default"
            class="button-warning"
            v-if="$hasPermissions('B_exportPickUp')"
            id="billOfLadingDetail-export-btn"
            @click="handlePrint('export')">导出Excel</a-button>
        </template>
      </a-page-header>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol">
        <a-card :bordered="false" class="billOfLadingDetail-cont" v-if="form">
          <a-row>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="提货单号">
                {{ form.pickUpNo||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="创建时间">
                {{ form.createDate||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="审核时间">
                {{ form.auditDate||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="状态">
                {{ form.stateDictValue||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="申请人">
                {{ form.applyPersonName||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="主题">
                {{ form.theme||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="物流公司">
                {{ form.logisticsCompany||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="物流点">
                {{ form.logisticsPoint||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="发货方">
                {{ form.dealerEntity&&form.dealerEntity.dealerName||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="收货人">
                {{ form.receiverName||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="电话">
                {{ form.receiverPhone||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="件数">
                {{ form.goodsNum||'--' }} 件
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="运费">
                {{ form.freight||'--' }}
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item style="margin-bottom:0" label="退货仓库" prop="warehouseName">
                {{ form.warehouseName||'--' }}
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="16">
              <a-form-model-item style="margin-bottom:0" label="备注" prop="size" :label-col="{span:2}" :wrapper-col="{span:22}">
                <div style="word-break: break-all;line-height:normal;padding-top:10px;">{{ form.remarks||'--' }}</div>
              </a-form-model-item>
            </a-col>
            <a-col :span="16">
              <a-form-model-item style="margin-bottom:10px" label="附件" :label-col="{span:2}" :wrapper-col="{span:22}">
                <div style="line-height:26px;">
                  <div v-for="item in form.attachmentList" :key="item.id">
                    <a :href="item.filePath" download target="_blank">{{ item.fileName }}</a>
                  </div>
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="关联销退单" :label-col="{span:2}" :wrapper-col="{span:20}">
                <a-table :columns="columns" :scroll="{ y: 400 }" :pagination="false" :data-source="chooseData" bordered>
                  <!-- 编号 -->
                  <template slot="no" slot-scope="text, record,index">
                    <span>{{ index+1 }}</span>
                  </template>
                  <!-- 单号 -->
                  <template slot="salesReturnBillNo" slot-scope="text, record">
                    <span>{{ record.salesReturnBillNo }}</span>
                  </template>
                </a-table>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="$hasPermissions('B_auditPickUp')&&form.state != 'WAIT_SUBMIT'">
              <a-form-model-item label="审核进度" :label-col="{span:2}" :wrapper-col="{span:20}">
                <div>以下信息来自钉钉</div>
                <s-table
                  class="sTable fixPagination"
                  ref="table"
                  size="small"
                  :rowKey="(record) => record.id"
                  :columns="auditColumns"
                  :data="loadData"
                  :scroll="{ y: 400 }"
                  :showPagination="false"
                  :defaultLoadData="false"
                  bordered>
                </s-table>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>
      </a-form-model>
    </a-spin>
  </div>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import { STable, VSelect, Upload } from '@/components'
import { printFun, exportExcel } from '@/libs/JGPrint.js'
import { pickUpDetail, pickUpDetailQueryList, pickUpExport, pickUpDetailPrint } from '@/api/pickUp'
import { getProcessInstance } from '@/api/expenseManagement'
export default {
  name: 'ProductInfoEdit',
  mixins: [commonMixin],
  components: { VSelect, Upload, STable },
  data () {
    return {
      spinning: false,
      showXtModal: false,
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 16 }
      },
      form: {
        applyPersonSn: undefined, // 申请人
        applyPersonName: undefined,
        theme: '', //  主题
        logisticsCompany: undefined, //  物流公司
        logisticsPoint: undefined, //  物流点
        senderName: '', //  发货方
        senderSn: '',
        receiverName: '', //  收货人
        receiverPhone: '', // 电话
        goodsNum: '', // 件数
        freight: '', // 运费
        remarks: '',
        attachmentList: [] // 附件
      },
      rules: {},
      chooseData: [],
      columns: [
        { title: '序号', scopedSlots: { customRender: 'no' }, width: '8%', align: 'center' },
        { title: '总部销退单号', dataIndex: 'salesReturnBillNo', width: '15%', align: 'center' },
        { title: '客户名称', dataIndex: 'buyerName', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '申请退货数量', dataIndex: 'totalInitialQty', width: '15%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
        { title: '审核时间', dataIndex: 'auditTime', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '业务状态', dataIndex: 'billStatusDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } }
      ],
      auditData: [],
      auditColumns: [
        { title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
        { title: '人员姓名', width: '12%', dataIndex: 'userName', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '人员类型', dataIndex: 'userType', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '状态', dataIndex: 'state', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '审批意见', dataIndex: 'remark', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '附件', dataIndex: 'hasAttachments', width: '20%', align: 'center', customRender: function (text) { return text != '0' ? '请在钉钉中查看附件内容' : '--' } },
        { title: '操作时间', dataIndex: 'date', width: '20%', align: 'center', customRender: function (text) { return text || '--' } }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.spinning = true
        delete parameter.tableId
        delete parameter.index
        return getProcessInstance({ businessType: 'PICK_UP', businessSn: this.$route.params.sn }).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            const no = 0
            for (var i = 0; i < data.length; i++) {
              data[i].no = no + i + 1
            }
            this.disabled = false
          } else {
            this.isShow = false
            return []
          }
          this.spinning = false
          return data
        })
      }
    }
  },
  methods: {
    // 打印预览/快捷打印
    handlePrint (type) {
      const _this = this
      const params = { pickUpSn: this.$route.params.sn }
      _this.spinning = true
      // 导出
      if (type == 'export') {
        exportExcel(pickUpExport, params, '提货单', function () {
          _this.spinning = false
        })
      } else {
        // 打印或预览
        printFun(pickUpDetailPrint, params, type, '提货单', () => { _this.spinning = false })
      }
    },
    // 关联销售退货单
    getReturnOrderList () {
      pickUpDetailQueryList({ pickUpSn: this.$route.params.sn }).then(res => {
        this.chooseData = []
        res.data.map(item => {
          this.chooseData.push(item.salesReturnBillEntity)
        })
      })
    },
    //  详情
    getDetail () {
      this.spinning = true
      this.disabled = true
      pickUpDetail({ pickUpSn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          const data = res.data
          this.form = Object.assign(this.form, data)
          if (this.form.state != 'WAIT_SUBMIT') {
            this.$refs.table.refresh()
          }
        } else {
          this.$refs.ruleForm.resetFields()
        }
        this.spinning = false
        this.disabled = false
      })
    },
    // 返回
    handleBack () {
      // this.$router.push({ name: 'billOfLadingList' })
      this.$router.go(-1)
    },
    pageInit () {
      this.form = {
        applyPersonSn: undefined, // 申请人
        applyPersonName: undefined,
        theme: '', //  主题
        logisticsCompany: undefined, //  物流公司
        logisticsPoint: undefined, //  物流点
        senderName: '', //  发货方
        senderSn: '',
        receiverName: '', //  收货人
        receiverPhone: '', // 电话
        goodsNum: '', // 件数
        freight: '', // 运费
        remarks: '',
        attachmentList: [] // 附件
      }
      this.$refs.ruleForm.resetFields()
      if (this.$route.params.sn) { //  编辑页
        this.getDetail()
        this.getReturnOrderList()
      }
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    this.pageInit()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>

<style lang="less">
  .billOfLadingDetail-wrap{
    position: relative;
    height: 100%;
    background-color:#fff;
    .billOfLadingDetail-cont{
      height:100%;
      overflow: auto;
    }
    .billOfLadingDetail-header{
      border-bottom: 6px solid #eee;
    }
    .affix{
      .ant-affix{
        z-index: 101;
      }
    }
  }
</style>
