<template>
  <div class="page-content">
    <van-tabs v-model:active="active" sticky @change="changeTab">
      <van-tab v-for="item in tabs" :key="item.title" :title="item.title">
        <div class="p-10" v-if="active === 0">
          <div class="base-info">
            <div class="d-flex base-item">
              <span class="base-title">机构名称</span>
              <span class="base-desc">{{ cusInfo.cusName }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">机构类型</span>
              <span class="base-desc">{{ cusInfo.companyTypeName }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">核心联系人</span>
              <span class="base-desc">{{ cusInfo.cusUserName }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">跟进人</span>
              <span class="base-desc">{{ cusInfo.saleUserName }}</span>
            </div>

            <div class="d-flex base-item">
              <span class="base-title">城市</span>
              <span class="base-desc">{{ cusInfo.cityName }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">城市</span>
              <span class="base-desc">{{ cusInfo.cityName }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">是否开户</span>
              <span class="base-desc">{{ cusInfo.accountStatusFlag ? '是' : '否' }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">开户时间</span>
              <span class="base-desc">{{ cusInfo.accountStatusFlag && cusInfo.accountTime ? cusInfo.accountTime : ''
                }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">开户类型</span>
              <span class="base-desc">{{ cusInfo.accountStatusFlag && cusInfo.accountTypeName ? cusInfo.accountTypeName
                : '' }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">是否交易</span>
              <span class="base-desc">{{ cusInfo.accountStatusFlag && cusInfo.isMoneyFlag ? '是' : '否' }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">交易总金额</span>
              <span class="base-desc">{{ cusInfo.isMoneyFlag && cusInfo.accountStatusFlag && cusInfo.tradeMoney ?
                cusInfo.tradeMoney : '' }}</span>
            </div>
            <div class="d-flex base-item">
              <span class="base-title">资金规模</span>
              <span class="base-desc">{{ cusInfo.capitalScaleValue ? cusInfo.capitalScaleValue :
                cusInfo.capitalScaleName ? cusInfo.capitalScaleName : '' }}</span>
            </div>
          </div>
          <div class="title">参会趋势</div>
          <div class="chart d-flex align-items-center justify-content-center">
            <van-loading v-show="chartLoading" type="spinner" color="#1989fa" class="loading" />
            <div id="meeting_chart" class="chartDiv"></div>
          </div>
        </div>
        <div v-if="active === 1">
          <van-list v-if="cusUserList.length" finished-text="没有更多了" :immediate-check="false">
            <van-cell v-for="item in cusUserList" :key="item.cusId">
              <div class="name1 text-start stockNames balck-text-color">{{ item.cusUserName }}<span
                  class="mx-10">|</span>{{
                item.positionName }}</div>
              <div class="d-flex justify-content-between">
                <div class="font-12">跟进人：{{ item.saleNames }}
                  <span v-if="item.entryTime">({{ item.entryTime }}入职)</span>
                </div>
              </div>
              <div class="d-flex font-12">
                <div>更新时间：</div>
                <div class="activeColor">{{ item.updateTime }}</div>
              </div>
              <div class="d-flex font-12 justify-content-between flex-wrap">
                <div class=" d-flex w-half">
                  <div>参会次数：</div>
                  <div class="activeColor">{{ item.meetingNum || 0 }}</div>
                </div>
                <div class="d-flex justify-content-end w-half">
                  <div>沟通次数：</div>
                  <div class="activeColor">{{ item.linkNum || 0 }}</div>
                </div>
              </div>
            </van-cell>
          </van-list>
          <van-empty v-else />
        </div>
        <div v-if="active === 2">
          <van-cell v-if="workList?.length" v-for="(item, index) in workList" :key="index"
            @click="showDetail(item.linkNote)">
            <div class="f-b activeColor text-start mb-5 mt-5">{{ item.saleNames }} - {{ item.linkTypeMenuName }}
            </div>
            <div class="balck-text-color text-ellipsis">{{ item.linkNote }}</div>
            <div class=" d-flex font-12 flex-wrap">
              <div>相关研究人：{{ item.staffName }}；</div>
              <div>联系人：{{ item.cusUserName }}</div>
            </div>
            <div class="d-flex justify-content-end">
              <div class="activeColor font-12 text-start flex-1">{{ item.sysDate }}</div>
              <van-tag type="danger" class="ms-10" size="medium">{{ item.linkTypeName }}</van-tag>
            </div>
          </van-cell>
          <van-empty v-else />
        </div>
        <van-overlay :show="showOverLay" @click="showOverLay = false">
          <div class="wrapper">
            <div class="block" @click.stop>{{ note }}</div>
          </div>
        </van-overlay>
        <div v-if="active === 3">
          <van-cell v-if="meetingList?.length" v-for="item in meetingList" :key="item.meetingId"
            @click="$router.push({ name: 'meeting-detail', query: { meetingId: item.meetingId } })">
            <div class="f-b text-start balck-text-color mb-5 mt-5">{{ item.meetingTitle }}</div>
            <div class="d-flex">
              <div class="font-12 text-start activeColor flex-1">{{ item.meetingTime }}</div>
              <van-tag type="primary" size="medium">{{ item.meetingTypeName }}</van-tag>
              <van-tag type="danger" class="ms-10" size="medium">{{ item.meetingByName }}</van-tag>
            </div>
          </van-cell>
          <van-empty v-else description="暂无会议" />
        </div>
        <div v-if="active === 4">
          <communicate-item v-if="communicateList" class="pb-16" :list="communicateList" />
          <van-empty v-else />
        </div>
        <div v-if="active === 5">
          <van-cell v-if="serviceList?.length" v-for="item in serviceList" :key="item.id"
            @click="showDetail(item.content)">
            <div class="d-flex align-items-center">
              <div class="f-b activeColor text-ellipsis">{{ item.content }}</div>
            </div>
            <div class="d-flex justify-content-between">
              <div class="text-start font-12">开始时间：<span class="activeColor">{{ item.serviceBeginDate }}</span></div>
              <div class="text-start font-12">状态：<span class="activeColor">{{ item.serviceStatus }}</span>
              </div>
            </div>
          </van-cell>
          <van-empty v-else description="暂无数据" />
        </div>
        <div v-if="active === 6">
          <van-cell v-if="yearList?.length" v-for="(item, index) in yearList" :key="index">
            <div class="d-flex align-items-center">
              <div class="f-b activeColor">{{ item.sysYear }}年</div>
            </div>
            <div class="d-flex justify-content-between">
              <div class="text-start font-12">目标销售额：<span class="activeColor">{{ item.targetMoney || 0 }}</span></div>
              <div class="text-start font-12">年度交易额：<span class="activeColor">{{ item.tradeMoneyYear || 0 }}</span>
              </div>
            </div>
            <div class="text-start font-12 ">
              完成率：<span class="activeColor">{{ item.finishPer || 0 }}%</span>
            </div>
          </van-cell>
          <van-empty v-else description="暂无数据" />
        </div>
        <div v-if="active === 7">
          <van-cell v-if="accountList?.length" v-for="(item, index) in accountList" :key="index">
            <div class="f-b text-start balck-text-color mb-5">姓名：{{ item.accountName }}</div>
            <div class="text-start font-12">账号：{{ item.accountNo }}</div>
          </van-cell>
          <van-empty v-else description="暂无数据" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref } from 'vue'
const showOverLay = ref(false)
const note = ref()
const showDetail = (value: string) => {
  note.value = value
  showOverLay.value = true
}
const active = ref(0)
const tabs = [{
  name: 'base',
  title: '基本信息'
}, {
  name: 'cusUser',
  title: '员工列表'
}, {
  name: 'work',
  title: '工作日报'
}, {
  name: 'meeting',
  title: '参会记录'
}, {
  name: 'communicate',
  title: '沟通记录'
}, {
  name: 'service',
  title: '服务目标'
}, {
  name: 'year',
  title: '年度数据'
}, {
  name: 'account',
  title: '账号列表'
}, {
  name: '关注股票',
  title: '关注股票'
}]
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
import emitter from '@/utils/mitt'
const cusId = ref()
const init = () => {
  if (route.query && route.query.cusId) {
    cusId.value = route.query.cusId
    getData()
  } else {
    router.push({ name: '404' })
  }
}
import {
  cusInfoInfo, cusUserListByCusId, cusLinkList, cusServiceGetByCusId,
  cusYearList, cusAccountList, cusMeetingList, cusInfoCountByMonth
} from '@/utils/api'
import { convertToUrl } from '@/utils'
const getData = async () => {
  emitter.emit('showLoading', '')
  try {
    getCusInfo()
    getChartList()
    getCusUserList()
    getMeetingList()
    getCusLinkList()
    getWorkList()
    getServiceList()
    getYearList()
    getAccountList()
  } finally {
    emitter.emit('hiddenLoading', '')
  }
}
import * as echarts from 'echarts'
const chartLoading = ref(false)
const getChartList = async () => {
  chartLoading.value = false
  const { data } = await cusInfoCountByMonth({ cusId: cusId.value })
  const sysDate: any = []
  const seriesList: any = []
  const legendList = ['FSH电话会议+调研+其他', '周末会+精英会', '按需会议', '机构路演', '机构沟通', '交易量']
  const colorList = ['#f26522', '#45b97c', '#009ad6', '#8552a1', '#6c4c49', '#ed1941']
  legendList.forEach((ele, index) => {
    if (index < 5) {
      seriesList.push({
        type: 'line',
        name: ele,
        data: [],
        yAxisIndex: 0,
        xAxisIndex: 0,
        connectNulls: false,
        symbol: 'none',
        symbolSize: 0
      })
    } else {
      seriesList.push({
        type: 'bar',
        name: ele,
        data: [],
        emphasis: {
          focus: 'series'
        },
        yAxisIndex: 1,
        xAxisIndex: 1,
        showEmptyData: false,
        barWidth: 10
      })
    }
  })
  data.forEach((ele: any) => {
    sysDate.push(ele.sysMonth)
    seriesList[0].data.push(ele.meetingNum34 + ele.meetingNum7)
    seriesList[1].data.push(ele.meetingNum5 + ele.meetingNum6)
    seriesList[2].data.push(ele.linkNum31)
    seriesList[3].data.push(ele.linkNum32)
    seriesList[4].data.push(ele.linkNum34)
    seriesList[5].data.push(ele.tradeMoney)
  })
  const xAxis = {
    type: 'category',
    name: '',
    data: [],
    show: true,
    axisLabel: {
      show: true,
      showMaxLabel: true,
      formatter: '{value}'
    },
    gridIndex: 0
  }
  const yAxis = {
    type: 'value',
    name: '',
    nameLocation: 'end',
    scale: true,
    show: true,
    axisLabel: {
      show: true,
      formatter: '{value}'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: data.color || '#000'
      }
    },
    position: 'left',
  }
  const option = {
    yAxis: [{ ...yAxis, name: '次数', minInterval: 1 }, { ...yAxis, name: '交易数', minInterval: 1, nameLocation: 'start', gridIndex: 1 }],
    xAxis: [{ ...xAxis, data: sysDate, name: '时间' }, { ...xAxis, data: sysDate, showFlag: false, gridIndex: 1 }],
    series: seriesList,
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: function (data: any) {
        let res = `${data[0].name}</br>`
        data.forEach((ele: any) => {
          res += `<span style="color: ${ele.color}">${ele.seriesName}:${ele.value}${ele.componentSubType === 'bar' ? '百万' : ''}</span></br>`
        })
        return res
      }
    },
    legend: { data: legendList, top: '10px' },
    color: colorList,
    grid: [{
      top: '84px',
      bottom: '35%',
      left: '40px',
      right: '40px'
    }, {
      top: '72%',
      bottom: '40px',
      left: '40px',
      right: '40px'
    }]
  }
  nextTick(() => {
    const chart = echarts.init(document.getElementById('meeting_chart'))
    chart.setOption(option)
    chartLoading.value = false
  })
}
const cusInfo = ref<any>({})
const getCusInfo = async () => {
  const { data } = await cusInfoInfo(cusId.value)
  cusInfo.value = data
  emitter.emit('setTitle', { title: cusInfo.value.cusName, type: 'meeting' })
}
const cusUserList = ref<any[]>([])
const getCusUserList = async () => {
  const { data } = await cusUserListByCusId({ cusId: cusId.value })
  cusUserList.value = data
}
const workList = ref<any[]>()
const getWorkList = async () => {
  const url = convertToUrl({
    limit: 50,
    cusId: cusId.value,
    requestFrom: 'DETAIL_RB'
  })
  const data = await cusLinkList(url)
  workList.value = data
}
const communicateList = ref<any[]>()
const getCusLinkList = async () => {
  const url = convertToUrl({
    limit: 100,
    cusId: cusId.value,
    requestFrom: 'DETAIL_GTJL',
    dataStatus: 1
  })
  const data = await cusLinkList(url)
  communicateList.value = data
}
const meetingList = ref<any[]>()
const getMeetingList = async () => {
  const { data } = await cusMeetingList({ cusId: cusId.value, meetingType: '' })
  meetingList.value = data
}
const serviceList = ref<any[]>()
const getServiceList = async () => {
  const { data } = await cusServiceGetByCusId({ cusId: cusId.value })
  data.forEach((ele: any) => {
    ele.selectId = ele.id
    ele.serviceStatus = ele.serviceStatus === 0 ? '历史' : '当前'
  })
  serviceList.value = data
}
const yearList = ref<any[]>()
const getYearList = async () => {
  const { data } = await cusYearList({ cusId: cusId.value, curPage: 1, limit: 999 })
  yearList.value = data.list
}
const accountList = ref<any[]>()
const getAccountList = async () => {
  const { data } = await cusAccountList({ cusId: cusId.value, curPage: 1, limit: 999 })
  accountList.value = data.list
}
init()
const changeTab = (num: number) => {
  if (num === 0) {
    getChartList()
  }
}

</script>

<style lang="scss" scoped>
$border-color: #e0e0e0;

.base-info {
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid $border-color;

  .base-item {
    font-size: 13px;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: 0;
    }
  }

  .base-title {
    width: 30%;
    border-right: 1px solid $border-color;
    padding: 6px 10px;
    background-color: #fafafa;
  }

  .base-desc {
    background-color: #f2f4f7;
    padding: 6px 10px;
    width: 70%;
    color: #1989fa;
  }
}

.chartDiv {
  height: 50vh;
  width: 100vh;
}

.title {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 600;
}

:deep(.van-tab--active) {
  .van-tab__text {
    color: #1989fa;
  }
}

.w-half {
  width: 50%;
}
 .wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
    .block {
      width: 80%;
      height: 50%;
      overflow: auto;
      padding: 10px;
      font-size: 14px;
      background-color: #fff;
    }
 }
</style>