<template>
  <div class="table-content">
    <!-- 采用的原生表格 -->
    <table align="center">
      <thead>
        <tr>
          <th v-for="item in editCellTableTHeadConfig" :key="item">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableArray.content" :key="index">
          <td>
            {{ index + 1 }}
          </td>
          <td style="width: 12vw">
            <Select
              v-model:value="item.key"
              placeholder="请选择"
              :options="selectOptions"
              @change="handleChange"
              @dropdownVisibleChange="hanldeDropdownVisibleChange"
              allowClear
            />
          </td>
          <td>
            <div v-if="item.key === 'date_range'">
              <div class="flex">
                <a-input placeholder="请输入" v-model:value="item.date1" />
                <span>~</span>
                <a-input placeholder="请输入" v-model:value="item.date2" />
              </div>
              <div class="flex mt-2">
                <a-checkbox @change="onHandleCheck" v-model:checked="mores">更多选项</a-checkbox>
                <span v-if="mores">{{ `聚合方式：agg` }}</span>
              </div>
            </div>
            <div v-else>
              <a-input
                :disabled="item.editDisabled"
                placeholder="请输入"
                v-model:value="item.value"
              />
            </div>
          </td>
          <td>
            <a-switch v-model:checked="item.required" />
          </td>
          <td>
            <div>
              <Button type="dashed" @click="add(item, index)">
                <template #icon><PlusOutlined /></template
              ></Button>
              <Button type="dashed" class="ml-1" @click="remove(item, index)">
                <template #icon> <MinusOutlined /></template>
              </Button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts" setup name="editCellTable">
  import { reactive, ref, onMounted, nextTick } from 'vue';
  import { Select, Button } from 'ant-design-vue';
  import { findDictItemByCode } from '/@/api/system/dict';
  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
  import { editCellTableTHeadConfig } from '../../../config/config';
  import { selectType, tableItems } from '../../../config/types';
  import { useUtils } from '../../../hooks/useUtils';

  const { ParamsFuncValue } = useUtils();

  const selectOptions = ref<selectType[]>([]);

  const mores = ref(false);

  const onHandleCheck = ({ target }) => {
    mores.value = target?.checked;
  };

  onMounted(() => {
    getSelectOptions();
  });

  const getSelectOptions = async () => {
    const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' });
    selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
    selectOptions.value.push({
      label: '自定义',
      value: 'scope',
    });
  };

  const tableArray = reactive<{
    content: tableItems[];
  }>({
    content: [
      {
        key: undefined,
        value: '',
        editDisabled: false,
        required: false,
        date1: '',
        date2: '',
      },
    ],
  });

  const add = (_, index: number) => {
    tableArray.content.splice(index + 1, 0, {
      key: undefined,
      value: '',
      editDisabled: false,
      required: false,
      date1: '',
      date2: '',
    });
  };

  const remove = (item, index: number) => {
    if (tableArray.content.length > 1) {
      selectOptions.value.forEach((ele) => {
        if (ele.value == item.key) {
          ele.disabled = false;
        }
      });
      tableArray.content.splice(index, 1);
    } else {
      resetValue();
    }
  };

  //Select互斥
  const handleChange = () => {
    selectOptions.value.forEach((ele) => {
      ele.disabled = false;
      tableArray.content.forEach((element) => {
        if (element.key === 'scope') {
          element.editDisabled = false;
        } else {
          element.value = '';
          element.editDisabled = true;
        }
        if (element.key === ele.value && element.key !== 'scope') {
          ele.disabled = true;
        }
      });
    });
  };

  //fix 解决编辑回显下拉框已选择应禁用问题
  const hanldeDropdownVisibleChange = () => handleChange();

  const commonHandleChange = (tableArray) => {
    nextTick(() => {
      tableArray.forEach(() => {
        handleChange();
      });
    });
  };

  //获取数据
  const getValue = () => {
    const paramsFuncValue = new ParamsFuncValue(tableArray.content as any, mores.value);
    return paramsFuncValue.get();
  };

  //设置数据
  const setValue = async (data) => {
    await nextTick();
    let assemblyData = data.map((it) => {
      return {
        key: it.key,
        value: it.value,
        editDisabled: it.editDisabled,
        required: it.required,
        date1: it.key === 'date_range' ? it.value?.split(',')?.at(-2) : '',
        date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '',
      };
    });
    const findIsDateRange = data.find((it) => it?.mores === true);
    if (findIsDateRange?.mores) {
      mores.value = findIsDateRange?.mores;
    } else {
      assemblyData = assemblyData.filter((item) => item?.mores == false || !item?.mores);
    }
    tableArray.content = assemblyData;
    commonHandleChange(tableArray.content);
  };

  //重置数据
  const resetValue = () => {
    mores.value = false;
    tableArray.content = [];
    tableArray.content.push({
      key: undefined,
      value: '',
      editDisabled: false,
      required: false,
      date1: '',
      date2: '',
    });
    commonHandleChange(tableArray.content);
  };
  defineExpose({
    getValue,
    setValue,
    resetValue,
  });
</script>

<style scoped lang="less">
  @import '../common/commonTable.less';
</style>