<template>
    <el-card shadow="never" class="!border-none">
        <el-page-header :content="id ? '编辑师傅' : '新增师傅'" @back="$router.back()" />
    </el-card>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
        <el-card shadow="never" style="margin-top: 15px" class="!border-none">
            <!-- 用户绑定 -->
            <el-form-item label="绑定用户:" prop="userId">
                <user-select
                    btn-text="选择用户"
                    type="primary"
                    v-model="formData.userId"
                    :userVo="formData.userVo"
                    :id="id"
                />
            </el-form-item>
            <el-form-item label="师傅名称:" prop="name">
                <el-input
                    class="w-56 ls-input"
                    v-model="formData.name"
                    placeholder="请输入师傅的真实姓名"
                />
            </el-form-item>
            <el-form-item label="性别:" prop="sex">
                <el-radio v-model="formData.sex" name="1" :label="1">男</el-radio>
                <el-radio v-model="formData.sex" name="2" :label="2">女</el-radio>
            </el-form-item>
            <!-- 服务项目 -->
            <div class="serviceItem">
                <el-form-item label="服务项目:" prop="goodsIds">
                    <service-select
                        v-model="formData.goodsIds"
                        v-model:selectData="formData.goodsList"
                        v-perms="['goods:list']"
                    >
                        <template #popup>
                            <el-button type="primary">选择服务</el-button>
                        </template>
                    </service-select>
                </el-form-item>
            </div>
            <!-- 手机号码 -->
            <el-form-item label="手机号码:" prop="mobile">
                <el-input
                    class="w-56 ls-input"
                    v-model="formData.mobile"
                    placeholder="请输入手机号码"
                />
            </el-form-item>
            <!-- 所在地区 -->
            <el-form-item label="所在地区:" prop="districtId">
                <area-select
                    class="w-56 ls-input"
                    v-model:province="formData.provinceId"
                    v-model:city="formData.cityId"
                    v-model:district="formData.districtId"
                />
            </el-form-item>
            <el-form-item label="详细地址:">
                <el-input
                    class="ls-input"
                    type="textarea"
                    v-model="formData.address"
                    placeholder="选填，请输入详细地址"
                    :rows="6"
                ></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
                <el-switch
                    v-model="formData.status"
                    :active-text="formData.status ? '启用' : '停用'"
                    :active-value="1"
                    :inactive-value="0"
                />
            </el-form-item>
            <el-form-item label="首页推荐:">
                <el-radio v-model="formData.isRecommend" name="1" :label="1">推荐</el-radio>
                <el-radio v-model="formData.isRecommend" name="0" :label="0">不推荐</el-radio>
            </el-form-item>
        </el-card>
    </el-form>
    <footer-btns>
        <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
    </footer-btns>
</template>

<script lang="ts" setup>
import { apiMasterWorkerAdd, apiMasterWorkerEdit, apiMasterWorkerDetail } from '@/api/master_worker'
import { ref, reactive } from 'vue'
import FooterBtns from '@/components/footer-btns/index.vue'
import UserSelect from '@/components/user-select/index.vue'
import AreaSelect from '@/components/area-select/index.vue'
import ServiceSelect from '@/components/service-select/index.vue'
import type { ElForm } from 'element-plus'
import feedback from '@/utils/feedback'

/** Interface Start **/
interface formDataObj {
    userId?: number | string //用户id
    user?: object //用户id
    name?: string //师傅姓名
    sn?: string //师傅姓名
    sex?: number | string //性别
    mobile?: number | string //手机号码
    goods?: any //服务项目
    goodsIds: Array<any> //服务项目
    goodsList: any
    provinceId: number | string //省
    cityId: number | string //市
    districtId: number | string //区
    address: string //详细地址
    longitude: string //经度
    latitude: string //纬度
    status: number //状态
    isRecommend?: number //是否推荐
}
type FormInstance = InstanceType<typeof ElForm>
const formRef = ref<FormInstance>()
/** Interface End **/

/** Data Start **/
const route = useRoute()
const router = useRouter()
const id: any = route.query.id
const formData = ref<formDataObj>({
    userId: '', //用户id
    name: '', //师傅姓名
    sn: '', // 师傅编号
    sex: 1, //性别
    mobile: '', //手机号码
    goodsIds: [], //服务项目
    goodsList: [],
    goods: [],
    provinceId: '', //省
    cityId: '', //市
    districtId: '', //区
    address: '', //详细地址
    longitude: '111', //经度 暂时不用
    latitude: '111', //纬度  暂时不用
    status: 0, //状态
    isRecommend: 0 //是否推荐
})
// 表单校验规则
const rules = reactive<object>({
    userId: [{ required: true, message: '请选择用户', trigger: [] }],
    name: [{ required: true, message: '请输入师傅名称', trigger: 'blur' }],
    sn: [{ required: true, message: '请输入师傅编号', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: ['blur', 'change'] }],
    goodsIds: [{ required: true, message: '请选择服务项目', trigger: [] }],
    mobile: [
        { required: true, message: '请输入手机号', trigger: ['blur'] },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号码输入有误', trigger: ['blur'] }
    ],
    districtId: [{ required: true, message: '请选择地区', trigger: ['blur', 'change'] }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
})
/** Data End **/

/** Methods Start **/
// 获取详情
const getMasterWorkerDetail = async (id: number): Promise<void> => {
    ;(formData.value as {}) = await apiMasterWorkerDetail({ id })
}
// 添加师傅
const handleMasterWorkerAdd = async (): Promise<void> => {
    const goodsIds = formData.value.goodsIds.join(',')
    await apiMasterWorkerAdd({ ...formData.value, goodsIds })
    router.back()
    feedback.msgSuccess('操作成功')
}
// 编辑师傅
const handleMasterWorkerEdit = async (): Promise<void> => {
    const goodsIds = formData.value.goodsIds.join(',')
    await apiMasterWorkerEdit({ ...formData.value, goodsIds })
    router.back()
    feedback.msgSuccess('操作成功')
}
// 提交数据
const onSubmit = (formEl: FormInstance | undefined): void => {
    formData.value.goodsIds = formData.value.goodsList.map((item) => item.id)
    if (!formEl) return
    formEl.validate((valid): boolean | undefined => {
        if (!valid) return false
        if (!id) handleMasterWorkerAdd()
        else handleMasterWorkerEdit()
    })
}
/** Methods End **/

/** LifeCycle Start **/
// 请求详情 => 如果是编辑的话
if (id) getMasterWorkerDetail(id)
/** LifeCycle End **/
</script>

<style lang="scss" scoped>
.ls-input,
.select {
    width: 340px;
}
.serviceItem :deep() .el-form-item__content {
    display: block;
}
.serviceItem :deep() .dialog__trigger {
    width: 80px;
}
</style>
