<template>
  <BasicModal
    width="90%"
    v-bind="$attrs"
    @register="registerModal"
    :title="title"
    @ok="handleSubmit"
  >
    <template #footer>
      <a-button type="primary" @click="handleSubmit">关闭</a-button>
    </template>
    <div style="display: flex">
      <div class="w-2/5 xl:w-2/5">
        <Description size="middle" title="运行语句" :bordered="false" />
        <div :class="`${prefixCls}__content`">
          <List>
            <template v-for="item in cardList" :key="item.id">
              <List.Item class="list" @click="handleData(item)">
                <List.Item.Meta>
                  <template #title>
                    <Icon class="icon" v-if="item.icon" :icon="item.icon" :color="item.color" />
                    <span class="title">{{ item.title }}</span>
                  </template>
                  <template #description>
                    <div class="description">
                      {{ item.description }}
                    </div>
                    <div class="info">
                      <div><span>运行时间</span>{{ item.datetime }}</div>
                    </div>
                    <div class="progress">
                      <Progress :percent="item.percent" :color="item.color" status="active" />
                    </div>
                  </template>
                </List.Item.Meta>
              </List.Item>
            </template>
          </List>
        </div>
      </div>
      <div class="w-3/5 xl:w-3/5">
        <Description size="middle" title="执行结果" :bordered="false" />
        <BasicTable @register="registerTable" v-if="tableShow">
          <template #footer>
            <a-button type="primary" style="margin-right: 5px" @click="handleDownload"
              >保存结果</a-button
            >
            <a-button type="primary" style="margin-right: 5px" @click="handleView"
              >可视化分析</a-button
            >
          </template>
        </BasicTable>
      </div>
    </div>
    <viewModal @register="registerViewModal" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { BasicModal, useModal, useModalInner } from '@/components/Modal';
  import { Progress, List } from 'ant-design-vue';
  import { cardList, partitionData } from '../sqlDevelopmentData';
  import Icon from '@/components/Icon/Icon.vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { partitionColumns } from '../data';
  import { Description } from '@/components/Description';
  import { useMessage } from '@/hooks/web/useMessage';
  import viewModal from './resultViewModal.vue';

  const prefixCls = 'list-basic';

  defineOptions({ name: 'KnowledgeModal' });

  const emit = defineEmits(['success', 'register']);
  const title = ref();
  const tableShow = ref(true);
  const { createMessage } = useMessage();
  const [registerViewModal, { openModal: openViewModal }] = useModal();

  //初始化弹框
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false });
    title.value = data.title;
  });
  const [registerTable] = useTable({
    dataSource: partitionData,
    columns: partitionColumns,
    pagination: false,
    showIndexColumn: false,
    scroll: { y: 300 },
  });

  function handleData(item) {
    if (item.color === 'green') {
      tableShow.value = true;
    } else {
      tableShow.value = false;
    }
  }

  function handleDownload() {
    createMessage.success('下载成功');
  }

  function handleView() {
    openViewModal(true, {
      title: '可视化分析',
    });
  }
  async function handleSubmit() {
    closeModal();
  }
  onMounted(() => {});
</script>
<style lang="less" scoped>
  .list-basic {
    &__top {
      padding: 24px;
      background-color: @component-background;
      text-align: center;

      &-col {
        &:not(:last-child) {
          border-right: 1px dashed @border-color-base;
        }

        div {
          margin-bottom: 12px;
          color: @text-color-base;
          font-size: 14px;
          line-height: 22px;
        }

        p {
          margin: 0;
          color: @text-color-base;
          font-size: 24px;
          line-height: 32px;
        }
      }
    }

    &__content {
      margin-top: 12px;
      padding: 24px;
      background-color: @component-background;

      .list {
        position: relative;
      }

      .icon {
        font-size: 20px !important;
        margin-right: 10px;
        margin-top: 10px;
      }
      .extra {
        position: absolute;
        top: 20px;
        right: 15px;
        color: @primary-color;
        font-weight: normal;
        cursor: pointer;
      }

      .description {
        display: inline-block;
        width: 40%;
      }

      .info {
        display: inline-block;
        width: 30%;
        text-align: center;

        div {
          display: inline-block;
          padding: 0 20px;

          span {
            display: block;
          }
        }
      }

      .progress {
        display: inline-block;
        width: 15%;
        vertical-align: top;
      }
    }
  }
</style>
