<template>
    <el-dialog
        v-model="dialogFormVisible"
        title="技术监督计划实施问题"
        width="90%"
        :append-to-body="true"
        :before-close="close"
        :close-on-click-modal="false"
        draggable
        custom-class="fixed-dialog"
        @closed="close"
    >
        <TableHeader area datePicker ref="TableHeaderRef">
            <!-- <template #select>
            <el-form-item label="工程名称">
                <el-input v-model="tableStore.table.params.searchValue" clearable></el-input>
            </el-form-item>
            <el-form-item label="所属地市">
                <el-select v-model="tableStore.table.params.loadType" clearable placeholder="请选择所属地市">
                    <el-option
                        v-for="item in areaOptionList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </template> -->
            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增</el-button>
                <!-- <el-button icon="el-icon-Download" @click="exportEvent" type="primary">导出</el-button> -->
            </template>
        </TableHeader>
        <Table ref="tableRefs" />
    </el-dialog>
    <addForm ref="addFormRef" :planId="planId" @onSubmit="effectTableStore.index()"></addForm>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, defineExpose, defineProps, defineEmits, watch, onUnmounted } from 'vue'
import { useDictData } from '@/stores/dictData'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import addForm from './addForm.vue'
import { queryByAllCode } from '@/api/system-boot/dictTree'
import { useAdminInfo } from '@/stores/adminInfo'
import { uploadFile } from '@/api/system-boot/file'
import { addPlanFormData, getUserByDeptId } from '@/api/supervision-boot/plan/index'
import { getAreaList } from '@/api/common'
import Area from '@/components/form/area/index.vue'
const emits = defineEmits([''])
const props = defineProps({
    effectProblemForm: {
        type: Object,
        default: () => ({})
    }
})
const planId: any = ref('')
const dictData = useDictData()
const dialogFormVisible = ref(false)
const tableRefs = ref()

const effectTableStore = new TableStore({
    url: '/supervision-boot/superProblem/pageProblem',
    publicHeight: 65,
    method: 'POST',
    column: [
        { title: '序号', type: 'seq', width: 80 },
        {
            field: 'problemDesc',
            title: '问题描述',
            minWidth: 170,
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        {
            field: 'problemLevel',
            title: '问题等级',
            minWidth: 170,
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        {
            field: 'problemLevelReason',
            title: '定级依据',
            minWidth: 170,
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        { field: 'problemType', title: '问题类型', minWidth: 170 },
        { field: 'rectificationMeasure', title: '整改措施', minWidth: 170 },
        { field: 'rectificationProgramme', title: '整改方案', minWidth: 170 },
        { field: 'rectificationStatus', title: '整改情况', minWidth: 170 },
        { field: 'rectificationTime', title: '整改时间', minWidth: 170 },
        { field: 'remark', title: '备注', minWidth: 170 },
        { field: 'searchBeginTime', title: '开始时间', minWidth: 170 },
        { field: 'searchEndTime', title: '结束时间', minWidth: 170 },
        {
            title: '操作',
            minWidth: 150,
            fixed: 'right',
            render: 'buttons',
            buttons: [
                {
                    name: 'productSetting',
                    title: '详情',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        handleDetail(row)
                    }
                },
                {
                    name: 'productSetting',
                    title: '修改',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',
                    click: row => {
                        handleEdit(row)
                    }
                }
            ]
        }
    ],

    beforeSearchFun: () => {
        effectTableStore.table.params.orgNo = effectTableStore.table.params.deptIndex
    }
})
watch(
    () => props.effectProblemForm,
    (val, oldVal) => {
        if (val.planId != '' && dialogFormVisible.value) {
            planId.value = val.planId
            effectTableStore.table.params.planId = planId.value
            effectTableStore.index()
        }
    },
    {
        deep: true,
        immediate: true
    }
)
provide('tableStore', effectTableStore)
const open = () => {
    dialogFormVisible.value = true
}
const close = () => {
    dialogFormVisible.value = false
    // emits('onSubmit')
}
//新增
const addFormRef=ref()
const addFormModel=()=>{
    addFormRef.value.open()
} 
//详情
const handleDetail = (row: any) => {
    console.log(row)
}
//修改
const handleEdit = (row: any) => {
    console.log(row)
}
onMounted(() => {})

defineExpose({ open })
</script>
<style lang="scss" scoped>
.fixed-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
}
.el-form {
    width: 96%;
    height: 400px;
    margin: 0 auto;
    overflow-y: auto;
    padding-top: 20px;
}
.dialog-footer {
    padding: 10px;
}
/* 调整标签的换行行为 */
.label_over_warp::v-deep .el-form-item__label {
    // white-space: pre-line !important;
    line-height: 16px !important;
}
::v-deep .el-form-item {
    padding: 0 10px;
    height: auto !important;
}
::v-deep .el-form-item__label {
    justify-content: flex-start !important;
}
.form-label-left-align {
    text-align: left;
}
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
.no_required::v-deep .el-form-item__label {
    padding-left: 10px !important;
}

::v-deep .el-input {
    width: 200px !important;
}
::v-deep .el-select {
    width: 200px !important;
}
::v-deep .required_position {
    position: relative;
    .required_icon {
        position: absolute;
        left: -10px;
        margin-top: 8px;
        color: #f56c6c;
        margin-left: 20px;
        margin-right: 10px;
    }
    .required_icon_white {
        color: #fff;
        position: absolute;
        left: -10px;
        padding-left: 10px;
        margin: 8px 10px 0 10px;
    }
    .required_text {
        // padding-left: 20px;
    }
    .el-form-item__label {
        padding-left: 10px;
    }
}
// ::v-deep .tabs_form{
//     height:300px !important;
// }
</style>
