<!-- @desc:销售跟踪  @auth:宋扬  @time:2024/04/22 09:15 -->
<template>
  <div slot="top">
    <DkTabs v-model="tabsModel" :options="tabsOptions" @on-click="tabsClick"></DkTabs>
    <!--    销售订单-->
    <DkCollapse @on-change="changeCollapse" ref="collapse" v-if="this.tabsModel ==='ordchase' ">
      <DkPanel prop="essentialInformation">
        <!--  单据信息  -->
        <DkForm slot="content" ref="formInline" v-model="ordData"
                style="width:100%" :label-max-words="5">
          <!--订单单号-->
          <DkFormItem prop="orderNo">
            <InputPop ref="orderNo" v-model="ordData.orderNo" :readonly="true"/>
          </DkFormItem>
          <!--客户电话-->
          <DkFormItem prop="cusPhone">
            <InputPop ref="cusPhone" v-model="ordData.cusPhone" :readonly="true"/>
          </DkFormItem>
          <!--客户名称-->
          <DkFormItem prop="cusName" >
            <InputPop ref="cusName" v-model="ordData.cusName" :readonly="true"/>
          </DkFormItem>
          <!--客户区域-->
          <DkFormItem prop="addressName" >
            <InputPop ref="addressName" v-model="ordData.addressName" :readonly="true"/>
          </DkFormItem>
          <!--门牌号-->
          <DkFormItem prop="addressNo" >
            <InputPop ref="addressNo" v-model="ordData.addressNo":readonly="true"/>
          </DkFormItem>
          <!--详细地址-->
          <DkFormItem prop="addressFull" >
            <InputPop ref="addressFull" v-model="ordData.addressFull":readonly="true"/>
          </DkFormItem>
          <!--联系人-->
          <DkFormItem prop="contactName">
            <InputPop ref="contactName" v-model="ordData.contactName" :readonly="true"/>
          </DkFormItem>
          <!--联系电话-->
          <DkFormItem prop="contactPhone">
            <InputPop ref="contactPhone" v-model="ordData.contactPhone" :readonly="true"/>
          </DkFormItem>
          <!--业务部门-->
          <DkFormItem prop="orgName" >
            <InputPop ref="orgName" v-model="ordData.orgName" :readonly="true"/>
          </DkFormItem>
          <!--业务员-->
          <DkFormItem prop="staffName" >
            <InputPop ref="staffName" v-model="ordData.staffName" :readonly="true"/>
          </DkFormItem>
          <!--客户来源-->
          <DkFormItem prop="cusFrom" >
            <InputPop ref="cusFrom" v-model="ordData.cusFrom" :readonly="true"/>
          </DkFormItem>
          <!--销售渠道-->
          <DkFormItem prop="salesChannel" >
            <InputPop ref="salesChannel" v-model="ordData.salesChannel" :readonly="true"/>
          </DkFormItem>
          <!--送货时间-->
          <DkFormItem prop="deliveryDate" :data-type="$config.dataType.date">
            <InputPop ref="deliveryDate" v-model="ordData.deliveryDate" :readonly="true"/>
          </DkFormItem>
          <!--备注-->
          <DkFormItem prop="remarks">
            <InputPop ref="remarks" v-model="ordData.remarks":readonly="true"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <!--商品信息-->
      <DkPanel prop="goodsInformation">
        <div id="ord-order" ref="ord-order" slot="content">
          <EditTable v-if="ordFlag"
                     ref="orderItemTable"
                     :data="orderItemList"
                     :columns="orderItemColumns"
                     :height=this.tableHeight
                     :freeze="false"
                     :show-footer="true"
                     :delete-flag="false"
                     :add-flag="false"
          ></EditTable>
        </div>
      </DkPanel>
    </DkCollapse>
    <!--    出库单-->
    <DkCollapse @on-change="changeCollapse" ref="collapse" v-if="this.tabsModel ==='outbound' ">
      <DkTabs v-model="tabsModelOut" :options="tabsOptionsOut" @on-click="tabsClickOut"></DkTabs>
      <DkPanel prop="essentialInformation">
        <!--  单据信息  -->
        <DkForm slot="content" ref="formInline" v-model="ordOutboundData"
                style="width:100%" :label-max-words="5">
          <!--出库单号-->
          <DkFormItem prop="outNo">
            <InputPop ref="outNo" v-model="ordOutboundData.outNo" :readonly="true"/>
          </DkFormItem>
          <!--客户电话-->
          <DkFormItem prop="cusPhone">
            <InputPop ref="cusPhone" :disabled="true" v-model="ordOutboundData.cusPhone"/>
          </DkFormItem>
          <!--客户名称-->
          <DkFormItem prop="cusName">
            <InputPop ref="cusName" :disabled="true" v-model="ordOutboundData.cusName"/>
          </DkFormItem>
          <!--客户区域-->
          <DkFormItem prop="addressName" >
            <InputPop ref="addressName" v-model="ordData.addressName" :readonly="true"/>
          </DkFormItem>
          <!--门牌号-->
          <DkFormItem prop="addressNo" >
            <InputPop ref="addressNo" v-model="ordData.addressNo":readonly="true"/>
          </DkFormItem>
          <!--详细地址-->
          <DkFormItem prop="addressFull" >
            <InputPop ref="addressFull" v-model="ordData.addressFull":readonly="true"/>
          </DkFormItem>
          <!--联系人-->
          <DkFormItem prop="contactName">
            <InputPop ref="contactName" v-model="ordData.contactName" :readonly="true"/>
          </DkFormItem>
          <!--联系电话-->
          <DkFormItem prop="contactPhone">
            <InputPop ref="contactPhone" v-model="ordData.contactPhone" :readonly="true"/>
          </DkFormItem>
          <!--业务部门-->
          <DkFormItem prop="orgName" >
            <InputPop ref="orgName" v-model="ordData.orgName" :readonly="true"/>
          </DkFormItem>
          <!--业务员-->
          <DkFormItem prop="staffName" >
            <InputPop ref="staffName" v-model="ordData.staffName" :readonly="true"/>
          </DkFormItem>
          <!--出库日期-->
          <DkFormItem prop="outDate" :data-type="$config.dataType.date">
            <DatePickerPop v-model="ordOutboundData.outDate" :readonly="true"/>
          </DkFormItem>
          <!--总出库中数量-->
          <DkFormItem prop="outingQtySum" >
            <InputNumber ref="outingQtySum" v-model="ordData.outingQtySum" :readonly="true"/>
          </DkFormItem>
          <!--总已出库数量-->
          <DkFormItem prop="outQtySum">
            <InputNumber ref="outQtySum" v-model="ordData.outQtySum" :readonly="true"/>
          </DkFormItem>
          <!--自动出库标识-->
          <DkFormItem prop="autoOutFlag" >
            <template>
              <i-switch v-model="ordOutboundData.flgAutoHandle" :disabled="true">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </template>
          </DkFormItem>
          <!--单据备注-->
          <DkFormItem prop="remarks">
            <InputPop ref="remarks" v-model="ordOutboundData.remarks" :readonly="true"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <!--商品信息-->
      <DkPanel prop="goodsInformation">
        <div id="ord-outbound" ref="ord-outbound" slot="content">
          <EditTable v-if="ordOutboundFlag"
                     ref="ordOutboundTable"
                     :data="ordOutboundItemList"
                     :columns="ordOutboundItemColumns"
                     :height=this.tableHeight
                     :freeze="false"
                     :show-footer="true"
                     :delete-flag="false"
                     :add-flag="false"
          ></EditTable>
        </div>
      </DkPanel>
    </DkCollapse>
    <!-- 退货单-->
    <DkCollapse @on-change="changeCollapse" ref="collapse" v-if="this.tabsModel ==='ordOutReturn' ">
      <DkTabs v-model="tabsModelOutReturn" :options="tabsOptionsOutReturn" @on-click="tabsClickOutReturn"></DkTabs>
      <DkPanel prop="essentialInformation">
        <!--  单据信息  -->
        <DkForm slot="content" ref="formInline" v-model="ordOutReturnData"
                style="width:100%" :label-max-words="5">
          <!--出库单号-->
          <DkFormItem prop="outNo"  >
            <InputPop ref="outNo" v-model="ordOutReturnData.outNo" :readonly="true" />
          </DkFormItem>
          <!--客户电话-->
          <DkFormItem prop="cusPhone">
            <InputPop ref="cusPhone" :disabled="true" v-model="ordOutReturnData.cusPhone"/>
          </DkFormItem>
          <!--客户名称-->
          <DkFormItem prop="cusName">
            <InputPop ref="cusName" :disabled="true" v-model="ordOutReturnData.cusName"/>
          </DkFormItem>
          <!--客户区域-->
          <DkFormItem prop="addressName" >
            <InputPop ref="addressName" v-model="ordOutReturnData.addressName" :readonly="true"/>
          </DkFormItem>
          <!--门牌号-->
          <DkFormItem prop="addressNo" >
            <InputPop ref="addressNo" v-model="ordOutReturnData.addressNo":readonly="true"/>
          </DkFormItem>
          <!--详细地址-->
          <DkFormItem prop="addressFull" >
            <InputPop ref="addressFull" v-model="ordOutReturnData.addressFull":readonly="true"/>
          </DkFormItem>
          <!--联系人-->
          <DkFormItem prop="contactName">
            <InputPop ref="contactName" v-model="ordOutReturnData.contactName" :readonly="true"/>
          </DkFormItem>
          <!--联系电话-->
          <DkFormItem prop="contactPhone">
            <InputPop ref="contactPhone" v-model="ordOutReturnData.contactPhone" :readonly="true"/>
          </DkFormItem>
          <!--业务部门-->
          <DkFormItem prop="orgName" >
            <InputPop ref="orgName" v-model="ordOutReturnData.orgName" :readonly="true"/>
          </DkFormItem>
          <!--业务员-->
          <DkFormItem prop="staffName" >
            <InputPop ref="staffName" v-model="ordOutReturnData.staffName" :readonly="true"/>
          </DkFormItem>
          <!--出库日期-->
          <DkFormItem prop="outDate" :data-type="$config.dataType.date">
            <DatePickerPop v-model="ordOutReturnData.outDate" :readonly="true" />
          </DkFormItem>
          <!--总出库中数量-->
          <DkFormItem prop="outingQtySum" >
            <InputNumber ref="outingQtySum" v-model="ordOutReturnData.outingQtySum" :readonly="true"/>
          </DkFormItem>
          <!--总已出库数量-->
          <DkFormItem prop="outQtySum" >
            <InputNumber ref="outQtySum" v-model="ordOutReturnData.outQtySum" :readonly="true"/>
          </DkFormItem>
          <!--单据备注-->
          <DkFormItem prop="remarks">
            <InputPop ref="remarks" v-model="ordOutReturnData.remarks" :readonly="true"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <!--商品信息-->
      <DkPanel prop="goodsInformation">
        <div id="ord-return" ref="ord-return" slot="content">
          <EditTable v-if="ordOutReturnFlag"
                     ref="outRetrunTable"
                     :data="ordOutRetrunItemList"
                     :columns="ordOutRetrunItemColumns"
                     :height=this.tableHeight
                     :freeze="false"
                     :show-footer="true"
                     :delete-flag="false"
                     :add-flag="false"
          ></EditTable>
        </div>
      </DkPanel>
    </DkCollapse>
    <!--   订单收款-->
    <DkCollapse @on-change="changeCollapse" ref="collapse" v-if="this.tabsModel ==='ordRecPay' ">
      <DkTabs v-model="tabsModelRecPay" :options="tabsOptionsRecPay" @on-click="tabsClickRecPay"></DkTabs>
      <DkPanel prop="essentialInformation">
        <!--  单据信息  -->
        <DkForm slot="content" ref="formInline" v-model="ordRecPayData"
                style="width:100%" :label-max-words="5">
          <!--收款单号-->
          <DkFormItem prop="rpNo">
            <InputPop ref="rpNo" v-model="ordRecPayData.rpNo" :readonly="true"/>
          </DkFormItem>
          <!--收款类型-->
          <DkFormItem prop="receiptType">
            <InputPop ref="receiptType" v-model="ordRecPayData.receiptType" :readonly="true"/>
          </DkFormItem>
          <!--客户电话-->
          <DkFormItem prop="cusPhone">
            <InputPop ref="cusPhone" :disabled="true" v-model="ordRecPayData.cusPhone":readonly="true"/>
          </DkFormItem>
          <!--客户名称-->
          <DkFormItem prop="cusName">
            <InputPop ref="cusName" :disabled="true" v-model="ordRecPayData.cusName":readonly="true"/>
          </DkFormItem>
          <!--业务部门-->
          <DkFormItem prop="orgName" >
            <InputPop ref="orgName" v-model="ordRecPayData.orgName" :readonly="true"/>
          </DkFormItem>
          <!--业务员-->
          <DkFormItem prop="staffName" >
            <InputPop ref="staffName" v-model="ordRecPayData.staffName" :readonly="true"/>
          </DkFormItem>
          <!--账务日期-->
          <DkFormItem prop="accDate" :data-type="$config.dataType.date">
            <DatePickerPop v-model="ordRecPayData.accDate" :readonly="true"/>
          </DkFormItem>
          <!--单据备注-->
          <DkFormItem prop="remarks">
            <InputPop ref="remarks" v-model="ordRecPayData.remarks" :readonly="true"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <!--收款信息-->
      <DkPanel prop="recHandleDetail">
        <div id="ord-rec-pay" ref="ord-rec-pay" slot="content">
          <EditTable v-if="ordRecPayFlag"
                     ref="recPayTable"
                     :data="ordRecPayItemList"
                     :columns="ordRecPayItemColumns"
                     :height=this.tableHeight+60
                     :freeze="false"
                     :show-footer="true"
                     :delete-flag="false"
                     :add-flag="false"
          ></EditTable>
        </div>
      </DkPanel>
    </DkCollapse>
  </div>

</template>

<script>
import {indexMixin} from '@/mixins'
import {formMixin} from "@/mixins/form";

export default {
  name: "order-track-report",
  mixins: [formMixin],
  data() {
    let self = this
    return {
      ordFlag:true,
      ordOutboundFlag: true,
      ordOutReturnFlag: true,
      ordRecPayFlag:true,
      ordData: {},//销售订单
      orderItemList: [],//订单明细
      //订单明细列
      orderItemColumns: [
        {
          field: 'skuCode',
          type: 'disabled',
        },
        {
          field: 'skuModel',
          type: 'disabled',
        },
        {
          field: 'skuName',
          type: 'disabled',
        },
        {
          field: 'brandName',
          type: 'disabled',
        },
        //仓库
        {
          field: 'whName',
          type: 'disabled',
        },
        //非标号
        {
          field: 'nonStdCode',
          type: 'text',
          equal: true,
        },
        //数量
        {
          field: 'itemQty',
          type: 'disabled',
          digits: 2,
          number: true,
          sum: true
        },
        //价格
        {
          field: 'priceSale',
          type: 'disabled',
          digits: 2,
          number: true
        },
        //金额
        {
          field: 'itemAmt',
          type: 'number',
          digits: 2,
          number: true,
          sum: true
        },
        //商品标价
        {
          field: 'priceStd',
          type: 'disabled',
          number: true,
          digits: 2,
        },
        //标价金额
        {
          field: 'amtStd',
          type: 'disabled',
          digits: 2,
          number: true
        },
        //标价折扣
        {
          field: 'priceDiscount',
          type: 'disabled',
          number: true,
          digits: 2,
        },
        {
          field: 'remarks',
          type: 'text',
          equal: true,
        },
      ],
      // 出库数据list
      ordOutboundDataList: [],
      //销售出库单
      ordOutboundData: {},
      //销售出库单明细
      ordOutboundItemList: [],
      //出库明细列
      ordOutboundItemColumns: [
        {
          field: 'skuCode',
          type: 'disabled',
        },
        {
          field: 'skuModel',
          type: 'disabled',
        },
        {
          field: 'skuName',
          type: 'disabled',
        },
        //仓库
        {
          field: 'whName',
          type: 'disabled',
        },
        //非标号
        {
          field: 'nonStdCode',
          type: 'text',
          equal: true,
        },
        //出库状态
        {
          field: 'outStatusName',
          type: 'text',
          equal: true,
        },
        //出库中数量
        {
          field: 'outingQty',
          type: 'disabled',
          digits: 2,
          number: true,
          sum: true
        },
        //出库中金额
        {
          field: 'outingAmt',
          type: 'number',
          digits: 2,
          number: true,
          sum: true
        },
        //已出库数量
        {
          field: 'outQty',
          type: 'disabled',
          digits: 2,
          number: true,
          sum: true
        },
        //已出库金额
        {
          field: 'outAmt',
          type: 'number',
          digits: 2,
          number: true,
          sum: true
        },
        {
          field: 'remarks',
          type: 'text',
          equal: true,
        },
      ],
      //退货数据list
      ordOutReturnDataList:[],
      //退货主表
      ordOutReturnData:{},
      //销退货明细
      ordOutRetrunItemList:[],
      //退货明细列
      ordOutRetrunItemColumns:[
        {
          field: 'skuCode',
          type: 'disabled',
        },
        {
          field: 'skuModel',
          type: 'disabled',
        },
        {
          field: 'skuName',
          type: 'disabled',
        },
        //仓库
        {
          field: 'whName',
          type: 'disabled',
        },
        //非标号
        {
          field: 'nonStdCode',
          type: 'text',
          equal: true,
        },
        //出库状态
        {
          field: 'outStatusName',
          type: 'text',
          equal: true,
        },
        //出库中数量
        {
          field: 'outingQty',
          type: 'disabled',
          digits: 2,
          number: true,
          sum: true
        },
        //出库中金额
        {
          field: 'outingAmt',
          type: 'number',
          digits: 2,
          number: true,
          sum: true
        },
        //已出库数量
        {
          field: 'outQty',
          type: 'disabled',
          digits: 2,
          number: true,
          sum: true
        },
        //已出库金额
        {
          field: 'outAmt',
          type: 'number',
          digits: 2,
          number: true,
          sum: true
        },
        {
          field: 'remarks',
          type: 'text',
          equal: true,
        },
      ],
      // 收款数据List
      ordRecPayDataList:[],
      // 收款主表
      ordRecPayData:{},
      // 收款明细
      ordRecPayItemList:[],
      //收款明细列
      ordRecPayItemColumns:[
        {
          field: 'biznisNo',
          type: 'disabled',
        },
        {
          field: 'accDate',
          type: 'disabled',
        },
        //应收金额
        {
          field: 'amtShould',
          type: 'number',
          digits: 2,
          number: true,
          sum: true
        },
        //应收冲抵金额
        {
          field: 'amtReceivableHandle',
          type: 'number',
          digits: 2,
          number: true,
          sum: true
        },
        //优惠金额
        {
          field: 'amtWaive',
          type: 'disabled',
          number: true,
          digits: 2,
          sum: true
        },
        {
          field: 'remarks',
          type: 'text',
          equal: true,
        },
      ],
      // 模式切换值
      tabsModel: 'ordchase',

      tabsOptions: [{label: self.$t('ordchase'), name: 'ordchase'}, //销售订单
        {label: self.$t('outbound'), name: 'outbound'}, //出库单
        {label: self.$t('ordOutReturn'), name: 'ordOutReturn'},//销售退货
        {label: self.$t('ordRecPay'), name: 'ordRecPay'},//订单收款
      ],

      tabsModelOut: null,
      tabsModelOutReturn: null,
      tabsModelRecPay: null,

      tabsOptionsOut: [],
      tabsOptionsOutReturn: [],
      tabsOptionsRecPay: [],
    }
  },
  methods: {
    /**
     * @desc   : 整体tab切换
     * @author : 宋扬
     * @date   : 2024/4/25 11:45
     */
    tabsClick(val) {
      this.ordOutboundFlag = false;
      this.ordOutReturnFlag = false;
      this.ordRecPayFlag = false;
      //如果切换的tab存在就去根据条件查询
      if (val) {
        if(val == 'ordchase'){
          setTimeout(() => {
            this.ordFlag = true;
            this.ordOutboundFlag = false;
            this.ordOutReturnFlag = false;
            this.ordRecPayFlag = false;
          }, 100)
        }
        else if(val == 'outbound'){
          setTimeout(() => {
            this.ordFlag = false;
            this.ordOutboundFlag = true;
            this.ordOutReturnFlag = false;
            this.ordRecPayFlag = false;
          }, 100)
        }
        else if(val == 'ordOutReturn'){
          setTimeout(() => {
            this.ordFlag = false;
            this.ordOutboundFlag = false;
            this.ordOutReturnFlag = true;
            this.ordRecPayFlag = false;
          }, 100)
        }
        else if(val == 'ordRecPay'){
          setTimeout(() => {
            this.ordFlag = false;
            this.ordOutboundFlag = false;
            this.ordOutReturnFlag = false;
            this.ordRecPayFlag = true;
          }, 100)
        }
      }
    },

    /**
     * @desc   : 出库tab切换
     * @author : 宋扬
     * @date   : 2024/4/25 11:46
     */
    tabsClickOut(val) {
      //如果切换的tab存在就去根据条件查询
      if (val) {
        this.ordOutboundDataList.forEach(it => {
          if (it.outNo == val) {
            this.ordOutReturnData = it
            this.ordOutboundItemList = it.outboundItemList
          }
        })
      }
    },

   /**
    * @desc   : 退货tab切换
    * @author : 宋扬
    * @date   : 2024/4/25 17:20
    */
    tabsClickOutReturn(val) {
      //如果切换的tab存在就去根据条件查询
      if (val) {
        this.ordOutReturnDataList.forEach(it => {
          if (it.outNo == val) {
            this.ordOutReturnData = it
            this.ordOutRetrunItemList = it.outReturnItemList
          }
        })
      }
    },

    /**
     * @desc   : 收款tab切换
     * @author : 宋扬
     * @date   : 2024/4/26 10:27
     */
    tabsClickRecPay(val) {
      //如果切换的tab存在就去根据条件查询
      if (val) {
        this.ordRecPayDataList.forEach(it => {
          if (it.rpNo == val) {
            this.ordRecPayData = it
            this.ordRecPayItemList = it.recpayitemlist
          }
        })
      }
    },

    /**
     * @desc   : 查询数据
     * @author : 宋扬
     * @date   : 2024/4/26 10:28
     */
    getOrd(id) {
      let params = {
        ordId: id
      }
      this.excute(this.$service.orderService, this.$service.orderService.getOrderTrackReport, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          // 赋值订单总表信息
          this.ordData = res.data.list[0]
          // 赋值订单明细信息
          this.orderItemList = res.data.list[0].ordItemList
          // 赋值出库单list值
          this.ordOutboundDataList = res.data.list[0].outboundDataList
          if (this.ordOutboundDataList && this.ordOutboundDataList.length > 0) {
            this.ordOutboundData = this.ordOutboundDataList[0]
            this.ordOutboundItemList = this.ordOutboundDataList[0].outbounditemlist
            this.tabsOptionsOut = this.ordOutboundDataList.map(m => {
              return {label: m.outNo, name: m.outNo}
            })
          }
          // 赋值出库退货单List值
          this.ordOutReturnDataList = res.data.list[0].outReturnDataList
          if (this.ordOutReturnDataList && this.ordOutReturnDataList.length > 0) {
            this.ordOutReturnData = this.ordOutReturnDataList[0]
            this.ordOutRetrunItemList = this.ordOutReturnDataList[0].outreturnitemlist
            this.tabsOptionsOutReturn = this.ordOutReturnDataList.map(m => {
              return {label: m.outNo, name: m.outNo}
            })
          }
          // 赋值收款单List值
          this.ordRecPayDataList = res.data.list[0].recPayDataList
          if (this.ordRecPayDataList && this.ordRecPayDataList.length > 0) {
            this.ordRecPayData = this.ordRecPayDataList[0]
            this.ordRecPayItemList = this.ordRecPayDataList[0].recpayitemlist
            this.tabsOptionsRecPay = this.ordRecPayDataList.map(m => {
              return {label: m.rpNo, name: m.rpNo}
            })
          }
        }
      })
    },
  },
  created() {
    this.getOrd(this.$route.params.row.orderId)
  },
}
</script>

