<template>   
    <mdp-meta-option :item="item"  @row-click="onRowClick" :simple="true">
        <template #title>
            <el-button @click="openEditForm" v-if="item?.id" type="primary" icon="edit" plain/>
            <el-text type="warning" v-if="item?.itemCode">{{ item?.itemName||itemCode }}</el-text> 
            <el-alert v-else type="warning">当前无字典，请先创建字典 </el-alert>
            <el-button @click="openAddForm" v-if="!item?.id" type="primary" icon="plus"/>
        </template>
    </mdp-meta-option>
        
    <mdp-dialog fullscreen ref="metaForm">
        <template #default="{data,visible}">
            <MdpMetaForm :formData="data.formData" :subOpType="data.subOpType" :visible="visible" @submit="afterFormSubmit" @fields-change="onFieldsChange"/>
        </template>
    </mdp-dialog>
</template>

<script>  
import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user' 

export default {
    name:'MdpDictOptions', 
    computed: {
        ...mapState(useUserStore,['userInfo'])
    },
    props:{
       itemCode:{
        type: String,
        default: '',
       }
    },
    watch:{
        itemCode(){
            this.getItem()
        }
    },
    data() {
        return {
            load:{list:false},
            item:null,
        }
    },
    methods: {
          onRowClick(row){
          },
          createDict(){
            
          },
          getItem(){
            if(!this.itemCode){
                this.item=null;
                return;
            }
            this.load.list=true;
            this.$mdp.listItem({itemCode:this.itemCode}).then(res=>{  
                this.load.list=false;
                if(res?.data?.length>0){
                    this.item=res.data[0]
                }else{
                    this.item=null
                }
                
            })
          },
          afterFormSubmit(data){
            this.getItem();
          },
          openAddForm(){
            let formData={id:this.itemCode,itemCode:this.itemCode,categoryId:'all'}
            this.$refs['metaForm'].open({formData:formData,subOpType:'add'})
          },
          openEditForm(){
            let formData=this.item
            this.$refs['metaForm'].open({formData:formData,subOpType:'edit'})
          },
          onFieldsChange(){
            this.getItem();
          }
           
    },
    mounted() {
        this.getItem()
    }
}

</script>

<style scoped>

</style>