<template>
    <TCard title="设备统计" shape="square">
        <template #right>
            <view class="select-client" @click="handleToggle(false)">
                <text>{{ parseClientName }}</text>
                <TIcon name="icon-hollow-down" color="#7c7e82" />
            </view>
        </template>
        <view class="chart" v-show="visible">
            <qiun-data-charts type="ring" :opts="options" :chartData="chartData" />
        </view>
        <DataCard :card-list="cardList" />
    </TCard>
    <ClientListPopup v-model="show" @handle-selected-value="handleSelectedValue" />
</template>

<script setup lang="ts">
import { onReady } from '@dcloudio/uni-app'
import { computed, ref, watch } from 'vue'
import ClientListPopup from '@/bundle/pages/contract/contract-fill/components/client-list-popup.vue'
import DataCard from './data-card.vue'
import { useToggle } from '@/hooks/useLockFn'

const cardList = ref([
    { label: '新增检修工单', value: 56 },
    { label: '新增维修工单', value: 1266 }
])
const chartData = ref({})
const options = {
    rotate: false,
    rotateLock: false,
    color: ['#1890FF', '#91CB74', '#FAC858'],
    padding: [5, 5, 5, 5],
    dataLabel: true,
    enableScroll: false,
    legend: {
        show: true,
        position: 'right',
        lineHeight: 25
    },
    title: {
        name: '928',
        fontSize: 18,
        color: '#666666'
    },
    subtitle: {
        name: '总桩数',
        fontSize: 14,
        color: '#7C7E82'
    },
    extra: {
        ring: {
            ringWidth: 18,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: '#FFFFFF',
            linearType: true
        }
    },
    format: 'dataLabel'
}
const { show, handleToggle } = useToggle()
const clientName = ref('')
const parseClientName = computed(() =>
    clientName.value.length > 0 ? clientName.value : '选择客户'
)
// 选中客户
const handleSelectedValue = client => {
    console.log(client)
    clientName.value = client.name
}
const getServerData = () => {
    setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        const res = {
            series: [
                {
                    data: [
                        { name: '正常', value: 50, labelText: '正常：50' },
                        { name: '报修中', value: 30, labelText: '报修中：30' },
                        { name: '维修中', value: 20, labelText: '维修中：20' }
                    ]
                }
            ]
        }
        chartData.value = JSON.parse(JSON.stringify(res))
    }, 500)
}
onReady(() => {
    getServerData()
})
// 解决canvas层级过高导致弹框显示异常
const visible = ref(true)
watch(
    () => show.value,
    newVal => {
        visible.value = newVal ? false : true
    }
)
</script>

<style lang="scss" scoped>
.select-client {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 32rpx;
    gap: 8rpx;
    color: $gray-2;
    > text {
        font-size: 28rpx;
    }
}
.chart {
    width: 100%;
    height: 400rpx;
    padding: 0 32rpx;
}
.card-list {
    display: flex;
}
</style>
