<template>
  <div class="table-header">
    <div>
      <InputSearch v-model:value="searchValue" placeholder="请输入名称" @search="handleSearch" allowClear />
    </div>
    <div>
      <PermissionButton
        type="primary"
        key="add"
        @click="handleAddClick"
        :tooltip="{
          title: operateLimits('add', type) ? '当前的存储方式不支持新增' : '新增'
        }"
      >
        <template #icon>
          <AIcon type="PlusOutlined" />
        </template>
        新增
      </PermissionButton>
      <Edit v-if="metadataStore.model.edit" :type="target" :tabs="type" @refresh="refreshMetadata" />
    </div>
  </div>
  <Table :loading="loading" :data-source="data" :columns="columns" row-key="id" model="TABLE" size="small" :pagination="pagination">
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'id'">
        <div style="width: 100px"
          ><Ellipsis>{{ record.id || '-' }}</Ellipsis></div
        >
      </template>
      <template v-if="column.dataIndex === 'name'">
        <div style="width: 200px"
          ><Ellipsis>{{ record.name || '-' }}</Ellipsis></div
        >
      </template>
      <template v-if="column.dataIndex === 'description'">
        <div style="width: 200px"
          ><Ellipsis>{{ record.description || '-' }}</Ellipsis></div
        >
      </template>
      <template v-if="column.dataIndex === 'level'">
        {{ levelMap[record.expands?.level] || '-' }}
      </template>
      <template v-if="column.dataIndex === 'async'">
        {{ record.async ? '是' : '否' }}
      </template>
      <template v-if="column.dataIndex === 'valueType'">
        {{ record.valueType?.type }}
      </template>
      <template v-if="column.dataIndex === 'source'">
        {{ sourceMap[record.expands?.source] }}
      </template>
      <template v-if="column.dataIndex === 'type'">
        <Tag v-for="item in record.expands?.type || []" :key="item">
          {{ expandsType[item] }}
        </Tag>
      </template>
      <template v-if="column.dataIndex === 'action'">
        <Space>
          <PermissionButton
            type="link"
            key="edit"
            style="padding: 0"
            :disabled="operateLimits('updata', type)"
            @click="handleEditClick(record)"
            :tooltip="{
              title: operateLimits('updata', type) ? '当前的存储方式不支持编辑' : '编辑'
            }"
          >
            <AIcon type="EditOutlined" />
          </PermissionButton>
          <PermissionButton
            type="link"
            key="delete"
            style="padding: 0"
            danger
            :pop-confirm="{
              title: '确认删除？',
              onConfirm: async () => {
                await removeItem(record);
              }
            }"
            :tooltip="{
              title: '删除'
            }"
          >
            <AIcon type="DeleteOutlined" />
          </PermissionButton>
        </Space>
      </template>
    </template>
  </Table>
</template>
<script setup lang="ts" name="BaseMetadata">
  import { ref, computed, watch } from 'vue';
  import type { MetadataItem, MetadataType } from '../../../Product/typings';
  import MetadataMapping from './columns';
  import { useInstanceStore, useProductStore, useMetadataStore } from '@jdlinker/func';
  import { TablePaginationConfig, message } from 'ant-design-vue/es';
  import { asyncUpdateMetadata, removeMetadata } from '../metadata';
  import Edit from './Edit/index.vue';
  import { ColumnProps } from 'ant-design-vue/es/table';
  import { PermissionButton } from '@jdlinker/ui';
  import {
    InputSearch,
    Tag,
    Ellipsis,
    Space,
    Table,
    AIcon
  } from 'linker-ui-components';

  interface Props {
    type: MetadataType;
    target: 'product' | 'device';
    permission: string | string[];
  }
  const props = defineProps<Props>();
  const instanceStore = useInstanceStore();
  const productStore = useProductStore();

  const loading = ref(false);
  const data = ref<MetadataItem[]>([]);
  const { type, target = 'product' } = props;
  const levelMap = ref({
    ordinary: '普通',
    warn: '警告',
    urgent: '紧急'
  });
  const sourceMap = ref({
    device: '设备',
    manual: '手动',
    rule: '规则'
  });
  const expandsType = ref({
    read: '读',
    write: '写',
    report: '上报'
  });
  const actions: ColumnProps[] = [
    {
      title: '操作',
      align: 'left',
      width: 80,
      dataIndex: 'action'
    }
  ];
  const pagination = {
    showTotal: (num: number, range: number[]) => {
      return `第 ${range[0]} - ${range[1]} 条/总共 ${num} 条`;
    },
    showSizeChanger: true,
    showQuickJumper: false,
    defaultPageSize: 10,
    size: 'small'
  } as TablePaginationConfig;
  const columns = computed(() => MetadataMapping.get(type)!.concat(actions));
  const items = computed(() => JSON.parse((target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata) || '{}'));
  const searchValue = ref<string>();
  const handleSearch = (searchValue: string) => {
    if (searchValue) {
      const arr = items.value[type]
        .filter((item: MetadataItem) => item.name!.indexOf(searchValue) > -1)
        .sort((a: MetadataItem, b: MetadataItem) => b?.sortsIndex - a?.sortsIndex);
      data.value = arr;
    } else {
      data.value = items.value[type];
    }
  };

  const refreshMetadata = () => {
    loading.value = true;
    const result = target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata;
    const item = JSON.parse(result || '{}') as MetadataItem[];
    data.value = item[type]?.sort((a: any, b: any) => b?.sortsIndex - a?.sortsIndex);
    loading.value = false;
  };
  watch(
    () => props.type,
    () => {
      refreshMetadata();
    },
    { immediate: true }
  );

  const metadataStore = useMetadataStore();
  watch(
    () => metadataStore.model.importMetadata,
    (val: boolean) => {
      if (!!val) {
        refreshMetadata();
        metadataStore.set('importMetadata', false);
      }
    }
  );
  const handleAddClick = () => {
    metadataStore.set('edit', true);
    metadataStore.set('item', undefined);
    metadataStore.set('type', type);
    metadataStore.set('action', 'add');
    if (props.target === 'device' && !instanceStore.detail?.independentMetadata) {
      message.warning('修改物模型后会脱离产品物模型');
    }
  };

  const limitsMap = new Map<string, any>();
  limitsMap.set('events-add', 'eventNotInsertable');
  limitsMap.set('events-updata', 'eventNotModifiable');
  limitsMap.set('properties-add', 'propertyNotInsertable');
  limitsMap.set('properties-updata', 'propertyNotModifiable');
  const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
    return (
      target === 'device' &&
      (instanceStore.detail.features || []).find((item: { id: string; name: string }) => item.id === limitsMap.get(`${types}-${action}`))
    );
  };

  const handleEditClick = (record: MetadataItem) => {
    metadataStore.model.edit = true;
    metadataStore.model.item = record;
    metadataStore.model.type = type;
    metadataStore.model.action = 'edit';
    if (props.target === 'device' && !instanceStore.detail?.independentMetadata) {
      message.warning('修改物模型后会脱离产品物模型');
    }
  };

  const resetMetadata = async () => {
    if (target === 'device') {
      await instanceStore.refresh(instanceStore.current?.id);
    } else {
      await productStore.getDetail(productStore.current?.id);
    }
    metadataStore.set('importMetadata', true);
  };

  const removeItem = async (record: MetadataItem) => {
    console.log('removeItem', target, productStore);
    const _currentData = removeMetadata(type, [record], target === 'device' ? instanceStore.current : productStore.current);
    const result = await asyncUpdateMetadata(target, _currentData);
    if (result.code === 200) {
      message.success('操作成功！');
      // Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
      metadataStore.model.edit = false;
      metadataStore.model.item = {};
      resetMetadata();
    } else {
      message.error('操作失败！');
    }
  };
</script>
<style scoped lang="less">
  .table-header {
    display: flex;
    justify-content: space-between;
    padding: 16px;
  }
</style>
