<template>
  <Tooltip placement="top">
    <template #title>
      <span>{{ $t('component.table.settingOrder') }}</span>
    </template>
    <Popover placement="bottomLeft" trigger="click" v-model:visible="visible">
      <template #content>
        <Form :model="form" name="basic" :label-col="{ span: 8 }" autocomplete="off">
          <FormItem
v-for="(item, index) in tableOrderParama" :key="index" :label="item.FieldName"
            :name="item.FieldName">
            <RadioGroup v-model:value="form[item.OrderByFieldName]" :options="plainOptions" />
          </FormItem>
          <FormItem>
            <Checkbox v-model:checked="union">{{ $t('component.table.union') }}</Checkbox>
            <Button size="small" @click="handleConfirm">{{ $t('component.table.confirm') }}</Button>
            <Button size="small" @click="handleCancel">{{ $t('component.table.cancel') }}</Button>
          </FormItem>
        </Form>
      </template>
      <i class="icon-random" :title="$t('component.table.union')" v-if="union == true" style="color: #555555;"></i>
      <i class="icon-sort" :title="$t('component.table.union')" v-if="union == false" style="color: #555555;"></i>
    </Popover>
  </Tooltip>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, reactive } from "vue"
import { Tooltip, Popover, Form, FormItem, RadioGroup, Checkbox, Button } from 'ant-design-vue';
import { useTableContext } from '../../hooks/useTableContext';
import type { orderParamaItem } from "../../types/"
import { cloneDeep } from 'lodash-es';
import { useI18n } from 'vue-i18n';
import "../../../../../../public/lt-ext/theme/index.js"


const table = useTableContext();
const defaultOrderParama = cloneDeep<orderParamaItem[]>(table.OrderParam);
let tableOrderParama = ref<orderParamaItem[]>([]);

const emit = defineEmits(["unionChange", "orderConfirm", "orderCancel"])
const union = ref(false)
const form = reactive({})

const visible = ref<boolean>(false);

const { t } = useI18n();
watch(union, (val) => {
  emit('unionChange', val)
});

onMounted(() => {
  _InitData()
})

const _InitData = function () {
  //将父组件传递进来的数据进行初始化
  tableOrderParama.value = cloneDeep(defaultOrderParama) //先将父组件的数值取过来
  for (let i = 0; i < table.columns.length; i++) {
    for (let j = 0; j < tableOrderParama.value.length; j++) {
      if (tableOrderParama.value[j].OrderByFieldName == table.columns[i].dataIndex) {
        if (!tableOrderParama.value[j].FieldName) {
          //如果没有配置的话，则从列文件中查找
          //@ts-ignore
          tableOrderParama.value[j].FieldName = table.columns[i].title
        }
        //初始化原始查询方式
        form[tableOrderParama.value[j].OrderByFieldName] = tableOrderParama.value[j].OrderType
      }
    }
  }
}

const plainOptions = [
  { label: t('component.table.Ascending'), value: 'Ascending' },
  { label: t('component.table.Descending'), value: 'Descending' },
]

const handleConfirm = function () {
  emit("orderConfirm", form, union);
  emit("orderCancel", 1);
  visible.value = false
}
const handleCancel = function () {
  _InitData();
  union.value = false;
  emit("orderCancel", 1);
  visible.value = false
}

</script>
