<template>
    <uni-nav-bar
        fixed
        :border="false"
        background-color="#dcf4ff"
        color="black"
        status-bar
        title="日期更新"
        ><template v-slot:left>
            <view style="display: flex; align-items: center" @click="back">
                <!-- 图标 -->
                <uni-icons type="left" size="20" color="black"></uni-icons>
            </view>
        </template>
        <template v-slot:right>
            <view style="display: flex; align-items: center" @click="onQrCode">
                <!-- 文本 -->
                <text>二维码</text>
            </view>
        </template>
    </uni-nav-bar>
    <div class="content">
        <div class="search">
            <uni-easyinput v-model="keyWord" placeholder="请输入设备编码"></uni-easyinput>
            <button
                type="primary"
                size="mini"
                @click="handleSearch"
                style="margin-left: 10px; background-color: #18bc37"
            >
                查询
            </button>
        </div>

        <div class="popup" @click="handlePopup">{{ typeName }}</div>

        <div class="search-item">
            <div>设备类型：{{ formData.maType }}</div>
            <div>规格型号：{{ formData.typeName }}</div>
            <div>设备编码：{{ formData.code }}</div>
            <div>本次检修人员：{{ formData.repairer }}</div>
            <div>本次检修时间：{{ formData.repairTime }}</div>
            <div>下次检修时间：{{ formData.nextRepairTime }}</div>
        </div>
        <button
            type="primary"
            size="mini"
            @click="handleSubmit"
            style="margin-top: 30px; background-color: #18bc37; width: 100%"
        >
            确认修改
        </button>
    </div>

    <uni-popup ref="popup" border-radius="5px 5px 5px 5px" background-color="#fff">
        <div
            v-for="(item, index) in typeList"
            :key="index"
            class="popup-item"
            @click.stop="handleCheck(item)"
        >
            <div>{{ item.name }}</div>
            <uni-data-checkbox
                v-model="item.isChecked"
                :localdata="range"
                @change="handleCheck(item, $event)"
            ></uni-data-checkbox>
        </div>
    </uni-popup>
    <ScanQrCode ref="scanQrCodeRef" @scanSuccess="handleScanSuccess" @scanError="handleScanError" />
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode'

const keyWord = ref('')
const formData = reactive({
    maType: '', // 设备类型
    typeName: '', // 规格型号
    code: '', // 设备编码
    repairer: '', // 维修人
    repairTime: '', // 维修时间
    nextRepairTime: '', // 下次维修时间
})
const scanQrCodeRef = ref()
const popup = ref()
const typeName = ref('请选择对应机具')
const typeList = ref([
    {
        id: '1',
        name: '卸扣DG-50-W202303-7466',
        isChecked: 1,
    },
    {
        id: '2',
        name: '卸扣DG-50-W202303-7467',
        isChecked: 1,
    },
    {
        id: '3',
        name: '卸扣DG-50-W202303-7468',
        isChecked: 1,
    },
])
const range = ref([{ value: 0, text: '' }])

onLoad(() => {
    console.log('onLoad')
})

const back = () => {
    uni.navigateBack({
        delta: 1,
    })
}

const onQrCode = () => {
    console.log('🚀 ~ onQrCode ~ 二维码:')
    if (scanQrCodeRef.value) scanQrCodeRef.value.scanQrCode()
}

const handleSearch = () => {
    console.log('🚀 ~ handleSearch ~ 查询:', keyWord.value)
    if (!keyWord.value) {
        uni.showToast({
            title: '请输入设备编码',
            icon: 'none',
        })
    }
}

const handlePopup = () => {
    console.log('🚀 ~ handlePopup ~ 弹窗:')
    popup.value.open()
}

const handleCheck = (item) => {
    console.log('🚀 ~ handleCheck ~ 单选:', item)
    // 循环 typeList 将当前点击的 item.isChecked 设置为 0 其他设置 1
    typeList.value.forEach((i) => {
        i.isChecked = i.id === item.id ? 0 : 1
    })
    typeName.value = item.name
    popup.value.close()
}

// 处理扫描成功事件
const handleScanSuccess = (result) => {
    keyWord.value = result?.text?.split('?qrcode=')[1] || result?.text
    if (keyWord.value === '') {
        uni.showToast({ title: '扫码识别失败', icon: 'none' })
    } else {
        handleSearch()
    }
}

// 处理扫描失败事件
const handleScanError = (error) => {
    console.error('扫描出错:', error.message)
    uni.showToast({ title: error.message, icon: 'none' })
}

// 提交
const handleSubmit = () => {}
</script>

<style scoped lang="scss">
.content {
    padding: 10px;
    .search {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .popup {
        background: #fff;
        margin: 20px 0 30px;
        padding: 5px 10px;
    }
    .search-item {
        line-height: 1.9;
    }
}
.popup-item {
    padding: 10px;
    border-bottom: 1px solid #c7c9ce;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
::v-deep .uni-popup__wrapper {
    width: calc(100% - 20px);
    /* padding: 10px; */
}
::v-deep .uni-data-checklist {
    // 去掉 flex: 1
    flex: none;
}
</style>
