<template>
  <a-modal
    :width="1200"
    v-model:visible="show"
    title="表格列宽度设置"
    :maskClosable="false"
    @cancel="handleClose"
    @ok="handleSubmit"
    :bodyStyle="{ padding: '0 10px 10px' }"
  >
    <a-table :dataSource="datas" :columns="Columns" :pagination="false">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'width'">
          {{ t('列宽度') }}
          <span style="font-size: 12px; color: orange"
            >({{ t('可拖动调整时列宽必须是number类型') }})</span
          >
        </template>
        <template v-if="column.key === 'minWidth'">
          {{ t('拖动列最小宽度') }}
          <span style="font-size: 12px; color: orange"
            >({{ t('拖动列最小宽度须小于拖动列最大宽度') }})</span
          >
        </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <div>{{ record.name }}</div>
        </template>
        <template v-else-if="column.key === 'resizable'">
          <a-switch v-model:checked="record.resizable" />
        </template>
        <template v-else-if="column.key === 'isEdit'">
          <a-switch v-model:checked="record.isEdit" />
        </template>
        <template v-else-if="column.key === 'minWidth'">
          <a-input-number
            :min="0"
            v-model:value="record.minWidth"
            :placeholder="t('请填写最小宽度')"
            :disabled="!record.resizable"
            style="width: 100%"
            @blur="
              () => {
                if (
                  record.resizable &&
                  record.minWidth > record.maxWidth &&
                  record.minWidth !== '' &&
                  record.minWidth !== null &&
                  record.maxWidth !== '' &&
                  record.maxWidth !== null
                ) {
                  record.minWidth = record.maxWidth;
                }
              }
            "
          />
        </template>
        <template v-else-if="column.key === 'maxWidth'">
          <a-input-number
            :min="0"
            v-model:value="record.maxWidth"
            :placeholder="t('请填写最大宽度')"
            :disabled="!record.resizable"
            style="width: 100%"
            @blur="
              () => {
                if (
                  record.resizable &&
                  record.maxWidth < record.minWidth &&
                  record.maxWidth !== '' &&
                  record.maxWidth !== null
                ) {
                  record.maxWidth = record.minWidth;
                }
              }
            "
          />
        </template>
        <template v-else-if="column.key === 'width'">
          <a-input-group compact>
            <a-input-number
              :min="0"
              v-model:value="record.width"
              :placeholder="t('请填写列宽度')"
              style="width: calc(100% - 80px)"
            />
            <a-select
              v-if="!record.resizable"
              v-model:value="record.unit"
              style="width: 80px"
              allowClear
            >
              <a-select-option value="px">px</a-select-option>
              <a-select-option value="%">%</a-select-option>
            </a-select>
          </a-input-group>
        </template>
      </template>
    </a-table>
  </a-modal>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { ColumnProps } from 'ant-design-vue/lib/table/Column';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { cloneDeep } from 'lodash-es';

  const { t } = useI18n();
  const props = defineProps({
    dataSource: { type: Array as any },
    visible: Boolean,
    widths: { type: Array as any },
    type: String,
  });
  const emit = defineEmits(['update:widths', 'update:visible']);

  const datas = ref<any>([]);
  const show = ref<boolean>(props.visible);
  const Columns = ref<ColumnProps[]>([
    {
      title: t('列名称'),
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: 150,
    },
    {
      title: t('是否可拖动调整宽度'),
      dataIndex: 'resizable',
      key: 'resizable',
      align: 'center',
      width: 180,
    },
    {
      title: t('拖动列最大宽度'),
      dataIndex: 'maxWidth',
      key: 'maxWidth',
      width: 200,
    },
    {
      title: t('拖动列最小宽度'),
      dataIndex: 'minWidth',
      key: 'minWidth',
      width: 250,
    },
    {
      title: t('列宽度'),
      dataIndex: 'width',
      key: 'width',
    },
    {
      title: t('是否禁用编辑'),
      dataIndex: 'isEdit',
      key: 'isEdit',
      width: 150,
      align: 'center',
    },
  ]);
  onMounted(() => {
    let clonedata = cloneDeep(props.widths || []);
    datas.value = [];
    props.dataSource.forEach((o) => {
      if (o.type !== 'sun-form') {
        let obj = {
          key: props.type == 'form' || props.type == 'sun-form' ? o.key : o,
          name: props.type == 'form' || props.type == 'sun-form' ? o.label : o,
          bindField: props.type == 'form' || props.type == 'sun-form' ? o.bindField : o,
          width: null,
          minWidth: null,
          maxWidth: null,
          resizable: false,
          unit: null,
          isEdit: false,
        };
        let idx = clonedata.findIndex(
          (k) => k.key == (props.type == 'form' || props.type == 'sun-form' ? o.key : o),
        );
        if (idx >= 0) {
          obj.width = clonedata[idx].width;
          obj.minWidth = clonedata[idx].minWidth;
          obj.maxWidth = clonedata[idx].maxWidth;
          obj.resizable = clonedata[idx].resizable;
          obj.unit = clonedata[idx].unit;
          obj.isEdit = clonedata[idx].isEdit;
        }
        datas.value.push(obj);
      }
    });
  });
  function handleSubmit() {
    emit('update:widths', datas.value);
    emit('update:visible', false);
  }

  function handleClose() {
    emit('update:visible', false);
  }
</script>
