<template>
    <TCard title="工单统计" shape="square">
        <template #right>
            <view class="order-type">
                <text
                    v-for="type in orderTypes"
                    :key="type.value"
                    :class="{ active: curOrderType === type.value }"
                    @click="handleActiveOrderType(type.value)"
                >
                    {{ type.label }}
                </text>
            </view>
        </template>
        <view class="content">
            <TTable :columns="parseColumns" :data="data" />
            <view class="summary">
                <text class="label">提成总计</text>
                <view class="money">
                    <TIcon name="icon-rmb" color="#F5222D" />
                    <text>10.00</text>
                </view>
            </view>
        </view>
    </TCard>
</template>

<script setup lang="ts">
import { computed, ref, shallowRef } from 'vue'

const columns = ref([
    { name: 'name', label: '设备' },
    { name: 'age', label: '是否维修', filters: { 0: '否', 1: '是' } },
    { name: 'sex', label: '维修费用' },
    { name: 'city', label: '提成' }
])
const parseColumns = computed(() => {
    return columns.value.map(item => {
        return {
            ...item,
            label:
                item.name === 'age'
                    ? curOrderType.value === 2
                        ? '是否报废'
                        : '是否维修'
                    : item.label
        }
    })
})
const data = [
    {
        date: '2016-05-02',
        name: '王小虎1789789789789789',
        province: '上海',
        sex: '是',
        age: 0,
        city: '普陀区',
        address: '上海市普',
        zip: 200333
    },
    {
        date: '2016-05-02',
        name: '王小虎2',
        province: '上海',
        sex: '是',
        age: 1,
        city: '普陀区',
        address: '上海市普',
        zip: 200333
    }
]
const curOrderType = ref(1)
const orderTypes = shallowRef([
    { label: '检修单', value: 1 },
    { label: '维修单', value: 2 }
])
const handleActiveOrderType = (val: number) => {
    curOrderType.value = val
}
</script>

<style lang="scss" scoped>
.order-type {
    display: flex;
    gap: 32rpx;
    margin-right: 32rpx;
    font-size: 28rpx;
    .active {
        color: $blue-1;
        position: relative;
        &::after {
            content: '';
            width: 32rpx;
            height: 4rpx;
            background-color: $blue-1;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -4rpx;
            border-radius: 999px;
        }
    }
}
.content {
    padding: 32rpx 0;
    .summary {
        @include flex-center(flex-end);
        margin: 32rpx 32rpx 0 0;
        gap: 20rpx;
        .label {
            font-size: 28rpx;
            color: $gray-2;
        }
        .money {
            @include flex-align;
            color: $red-1;
            font-weight: 700;
        }
    }
}
</style>
