<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import ServiceItemFrom from './serviceItemFrom.vue'
import { Edit, Delete, Plus } from '@element-plus/icons-vue'

import { GlobalStore } from '@/stores/index'
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { useTablePublic } from '@/hooks/useTablePublic'
import type { FormInstance } from 'element-plus'
import { ServiceType_List_Post, ServiceType_Add_Post, ServiceType_Edit_Post, ServiceType_Del_Post } from '@/api/contractReview/index'

const data:any = reactive({
    fromDatas: { 
        T_name: '',
        T_service_type_id: '',
    },
    drawer: false,
    drawerTiti: ''
})

const getSalaryParams = (row: any) => {
    data.fromDatas.T_service_type_id = row.Id
    ServiceItemFromRef.value?.getDataFn()
}

const ruleFormRef = ref()
interface RuleForm {
    T_id: number
    T_name: string
}
const ruleForm = reactive<RuleForm>({
    T_id: 0,
    T_name: '',
})
const rules:any = reactive({
    T_name: [
        { required: true, message: '请输入服务类型', trigger: 'change' }
    ]
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) data.drawerTiti == '编辑' ? ServiceTypeEditApi() : ServiceTypeAddApi()
    })
}
/**
 * 新增
 */
const ServiceTypeAddApi = async () => {
    const result: any = await ServiceType_Add_Post(ruleForm)
    if (result.Code == 200) {
        TableRef.value?.getTableList()
        data.drawer = false
        ElMessage.success('添加成功')
    }
}
/**
 * 编辑
 */
const ServiceTypeEditApi = async () => {
    const result: any = await ServiceType_Edit_Post(ruleForm)
    if (result.Code == 200) {
        TableRef.value?.getTableList()
        data.drawer = false
        ElMessage.success('编辑成功')
    }
}
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 ServiceType_Del_Post(obj)
    if (result.Code == 200) {
        TableRef.value?.getTableList()
        ElMessage.success('删除成功')
    }
}



let date = new Date()
const year = date.getFullYear()
const month = date.getMonth()
const salaryFromData = reactive({
    year: year + '',
    month: (month < 10 ? '0' : '') + month,
    T_uuid: ''
})
const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const ServiceItemFromRef = ref<InstanceType<typeof ServiceItemFrom> | null>(null)
const { tableRowClassName } = useTablePublic()
// 搜索以及参数
const columns: ColumnProps[] = [
    { prop: 'T_name', label: '服务类型' },
    { prop: 'operation', label: '操作', fixed: 'right' }
]
const initParam = {
    User_tokey: globalStore.GET_User_tokey,
    T_name: '',
    page: 1,
    page_z: 9999,
}

const searchHandle = (title: string, obj?: any) => {
    ruleForm.T_name = obj?.T_name
    ruleForm.T_id = obj?.Id
    data.drawer = true
    data.drawerTiti = title
}
const showFrom = ref(false)
const dataCallback = (res:any)=>{
    if(res.Data?.Data && res?.Data?.Data.lenght!=0){
        data.fromDatas.T_service_type_id = res?.Data?.Data[0].Id
    }
    showFrom.value = true
    return res?.Data?.Data
}
const onClicksearch = async ()=>{
    ServiceItemFromRef.value?.getDataFn()
}
const onClickAdd = async ()=>{
    ServiceItemFromRef.value!.data.drawer = true
    ServiceItemFromRef.value!.data.drawerTiti = '新增服务内容'
    ServiceItemFromRef.value!.getServiceList()
}


</script>

<template>
    <div class="salary">
        <div style="width: 290px" class="salary-table">
            <TableBase ref="TableRef" :columns="columns" :requestApi="ServiceType_List_Post" :initParam="initParam"
                layout="prev, pager, next" :rowClick="getSalaryParams" :pagination="false"
                :dataCallback="dataCallback"
                >
                <template #table-header>
                    <div style="display: flex;justify-content: space-between;align-items: center;flex: 1;">
                        <div style="display: flex;align-items: center;">
                            <el-icon size="22">
                                <Menu />
                            </el-icon>
                            <el-text tag="b" size="large" style="margin-left: 5px;">服务类型</el-text>
                        </div>
                        <el-button type="primary" icon="Plus" @click="searchHandle('添加')"
                            style="margin-left: 5px;">添加</el-button>
                    </div>
                </template>
                <template #right="{ row }">
                    <el-button link type="primary" size="small" :icon="Edit"
                        @click.stop="searchHandle('编辑', row)"></el-button>
                    <el-button link type="danger" size="small" :icon="Delete" @click.stop="UserDelete(row)"></el-button>
                </template>
            </TableBase>
        </div>
        <el-row class="h-100 f-1 margin-left-3">
            <el-col :span="24" class="h-100" style="overflow: hidden; display: flex; flex-direction: column">
                <el-card class="b-r m-b-3">
                    <div style="display: flex;justify-content: space-between">
                        <div>
                            <el-button type="primary" @click="onClickAdd" icon="Plus" style="margin-left: 5px;">新增服务内容</el-button>
                        </div>
                        <div>
                            <el-input v-model="data.fromDatas.T_name" style="width: 240px" placeholder="搜索服务内容" />
                            <el-button type="primary" style="margin-left: 5px;" @click="onClicksearch">搜索</el-button>
                        </div>
                    </div>
                </el-card>
                <ServiceItemFrom v-if="showFrom" ref="ServiceItemFromRef" :fromDatas="data.fromDatas"></ServiceItemFrom>
            </el-col>
        </el-row>
        <el-drawer v-model="data.drawer" :title="data.drawerTiti" direction="rtl" destroy-on-close>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="top" label-width="90">
                <el-form-item label="服务类型" prop="T_name">
                    <el-input v-model="ruleForm.T_name" />
                </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>

<style scoped lang="scss">
@import './index.scss';
</style>
