<template>
  <a-collapse v-model:activeKey="activeKey" :accordion="false" class="ks-trees-collapse">
    <a-collapse-panel key="1" style="position: relative">
      <template #header>
        <a-flex>
          <span class="ks-model-builder-title-icon icon-model"></span>
          <span style="color: #82c4e9;font-size: 16px;">场景</span>
          <!--          <span style="position: absolute; right: 15px;"><PlusOutlined @click="$emit('create-tree')"/></span>-->
        </a-flex>
      </template>
      <div class="w-full" style="padding: 5px;">
        <a-flex>
          <a-input-search v-model:value="scenarioQuery.name" allowClear placeholder="场景名称" size="small" @search="loadTress" />
          <!--          <a-button size="small" style="margin-left: 10px;">-->
          <!--            <PlusOutlined style="margin-top: 0px;display: block;" @click="$emit('create-tree')" />-->
          <!--          </a-button>-->
        </a-flex>
      </div>
      <a-list :data-source="scenario || []" size="small" style="min-height: 25vh">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-flex>
              <a-tooltip placement="bottom">
                <template #title>
                  <p>名称: {{ item.name }}</p>
                  <p>说明: {{ item.description }}</p>
                </template>
                <span>{{ substring(item.name, 15) }}</span>
              </a-tooltip>
              <a-flex class="ks-tree-actions">
                <span style="margin-right: 10px" @click="()=> handleSelect(item)"><EditFilled /></span>
                <a-popconfirm
                  title="确定删除?"
                  @confirm="()=> handleDelete(item)"
                >
                  <span class="ks-tree-action ks-tree-action-delete"><DeleteOutlined /></span>
                </a-popconfirm>
              </a-flex>
            </a-flex>
          </a-list-item>
        </template>
      </a-list>
      <a-pagination
        v-model:current="scenarioQuery.pageNum"
        :page-size="scenarioQuery.pageSize"
        :total="totalTress"
        simple size="small" @change="handleChange" />
    </a-collapse-panel>
  </a-collapse>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { CheckOutlined, DeleteOutlined, EditFilled, PlusOutlined } from '@ant-design/icons-vue';
import type { Scenario, ScenarioRequest } from './types';
import { deleteOneScenarioById, findScenarioByQuery } from './api';
import { substring } from '@/utils/strings';

export default defineComponent({
  emits: ['select-tree', 'create-tree'],
  components: {
    CheckOutlined,
    PlusOutlined,
    DeleteOutlined,
    EditFilled,
  },
  setup(_props, { emit }) {
    const scenario = ref<Scenario[]>([]);
    const scenarioQuery = ref<Partial<ScenarioRequest>>({
      name: null,
      pageNum: 1,
      pageSize: 8,
    });
    const activeKey = ref<number>(1);
    const totalTress = ref<number>(0);

    const loadTress = () => {
      findScenarioByQuery(scenarioQuery.value).then(r => {
        scenario.value = r.rows;
        totalTress.value = r.total ?? 0;
      });
    };

    const handleChange = (page: number, pageSize: number) => {
      scenarioQuery.value.pageNum = page;
      scenarioQuery.value.pageSize = pageSize;
      loadTress();
    };

    const handleDelete = (item: Scenario) => {
      deleteOneScenarioById(item.id).then(r => {
        if (r.code === 200) {
          loadTress();
        }
      });
    };

    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
      },
    ];

    const handleSelect = (record: Scenario) => {
      emit('select', record);
    };

    const customRow = (record: Scenario) => {
      return {
        onClick: (event: any) => {
          emit('select', record, event);
        },
      };
    };

    const refresh = () => loadTress();

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

    return {
      refresh,
      totalTress,
      substring,
      activeKey,
      scenario,
      scenarioQuery,
      loadTress,
      columns,
      customRow,
      handleSelect,
      handleChange,
      handleDelete,
    };
  },
});


</script>