<template>
    <div class="detail_area">
        <el-card shadow="never">
            <template #header>
                <div class="top_nav flex">
                    <template v-for="(item,index) in headerNav">
                        <div class="nav_list" v-if="item.show"
                            @click="changeNav(index,item.value, item.perPrefix)">{{ item.label }}<i
                            :class="navIndex==index?'on':''"></i></div>
                    </template>
                </div>
            </template>
            <div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <div class="echarts-body">
            <Echart :height="450" :options="echartsOption" />
        </div>
        <div class="table-body">
            <div>目标金额：¥ 1,000,000.00， 回款金额：¥ 1,20,000.00，完成率： 120%</div>
            <Table ref="publicTable"
                :tableParams="tableParams"
                :isCheckbox='false'
                :rightBtn="[]"
                :btnRole="[]"
                :isPagination="false"
            >
            </Table>
        </div>

    </div>


  </template>

  <script setup name="performanceTargetCompletion" lang="ts">
  import auth from '@/plugins/auth'
  import {useDictCache} from '@/hooks/web/useDict'
  import {tableTypes} from '@/components/Table/types'
  import {listCustomer} from '@/api/customer';
  import { EChartsOption } from 'echarts'
  // import SelectUser from '@/components/SelectOrg/SelectUser.vue'
  import { CustomerVO, CustomerQuery } from '@/api/customer/types';
  const { queryDictDetailByCodes } = useDictCache(['work_data_group', 'follow_up_type',])
  queryDictDetailByCodes()

  // 顶部客户类型切换
const headerNav = [
    {label: '成交金额', value: '0',perPrefix: '',show: true},
    {label: '回款金额', value: '10',perPrefix: '', show: true},
    {label: '新增客户', value: '30',perPrefix: '', show: true},
    {label: '新增商机', value: '60',perPrefix: '', show: true},
    {label: '跟进次数', value: '40',perPrefix: '', show: true},
]
const navIndex = ref(0)
const changeNav = (index: number, val: string | number, perPrefixVal: string) => {
    navIndex.value = index
    tableParams.queryParams.queryRangeType = val
    handleQuery()
}

const echartsOption = reactive<EChartsOption>({
    // legend: {
    //     x:'center',
    //     y:'bottom'
    // },
    tooltip: {},
    grid: {
        left: '16px',    // 组件离容器左侧的距离
        right: '16px',   // 组件离容器右侧的距离
        bottom: '36px',  // 组件离容器底部的距离
        top: '16px',    // 组件离容器顶部的距离
        containLabel: true // 如果为true，则grid 区域会根据标签大小自动调整
    },
    dataset: {
        source: [
            ['product', '目标金额', '成交金额'],
            ['2024年01月', 43.3, 85.8],
            ['2024年02月', 83.1, 73.4],
            ['2024年03月', 86.4, 65.2],
            ['2024年04月', 72.4, 53.9],
            ['2024年05月', 43.3, 85.8],
            ['2024年06月', 83.1, 73.4],
            ['2024年07月', 86.4, 65.2],
            ['2024年08月', 72.4, 53.9]
        ]
    },

    xAxis: {
        type: 'category',
        axisLabel: {
            interval: 0,
            color: '#333', //坐标轴字体颜色
        },
        axisLine: {
            lineStyle: {
                color: '#EBEFF3' // 修改x轴颜色
            }
        },
    },
    yAxis: {},
    series: [
        {
            type: 'bar',
            barWidth: 18,
            color:'#3F9EFF',
            itemStyle: {
                borderRadius: [4, 4, 0, 0] // 这里设置圆角的大小
            }
        },
        {
            type: 'bar',
            barWidth: 18,
            itemStyle: {
                color:'#58CC74',
                borderRadius: [4, 4, 0, 0] // 这里设置圆角的大小
            }
        },
    ]
}) as EChartsOption


const queryFormRef = ref<ElFormInstance>();

const tableParams = reactive<tableTypes<CustomerQuery, CustomerVO>>({
    tableColumn: [
        {show: true, label: '时间', prop: 'id', sortable: false},
        {show: true, label: '目标金额', prop: 'Customer', sortable: false},
        {show: true, label: '成交金额', prop: 'hasFromClue', sortable: false},
        {show: true, label: '成交订单', prop: 'hasPublicCustomer', sortable: false},
        {show: true, label: '完成率', prop: 'dataCode', sortable: false},
        {show: true, label: '平均客单价', prop: 'continent', sortable: false},
    ],
    queryParams: {
        blurry: '',
        customerForm: 10,
        customerStatusDictValue: undefined,
        customerTypeDictValue: undefined,
        customerLevelDictValue: undefined,
        lastFollowUpTime: undefined,
        queryRangeType: '0',
        pageSize: 15
    },
    listFn: listCustomer,
    exportCode: 'EXPORT_CUSTOM_EXCEL'
})

const {queryParams} = toRefs(tableParams);

const publicTable = ref()
/** 搜索按钮操作 */
const handleQuery = () => {
    publicTable.value.getData()
}

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
}

  onMounted(() => {

  });
  </script>

  <style lang="scss" scoped>
  .top_nav{
    margin: 0;
  }
  .search .el-form-item--default{
    margin-bottom:0;
  }
.echarts-body{
    background-color: #fff;
    border-radius: 4px;
    margin:16px 0;
    padding:10px 0;
}
.table-body{
    background-color: #fff;
    border-radius: 4px;
    padding:16px;
}
  </style>
