<!-- @desc:客户管理详情  @auth:付斌  @time:2024/1/30 15:15 -->
<template>
  <div class="main-div">
    <Card class="card">
      <p slot="title">
        {{ $t('customerInfo') }}
      </p>
      <DkRow>
        <Col span="8">
          <Icon type="md-person" size="20"/>
          {{ $t('customerName') + '：' }}
          <b>{{ formData.customerName }}</b>
        </Col>
        <Col span="16">
          <Tag color="blue" size="medium" v-if="formData.customerFromName">{{ formData.customerFromName }}</Tag>
          <Tag color="blue" size="medium" v-if="formData.saleStatusName">{{ formData.saleStatusName }}</Tag>
          <Tag color="blue" size="medium" v-if="formData.intentionTagsName">{{ formData.intentionTagsName }}</Tag>
          <Tag color="blue" size="medium" v-if="formData.intentionQuantity">{{ formData.intentionQuantity + '品类' }}
          </Tag>
        </Col>
      </DkRow>
      <DkRow>
        <Col span="8" v-if="formData.customerPhone">
          <Icon type="md-call" size="20"/>
          {{ $t('customerPhone') + '：' + formData.customerPhone }}
        </Col>
        <Col span="16" v-if="formData.addressName">
          <Icon type="md-pin" size="20"/>
          {{ $t('addressFull') + '：' + formData.addressFull }}
        </Col>
      </DkRow>
      <DkRow>
        <Col span="24">
          <Tag v-for="(it,index) in formData.customerTagNames" color="cyan"
               :key="index" size="medium">{{ it }}
          </Tag>
        </Col>
      </DkRow>
    </Card>
    <Card class="card">
      <!--  新结构重写一下    -->
      <div class="order-info">

        <div>
          <span
            class="yuan-fh">￥</span><b>{{
            summaryData.orderAmount ? XEUtils.commafy(Number(summaryData.orderAmount), {digits: 2}) : '0.00'
          }}元</b>
          <span style="display: block;">订单（{{ summaryData.orderQuantity }}单）</span>
        </div>

        <div>
          <span
            class="yuan-fh">￥</span><b>{{
            summaryData.outAmount ? XEUtils.commafy(Number(summaryData.outAmount), {digits: 2}) : '0.00'
          }}元</b>
          <span style="display: block;">出库（{{ summaryData.outQuantity }}单）</span>
        </div>

        <div>
          <span
            class="yuan-fh">￥</span><b>{{
            summaryData.nonOutAmount ? XEUtils.commafy(Number(summaryData.nonOutAmount), {digits: 2}) : '0.00'
          }}元</b>
          <span style="display: block;">未出库</span>
        </div>

        <div>
          <span
            class="yuan-fh">￥</span><b>{{
            summaryData.sumReceipt ? XEUtils.commafy(Number(summaryData.sumReceipt), {digits: 2}) : '0.00'
          }}元</b>
          <span style="display: block;">收款总额</span>
        </div>

        <div>
          <span class="yuan-fh">￥</span><b>{{
            (summaryData.orderAmount - summaryData.sumReceipt - summaryData.rejectAmount) ?
              XEUtils.commafy(Number(summaryData.orderAmount - summaryData.sumReceipt - summaryData.rejectAmount), {digits: 2}) : '0.00'
          }}元</b>
          <span style="display: block;">客户欠款</span>
        </div>

        <div>
          <span
            class="yuan-fh">￥</span><b>{{
            summaryData.rejectAmount ? XEUtils.commafy(Number(summaryData.rejectAmount), {digits: 2}) : '0.00'
          }}元</b>
          <span style="display: block;">退货（{{ summaryData.rejectQuantity }}单）</span>
        </div>

        <div>
          <span
            class="yuan-fh">￥</span><b>{{
            summaryData.refundAmount ? XEUtils.commafy(Number(summaryData.refundAmount), {digits: 2}) : '0.00'
          }}元</b>
          <span style="display: block;">退款（{{ summaryData.refundQuantity }}单）</span>
        </div>


      </div>
    </Card>
    <Card>
      <DkTabs ref="tab" v-model="tabsModel" :options="tabsOptions">
        <div slot="1">
          <div style="margin-top: 5px">
            <Tag :color="formData.followCount>0 ? 'blue':'red'" size="medium">
              {{ $t('followCount') + '：' + (formData.followCount || 0) }}
            </Tag>
            <Tag color="blue" size="medium" v-if="formData.followCount">
              {{ $t('lastFollowTime') + '：' + formData.lastFollowTime }}
            </Tag>
            <Tag color="blue" size="medium" v-if="formData.nextFollowTime">
              {{ $t('nextFollowTime') + '：' + formData.nextFollowTime }}
            </Tag>
            <Tag color="blue" size="medium" v-if="followListOrigin && followListOrigin[0]">
              {{ $t('nextFollowPlan') + '：' + (followListOrigin[0].nextFollowPlan || '') }}
            </Tag>
          </div>

          <List item-layout="vertical">
            <ListItem v-for="(item, index) in followList" :key="index">
              <ListItemMeta :title="item[0].weekTime"/>
              <DkRow v-for="(item3, index3) in item" :key="index3">
                <Col span="24" v-for="(item2, index2) in item3" :key="index2"
                     :style="{marginTop:index2===0?'0':'10px'}">
                  <Card>
                    <p slot="title">
                      {{ item2.hourTime }}
                    </p>
                    <Tag color="cyan" size="medium">
                      {{ item2.followStatus }}
                    </Tag>
                    <Tag color="cyan" size="medium">
                      {{ item2.followType }}
                    </Tag>
                    <Tag color="cyan" size="medium">
                      {{ $t('followUser') + '：' + item2.followUserName }}
                    </Tag>
                    <br/>
                    <Tag color="cyan" size="medium" v-if="item2.inviteResult">
                      {{ item2.inviteResult }}
                    </Tag>
                    <br v-if="item2.inviteResult" v/>
                    <div style="white-space:normal; word-break:break-all;overflow:hidden;" v-if="item2.intentionInfo">
                      {{ item2.intentionInfo }}
                    </div>
                    <br/>
                    <div style="white-space:normal; word-break:break-all;overflow:hidden;margin-bottom: 20px;">
                      {{ item2.followData }}
                    </div>
                    <div>
                      <el-image fit="contain" v-for="(img,imgIndex) in item2.annexPaths.annexPaths" :key="imgIndex"
                                style="width: 100px; height: 100px;margin-right: 5px;margin-bottom: 5px;border:1px dashed #b6b6b6;border-radius: 5px"
                                :src="$config.imgUrl+img"
                                :preview-src-list="item2.annexPaths.annexPaths.map(it=>$config.imgUrl+it)">
                      </el-image>
                    </div>
                  </Card>
                </Col>
              </DkRow>
            </ListItem>
          </List>
        </div>

        <div slot="21">
          <div style="margin-top: 5px">
            <Card>
              <DkTable :pageFlag="true" primaryKey="orderId" :id="'table-'+$options.name" name="table"
                       @pageChange="orderPageSizeChange" :refreshSelect="false" :show-footer="true"
                       ref="orderTable1" :data="orderList" :height="tableHeight - 140">
                <DkTableColumn type="seq" width="60" sortable></DkTableColumn>
                <DkTableColumn field="followOrderFlag" type="switch" :title="$t('followOrder')"
                               disabled width="120px"></DkTableColumn>
                <DkTableColumn field="orderNo" width="200px"></DkTableColumn>
                <DkTableColumn field="contractNo" width="120px"></DkTableColumn>
                <DkTableColumn field="docCode" :title="$t('docCodeType')" width="120px"></DkTableColumn>
                <DkTableColumn field="orderStatusString" :title="$t('orderStatus')" width="120px"></DkTableColumn>
                <DkTableColumn field="outStatusString" :title="$t('outStatus')" width="120px"></DkTableColumn>
                <DkTableColumn field="designStatus" width="120px"></DkTableColumn>
                <DkTableColumn field="tSumQuantity" width="120px" :title="$t('sumQuantity')" sum></DkTableColumn>
                <DkTableColumn field="tSumStandard" width="120px" :title="$t('sumStandard')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="tSumPromotion" width="120px" :title="$t('sumPromotion')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="tSumGoodsAmount" width="120px" :title="$t('sumGoodsAmount')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="tSumAmount" width="120px" :title="$t('sumAmount')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="receivable" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumReceipt" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumFeeAmount" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumOutAmount" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumRejectAmount" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="contactName" width="120px"></DkTableColumn>
                <DkTableColumn field="contactPhones" width="120px"></DkTableColumn>
                <DkTableColumn field="addressName" width="150px"></DkTableColumn>
                <DkTableColumn field="addressNo" width="120px"></DkTableColumn>
                <DkTableColumn field="addressFull" width="250px"></DkTableColumn>
                <DkTableColumn field="deliveryTime" width="120px"></DkTableColumn>
                <DkTableColumn field="orgName" :title="$t('orgId')" width="180px"></DkTableColumn>
                <DkTableColumn field="staffName" :title="$t('staffId')" width="120px"></DkTableColumn>
                <DkTableColumn :title="$t('customerFrom')" field="customerFromName" width="120px"></DkTableColumn>
                <DkTableColumn :title="$t('salesChannel')" field="salesChannelName" width="120px"></DkTableColumn>
                <DkTableColumn :title="$t('makingUser')" field="makingUserName" width="120px"></DkTableColumn>
                <DkTableColumn field="makingTime" width="120px" data-type="dateTime"></DkTableColumn>
                <DkTableColumn field="remarks" width="250px"></DkTableColumn>
              </DkTable>
            </Card>
          </div>
        </div>

        <div slot="22">
          <div style="margin-top: 5px">
            <Card>
              <DkTable :pageFlag="true" primaryKey="orderId" :id="'table-'+$options.name" name="table"
                       @pageChange="orderPageSizeChange2" :refreshSelect="false" :show-footer="true"
                       ref="orderTable2" :data="orderList2" :height="tableHeight - 140">
                <DkTableColumn type="seq" width="60" sortable></DkTableColumn>
                <DkTableColumn field="followOrderFlag" type="switch" :title="$t('followOrder')"
                               disabled width="120px"></DkTableColumn>
                <DkTableColumn field="orderNo" width="200px"></DkTableColumn>
                <DkTableColumn field="contractNo" width="120px"></DkTableColumn>
                <DkTableColumn field="docCode" :title="$t('docCodeType')" width="120px"></DkTableColumn>
                <DkTableColumn field="orderStatusString" :title="$t('orderStatus')" width="120px"></DkTableColumn>
                <DkTableColumn field="outStatusString" :title="$t('outStatus')" width="120px"></DkTableColumn>
                <DkTableColumn field="designStatus" width="120px"></DkTableColumn>
                <DkTableColumn field="tSumQuantity" width="120px" :title="$t('sumQuantity')" sum></DkTableColumn>
                <DkTableColumn field="tSumStandard" width="120px" :title="$t('sumStandard')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="tSumPromotion" width="120px" :title="$t('sumPromotion')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="tSumGoodsAmount" width="120px" :title="$t('sumGoodsAmount')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="tSumAmount" width="120px" :title="$t('sumAmount')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="receivable" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumReceipt" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumFeeAmount" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumOutAmount" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumRejectAmount" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="contactName" width="120px"></DkTableColumn>
                <DkTableColumn field="contactPhones" width="120px"></DkTableColumn>
                <DkTableColumn field="addressName" width="150px"></DkTableColumn>
                <DkTableColumn field="addressNo" width="120px"></DkTableColumn>
                <DkTableColumn field="addressFull" width="250px"></DkTableColumn>
                <DkTableColumn field="deliveryTime" width="120px"></DkTableColumn>
                <DkTableColumn field="orgName" :title="$t('orgId')" width="180px"></DkTableColumn>
                <DkTableColumn field="staffName" :title="$t('staffId')" width="120px"></DkTableColumn>
                <DkTableColumn :title="$t('customerFrom')" field="customerFromName" width="120px"></DkTableColumn>
                <DkTableColumn :title="$t('salesChannel')" field="salesChannelName" width="120px"></DkTableColumn>
                <DkTableColumn :title="$t('makingUser')" field="makingUserName" width="120px"></DkTableColumn>
                <DkTableColumn field="makingTime" width="120px" data-type="dateTime"></DkTableColumn>
                <DkTableColumn field="remarks" width="250px"></DkTableColumn>
              </DkTable>
            </Card>
          </div>
        </div>

        <div slot="23">
          <div style="margin-top: 5px">
            <Card>
              <DkTable :pageFlag="true" primaryKey="orderId" :id="'table-'+$options.name" name="table"
                       @pageChange="outRejectPageSizeChange2" :refreshSelect="false" :show-footer="true"
                       ref="orderTable3" :data="outRejectList" :height="tableHeight - 140">
                <DkTableColumn type="seq" width="60" sortable></DkTableColumn>
                <DkTableColumn field="rejectNo" width="200px"></DkTableColumn>
                <DkTableColumn field="orderNo" width="200px"></DkTableColumn>
                <DkTableColumn field="addressFull" width="250px"></DkTableColumn>
                <DkTableColumn field="addressNo" width="120px"></DkTableColumn>
                <DkTableColumn field="sumRejectQuantity" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="sumRejectAmount" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="makingTime" width="120px" data-type="dateTime"></DkTableColumn>
                <DkTableColumn field="rejectReason" width="120px"></DkTableColumn>
                <DkTableColumn field="refundMethod" width="120px"></DkTableColumn>
                <DkTableColumn field="refundAccount" width="120px"></DkTableColumn>
                <DkTableColumn field="rejectStatus" width="120px"></DkTableColumn>
                <DkTableColumn field="apvResult" width="120px"></DkTableColumn>
                <DkTableColumn field="apvResultTime" width="150px"></DkTableColumn>
                <DkTableColumn field="remarks" width="250px"></DkTableColumn>
              </DkTable>
            </Card>
          </div>
        </div>

        <div slot="3">
          <Card>
            <DkTable :id="'table-'+$options.name" ref="table-select" :data="receiptList"
                     :pageFlag=true @pageChange="receiptPageSizeChange"
                     :height="tableHeight - 140" primaryKey="receiptId"
                     name="table">
              <DkTableColumn :title="$t('seq')" min-width="44px" type="seq" width="60"></DkTableColumn>
              <DkTableColumn field="receiptNo" min-width="200" width="auto" :filter=false></DkTableColumn>
              <DkTableColumn field="orderNo" min-width="200" width="auto" :filter=false></DkTableColumn>
              <!--单据类型-->
              <DkTableColumn field="docCode" :title="$t('receiptDocCode')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <!--收款方向-->
              <DkTableColumn field="receiptDirectionString" :title="$t('receiptDirection')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <!--结算方式-->
              <DkTableColumn field="settlementTypeName" :title="$t('settlementTypesName')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <DkTableColumn field="customerName" min-width="150" width="auto" :filter=false></DkTableColumn>
              <DkTableColumn field="staffName" :title="$t('staffId')" min-width="200" width="auto"
                             :filter=false></DkTableColumn>
              <DkTableColumn field="orgName" :title="$t('orgId')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <DkTableColumn field="sumAmount" min-width="150" width="auto" :filter=false></DkTableColumn>
              <!--当前审批人-->
              <DkTableColumn field="apvUserIds" :title="$t('apvUserIds')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <!--审批结果-->
              <DkTableColumn field="apvResult" min-width="150" width="auto" :filter=false></DkTableColumn>
              <!--原单号-->
              <DkTableColumn field="sreceiptNo" min-width="150" width="auto" :filter=false></DkTableColumn>
              <!--退款账号-->
              <DkTableColumn field="refundAccount" min-width="150" width="auto" :filter=false></DkTableColumn>
              <!--退款方式-->
              <DkTableColumn field="refundMethod" min-width="150" width="auto" :filter=false></DkTableColumn>
              <!--退款原因-->
              <DkTableColumn field="refundReason" min-width="150" width="auto" :filter=false></DkTableColumn>
              <DkTableColumn field="erpPushStatusString" :title="$t('erpPushStatus')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <DkTableColumn field="remarks" min-width="200" width="auto" :filter=false></DkTableColumn>
            </DkTable>
          </Card>
        </div>

        <div slot="4">
          <div style="margin-top: 5px;">
            <DkRow>
              <Col span="12">
                <DkRow style="padding-top: 20px">
                  <Col class="col" span="12">
                    {{ $t('followUserName') + '：' + (formData.followUserNames || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('orgName') + '：' + (formData.orgName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('customerFromName') + '：' + (formData.customerFromName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('toiletCount') + '：' + (formData.toiletCountName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('fitupType') + '：' + (formData.fitupTypeName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('houseType') + '：' + (formData.houseTypeName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('fitupStyle') + '：' + (formData.fitupStyleName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('ageComposition') + '：' + (formData.ageCompositionName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('decisionMaker') + '：' + (formData.decisionMakerName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('reportUserName') + '：' + (formData.reportUserName || '') }}
                  </Col>
                </DkRow>
              </Col>
            </DkRow>
          </div>
        </div>


        <div slot="5">
          <Card>
            <DkTable :id="'table-'+$options.name" ref="table-select" :data="refundList"
                     :pageFlag=true @pageChange="receiptPageSizeChange"
                     :height="tableHeight - 140" primaryKey="receiptId"
                     name="table">
              <DkTableColumn :title="$t('seq')" min-width="44px" type="seq" width="60"></DkTableColumn>
              <DkTableColumn field="refundNo" min-width="200" width="auto" :filter=false></DkTableColumn>

              <DkTableColumn field="refundName" min-width="200" width="auto" :filter=false></DkTableColumn>


              <DkTableColumn field="orderNo" min-width="200" width="auto" :filter=false></DkTableColumn>
              <!--单据类型-->
              <DkTableColumn field="docCode" :title="$t('receiptDocCode')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>

              <!--结算方式-->
              <DkTableColumn field="refundStatusName" :title="$t('refundStatus')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <DkTableColumn field="customerName" min-width="150" width="auto" :filter=false></DkTableColumn>
              <DkTableColumn field="staffName" :title="$t('staffId')" min-width="200" width="auto"
                             :filter=false></DkTableColumn>
              <DkTableColumn field="orgName" :title="$t('orgId')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <DkTableColumn field="sumApplyAmount" min-width="150" width="auto" :filter=false></DkTableColumn>

              <!--审批结果-->
              <DkTableColumn field="apvResultName" min-width="150" width="auto" :filter=false></DkTableColumn>

              <DkTableColumn field="erpPushResult" :title="$t('erpPushResult')" min-width="150" width="auto"
                             :filter=false></DkTableColumn>
              <DkTableColumn field="remarks" min-width="200" width="auto" :filter=false></DkTableColumn>
            </DkTable>
          </Card>
        </div>
      </DkTabs>
    </Card>
  </div>
</template>

<script>

import {formMixin} from '@/mixins/form'

export default {
  name: 'customer-detail',
  mixins: [formMixin],
  data() {
    let self = this
    return {
      XEUtils: XEUtils,
      formData: {},
      followList: [],
      followListOrigin: [],
      loading: false,
      orderPageInfo: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      orderList: [],
      orderPageInfo2: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      orderList2: [],
      outRejectPageInfo: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      outRejectList: [],
      receiptPageInfo: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      refundPageInfo: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      receiptList: [],
      refundList: [],
      summaryData: {},
      tabsModel: '1',
      tabsOptions: [
        {label: self.$t('followRecord'), name: '1'},

        {label: self.$t('budgetQuote'), name: '21'},
        {label: self.$t('transactionOrder'), name: '22'},
        {label: self.$t('salesReturn'), name: '23'},
        {label: self.$t('sale-refund'), name: '5'},

        {label: self.$t('receiveRecord'), name: '3'},
        {label: self.$t('customerInfo'), name: '4'},
      ],
    }
  },
  methods: {
    /**
     * @desc   : 通过id查询
     * @author : 付斌
     * @date   : 2024-02-01 14:28
     */
    detail() {

    },
    /**
     * @desc   : 查询报价单
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    getOrder() {

    },
    /**
     * @desc   : 查询订单
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    getOrder2() {

    },
    /**
     * @desc   : 查询销售退货
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    getOrderOutReject() {

    },
    /**
     * @desc   : 查询收款记录
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    getReceipt() {

    },
    /**
     * @desc   : 分页
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    orderPageSizeChange(pageInfo) {
      this.orderPageInfo = pageInfo
      this.getOrder() // 查询数据
    },
    orderPageSizeChange2(pageInfo) {
      this.orderPageInfo2 = pageInfo
      this.getOrder2() // 查询数据
    },
    outRejectPageSizeChange2(pageInfo) {
      this.outRejectPageInfo = pageInfo
      this.getOrderOutReject() // 查询数据
    },
    receiptPageSizeChange(pageInfo) {
      this.receiptPageInfo = pageInfo
      this.getReceipt() // 查询数据
    },
  },
  activated() {
    //通过id查询
    this.detail()
  }
}
</script>
