<template>
    <!-- <Navmenu></Navmenu> -->
    <Breadcrumb :backPath="backPath" :backName="backName" :currentName="currentName" />
    <div class="equipDetail">
        <div class="top">
            <div class="showImg">
                <!-- <showImg :url-list="pageData.bmFileInfoList"></showImg> -->

                <div class="img-main">
                    <!-- <img alt="" :src="viewImgUrl" style="width: 100%; height: 100%" /> -->

                    <el-image
                        style="width: 100%; height: 100%; cursor: pointer"
                        :src="viewImgUrl"
                        fit="cover"
                    />
                </div>

                <div class="img-slide">
                    <div class="btn" @click="onPrevImg">
                        <el-icon><ArrowLeftBold /></el-icon>
                    </div>
                    <div class="img-slide-container">
                        <div
                            class="img-item"
                            :class="{ activeUrl: activeIndex === index }"
                            v-for="(item, index) in goodsImgList"
                            :key="index"
                            @click="onCheckImg(item.fileUrl, index)"
                        >
                            <!-- <img :src="item.fileUrl || ''" alt="" /> -->
                            <el-image
                                style="width: 100%; height: 98%; margin-top: 1%; cursor: pointer"
                                :src="item.fileUrl"
                                fit="cover"
                            />
                        </div>
                    </div>
                    <div class="btn" @click="onNextImg">
                        <el-icon><ArrowRightBold /></el-icon>
                    </div>
                </div>
            </div>
            <div class="baseInfo">
                <div class="equipInfo">
                    <div class="left">
                        <div class="title">
                            <div class="name">
                                {{ pageData.deviceName }}
                            </div>
                            <!-- <div class="tag">
                                <div class="item otherItem">{{ pageData.maStatusStr }}</div>
                                <div class="item">已审核</div>
                            </div> -->
                        </div>
                        <div class="viewNnum">
                            <div>浏览 {{ pageData.searchNum }}</div>
                            <div style="color: #00a288; display: flex; align-items: center">
                                <!-- <Location style="width: 1em; height: 1em; margin-right: 8px" />
                                安徽省合肥市蜀山区 -->
                            </div>
                        </div>
                        <div class="infoBox">
                            <el-row class="item" v-for="(v, i) in equipBaseInfoList" :key="i">
                                <el-col :span="5">
                                    <div class="label">{{ v.label }}：</div>
                                </el-col>
                                <el-col :span="18">
                                    <div class="value">
                                        {{
                                            v.key
                                                .split(',')
                                                .map((key) => {
                                                    return pageData[key]
                                                })
                                                .join('')
                                        }}
                                    </div>
                                </el-col>
                            </el-row>

                            <div class="options">
                                <div>
                                    <!-- <el-button
                                        class="item_btn"
                                        type="primary"
                                        :disabled="pageData.isBookCar == 0 || isType == 1"
                                        @click="onAddCart"
                                        >加入预约车</el-button
                                    > -->
                                    <el-button
                                        class="primary-lease"
                                        type="primary"
                                        :disabled="
                                            pageData.isBookCar == 0 ||
                                            isType == 1 ||
                                            companyIdNew == pageData.companyId
                                        "
                                        @click="onAddCart"
                                        >加入预约车</el-button
                                    >
                                </div>

                                <div style="margin-left: 20px">
                                    <el-button
                                        class="primary-lease"
                                        type="primary"
                                        :disabled="
                                            pageData.isBookCar == 0 ||
                                            isType == 1 ||
                                            companyIdNew == pageData.companyId
                                        "
                                        @click="onHandelLessee"
                                    >
                                        立即承租
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="Top">
                            <div class="price">
                                ￥
                                <span>{{ pageData.dayLeasePrice }}</span>
                                /天
                            </div>
                        </div>
                        <div class="phone">
                            <svg class="icon" aria-hidden="true" style="width: 24px; height: 24px">
                                <use xlink:href="#icon-dianhua"></use>
                            </svg>
                            <div style="font-size: 20px">{{ pageData.personPhone }}</div>
                        </div>
                        <div style="text-align: right">
                            <el-button
                                round
                                type="primary"
                                class="primary-lease"
                                icon="ChatDotRound"
                                @click="onChat"
                                >在线聊</el-button
                            >
                        </div>
                    </div>
                </div>
                <div class="businessInfo">
                    <div class="business">
                        <div class="fonts">
                            <div class="name">{{ pageData.companyName }}</div>
                            <div class="other">
                                <div class="item" v-for="(v, i) in businessList" :key="i">
                                    <div class="label">{{ v.label }}：</div>
                                    <div class="value">{{ pageData[v.key] }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="detail">
            <div class="publicTitle">装备详情</div>
            <!-- <div class="publicLine"></div> -->
            <div class="list publicContent">
                <div class="item" v-for="(v, i) in equipDetailKeyList" :key="i">
                    <div class="label">{{ v.label }}：</div>
                    <div
                        :class="v.fn ? 'fnValue' : 'value'"
                        @click="handelDetailListClick(v.fn, pageData[v.arg])"
                    >
                        {{ pageData[v.key] }}
                    </div>
                </div>
                <div class="item" v-for="(v, i) in propertyNames" :key="i">
                    <div class="label">{{ v.propertyName }}：</div>
                    <div class="value">
                        {{ v.propertyValue }}
                    </div>
                </div>
            </div>
        </div>
        <div class="appearance">
            <div class="publicTitle">装备外观</div>
            <div class="urlList">
                <img :src="v.fileUrl" v-for="(v, i) in pageData.detailsFileList" :key="i" />
            </div>
        </div>
        <div class="appearance">
            <div class="publicTitle">证书展示</div>
            <div class="certificate">
                <el-row>
                    <el-col :span="2">
                        <div>合格证：</div>
                    </el-col>
                    <el-col :span="22">
                        <div class="prove-container">
                            <div v-for="item in pageData.insurancePdf" :key="item.id">
                                <!-- <img :src="item.fileUrl" alt="" /> -->
                                <el-image
                                    style="width: 100%; height: 100%"
                                    :src="item.fileUrl"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    :preview-src-list="[item.fileUrl]"
                                    :initial-index="0"
                                    fit="cover"
                                    :z-index="9999999999"
                                    :preview-teleported="true"
                                />
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <!-- <el-row>
                    <el-col :span="2">
                        <div>检测证明：</div>
                    </el-col>
                    <el-col :span="22">
                        <div class="prove-container">
                            <div v-for="item in pageData.examinationPdf" :key="item.id">
                                <el-image
                                    style="width: 100%; height: 100%"
                                    :src="item.fileUrl"
                                    :zoom-rate="1.2"
                                    :max-scale="7"
                                    :min-scale="0.2"
                                    :preview-src-list="[item.fileUrl]"
                                    :initial-index="0"
                                    fit="cover"
                                    :z-index="9999999999"
                                    :preview-teleported="true"
                                />
                            </div>
                        </div>
                    </el-col>
                </el-row> -->
            </div>
        </div>
        <div class="appearance">
            <div class="publicTitle">检测记录</div>
            <div class="rental-record">
                <el-table
                    :data="pageData.qcList"
                    style="width: 100%"
                    :header-cell-style="{ background: '#00a288', color: '#fff' }"
                >
                    <el-table-column align="center" type="index" label="序号" width="80" />
                    <el-table-column align="center" prop="qcTime" label="检测日期" />
                    <el-table-column align="center" prop="maintenanceAlarmDay" label="有效期" />
                    <el-table-column align="center" prop="fileInfo" label="检测证明">
                        <template #default="row">
                            <a
                                v-if="row.row.fileInfo && row.row.fileInfo.fileUrl"
                                :href="row.row.fileInfo.fileUrl"
                                target="_blank"
                                style="color: #00a288; text-decoration: underline"
                                >查看</a
                            >
                            <span v-else>无检测证明</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="comName" label="检测单位" />
                </el-table>
            </div>
        </div>
        <div class="appearance">
            <div class="publicTitle">出租记录</div>
            <div class="rental-record">
                <el-table
                    :data="pageData.leaseList"
                    style="width: 100%"
                    :header-cell-style="{ background: '#00a288', color: '#fff' }"
                >
                    <el-table-column align="center" type="index" label="序号" width="80" />
                    <el-table-column align="center" prop="orderCode" label="订单号" />
                    <el-table-column align="center" prop="leaseName" label="租赁方" />
                    <el-table-column align="center" prop="leaseStartTime" label="租赁开始时间" />
                    <el-table-column align="center" prop="leaseEndTime" label="租赁结束时间" />
                    <!-- <el-table-column align="center" prop="leasePrice" label="租赁费用" /> -->
                </el-table>
            </div>
        </div>
        <!-- <div class="recommend">
            <div class="publicTitle">
                <div>为您推荐</div>

                <div class="change" @click="randomHotList">换一批</div>
            </div>
            <div class="content">
                <equip-card
                    class="item"
                    @on-click="goDetail"
                    v-for="(v, i) in hotList"
                    :key="i"
                    :url="v.picUrl"
                    :name="`${v.modelName}${v.deviceName}`"
                    :tags="[v.maStatusStr, v.cityStr]"
                    :company="v.companyName"
                    :price="v.monthLeasePrice"
                    timeUnit="月"
                    :id="v.maId"
                ></equip-card>
            </div>
        </div> -->

        <el-dialog
            v-model="dialoglease"
            title="填写租赁信息"
            lock-scroll
            class="dialoglease"
            width="60%"
        >
            <el-config-provider :locale="zhCn">
                <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="120px"
                    class="demo-ruleForm"
                    status-icon
                >
                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="设备进场地址" prop="address">
                                <el-cascader :props="addressCascader" v-model="ruleForm.address" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="详细地址" prop="detailAddress">
                                <el-input
                                    placeholder="请输入地址"
                                    v-model="ruleForm.detailAddress"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="进场时间" prop="entryTime">
                                <el-date-picker
                                    v-model="ruleForm.entryTime"
                                    value-format="YYYY-MM-DD"
                                    type="date"
                                    placeholder="请选择"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="工期时长" prop="duration">
                                <el-input
                                    v-model.number="ruleForm.duration"
                                    type="number"
                                    placeholder="请输入工期时长"
                                >
                                    <template #append>
                                        <el-select
                                            v-model="ruleForm.durationUnit"
                                            placeholder="Select"
                                            style="width: 85px"
                                            @change="priceChange"
                                        >
                                            <el-option label="天" value="0" />
                                            <el-option label="月" value="1" />
                                        </el-select>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="7">
                            <el-form-item label="是否需要机手" prop="machinist">
                                <el-radio-group v-model="ruleForm.machinist">
                                    <el-radio-button :label="1" :disabled="!pageData.isOperator">
                                        是
                                    </el-radio-button>
                                    <el-radio-button :label="0">否</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发票类型" prop="invoiceType">
                                <el-radio-group v-model="ruleForm.invoiceType">
                                    <el-radio-button label="">不需要</el-radio-button>
                                    <el-radio-button :label="1">增值税普票</el-radio-button>
                                    <el-radio-button :label="2">增值税专票</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="15">
                            <el-form-item label="项目说明" prop="projectDescription">
                                <el-input
                                    placeholder="请填写项目说明"
                                    rows="5"
                                    type="textarea"
                                    v-model="ruleForm.projectDescription"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-config-provider>
            <equipDetailTable
                :price="`${
                    ruleForm.durationUnit == '1' ? pageData.monthLeasePrice : pageData.dayLeasePrice
                }`"
                :name="`${pageData.modelName}${pageData.deviceName}`"
                :company="pageData.companyName"
                :url="pageData.picUrl"
                :brand="pageData.brand"
                :code="pageData.code"
                :group="pageData.groupName"
                :position="`${pageData.provinceStr}${pageData.cityStr || ''}${
                    pageData.areaStr || ''
                }`"
                :specifications="pageData.specification"
                :type="pageData.typeName"
                :unit="ruleForm.durationUnit == '1' ? '月' : '天'"
            ></equipDetailTable>
            <div class="countPrice">
                合计总价：
                <span>{{ priceChange }}元</span>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="submit(ruleFormRef)">提交</el-button>
                </span>
            </template>
        </el-dialog>

        <el-dialog v-model="dialogPhone" title="服务电话" width="30%">
            <div style="font-size: 16px; font-weight: 600">
                {{ pageData.authPhone }}
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="openPhone">确认</el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 在线聊  -->
        <el-dialog
            title="在线聊"
            v-model="dialogChatVisible"
            width="80%"
            :before-close="handleClose"
        >
            <div class="chat-container" style="height: 700px; display: flex">
                <div class="contact-list" style="width: 20%; height: 100%">
                    <div class="contact-list-header">聊天列表</div>
                    <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                    >
                        <el-menu-item
                            v-for="(contact, index) in contacts"
                            :key="index"
                            :index="index.toString()"
                        >
                            <el-avatar :src="contact.avatar" />
                            {{ contact.name }}
                            <el-badge
                                :value="contact.unreadCount"
                                class="custom-badge"
                                v-if="contact.unreadCount > 0"
                            ></el-badge>
                        </el-menu-item>
                        <!-- 其他联系人 -->
                    </el-menu>
                </div>
                <div
                    class="chat-content"
                    style="width: 70%; height: 100%; display: flex; flex-direction: column"
                >
                    <!-- 聊天内容框，占右侧高度的80% -->
                    <div class="message-box" style="flex: 8; overflow-y: auto">
                        <!-- 聊天消息 -->
                        <div class="chat-content-header" style="text-align: left">
                            {{ '聊天人' }}
                        </div>
                        <div class="message" v-for="message in messages" :key="message.id">
                            <el-avatar :src="message.avatar" />
                            <div class="message-text">{{ message.text }}</div>
                        </div>
                    </div>
                    <!-- 发送消息的输入框，占右侧高度的20% -->
                    <div class="input-box" style="flex: 1; display: flex">
                        <el-input v-model="newMessage" class="chat-input"></el-input>
                        <el-button type="primary" @click="sendMessage">发送</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import Breadcrumb from '../../components/Breadcrumb/index.vue'

import {
    getDetail,
    getHotList,
    equipCollect,
    addBookCarApi,
    apiSubmitLease,
    apiGetAddressList,
} from 'http/api/equip'
import { useRoute, useRouter } from 'vue-router'
// import Navmenu from '@/components/Navmenu/index.vue'
import equipDetailTable from '@/components/equipDetailTable.vue'
import { cartStore } from 'store/cart'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mainStore } from '@/store/main'
import { getBookCarDetailsApi } from 'http/api/home/index'

const router: any = useRouter()
const route: any = useRoute()
const store = mainStore()
const ruleFormRef = ref()
const pageParams = route.params
const cart = cartStore()
const isType: any = localStorage.getItem('rolesType')
const companyIdNew = store.userInfo.companyId

console.log(pageParams, 'pageParams')
const backPath = ref<any>('')
const backName = ref<any>('')
const currentName = ref<any>('装备详情')
const viewImgUrl = computed(() => {
    if (goodsImgList.value.length > 0) {
        return goodsImgList.value[activeIndex.value].fileUrl
    } else {
        return ''
    }
})

if (router.options.history.state.back) {
    backPath.value = router.options.history.state.back

    console.log(router.options.history.state.back, 'router.options.history.state.back')
    const previousRoute: any = []

    if (router.options.history.state.back === '/home') {
        backName.value = '首页'
    }
    router.options.routes.forEach((route: any) => {
        if (router.options.history.state.back.indexOf(router.path) != -1) {
            previousRoute.push(route)
        } else {
            if (route.children && route.children.length > 0) {
                route.children.forEach((r: any) => {
                    console.log(r.path, 'route.path ')
                    if (router.options.history.state.back.indexOf(r.path) != -1) {
                        previousRoute.push(r)
                    }
                })
            }
        }
    })
    if (previousRoute.length > 0) {
        backName.value = previousRoute[0].meta.title
    }
}

// 商品图片集合
const goodsImgList: any = ref([
    // 'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
    // 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
    // 'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
    // 'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
])
// 商品图片集合
const goodsAppearanceList: any = ref([
    'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
    'https://img.d1cm.com/news/img/202406071013545196.jpg',
])

const tableData = ref([
    {
        order_code: '2024102310223xxx',
        lease_user: '王先生',
        start_time: '2024-10-11',
        end_time: '2025-10-10',
        lease_price: 600,
    },
    {
        order_code: '2024102310223xxx',
        lease_user: '王先生',
        start_time: '2024-10-11',
        end_time: '2025-10-10',
        lease_price: 600,
    },
    {
        order_code: '2024102310223xxx',
        lease_user: '王先生',
        start_time: '2024-10-11',
        end_time: '2025-10-10',
        lease_price: 600,
    },
    {
        order_code: '2024102310223xxx',
        lease_user: '王先生',
        start_time: '2024-10-11',
        end_time: '2025-10-10',
        lease_price: 600,
    },
])

// viewImgUrl.value = goodsImgList.value[0]
// 当前选中的图片索引
const activeIndex = ref<number>(0)

// 图片点击切换
const onCheckImg = (item: string, index: number) => {
    activeIndex.value = index
}
// 图片上一张
const onPrevImg = () => {
    if (activeIndex.value > 0) {
        activeIndex.value--
    }
}
// 图片下一张
const onNextImg = () => {
    if (activeIndex.value + 1 < goodsImgList.value.length) {
        activeIndex.value++
    }
}

//设备简略基本信息
const equipBaseInfoList = reactive([
    {
        label: '装备编号',
        key: 'code',
    },
    {
        label: '装备类目',
        key: 'groupName',
    },
    {
        label: '装备品牌',
        key: 'brand',
    },
    {
        label: '装备型号',
        key: 'typeName',
    },
    {
        label: '联系人',
        key: 'person',
    },
    {
        label: '所属公司',
        key: 'companyName',
    },
    // {
    //     label: '发布时间',
    //     key: 'createTime',
    // },
    {
        label: '更新时间',
        key: 'updateTime',
    },
])
//商家标签信息
const businessList = reactive([
    {
        label: '入驻时间',
        key: 'companyCreateTime',
        unit: '',
    },
    {
        label: '上架数量',
        key: 'devUapNum',
        unit: '台',
    },
    {
        label: '访问量',
        key: 'companyVisitNum',
        unit: '',
    },
])

//装备详情数据map
const equipDetailKeyList = reactive([
    {
        label: '装备编号',
        key: 'code',
        fn: '',
        arg: '',
    },
    {
        label: '装备品牌',
        key: 'brand',
        fn: '',
        arg: '',
    },
    {
        label: '装备类目',
        key: 'groupName',
        fn: '',
        arg: '',
    },
    {
        label: '装备型号',
        key: 'typeName',
        fn: '',
        arg: '',
    },
    {
        label: '出厂时间',
        key: 'productionDate',
        fn: '',
        arg: '',
    },
    // {
    //     label: '整机重量(KG)',
    //     key: 'deviceWeight',
    //     fn: '',
    //     arg: '',
    // },
    // {
    //     label: '装备型号',
    //     key: 'modelName',
    //     fn: '',
    //     arg: '',
    // },
    // {
    //     label: '序列号码',
    //     key: 'serialNumber',
    //     fn: '',
    //     arg: '',
    // },
    // {
    //     label: '出场时间',
    //     key: 'productionDate',
    //     fn: '',
    //     arg: '',
    // },
    // {
    //     label: '工作时长',
    //     key: 'workingHours',
    //     fn: '',
    //     arg: '',
    // },
    // {
    //     label: '检验信息',
    //     key: 'isExaminationPdf',
    //     fn: 'openPdf',
    //     arg: 'examinationPdf',
    // },
    // {
    //     label: '保险信息',
    //     key: 'isInsurancePdf',
    //     fn: 'openPdf',
    //     arg: 'insurancePdf',
    // },
])

const propertyNames = ref([])

//
const dialogPhone = ref(false)

//装备详情数据
const pageData: any = ref({})

//我要租  弹窗
const dialoglease = ref(false)

//装备收藏状态
const isCollect = ref(false)

//推荐列表
const hotList = ref([])
// 展示的推荐列表
const showHotList = ref([])

const checkDuration = (rule, value, callback) => {
    if ((value == '' || value == null) && value !== 0) {
        return callback(new Error('请输入工期时长'))
    } else if (value <= 0) {
        return callback(new Error('工期时长需大于0'))
    } else {
        return callback()
    }
}

//我要租 表单数据
const ruleForm = ref({
    address: [], //进场地址
    detailAddress: '', //详细地址
    entryTime: '', //进场时间
    duration: null, //工期时长
    durationUnit: '0', //工期时长单位 0 —> 天  1 -> 月
    machinist: 0, //是否需要机手
    invoiceType: '', //发票类型
    projectDescription: '', //项目说明
})
const rules = reactive({
    address: [{ required: true, message: '请输入进场地址', trigger: 'blur' }],
    detailAddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    entryTime: [{ required: true, message: '请选择进场时间', trigger: 'blur' }],
    duration: [{ validator: checkDuration, trigger: 'blur' }],
    machinist: [{ required: true, message: '请输入进场地址', trigger: 'blur' }],
    invoiceType: [],
    projectDescription: [{ required: true, message: '请输入项目说明', trigger: 'blur' }],
})

// //打开我要租表单
// const openLease = () => {
//     dialoglease.value = true
// }

const openLease = () => {
    // console.log(pageData.value)
    // onAddCart()
    // router.push({
    //     path: `/orderConfirm/${pageData.value.maId}`,
    // })
}
//切换收藏状态
const collectChange = async () => {
    isCollect.value = !isCollect.value
    const params = {
        maId: pageData.value.maId,
        isCollect: isCollect.value,
    }
    const res = await equipCollect(params)
    if (res.code == '200') {
        ElMessage({
            type: 'success',
            duration: 1000,
            message: `装备${isCollect.value ? '收藏' : '取消收藏'}成功`,
        })
    }
}

//计算具体价格
const priceChange = computed(() => {
    //总价
    let count = 0
    //单价
    let unitPrice = 0
    // 额外机手价格
    let jsPrice = 0
    // 时长
    let duration = 0

    if (ruleForm.value.durationUnit == '0') {
        unitPrice = Number(pageData.value.dayLeasePrice)
        jsPrice = Number(pageData.value.jsDayPrice)
    } else {
        unitPrice = Number(pageData.value.monthLeasePrice)
        jsPrice = Number(pageData.value.jsMonthPrice)
    }
    if (!ruleForm.value.machinist) {
        jsPrice = 0
    }

    duration = Number(ruleForm.value.duration)

    count = unitPrice * duration + jsPrice * duration

    return Math.round(count * 100) / 100 || 0
})

//打开商家电话弹窗
const openPhone = () => {
    dialogPhone.value = !dialogPhone.value
}

// 打开新标签页查看pdf
const openPdf = (name) => {
    if (name) {
        window.open(name)
    }
}
const that = {
    openPdf,
}

const addressCascader = {
    lazy: true,
    label: 'name',
    value: 'code',
    lazyLoad: async (node, resolve) => {
        const { level, data } = node
        let nodes = []
        if (level == 0) {
            const arr = await getAddressData()
            nodes = arr
        } else if (level == 1) {
            const arr = await getAddressData(data.code)
            nodes = arr
        } else if (level == 2) {
            const arr = await getAddressData(data.code)
            nodes = arr.map((item) => ({
                ...item,
                leaf: true,
            }))
        }
        resolve(nodes)
    },
}

const onHandelLessee = () => {
    // onAddCart()
    // router.push({
    //     path: `/orderConfirm/${props.id}`,
    // })
    // console.log('立即租赁')

    ElMessageBox.confirm('是否确定立即承租该装备?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
    })
        .then(async () => {
            router.push({
                // path: `/orderConfirm/${props.id}`,
                name: 'order-confirm',
                query: {
                    id: route.query.id,
                },
            })
        })
        .catch(() => {})
}

//获取地址列表
const getAddressData = async (code = '') => {
    let params = {}
    if (code) {
        params = { code }
    }

    const res = await apiGetAddressList(params)

    return res.data || []
}

const handelDetailListClick = (fnName, arg) => {
    if (fnName) {
        that[fnName](arg)
    }
}

//获取页面数据
const getData = async () => {
    const res = await getDetail(route.query.id, true)
    res.data.isOperatorCn = res.data.isOperator ? '是' : '否'
    res.data.isInsurancePdf = res.data.insurancePdf ? '点击查看' : '暂无'
    res.data.isExaminationPdf = res.data.examinationPdf ? '点击查看' : '暂无'

    isCollect.value = res.data.collectId ? true : false

    console.log('res详情数据', res)
    pageData.value = res.data
    if (res.data.devInfoProperties.length > 0 && res.data.devInfoProperties != null) {
        propertyNames.value = []
        propertyNames.value = res.data.devInfoProperties
        // res.data.devInfoProperties.forEach((item:any) => {
        //     propertyNames.value.push({label：any:item.propertyName,keya:any:item.propertyValue})
        // })
    }
    goodsImgList.value = res.data.mainFileList
}

//获取推荐列表
const gethotList = async () => {
    const params = {
        pageNum: 1,
        pageSize: 10,
    }
    const res = await getHotList(params)
    hotList.value = res.rows
    randomHotList()
}

const randomHotList = () => {
    showHotList.value = random().map((key) => {
        return hotList.value[key]
    })
}

const random = () => {
    let numbers = new Set()
    while (numbers.size < 3) {
        numbers.add(Math.floor(Math.random() * 10))
    }
    return Array.from(numbers)
}

//获取详情数据
const goDetail = (val) => {
    router.push({
        path: `/equipDetail/${val.id}`,
    })
}

//提交申请
const submit = async (Ref) => {
    if (!Ref) {
        return
    }
    await Ref.validate(async (valid, fields) => {
        if (valid) {
            const params = {
                provinceId: ruleForm.value.address[0],
                cityId: ruleForm.value.address[1],
                areaId: ruleForm.value.address[2],
                address: ruleForm.value.detailAddress,
                realStartTime: ruleForm.value.entryTime,
                duration: ruleForm.value.duration,
                isMachinist: ruleForm.value.machinist,
                invoiceType: ruleForm.value.invoiceType,
                description: ruleForm.value.projectDescription,
                durationType: ruleForm.value.durationUnit,
                cost: priceChange.value,
                maId: pageData.value.maId,
                orderCompany: store.userInfo.companyId,
            }

            const res = await apiSubmitLease(params)

            if (res.code == '200') {
                ElMessage({
                    message: '提交租赁申请成功',
                    type: 'success',
                    duration: 1500,
                })
            }
            dialoglease.value = false
        } else {
        }
    })
}

const dialogVisibles = ref(false)
const imgIndex = ref(0)
const dialogImageUrls = ref([])
//查看检测证明
const picturesPreview = (row: any) => {
    dialogImageUrls.value = []

    // window.open(url)
}

// const init = async () => {
//     await gethotList()
//     await getData()
// }
// init()

getData()

// 加入购物车
const onAddCart = async () => {
    const addParams = {
        maId: pageData.value.maId,
        orderCompany: pageData.value.companyId,
    }
    ElMessageBox.confirm('是否确定加入预约车?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
    })
        .then(async () => {
            const res: any = await addBookCarApi(addParams)
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: `预约车加入成功`,
                })
                getData()
                const res: any = await getBookCarDetailsApi()
                let amountNum = 0
                res.data.forEach((e: any) => {
                    amountNum = e.devInfoVoList.length + amountNum
                })
                cart.SET_CART_NUM(amountNum)
            } else {
                ElMessage({
                    type: 'error',
                    message: res.msg,
                })
            }
        })
        .catch(() => {})
}
const contacts = ref([
    {
        name: '张三',
        phone: '12345678901',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        unreadCount: 2,
    },
    {
        name: '李四',
        phone: '12345678902',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        unreadCount: 1,
    },
    {
        name: '王五',
        phone: '12345678903',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        unreadCount: 0,
    },
])
const unreadCount = ref(1)
const messages = ref([
    {
        id: 1,
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        text: '你好，欢迎来到在线聊！',
    },
    // 其他消息
])
const dialogChatVisible = ref(false)
const onChat = () => {
    // dialogChatVisible.value = true
    const { companyId, companyName, ownId } = pageData.value
    router.push({
        // path: `/orderConfirm/${props.id}`,
        name: 'message',
        query: {
            companyId,
            companyName,
            ownId,
        },
    })
}

onMounted(() => {
    // getUnreadCount()
})
</script>
<style scoped lang="scss">
:deep(.dialoglease) {
    margin: 10px auto 0 !important;
    min-width: 855px !important;
}

:deep(.el-form-item) {
    display: flex;
    width: 100%;

    .el-form-item__content {
        flex: 1;
    }
}

.countPrice {
    padding: 10px;
    text-align: right;

    span {
        color: red;
        font-weight: 600;
    }
}

.equipDetail {
    // user-select: none;
    margin-top: 20px;

    .top {
        display: flex;
        margin-bottom: 50px;

        .showImg {
            width: 40%;
            border-radius: 15px;
            // overflow: hidden;
            margin-right: 30px;
            // display: flex;
            // flex-direction: column;
            // justify-content: space-between;

            .img-main {
                width: 100%;
                // height: 73%;
                height: 420px;
            }

            .img-slide {
                height: 25%;
                width: 100%;
                display: flex;
                align-items: center;

                .btn {
                    cursor: pointer;
                    font-size: 26px;
                    // &:hover {
                    //     color: white;
                    // }
                }

                .img-slide-container {
                    flex: 1;
                    display: flex;
                    height: 80%;
                    justify-content: space-around;

                    .img-item {
                        // width: calc((100% - 30px) / 4);
                        // height: 100%;
                        width: 120px;
                        height: 120px;
                        cursor: pointer;
                        box-sizing: border-box;

                        // img {
                        //     height: 90%;
                        //     width: 100%;
                        //     margin-top: 5%;
                        // }
                        // width: 25%;
                        // background-color: orange;
                    }

                    .activeUrl {
                        border: 1px solid #1abc9c;
                    }
                }
            }
        }

        .baseInfo {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;

            .equipInfo {
                display: flex;

                .left {
                    margin-right: 5px;
                    width: 62%;
                    padding-left: 30px;

                    .title {
                        .name {
                            padding-bottom: 10px;
                            font-size: 24px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            color: #000000;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .tag {
                            display: flex;
                            align-items: center;
                            margin-top: 10px;

                            .item {
                                // font-size: 16px;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                color: #005af2;
                                margin-right: 15px;
                                padding: 2px 10px;
                                border: 1px solid #005af2;
                                border-radius: 4px;
                            }

                            .otherItem {
                                border-color: #ff6734;
                                color: #ff6734;
                            }
                        }
                    }

                    .viewNnum {
                        font-size: 14px;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 500;
                        color: #bcbcbc;
                        margin-top: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }

                    .infoBox {
                        margin-top: 20px;
                        .item {
                            display: flex;
                            align-items: center;
                            margin-bottom: 18px;

                            .label {
                                // font-size: 14px;
                                font-family: PingFangSC, PingFang SC;
                                // font-weight: 600;
                                color: #8e8e8e;
                                // margin-right: 15px;
                            }

                            .value {
                                font-size: 16px;
                                font-family: PingFangSC, PingFang SC;
                                color: #333333;
                            }
                        }

                        .options {
                            display: flex;
                            align-items: center;

                            .item_btn {
                                width: 110px;
                                height: 36px;
                                line-height: 36px;
                                border-radius: 4px;
                                // font-size: 14px;
                                text-align: center;
                            }

                            .contact {
                                color: #ffffff;
                                background: #3cabff;
                                margin-right: 20px;
                            }

                            .applyFor {
                                margin-left: 50px;
                                // background-color: #1abc9c;
                                color: #f7f9fa;
                                box-sizing: border-box;
                                line-height: 38px;
                            }
                        }
                    }
                }

                .right {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    // justify-content: space-between;

                    .collect {
                        user-select: none;
                        margin-top: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        // font-size: 14px;
                        color: #acacac;
                        cursor: pointer;

                        .no {
                            font-size: 16px;
                        }

                        .yes {
                            font-size: 20px;
                            color: #1b7eff;
                        }
                    }

                    .price {
                        font-size: 15px;
                        font-weight: 500;
                        font-family: PingFangSC, PingFang SC;
                        color: #ff4800;
                        text-align: right;

                        span {
                            font-size: 30px;
                            font-weight: 600;
                        }
                    }

                    .phone {
                        padding: 15px 0;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                    }
                }
            }

            .businessInfo {
                width: 100%;
                margin-top: 10px;
                // height: 147px;
                background: #f7f9fa;
                border-radius: 15px;
                position: relative;
                box-sizing: border-box;
                padding: 25px 15px;

                .bgCar {
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 100%;
                    z-index: 0;
                }

                .business {
                    display: flex;
                    align-items: center;

                    .avatar {
                        width: 65px;
                        height: 65px;
                        border-radius: 100%;
                        margin-right: 10px;
                    }

                    .fonts {
                        .name {
                            // font-size: 16px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            color: #333333;
                            margin-bottom: 12px;
                        }

                        .other {
                            display: flex;

                            .item {
                                // font-size: 12px;
                                font-family: PingFangSC, PingFang SC;
                                font-weight: 400;
                                color: #747373;
                                display: flex;
                                margin-right: 60px;

                                .label {
                                }

                                .value {
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .publicTitle {
        font-size: 18px;
        font-family: PingFangSC, PingFang SC;
        color: #fff;
        background-color: #1abc9c;
        width: 150px;
        height: 65px;
        line-height: 65px;
        text-align: center;
        letter-spacing: 1px;
    }

    .publicLine {
        width: 100%;
        height: 12px;
        border-bottom: 1px solid #e0e0e0;
        position: relative;

        &:before {
            content: '';
            height: 3px;
            width: 40px;
            background: #2282ff;
            border-radius: 2px;
            position: absolute;
            bottom: -1px;
            left: 20px;
        }
    }

    .publicContent {
        box-sizing: border-box;
        padding: 40px 30px 10px;
        border: 1px solid #1abc9c;
        margin-bottom: 20px;
    }

    .detail {
        .list {
            display: flex;
            flex-wrap: wrap;

            .item {
                cursor: pointer;
                width: calc(100% / 3);
                // font-size: 16px;
                // font-family: PingFangSC, PingFang SC;
                // font-weight: 600;
                display: flex;
                margin-bottom: 35px;

                .label {
                    color: #8e8e8e;
                    width: 160px;
                    font-size: 18px;
                }

                .value {
                    color: #333333;
                    flex: 1;
                    word-break: break-all;
                    font-size: 16px;
                    // font-family: 'fangsong';
                }

                .fnValue {
                    color: #0087cd;
                    // font-family: 'fangsong';
                }
            }
        }
    }

    .appearance {
        margin-bottom: 20px;

        .urlList {
            img {
                width: 100%;
            }
        }

        .certificate {
            padding: 40px 30px 10px;
            .prove-container {
                display: flex;
                flex-wrap: wrap;

                div {
                    width: calc((100% - 30px) / 3);
                    height: 200px;
                    margin: 0 15px 15px 0;

                    &:nth-child(3n) {
                        margin: 0;
                    }

                    // img {
                    //     width: 100%;
                    //     height: 100%;
                    // }
                }
            }
        }
    }

    .recommend {
        .change {
            font-size: 14px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #9d9d9d;
            cursor: pointer;
        }

        .content {
            margin-top: 20px;
            width: 100%;
            display: flex;

            .item {
                width: calc((100% - 40px) / 3);

                &:nth-child(3n - 1) {
                    margin: 0 20px;
                }
            }
        }
    }
}
.chat-container {
    display: flex;
}
.contact-list {
    width: 200px;
    /* border-right: 1px solid #ccc; */
}
.chat-content {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background-color: #f8f8f8;
}

.message {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.message-text {
    margin-left: 10px;
}

.chat-input {
    width: 100%;
}

.custom-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    margin-right: 10px;
}
.contact-list-header {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
}
.chat-content-header {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
}
</style>
