<template>
    <el-card shadow="never" class="!border-none">
        <el-form :model="formData" inline>
            <el-form-item label="师傅信息">
                <el-input class="ls-input" v-model="formData.staffInfo" placeholder="师傅编号/姓名/手机号" />
            </el-form-item>
            <el-form-item label="用户信息">
                <el-input class="ls-input" v-model="formData.userInfo" placeholder="请输入用户昵称/用户编号/手机号" />
            </el-form-item>
            <el-form-item label="所在地区">
                <el-cascader class="w-56 ls-input" :options="options" :props="props2" @change="handleSelect" ref="cascader" />
            </el-form-item>
            <el-form-item label="首页推荐">
                <el-select v-model="formData.isRecommend" placeholder="请选择" class="ls-input">
                    <el-option label="全部" value></el-option>
                    <el-option label="推荐" value="1"></el-option>
                    <el-option label="不推荐" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="师傅状态">
                <el-select v-model="formData.status" placeholder="请选择" class="ls-input">
                    <el-option label="全部" value></el-option>
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="停用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <div class="flex">
                    <el-button type="primary" @click="getLists">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card shadow="never" class="mt-4 !border-none">
        <!-- <el-button type="primary" @click="$router.push('edit')">添加师傅</el-button> -->
        <div class="mt-3">
            <el-table :data="pager.lists" style="width: 100%" v-loading="pager.loading">
                <el-table-column property="sn" label="师傅编号" min-width="110">
                    <template #default="scope">{{ scope.row.sn }}</template>
                </el-table-column>
                <el-table-column property="name" label="师傅信息" min-width="200">
                    <template #default="{ row }">
                        <div class="flex items-center">
                            <el-image
                                class="avatar"
                                :src="row.headPortrait"
                                :preview-src-list="[row.headPortrait]"
                                :hide-on-click-modal="true"
                                :preview-teleported="true"
                                fit="cover"
                            />
                            <el-button class="custom-btn" type="primary" text>
                                <router-link :to="{ path: '/order/lists', query: { staffInfo: row.sn } }">{{ row.name }}</router-link>
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column property="mobile" label="手机号码" min-width="160" />
                <el-table-column label="所在地区" min-width="200">
                    <template #default="scope">
                        <div>{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.district }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="idCard" label="身份证号码" min-width="200"></el-table-column>
                <el-table-column prop="idCardImg" label="身份证正反面" min-width="200" align="center">
                    <template #default="{ row }">
                        <el-image
                            class="w-[30px] h-[30px]"
                            :src="IdCardImg"
                            :preview-src-list="previewIdCardList(row)"
                            fit="cover"
                            :preview-teleported="true"
                        />
                    </template>
                </el-table-column>

                <el-table-column prop="physicalExamination" min-width="200" label="体检报告（图片和pdf）">
                    <template #default="{ row }">
                        <div class="method" v-if="row.physicalExamination">
                            <el-image
                                v-if="isVisibleImage(row)"
                                style="width: 30px; height: 30px"
                                :src="reportImg"
                                :preview-src-list="previewSrcList(row)"
                                fit="cover"
                                :preview-teleported="true"
                                :hide-on-click-modal="true"
                            />
                            <el-image
                                v-if="isVisiblePdf(row)"
                                style="width: 30px; height: 30px"
                                :src="PdfImg"
                                fit="cover"
                                @click="handlePreviewPdf(row)"
                                :hide-on-click-modal="true"
                            />
                        </div>
                        <div v-else class="strong">未上传</div>
                    </template>
                </el-table-column>
                <el-table-column property="score" label="服务评分" min-width="80">
                    <template #default="scope">
                        <el-popover placement="top-start" title="提示：" trigger="hover" content="点击可跳转服务评价页面">
                            <template #reference>
                                <router-link :to="{ path: '/service/evaluate', query: { staffInfo: scope.row.sn } }">
                                    <div class="w-[50px] text-center text-[#4A5DFF]">{{ scope.row.score }}</div>
                                </router-link>
                            </template>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="接单状态" min-width="80">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.isReceiveOrder"
                            :active-value="0"
                            :inactive-value="1"
                            :before-change="() => handleStatusChange(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="运营师傅" min-width="80">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.isOperational"
                            :active-value="1"
                            :inactive-value="0"
                            :before-change="() => handleIsOperationalChange(scope.row)"
                        />
                    </template>
                </el-table-column>
                <!-- <el-table-column property="recommend_desc" label="首页推荐" min-width="160">
                    <template #default="scope">
                        <el-tag type="info" v-if="scope.row.isRecommend == 0">不推荐</el-tag>
                        <el-tag v-if="scope.row.isRecommend == 1">推荐</el-tag>
                    </template>
                </el-table-column> -->
                <el-table-column prop="getType" label="金额详情" min-width="110">
                    <template #default="{ row }">
                        <MoneyDetailDialog btn-text="金额详情" :rowData="row" />
                    </template>
                </el-table-column>
                <el-table-column property="createTime" label="添加时间" min-width="180" />
                <el-table-column label="操作" width="148" fixed="right">
                    <template #default="scope">
                        <div class="flex">
                            <router-link
                                class="mr-2"
                                :to="{
                                    path: 'edit',
                                    query: {
                                        id: scope.row.id
                                    }
                                }"
                            >
                                <el-link type="primary" :underline="false">编辑</el-link>
                            </router-link>
                            <el-link class="ml-4" type="primary" :underline="false" @click="handleDelete(scope.row.id)">删除</el-link>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </el-card>
</template>

<script lang="ts" setup name="masterList">
import { apiMasterWorkerLists, apiMasterWorkerDel, apiMasterWorkerStatusEdit, apiStaffIsOperationalUpdate } from '@/api/master_worker'
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import MoneyDetailDialog from '@/components/money-detail/moneyDetailDialog.vue'
import { usePaging } from '@/hooks/usePaging'
import area from '@/utils/area'
import feedback from '@/utils/feedback'
import { ReceiveOrderEnum } from '@/enums/modeEnum'
import PdfImg from '@/assets/icons/pdf.svg'
import reportImg from '@/assets/images/report.png'
import IdCardImg from '@/assets/images/idCard.png'

const router = useRouter()

const options = ref<any>(area) // 地区列表
const props2 = {
    checkStrictly: true
}
const formData = ref<any>({
    staffInfo: '',
    isRecommend: '',
    provinceId: '',
    cityId: '',
    districtId: '',
    userInfo: '',
    status: ''
})
const previewSrcList = computed(() => {
    return (row: any) => {
        const { physicalExamination } = row
        return physicalExamination.split(',').filter(item => !item.includes('pdf'))
    }
})
const isVisibleImage = computed(() => {
    return (row: any) => {
        return unref(previewSrcList)(row).length > 0
    }
})
const isVisiblePdf = computed(() => {
    return (row: any) => {
        const { physicalExamination } = row
        return physicalExamination.split(',').filter(item => item.includes('pdf')).length > 0
    }
})
const previewIdCardList = computed(() => {
    return (row: any) => {
        return row.idCardImg.split(',')
    }
})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: apiMasterWorkerLists,
    params: formData.value
})

// 选中不同地区的师傅列表
const handleSelect = async (val: number[]) => {
    formData.value.provinceId = val[0]
    formData.value.cityId = val[1]
    formData.value.districtId = val[2]
}

// 删除师傅
const handleDelete = async (id: number): Promise<void> => {
    await feedback.confirm('确认要删除吗？')
    await apiMasterWorkerDel({ id })
    feedback.msgSuccess('操作成功')
    getLists()
}
// 状态修改
const handleStatusChange = (row: any) => {
    const { id, name, isReceiveOrder } = row
    return new Promise(async resolve => {
        try {
            const text = isReceiveOrder === ReceiveOrderEnum.ENABLEDING ? '暂停' : '启用'
            await feedback.confirm(`确定${text}师傅【${name}】接单`)
            await apiMasterWorkerStatusEdit({ id })
            getLists()
            return resolve(true)
        } catch (error) {}
    })
}
// 是否运营师傅修改
const handleIsOperationalChange = (row: any) => {
    const { id, name, isOperational } = row
    return new Promise(async resolve => {
        try {
            const text = isOperational === ReceiveOrderEnum.ENABLEDING ? '确定将该师傅设为运营师傅？' : '确定取消该师傅的运营师傅身份？'
            await feedback.confirm(text)
            await apiStaffIsOperationalUpdate({ id })
            getLists()
            return resolve(true)
        } catch (error) {}
    })
}
/**预览pdf */
const handlePreviewPdf = (row: any) => {
    const { physicalExamination } = row
    if (!physicalExamination) return
    const url = router.resolve({ path: '/report/pdf', query: { path: physicalExamination?.split(',').filter(item => item.includes('pdf')) } })
    window.open(url.href)
}
getLists()

/**页面缓存 */
onActivated(() => {
    getLists()
})
</script>

<style lang="scss" scoped>
.ls-input {
    width: 280px;
}

.method {
    cursor: pointer;
}

:deep(.custom-btn) {
    flex: 1;
    overflow: hidden;
    margin-left: 10px;

    &.el-button:hover {
        color: #4a5dff;
        background-color: transparent;
    }

    span {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
    }
}

.strong {
    color: var(--color-red);
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
        object-position: left top;
        transition: 1s;

        &:hover {
            object-position: right bottom;
        }
    }
}
</style>
