<template>
    <div class="setting_card" >
        <div class="card_label">{{cardTitle}}</div>
        <div class="tag_container">
            <span class="tag_item" 
                v-for="(item, index) in cardItems" 
                :key="'region_' + index"
            >{{ item?.[middleColumnItm?.name] }}</span>
        </div>
        <span class="button_editor" @click="formVisible= true">编辑</span>
    </div>

    <!-- 参数配置弹窗 -->
    <FormDialog
        class="parameter_setting_form_dialog"
        v-if="formVisible"
        :defaultFormData="{}" 
        :visible="formVisible" 
        :title="cardTitle"
        :submitLoading="formSubmitLoading"
        @close="formVisible = false"
    >
        <template #form_pre>
            <div class="dictionary_box">
                <!-- v-model:tableRef="dictionaryTableDom" -->
                <Table
                    :tableColumns="finalTableColumns" 
                    :tableData="tableData"
                    :hidePagination="true">
                    <template #moveable="{row,currentIndex}">
                        <TableRowDragUpDown :currentIndex="currentIndex" :tableRow="row" :defaultTableData="tableData" @moveChange="HandleRowMove"/>
                    </template>

                    <template #num="{row,currentIndex}">
                        {{ currentIndex }}
                    </template>

                    <template v-slot:[middleColumnItm?.name]="{row}">
                        {{ row?.[middleColumnItm?.name] }}
                    </template>

                    
                    <template #dictName="{row}">
                        <el-input v-model="row.dictName" v-if="row.tmpId" placeholder="请输入选项内容"></el-input>
                        <span v-else>{{  row.dictName }}</span>
                    </template>
                    
                    <template #dictType="{row}">
                        <el-select v-model="row.dictType" v-if="row.tmpId" @change="(val)=>HandleRowTypeChange(row,val)">
                            <el-option
                                label="输入框"
                                :value="1"
                            />
                            <el-option
                                label="单选"
                                :value="2"
                            />
                        </el-select>
                        <span v-else>{{  DictTypeNumToName(row.dictType) }}</span>
                    </template>


                    <template #operation="{row}">
                        <div class="table_row_option">
                            <span :class="row.defaultStatus ? 'el_button_editor' : 'editor_disable'" @click="row.defaultStatus ? HandleDictionaryEditOrSave(row) : ''">{{row.tmpId ? '保存' : '编辑'}}</span>
                            <span v-if="row.tmpId" class="el_button_editor" @click="HandleDictionaryCancel(row)">取消</span>
                            <span v-else :class="row.defaultStatus ? 'el_button_delete' : 'editor_disable'" @click="row.defaultStatus ? HandleDictionaryDelete(row) : ''">删除</span>
                        </div>
                    </template>
                </Table>
                <div class="add_option" @click="HandleAddDictionary"> 
                    <el-icon><CloseBold /></el-icon>
                    <span>增加选项配置</span>
                </div>
            </div>
        </template>
    </FormDialog>
</template>


<script setup lang="ts">
import { ref,watch } from 'vue';
import FormDialog from '@/baseComponents/FormDialog.vue';
import Table from '@/baseComponents/Table.vue';
import TableRowDragUpDown from '@/baseComponents/TableRowDragUpDown.vue';

import {tableColumns} from './table'

const props = defineProps({
    cardItems:{
        type:Array,
        detault:()=>[]
    },
    cardTitle:{
        type:String,
        default:''
    },
    middleColumnItm:{
        type:Object
    },
    defaultTableData:{
        type:Array,
        default:()=>[]
    },
})

const formVisible = defineModel('formVisible')
const formSubmitLoading = ref(false)
const finalTableColumns = ref([...tableColumns.value])  //最终渲染的表头
const tableData = ref([])  //表数据



// 处理表行的上下移动
const HandleRowMove = (val)=>{
    tableData.value = val
}

// 动态变更最终表列
watch(()=>props.middleColumnItm,(newVal)=>{
    if(newVal){
       finalTableColumns.value = tableColumns.value.map((item,index)=>{
        if(index == 2){
            return [
                {
                    name:props.middleColumnItm?.name,
                    label:props.middleColumnItm?.label,
                    width:'100',
                    fixed:'',
                    align:'center',
                    minWdth:'',
                    custom:true,
                },
                item
            ]
        }
        return item
       }).flat()
    }
},{immediate:true,deep:true})


// 动态变更表数据
watch(()=>props.defaultTableData,(val)=>{
    tableData.value = val || []
},{immediate:true,deep:true})
</script>


<style lang="scss" scoped>
.setting_card {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    border-radius: 10px;
    padding: 16px;
    border: 1px solid #E4E7ED;
    font-size: 14px;

    .card_label {
        width: 56px;
        height: 32px;
        line-height: 32px;
        color: #333;
    }

    .tag_container {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

        .tag_item {
            height: 32px;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #DCDFE6;
            padding: 6px 12px;
            color: #666;
        }
    }

    .button_editor{
        height: 32px;
        color: #2E64FA;
        line-height: 32px;
        cursor: pointer;
    }
}

.dictionary_box{
    width:100%;
    height: 480px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap:10px;
    :deep(.page_table){
        overflow: auto;
    }

    .add_option{
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap:8px;
        background-color: rgba(46, 100, 250,0.1);
        color:#2E64FA;
        padding:4px auto;
        text-align: center;
        border-radius: 6px;

        :deep(.el-icon){
            transform: rotate(45deg);
        }
    }

}

.parameter_setting_form_dialog{
     :deep(.el-dialog){
        margin:0 !important;
        top: 50% !important;
        left: 50% !important; /* 若需水平居中可加上此行 */
        transform: translate(-50%, -50%); /* 核心：基于自身宽高反向偏移 */
    }
    :deep(.el-dialog__body){
        min-height: 500px !important;
        max-height: 500px !important;
    }
}

</style>