<template>
  <CusDialog
    :show="show"
    :title="titleCpt"
    @onClose="$emit('update:show', false)"
    width="80%"
    height="80%"
    @onSubmit="onSubmit"
    :loading="state.loading"
  >
    <div class="__cus-dialog-form">
      <div style="margin-bottom: 10px; display: flex">
        <CusButton type="main" title="新增" @click="state.data.push({key: '', value: ''})"/>
      </div>
      <CusForm ref="ref_form" label-width="100px">
        <CusTable
          :data="state.data"
          :table-head="state.tableHead"
          :no-page="true"
        >
          <template #key-column-value="{scope}">
            <CusFormColumn
              class="__cus-table-form-column"
              required
              :span="24"
              v-model:param="scope.row.key"
            />
          </template>
          <template #value-column-value="{scope}">
            <CusFormColumn
              class="__cus-table-form-column"
              required
              :span="24"
              v-model:param="scope.row.value"
            />
          </template>
          <template #do-column-value="{scope}">
            <CusButton type="table-del" @click="state.data.splice(scope.$index, 1)"/>
          </template>
        </CusTable>
      </CusForm>
    </div>
  </CusDialog>
</template>

<script setup lang="ts">
import {computed, getCurrentInstance, nextTick, reactive, ref, watch} from "vue";
import {useDictionaryStore} from "@/stores";
import {ElMessage, ElMessageBox} from "element-plus";

const emit = defineEmits(['update:show', 'dict'])
const {proxy} = getCurrentInstance()
const DictionaryStore = useDictionaryStore()
const props = defineProps({
  show: {default: false},
  transfer: {}
 })
const state: any = reactive({
  tableHead: [
    {value: "key", label: "字典键值"},
    {value: "value", label: "字典名称"},
    {value: "do", label: "操作", width: 120, fixed: 'right'},
  ],
  data: []
})
const ref_form = ref()
const titleCpt = computed(() => {
  let t = '转换规则-字典值'
  return t
})
const onSubmit = () => {
  ref_form.value.submit().then(() => {
    const map = new Map()
    state.data.forEach(v => {
      map.set(v.key, v.value)
    })
    if (map.size < state.data.length) {
      ElMessage.error('字典键值不可重复！')
      return
    }
    ElMessageBox.confirm("是否提交?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    } as any).then(() => {
      emit('update:show', false)
      emit('dict', state.data)
      console.log(state.data)
    }).catch(() => {})
  }).catch((e) => {
    ElMessage({
      message: e[0].message,
      grouping: true,
      type: 'warning',
    })
  })
}
watch(() => props.show, (n) => {
  if (n) {
    try {
      state.data = typeof props.transfer.formatRule === 'object' ? [...props.transfer.formatRule] : (typeof props.transfer.formatRule === 'string' ? JSON.parse(props.transfer.formatRule) : [])
    } catch (e) {
      state.data = []
    }
    nextTick(() => {
      ref_form.value.reset()
    })
  }
})
</script>

<style lang="scss" scoped>
.__cus-dialog-form {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>