<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>

    <!-- 参数配置弹窗 -->
    <FormTableEdit width="680px" 
        v-if="formVisible" 
        :formTitle="cardTitle"
        :middleColumnItm="middleColumnItm"
        :defaultTableData="tableData"
        v-model:formVisible="formVisible"
        v-model:deleteFlag="deleteFlag"
        v-model:formDialogConfirmFlag="formDialogConfirmFlag"
        :startDragIndex="startDragIndex"
        :endDragIndex="endDragIndex"
        :disabledEditRowScene="disabledEditRowScene"
        :disabledDeleteRowScene="disabledDeleteRowScene"
        @editConfirm="HandleEditConfirm"
        @addConfirm="HandleAddConfirm"
        @deleteConfirm="HandleDeleteConfirm"
        @entiretyConfirm="HandleEntiretyConfirm">

        <template v-slot:[middleColumnItm?.name]="{row}">
            <!-- 地区管理的下拉为省份 -->
            <template v-if="middleColumnItm?.label == '省份'">
                <el-select v-model="row[middleColumnItm.name]" v-if="row.tmpId">
                    <el-option
                        label="输入框"
                        :value="1"
                    />
                    <el-option
                        label="单选"
                        :value="2"
                    />
                </el-select>
                <span v-else>{{ row?.[middleColumnItm?.name] }}</span>
            </template>
            <template v-else>
                <el-input v-model="row[middleColumnItm.name]" v-if="row.tmpId" placeholder="请输入内容" />
                <span v-else>{{ row?.[middleColumnItm?.name] }}</span>
            </template>
        </template>
    </FormTableEdit>
</template>


<script setup lang="ts">
import { ref,watch } from 'vue';
import FormTableEdit from '@/baseComponents/formTableEdit/index.vue';

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


/**
 * 1. 参数配置： 表单弹窗信息
 */

// 目前这两个还没有用到
const formVisible = ref(false)


const tableData = ref<any[]>([])  //表数据
const deleteFlag = ref('none')  // 当下 删除弹窗确认 是否成功的标识  // success | fail | none

const formDialogConfirmFlag = ref('none')

// 拖拽的 起始 和 终止 索引
const startDragIndex= ()=>{
   return props.middleColumnItm?.label == '跟进状态' ? 1 : 0
}
const endDragIndex = (realTableData)=>{
    return props.middleColumnItm?.label == '跟进状态' ? realTableData.length - 4 :realTableData.length - 1
}

// 表格的 禁止编辑条件 和 禁止删除条件
const disabledEditRowScene = (row,currentIndex,newTableData)=>{
    return false
}
const disabledDeleteRowScene = (row,currentIndex,newTableData)=>{
    return props.middleColumnItm?.label == '跟进状态' && 
            [1,newTableData.length, newTableData.length-1, newTableData.length-2].includes(currentIndex)
}

// 表格行 编辑确认
const HandleEditConfirm = (row,params)=>{
    console.log('')
    // row?.[props?.middleColumnItm?.name] =  editRes?.data?.[props?.middleColumnItm?.name]
    row.editFlag = ''
}
// 表格行 新增确认
const HandleAddConfirm = (row,params)=>{
    console.log('新增确认')
    // ElMessage.success(res.msg)
    // row.id = res?.data?.id
    // row?.[props?.middleColumnItm?.name] =  editRes?.data?.[props?.middleColumnItm?.name]
    row.tmpId = ''
}
// 表格行 删除确认
const HandleDeleteConfirm = (row)=>{
    console.log('删除确认')
    tableData.value = tableData.value.filter(item=>{
        return item.id !== row.id
    })
    deleteFlag.value = 'success'
}

// 表单整体确认
const HandleEntiretyConfirm = (params)=>{
    setTimeout(()=>{
        formDialogConfirmFlag.value = 'fail'
    },1000)
}

// 动态变更表数据
watch(()=>props.defaultTableData,(val)=>{
    tableData.value = JSON.parse(JSON.stringify(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;
    }
}
</style>