<template>
  <el-dialog
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    width="36%"
    title="配置字典"
    :model-value="dialogVisible"

    :before-close="handleClose"

  >
    <div class="add-div">
      <el-button type="info" @click="addTd">新增</el-button>
    </div>
    <my-table
      :page-size="4"

      :table-data="tableData"
      :headers="setDictionaryDialogTableHeader"


    >
      <template #[item.prop]="{data}" v-for="item in setDictionaryDialogTableHeader.filter(i => i.prop!=='operation')">
        <el-input v-if="data.isEdit" v-model="data[item.prop]"/>
        <span v-else>{{data[item.prop]}}</span>
      </template>
      <template #operation="{data,index}">
        <el-button circle :icon="Edit" @click="changeIsEdit(data)"></el-button>
        <el-button circle :icon="Delete" @click="delD(index)"></el-button>
      </template>
    </my-table>
    <template #footer>
      <el-button :icon="SuccessFilled" @click="editDataDictionary">确定</el-button>
      <el-button @click="handleClose" :icon="Close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {Close, Delete, Edit, SuccessFilled} from "@element-plus/icons-vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {onBeforeMount, ref} from "vue";
import {checkInfoDialogBaseForm} from "@/data/all-forms";
import MyTable from "@/components/common/MyTable.vue";
import {setDictionaryDialogTableHeader} from "@/data/all-table-header";
import {useRootStore} from "@/stores/useStore";
import {elAlert} from "@/unit/element-ui/tip";

export default {
  name: "DictionarySetingDetailDilog",
  components: {MyTable, DiyElForm},
  computed: {
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    },
    Close() {
      return Close
    },
    SuccessFilled() {
      return SuccessFilled
    }
  },
  props:{
    dialogVisible:{

    },

    currentOpObj:{

    }



  },
  setup(props,{emit}) {
   function delD(index){
     tableData.value.splice(index,1)
   }
    function addTd() {
      let obj = {}
      setDictionaryDialogTableHeader.filter(i => i.prop!=='operation').forEach(i => {
        obj[i.prop] = ''
        obj.isEdit = true
      })
      tableData.value.push(obj)

    }
    const tableData = ref([

    ])
    const form = ref({

    })

    function editDataDictionary(){
      let isHasNotSave = tableData.value.find(i => i.isEdit)
      if (isHasNotSave){
        elAlert('还未全部保存')
      }else if (!(tableData.value.length > 0)){
        elAlert('尚未保存关键字')
      }else {
        emit('editDictionary',tableData.value)
      }
    }
    const store = useRootStore()
    onBeforeMount(() => {

      tableData.value = store.paraArr.filter(i => i.PARA_CODE === props.currentOpObj.PARA_CODE)

    })
    function handleClose() {
      emit('update:dialogVisible',false)

    }
    function changeIsEdit(item) {
      item.isEdit = !item.isEdit
    }
    return {
      handleClose,
      form,
      checkInfoDialogBaseForm,
      tableData,
      setDictionaryDialogTableHeader,
      changeIsEdit,
      addTd,
      store,
      editDataDictionary,
      delD
    }
  }
}
</script>

<style scoped lang="scss">
.add-div{
  text-align: right;
}
.form-a{
  padding: 0 12%;
}

</style>
