<!-- @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('cusName') + '：' }}
          <b>{{ formData.cusName }}</b>
        </Col>
        <Col span="16">
          <Tag color="blue" size="medium" v-if="formData.cusFromName">{{ formData.cusFromName }}</Tag>
          <Tag color="blue" size="medium" v-if="formData.saleStatusName">{{ formData.saleStatusName }}</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>
    </Card>
    <Card class="card">
      <!--  新结构重写一下    -->
      <div class="order-info">

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

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

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

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

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

        <div>
          <span
            class="yuan-fh">￥</span><b>{{
            formData.outboundReturnAmount ? XEUtils.commafy(Number(formData.outboundReturnAmount), {digits: 2}) : '0.00'
          }}元</b>
          <span style="display: block;">退货（{{ formData.outboundReturnQuantity }}单）</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>
          </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('followStaffName') + '：' + item2.staffName }}
                    </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" :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.map(it=>$config.imgUrl+it)">
                      </el-image>
                    </div>
                  </Card>
                </Col>
              </DkRow>
            </ListItem>
          </List>
        </div>

        <!--销售订单-->
        <div slot="22">
          <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="orderTable2" :data="orderList" :height="tableHeight - 140" :choose-flag="false">
                <DkTableColumn field="orderNo" width="200px"></DkTableColumn>
                <DkTableColumn field="orderTypeName" :title="$t('biznisTypeName')" width="120px"></DkTableColumn>
                <DkTableColumn field="orderStatusName" :title="$t('orderStatus')" width="120px"></DkTableColumn>
                <DkTableColumn field="outStatusName" :title="$t('outStatus')" width="120px"></DkTableColumn>
                <DkTableColumn field="sumQuantity" width="120px" :title="$t('sumQuantity')" sum></DkTableColumn>
                <DkTableColumn field="sumStandard" width="120px" :title="$t('sumStandard')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="sumAmount" width="120px" :title="$t('sumAmount')" :digits="2"
                               sum></DkTableColumn>
                <DkTableColumn field="outingAmt" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="outingQty" width="150px" sum></DkTableColumn>
                <DkTableColumn field="outAmt" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="outQty" width="150px"  sum></DkTableColumn>
                <DkTableColumn field="returnAmt" width="150px" :digits="2" sum></DkTableColumn>
                <DkTableColumn field="returnQty" width="150px" sum></DkTableColumn>
                <DkTableColumn field="contactName" width="120px"></DkTableColumn>
                <DkTableColumn field="contactPhone" width="120px"></DkTableColumn>
                <DkTableColumn field="addressName" width="150px"></DkTableColumn>
                <DkTableColumn field="addressNo" width="120px"></DkTableColumn>
                <DkTableColumn field="addressFull" width="250px"></DkTableColumn>
                <DkTableColumn field="deliveryDate" width="120px"></DkTableColumn>
                <DkTableColumn field="orgName" :title="$t('orgId')" width="180px"></DkTableColumn>
                <DkTableColumn field="staffName" :title="$t('staffId')" width="120px"></DkTableColumn>
                <DkTableColumn field="cusFromName" width="120px"></DkTableColumn>
                <DkTableColumn :title="$t('salesChannel')" field="channelName" width="120px"></DkTableColumn>
                <DkTableColumn :title="$t('makeStaffName')" field="makeStaffName" width="120px"></DkTableColumn>
                <DkTableColumn field="makeTime" width="120px" data-type="dateTime"></DkTableColumn>
                <DkTableColumn field="remarks" width="250px"></DkTableColumn>
              </DkTable>
            </Card>
          </div>
        </div>

        <!--销售出库单-->
        <div slot="21">
          <div style="margin-top: 5px">
            <Card>
              <DkTable :pageFlag="true" primaryKey="outId" :id="'table-'+$options.name" name="table"
                       @pageChange="outPageSizeChange" :refreshSelect="false" :show-footer="true"
                       ref="orderTable1" :data="orderOutList" :height="tableHeight - 140" :choose-flag="false">
                <DkTableColumn field="outNo"/>
                <DkTableColumn field="biznisNo"></DkTableColumn>
                <DkTableColumn field="cusName"></DkTableColumn>
                <DkTableColumn field="cusPhone"></DkTableColumn>
                <DkTableColumn field="contactPhone"></DkTableColumn>
                <DkTableColumn field="addressFull"></DkTableColumn>
                <DkTableColumn field="outingQty" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="outingAmt" :digits="2" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="outQty" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="outAmt" :digits="2" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="returnQty" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="returnAmt" :digits="2" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="outDate" data-type="date"></DkTableColumn>
                <DkTableColumn field="outStatusName"></DkTableColumn>
                <DkTableColumn field="orgName"></DkTableColumn>
                <DkTableColumn field="staffName"></DkTableColumn>
                <DkTableColumn field="makeStaffName"></DkTableColumn>
                <DkTableColumn field="makeTime" data-type="dateTime"></DkTableColumn>
                <DkTableColumn field="remarks"></DkTableColumn>
              </DkTable>
            </Card>
          </div>
        </div>

        <!--销售退货单-->
        <div slot="23">
          <div style="margin-top: 5px">
            <Card>
              <DkTable :pageFlag="true" primaryKey="outId" :id="'table-'+$options.name" name="table"
                       @pageChange="outReturnPageSizeChange2" :refreshSelect="false" :show-footer="true"
                       ref="orderTable3" :data="outReturnList" :height="tableHeight - 140" :choose-flag="false">
                <DkTableColumn field="outNo"/>
                <DkTableColumn field="biznisNo"></DkTableColumn>
                <DkTableColumn field="cusName"></DkTableColumn>
                <DkTableColumn field="cusPhone"></DkTableColumn>
                <DkTableColumn field="contactName"></DkTableColumn>
                <DkTableColumn field="addressFull"></DkTableColumn>
                <DkTableColumn field="outingQty" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="outingAmt" :digits="2" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="outQty" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="outAmt" :digits="2" dataType="number" sum></DkTableColumn>
                <DkTableColumn field="outDate" data-type="date"></DkTableColumn>
                <DkTableColumn field="outStatusName" :color-cards="['待出库','出库中','已出库']"></DkTableColumn>
                <DkTableColumn field="orgName"></DkTableColumn>
                <DkTableColumn field="staffName"></DkTableColumn>
                <DkTableColumn field="makeTime" :dataType="$config.columnType.dateTime"></DkTableColumn>
                <DkTableColumn field="makeStaffName"></DkTableColumn>
                <DkTableColumn field="remarks"></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"
                     :choose-flag="false"
                     name="table">
              <DkTableColumn field="rpNo" :title="$t('receiptNo')"/>
              <DkTableColumn field="biznisNo"/>
              <DkTableColumn field="rpTypeName" :title="$t('receiptTypeName')"/>
              <DkTableColumn field="cusName"/>
              <DkTableColumn field="cusPhone"/>
              <DkTableColumn field="addressFull"/>
              <DkTableColumn field="sumAmtRec" :digits="2" dataType="number" sum/>
              <DkTableColumn field="accDate" :title="$t('receiptDate')"/>
              <DkTableColumn field="orgName"/>
              <DkTableColumn field="staffName"/>
              <DkTableColumn field="makeStaffName"/>
              <DkTableColumn field="makeTime" data-type="dateTime"/>
              <DkTableColumn field="remarks"/>
            </DkTable>
          </Card>
        </div>

        <!--退款记录-->
        <div slot="5">
          <Card>
            <DkTable :id="'table-'+$options.name" ref="table-select" :data="refundList"
                     :pageFlag=true @pageChange="refundPageSizeChange"
                     :height="tableHeight - 140" primaryKey="receiptId"
                     name="table" :choose-flag="false">
              <DkTableColumn field="rpNo" :title="$t('receiptNo')"/>
              <DkTableColumn field="biznisNo"/>
              <DkTableColumn field="rpTypeName" :title="$t('receiptTypeName')"/>
              <DkTableColumn field="cusName"/>
              <DkTableColumn field="cusPhone"/>
              <DkTableColumn field="addressFull"/>
              <DkTableColumn field="sumAmtRec" :digits="2" dataType="number" sum/>
              <DkTableColumn field="sumShouldHandle" :digits="2" dataType="number" sum/>
              <DkTableColumn field="sumUseReceiptResidue" :digits="2" dataType="number" sum/>
              <DkTableColumn field="sumAmtReceivableHandle" :digits="2" dataType="number" sum/>
              <DkTableColumn field="accDate" :title="$t('receiptDate')"/>
              <DkTableColumn field="orgName"/>
              <DkTableColumn field="staffName"/>
              <DkTableColumn field="makeStaffName"/>
              <DkTableColumn field="makeTime" data-type="dateTime"/>
              <DkTableColumn field="remarks"/>
            </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('followStaffName') + '：' + (formData.followStaffName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('orgName') + '：' + (formData.orgName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('cusFromName') + '：' + (formData.cusFromName || '') }}
                  </Col>
                  <Col class="col" span="12">
                    {{ $t('reportStaffName') + '：' + (formData.reportStaffName || '') }}
                  </Col>
                </DkRow>
              </Col>
            </DkRow>
          </div>
        </div>
      </DkTabs>
    </Card>
  </div>
</template>

<script>

import {indexMixin} from '@/mixins'
import XEUtils from "xe-utils";

export default {
  name: 'customer-detail',
  mixins: [indexMixin],
  data() {
    let self = this
    return {
      XEUtils: XEUtils,
      formData: {},
      followList: [],
      followListOrigin: [],
      loading: false,
      orderPageInfo: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      orderOutList: [],
      orderPageInfo2: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      orderList: [],
      outRejectPageInfo: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      outReturnList: [],
      receiptPageInfo: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      refundPageInfo: {
        pageSize: this.$config.pageSize,
        currentPage: 1
      },
      receiptList: [],
      refundList: [],
      tabsModel: '1',
      tabsOptions: [
        {label: self.$t('followRecord'), name: '1'},
        {label: self.$t('transactionOrder'), name: '22'},
        {label: self.$t('orderOut'), name: '21'},
        {label: self.$t('salesReturn'), name: '23'},
        {label: self.$t('receiveRecord'), name: '3'},
        {label: self.$t('saleRefund'), name: '5'},
        {label: self.$t('customerInfo'), name: '4'},
      ],
    }
  },
  methods: {
    /**
     * @desc   : 通过id查询
     * @author : 付斌
     * @date   : 2024-02-01 14:28
     */
    detail() {
      //编辑将只读属性改为true
      this.loading = true
      //客户信息
      this.excuteNoParam(this.$service.customerService, this.$service.customerService.selectById, [this.$route.params.id]).then(res => {
        if (res.code === 200) {
          // 过滤地址中的undefined
          if (res.data.addressFull) {
            res.data.addressFull = res.data.addressFull.replace(/undefined/g, '')
          }
          this.formData = res.data
          this.loading = false

          //查询销售订单
          this.getOrder()
          //查询销售出库单
          this.getOrderOut()
          //查询销售退货
          this.getOrderReturn()
          //查询收款记录
          this.getReceipt()
          //查询退款记录
          this.getRefund()

          //跟进信息
          let params = {
            cusId: this.$route.params.id,
          }
          this.excute(this.$service.cusFollowService, this.$service.cusFollowService.selectByCond, params).then(res => {
            if (res.code === 200) {
              let list = []
              let i = 0
              this.followListOrigin = [...res.data.list]
              for (let it of res.data.list){
                let date = new Date(it.followTime)
                let followDate = date.format('yyyy-MM-dd')
                it.weekTime = date.formatDay() + ' ' + followDate
                it.hourTime = date.format('hh:mm:ss')
                if(it.intentionInfo){
                  it.intentionInfo = it.intentionInfo.map(m => m.specsName + '【' + m.count + '】').toString()
                }

                if (list.length == 0){
                  list.push([it])
                } else {
                  if (list[list.length - 1].length < 4) {
                    list[list.length - 1].push(it)
                  } else {
                    list.push([it])
                  }
                }
                if (!res.data.list[i+1] || followDate !== new Date(res.data.list[i+1].followTime).format('yyyy-MM-dd')) {
                  this.followList.push([...list])
                  list = []
                }
                i++
              }
              this.loading = false
              console.log('asdas',this.followList)
            } else {
              this.$Message.error(res.message)
              this.loading = false
            }
          })
        } else {
          this.$Message.error(res.message)
          this.loading = false
        }
      })
    },
    /**
     * @desc   : 查询销售出库单
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    getOrderOut() {
      let param = {
        cusId: this.$route.params.id,
        outType: '出库类型-销售出库',
        cpId: this.$store.state.user.cpId,
      }
      this.excute(this.$service.orderOutService, this.$service.orderOutService.selectByCond, param).then(res=>{
        if (res.code == 200) {
          this.orderOutList = res.data.list
          this.$refs['orderTable2'].pageInfo.total = res.data.total
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /**
     * @desc   : 查询订单
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    getOrder() {
      let param = {
        cusId: this.$route.params.id,
        orderTypes: '订单状态-成交',
        cpId: this.$store.state.user.cpId,
        }
      this.excute(this.$service.orderService, this.$service.orderService.selectByCond, param).then(res=>{
        if (res.code == 200) {
          this.orderList = res.data.list
          this.$refs['orderTable2'].pageInfo.total = res.data.total
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /**
     * @desc   : 查询销售退货
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    getOrderReturn() {
      let param = {
        cusId: this.$route.params.id,
        outType: '出库类型-销退回库',
        cpId: this.$store.state.user.cpId,
      }
      this.excute(this.$service.orderOutReturnService, this.$service.orderOutReturnService.selectByCond, param).then(res=>{
        if (res.code == 200) {
          this.outReturnList = res.data.list
          this.$refs['orderTable2'].pageInfo.total = res.data.total
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /**
     * @desc   : 查询收款记录
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    getReceipt() {
      let param = {
        objectId: this.$route.params.id,
        rpTypeList: ["收付款类型-收款"],
        cpId: this.$store.state.user.cpId,
      }
      this.excute(this.$service.cusReceiptService, this.$service.cusReceiptService.selectByCond, param).then(res=>{
        if (res.code == 200) {
          this.receiptList = res.data.list
          this.$refs['orderTable2'].pageInfo.total = res.data.total
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /**
    * @desc   : 查询退款记录
    * @author : 常皓宁
    * @date   : 2024/5/20 16:10
    */
    getRefund(){
      let param = {
        objectId: this.$route.params.id,
        rpTypeList: ["收付款类型-退收款"],
        cpId: this.$store.state.user.cpId,
      }
      this.excute(this.$service.receiptService, this.$service.receiptService.selectByCond, param).then(res=>{
        if (res.code == 200) {
          this.refundList = res.data.list
          this.$refs['orderTable2'].pageInfo.total = res.data.total
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    /**
     * @desc   : 分页
     * @author : 付斌
     * @date   : 2024-02-01 14:29
     */
    orderPageSizeChange(pageInfo) {
      this.orderPageInfo = pageInfo
      this.getOrder() // 查询数据
    },
    outPageSizeChange(pageInfo) {
      this.orderPageInfo2 = pageInfo
      this.getOrderOut() // 查询数据
    },
    outReturnPageSizeChange2(pageInfo) {
      this.outRejectPageInfo = pageInfo
      this.getOrderReturn() // 查询数据
    },
    receiptPageSizeChange(pageInfo) {
      this.receiptPageInfo = pageInfo
      this.getReceipt() // 查询数据
    },
    refundPageSizeChange(pageInfo) {
      this.receiptPageInfo = pageInfo
      this.getRefund() // 查询数据
    },
  },
  activated() {
    //通过id查询
    this.detail()
  }
}
</script>


<style scoped>
.card{
  width: 99%;
  margin-bottom: 10px;
}
.col{
  padding-bottom: 10px;
}
.order-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-info>div:nth-child(n){
  text-align: center;
}
.yuan-fh{
  font-size: 8px
}
</style>
