<template>
    <super-dialog v-bind="$attrs" v-model="isShowDialog" :width="width" :modal="false" :top="top" @open="open"
        @closed="closed" :title="'路产赔偿清单'">
        <div class="eventInfo-dialog" :style="{ height }">
            <div class="form-module">
                <el-form ref="eventInfo" :model="eventInfo" :rules="rescueInfoRules" label-width="100px"
                    label-position="top" label-suffix="：">
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="项目类别" prop="propertyTypeId">
                                <el-select v-model="eventInfo.propertyTypeId" style="width: 100%" placeholder="项目类别"
                                    clearable>
                                    <el-option v-for="(item, index) in getDictionaryByCode(
                                        'lsxmlx'
                                    )" :key="index" :label="item.name" :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="项目明细">
                                <el-input clearable v-model="eventInfo.propertySubjectName" placeholder="点击选择项目明细"
                                    readonly class="el-click-input" @click.native="showDialog('roadDamageItem')"
                                    suffix-icon="el-icon-search">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="规格" prop="modle">
                                <el-input placeholder="请输入规格" v-model="eventInfo.modle">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="计费单位">
                                <el-input placeholder="请输入内容" v-model="eventInfo.unit" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="数量" prop="num">
                                <el-input placeholder="请输入内容" v-model="eventInfo.num" @change="numChange">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="收费单价" prop="price">
                                <el-input placeholder="请输入内容" v-model="eventInfo.price" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="金额" prop="totle">
                                <el-input placeholder="请输入内容" v-model="eventInfo.totle" :disabled="true">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <el-form-item label="备注" prop="memo">
                                <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入"
                                    v-model="eventInfo.memo">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="content-bottom">
                    <el-button size="small" @click="isShowDialog = false">
                        取 消
                    </el-button>
                    <el-button :disabled="tableLoading" size="small" type="primary" @click="handleAppoint">
                        确 定
                    </el-button>
                </div>
            </div>
        </div>

        <RoadDamageItemDialog :roadId="roadId" :is-show.sync="roadDamageItemDialog"
            :selected-content.sync="eventInfo.detail" @confirm="handleRoadDamageSelect" />
    </super-dialog>
</template>

<script>
import SuperDialog from '@/components/SuperDialog/index.vue'
import { getDictionaryByCode } from '@/utils/dictionary'
import RoadDamageItemDialog from './components/RoadDamageItemDialog'
import moment from 'moment'
export default {
    name: 'DetailedListGialog',
    inheritAttrs: false,
    //   mixins: [TableMixin],
    props: {
        isShow: {
            default: false,
            type: Boolean
        },
        selectedContent: {
            default: () => [],
            type: [Array, Object]
        },
        top: {
            default: '14vh',
            type: String
        },
        width: {
            default: '60%',
            type: String
        },
        height: {
            default: '65vh',
            type: String
        },
        confirmCloseDialog: {
            default: true,
            type: Boolean
        },
        roadId: {
            default: '',
            type: String
        },
        itemDetail: {
            default: () => { },
            type: Object
        }
    },
    components: {
        SuperDialog,
        RoadDamageItemDialog
    },
    data() {
        return {
            roadDamageItemDialog: false,
            initializeRendering: false, // 弹层内容初始化渲染
            tableMaxHeight: '600px',
            enhancedTableData: [], // 增强的表格数据（增加额外特性）
            eventInfo: {},
            rescueInfoRules: {
                person: [
                    {
                        required: true,
                        message: '派遣人员不能为空',
                        trigger: ['change']
                    }
                ],
                rescueStatus: [
                    {
                        required: true,
                        message: '请选择救援状态',
                        trigger: ['change']
                    }
                ],
                teamId: [
                    {
                        required: true,
                        message: '派遣队伍不能为空',
                        trigger: ['change']
                    }
                ],
                rescueTime: [
                    {
                        required: true,
                        message: '报案时间不能为空',
                        trigger: ['change']
                    }
                ]
            },
            tableLoading: false,
        }
    },
    computed: {
        isShowDialog: {
            get() {
                return this.isShow
            },
            set(val) {
                this.$emit('update:isShow', val)
            }
        },
    },
    methods: {
        getDictionaryByCode,
        // 打开弹层时触发
        open() {
            this.$nextTick(() => {
                let { propertySubjectName, propertySubjectId } = this.itemDetail
                this.eventInfo = this.itemDetail
                this.$set(this.eventInfo, 'detail', { propertySubjectName, propertySubjectId })
            })
        },
        numChange() {
            let totle = this.eventInfo.num * this.eventInfo.price
            this.$set(this.eventInfo, 'totle', totle)
        },
        // 展示弹层
        showDialog(dialogName) {
            if (!dialogName) return
            if (dialogName === 'userChoice') {
                if (!this.eventInfo.teamId) {
                    this.$message.error('请先选择救援派遣队伍')
                } else {
                    this[dialogName + 'Dialog'] = true
                }
            } else {
                this[dialogName + 'Dialog'] = true
            }
        },
        handleRoadDamageSelect(detail) {
            this.eventInfo = { ...this.eventInfo, ...detail }
        },
        handleAppoint() {
            this.$refs.eventInfo.validate(async (valid, object) => {
                if (!valid) {
                    this.$message.warning(
                        `有${Object.keys(object).length
                        }个字段未通过校验，请正确填写表单内容。`
                    )
                } else {
                    this.$confirm('确认保存路损赔偿清单信息吗？', '提示', {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(async () => {
                        try {
                            this.$emit('sendData', this.eventInfo)
                            this.closed()
                        } finally {
                        }
                    })
                }
            })
        },
        // 关闭弹层触发
        closed() {
            const { orgData } = this
            // 重置data中的数据
            Object.assign(this.$data, this.$options.data.call(this), { orgData })
            this.$nextTick(() => {
                this.$refs.eventInfo?.clearValidate()
            })
            if (this.confirmCloseDialog) this.isShowDialog = false
        },
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/element-variables";

.el-icon-plus {
    cursor: pointer;
    display: block;
    height: 100%;
    font-size: 16px !important;
    font-weight: 900;
    color: #43a1ff;
}

.eventInfo-dialog {
    width: 100%;
    display: flex;
    flex-direction: column;
    column-gap: 16px;
    min-height: 50vh;

    .form-module {
        width: 100%;
        height: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        row-gap: 16px;
        background-color: $--system-module-color1;
        padding: 16px;
        box-sizing: border-box;
        border-radius: 8px;

        .el-form {
            height: calc(100% - 40px);
            overflow-y: scroll;

        }

        .content-bottom {
            display: flex;
            justify-content: flex-end;
            height: 40px;
        }

    }
}

::v-deep::-webkit-scrollbar-thumb,
::v-deep::-webkit-scrollbar {
    display: none;
}
</style>