<template>
    <div class="ReimburseFrom">
        <TableBase border ref="TableRef" :columns="columns" :requestApi="ServiceItem_List_Post" :initParam="props.fromDatas"
            :displayHeader="true" :tableRowClassName="tableRowClassNameHandle">
            <template #right="{ row }">
                <el-button link type="primary" size="small" :icon="Edit" @click="openDrawer('编辑', row)"></el-button>
                <el-button link type="danger" size="small" :icon="Delete" @click="UserDelete(row)"></el-button>
            </template>
        </TableBase>
        <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" destroy-on-close>
            <el-form ref="ruleFormRef" :model="data.initParam" :rules="rules" label-position="top">
                <el-form-item label="服务类型" prop="T_service_type_id">
                    <el-select v-model="data.initParam.T_service_type_id" placeholder="请选择服务类型">
                        <el-option v-for="item in data.options" :key="item.Id" :label="item.T_name" :value="item.Id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="销售类型">
                    <el-select v-model="data.initParam.T_sale_type" placeholder="请选择销售类型">
                        <el-option v-for="item in data.optionsType" :key="item.T_name" :label="item.T_name" :value="item.T_name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="服务内容" prop="T_name">
                    <el-input v-model="data.initParam.T_name" />
                </el-form-item>
                <el-form-item label="型号">
                    <el-input v-model="data.initParam.T_model" />
                </el-form-item>
                <el-form-item label="规格">
                    <el-input v-model="data.initParam.T_spec" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        提交
                    </el-button>
                    <el-button @click="data.drawer = false">Reset</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import TableBase from '@/components/TableBase/index.vue'
import { ServiceItem_List_Post, ServiceItem_Add_Post, ServiceItem_Edit_Post, ServiceItem_Del_Post,ServiceType_List_Post } from '@/api/contractReview/index'
import { ElMessage , ElMessageBox} from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
// 接受父组件参数，配置默认值
const props = defineProps<{
    fromDatas: {},
}>()

const ruleFormRef = ref()
const data: any = reactive({
    drawer: false,
    drawerTiti: '',
    initParam: {
        T_service_type_id: '',
        T_sale_type: '',
        T_name: '',
        T_model: '',
        T_spec: '',
    },
    options: [],
    optionsType: [{T_name:'/'},{T_name:'软件'},{T_name:'硬件'}]
})


const getServiceList = async ()=>{
    const result:any =await ServiceType_List_Post({page: 1,page_z: 9999,})
    if(result.Code==200){
        data.options = result.Data.Data || []
    }
}
const rules:any = reactive({
    T_service_type_id:[
        { required: true, message: '请选择服务类型', trigger: 'change' }
    ],
    T_name: [
        { required: true, message: '请填写服务内容', trigger: 'change' }
    ]
    
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('确定')
            if (valid) data.drawerTiti == '编辑' ? ServiceItemEditApi() : ServiceItemAddApi()
        }
    })
}
/**
 * 新增
 */
 const  ServiceItemAddApi = async () => {
    const result: any = await ServiceItem_Add_Post(data.initParam)
    if (result.Code == 200) {
        TableRef.value?.getTableList()
        data.drawer = false
        ElMessage.success('添加成功')
    }
}
/**
 * 编辑
 */
const  ServiceItemEditApi = async () => {
    const result: any = await ServiceItem_Edit_Post(data.initParam)
    if (result.Code == 200) {
        TableRef.value?.getTableList()
        data.drawer = false
        ElMessage.success('编辑成功')
    }
}


const tableRowClassNameHandle = (data: any): any => { }

const openDrawer = async (tit:string, row:any) => {
    getServiceList()
    data.drawerTiti = tit
    data.drawer = true
    
    for (let key in row) {  
        if (data.initParam.hasOwnProperty(key)) {  
            data.initParam[key] = row[key];  
        }  
    } 
    data.initParam.T_id = row.Id
 }
const UserDelete = async (row: any) => {
    let {Id} = row
    ElMessageBox.confirm('删除服务内容，是否确认删除?', 'Warning',
        {
            confirmButtonText: '立即删除',
            cancelButtonText: '取消',
            type: 'warning',
            center: true,
        }).then(() => {
            ServiceTypeDelApi({T_id:Id})
        }).catch(() => {})
}
/**
 * 删除
 */
const ServiceTypeDelApi = async (obj:any) => {
    const result:any = await ServiceItem_Del_Post(obj)
    if (result.Code == 200) {
        TableRef.value?.getTableList()
        ElMessage.success('删除成功')
    }
}

// 搜索以及参数
const columns: ColumnProps[] = [
    { prop: 'ServiceType.T_name', label: '服务类型' },
    { prop: 'T_sale_type', label: '销售类型' },
    { prop: 'T_name', label: '服务内容' },
    { prop: 'T_model', label: '型号' },
    { prop: 'T_spec', label: '规格' },
    { prop: 'operation', label: '操作', fixed: 'right' }
]
const TableRef = ref()
const getDataFn = async () => {
    TableRef.value?.getTableList()
}
defineExpose({
    getDataFn, data,getServiceList
})
</script>
<style scoped lang="scss">
.newMingxi {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #409EFC;
    cursor: pointer;
    line-height: 0;
    padding: 10px 0 2px 0;
    color: #409EFC;
    user-select: none;
}

// 上传图片框样式
.el-upload--picture-card {
    border: 1px dashed #13C3C7;
}

.el-upload--picture-card:hover {
    border-color: #13C3C7;
    color: #13C3C7;
}

.el-upload--picture-card {
    width: 50px;
    height: 50px;
    font-size: 16px !important;
}

.el-upload {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item-actions:hover {
    opacity: 1;
    font-size: 16px;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
}

.avatar {
    width: 50px;
    height: 50px;
}
</style>
