<template>
    <super-dialog v-bind="$attrs" v-model="isShowDialog" :width="width" :modal="false" :top="top" @open="open"
        @closed="closed" :title="'事件委派'">
        <div class="appoint-dialog" :style="{ height }">
            <div class="team-moudle">
                <el-row :gutter="24" style="display: flex; align-items: baseline;">
                    <el-col :span="12">
                        <span>*</span>派遣队伍：
                        <!-- <el-cascader ref="eventTeamIdCascader" v-model="teamInfo.teamId" :options="teamTreeData"
                    :props="{ emitPath: false, checkStrictly: true, label: 'name', value: 'id' }" clearable filterable
                    style="width: 30%" @change="teamIdChange" :show-all-levels="false"></el-cascader> -->
                        <el-select v-model="teamInfo.teamId" placeholder="请选择巡检队伍" filterable style="width: 60%">
                            <el-option v-for="item in teamOptions" :key="item.value" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="6">
                        是否生成救援单：
                        <el-radio-group v-model="generatedOrNot" size="medium">
                            <el-radio-button v-for="(item, index) in options" :key="index" :label="item.value">
                                {{ item.label }}
                            </el-radio-button>
                        </el-radio-group>
                    </el-col>
                </el-row>

            </div>
            <div class="table-module">
                <template>
                    <div class="rows">
                        <div class="rows-left">
                            <div class="rows-hr"></div>
                        </div>
                        <div class="rows-title">
                            <div class="text-overflow">救援单</div>
                        </div>
                    </div>
                    <el-table v-if="generatedOrNot" :data="rescueInfos" border style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                        :max-height="tableMaxHeight">
                        <el-table-column type="index" width="80">
                            <template #header>
                                <i class="el-icon-plus" @click="showDialog('rescueInfo')"></i>
                            </template>
                        </el-table-column>
                        <el-table-column prop="teamName" label="派遣队伍" width="180">
                        </el-table-column>
                        <el-table-column prop="rescueTime" label="报案时间" width="180">
                        </el-table-column>
                        <el-table-column prop="userName" label="派遣人员">
                        </el-table-column>
                        <el-table-column prop="rescueType" label="救援类型">
                            <template v-slot="{ row }">
                                {{ dictionaryEscape('jylx', row.rescueType + '') || '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="dispatchTime" label="操作">
                            <template v-slot="{ row, $index }">
                                <el-link :underline="false" type="primary"
                                    @click="showDialog('rescueInfo', row, $index)">
                                    编辑
                                </el-link>
                                <el-link :underline="false" type="danger" @click="deleteTableData($index)">
                                    删除
                                </el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div v-if="!generatedOrNot"
                        style="width: 100%;height: 30px; line-height: 30px; text-align: center; font-size: 13px; color: #c0c4cc;">
                        暂无救援单信息
                    </div>
                    <div class="content-bottom">
                        <el-button size="small" @click="isShowDialog = false">
                            取 消
                        </el-button>
                        <el-button size="small" type="primary" :loading="appointLoading" @click="handleAppoint">
                            确 定
                        </el-button>
                    </div>
                </template>
            </div>
        </div>
        <RescueInfoDialog :is-show.sync="rescueInfoDialog" :selected-content.sync="rescueInfos" v-bind="$attrs"
            @confirm="handleRescueSelect" :teamOptions="teamOptions" :rescueInfoDetail="rescueInfoDetail" />
    </super-dialog>
</template>

<script>
import moment from 'moment'
import SuperDialog from '@/components/SuperDialog/index.vue'
import RescueInfoDialog from './components/RescueInfoDialog'
import { dictionaryEscape } from '@/utils/dictionary'
import { orgTree } from '@/api/systemInterface'
import { eventAppoint } from '@/api/patrolAndRescue/commandDispatch/eventInquiry'
export default {
    name: 'SuperTableSelectorDialog',
    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
        },
        eventInfo: {
            default: () => { },
            type: Object
        },
        teamOptions: {
            default: () => [],
            type: Array
        },
        roadOptions: {
            default: () => [],
            type: Array
        }
    },
    components: {
        SuperDialog,
        RescueInfoDialog,
    },
    data() {
        return {
            rescueInfoDialog: false,
            initializeRendering: false, // 弹层内容初始化渲染
            tableMaxHeight: '600px',
            enhancedTableData: [], // 增强的表格数据（增加额外特性）
            teamTreeData: [],
            teamInfo: {
                teamId: '',
                teamFullId: ''
            },
            appointLoading: false,
            rescueInfos: [],
            rescueInfoDetail: {},
            options: [
                { label: '否', value: 0 },
                { label: '是', value: 1 },
            ],
            generatedOrNot: 0
        }
    },
    computed: {
        isShowDialog: {
            get() {
                return this.isShow
            },
            set(val) {
                this.$emit('update:isShow', val)
            }
        }
    },
    watch: {
    },
    methods: {
        dictionaryEscape,
        // 打开弹层时触发
        open() {
            // this.getTableData()
            // this.getOrgTreeData()
        },

        // 展示弹层
        showDialog(dialogName, row, index) {
            if (!dialogName) return
            if (row) {
                this.rescueInfoDetail = row
                this.rescueInfoDetail.type = 'edit'
                this.rescueInfoDetail.index = index
            } else {
                this.rescueInfoDetail = {}
                this.rescueInfoDetail.type = 'add'
            }
            this[dialogName + 'Dialog'] = true
        },
        handleAppoint() {
            if (this.teamInfo.teamId) {
                this.$confirm('确认委派吗？', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    this.appointLoading = true
                    let data = JSON.parse(JSON.stringify(this.eventInfo))
                    if (data.startPeg && data.startPegAdd) {
                        data.pegSVal = 'k' + (data.startPeg || '') + '+' + (data.startPegAdd || '')
                    }
                    if (data.endPeg && data.endPegAdd) {
                        data.pegEVal = 'k' + (data.endPeg || '') + '+' + (data.endPegAdd || '')
                    }
                    let roadInfo = this.roadOptions.find(item => item.id === data.roadId)
                    data.roadName = roadInfo.name
                    data.roadCode = roadInfo.code
                    data = { ...data, ...this.teamInfo }
                    data.rescueInfos = JSON.parse(JSON.stringify(this.rescueInfos))
                    data.eventTime = moment(data.eventTime).format('YYYY-MM-DD HH:mm:ss')
                    try {
                        let { state, message, value } = await eventAppoint({ ...data, ...data.road })
                        if (state) {
                            this.$message.success(`委派成功`)
                            this.$emit('offPage')
                        }
                    } finally {
                        this.appointLoading = false
                    }
                })
            }

            // this.$refs.addEditForm.validate(async (valid, object) => {
            //   if (!valid) {
            //     this.$message.warning(
            //       `有${Object.keys(object).length
            //       }个字段未通过校验，请正确填写表单内容。`
            //     )
            //   } else {
            //     this.$refs.rescueInfoDialog.open(this.addEditForm)
            //   }
            // })
        },
        handleRescueSelect(data) {
            if (data.type === 'edit') {
                this.rescueInfos.splice(data.index, 1, data)
            } else {
                let arrData = [...this.rescueInfos, data]
                this.$set(this, 'rescueInfos', arrData)
            }
        },
        deleteTableData(index) {
            this.$confirm('确认删除此条救援信息吗？', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.rescueInfos.splice(index, 1)
            })
        },
        // 关闭弹层触发
        closed() {
            const { orgData } = this
            // 重置data中的数据
            Object.assign(this.$data, this.$options.data.call(this), { orgData })
        },
    }
}
</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;
}

.appoint-dialog {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 16px;
    min-height: 50vh;

    .team-moudle {
        padding: 16px;
        background-color: $--system-module-color1;
        box-sizing: border-box;
        border-radius: 8px;
        color: #fff;

        span {
            color: #f56c6c;
            margin-right: 5px;
        }
    }

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

        .content-bottom {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
        }

        .rows {
            display: flex;
            align-items: center;
            border-bottom: 1px solid $--system-border-color2;
            padding: 10px 0;

            .rows-left {
                margin-right: 10px;

                .rows-hr {
                    width: 3px;
                    height: 18px;
                    background-color: $--system-border-color1;
                    border-radius: 2px;
                }
            }

            .rows-title {
                .text-overflow {
                    width: 100%;
                    font-size: 16px;
                    color: $--color-white;
                }
            }
        }
    }
}
</style>