<script setup lang="ts">
const dialogVisible = ref(false)

const openDialog = (tagsData: string[], selectedColumns: string[], slectedDataNumber: number) => {
  listData.value = tagsData
  selectedDataNumber.value = slectedDataNumber
  columns.value = selectedColumns
  dialogVisible.value = true
}

const isShowSelectColumn = ref(false)

const downloadFilter = ref(1)
const selectedDataNumber = ref(0)

const listData = ref()

const columns = ref()

const emits = defineEmits<{ export: [number] }>()
const handleDownload = () => {
  emits('export', downloadFilter.value)
}

const clearData = () => {
  isShowSelectColumn.value = false
  downloadFilter.value = 1
}
defineExpose({
  openDialog,
  handleDownload
})
</script>

<template>
  <div>
    <el-dialog @close="clearData" v-model="dialogVisible" title="Download File" width="480">
      <div class="download-dialog">
        <div class="select-data">
          <div style="display: inline-block">
            Select data on your shipment list：<span style="color: var(--color-theme)">{{
              selectedDataNumber
            }}</span>
          </div>
        </div>
        <div class="data-filter">
          <div class="filter-item" v-for="item in listData" :key="item">{{ item }}</div>
        </div>
        <div class="download-filter">
          <el-radio-group v-model="downloadFilter">
            <el-radio :value="1"
              >Download with selected columns
              <span class="column-number">{{ columns.length }}</span>
              <SeeAllIcon v-model="isShowSelectColumn" />
            </el-radio>
            <div
              v-if="isShowSelectColumn"
              class="select-columns"
              :class="{ show: isShowSelectColumn }"
            >
              <div class="title">Selected columns</div>
              <div class="content">
                <div class="column-item" v-for="item in columns" :key="item">{{ item }}</div>
              </div>
            </div>
            <el-radio :value="2">Download with all columns</el-radio>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="cancel-btn" type="default" @click="dialogVisible = false"
            >Cancel</el-button
          >
          <el-button class="download-btn el-button--dark" @click="handleDownload"
            ><span style="margin-right: 8px" class="font_family icon-icon_download_b"></span>
            Download</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.download-dialog {
  color: var(--color-neutral-1);
}

.select-data {
  font-weight: 700;
}

.data-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;

  .filter-item {
    height: 22px;
    padding: 0px 8px;
    background-color: #eceef0;
    border-radius: 12px;
    line-height: 22px;
    font-size: 12px;
  }
}

.download-filter {
  margin-top: 16px;

  .el-radio-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;

    .el-radio {
      height: auto;
      margin-top: 8px;
      align-items: center;
    }

    :deep(.el-radio__label) {
      margin-top: 2px;
      font-weight: 700;
      color: var(--color-neutral-1);
    }

    .column-number {
      padding: 3px 5px;
      background-color: var(--color-theme);
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
    }

    .see-all-btn {
      margin-left: 8px;
      color: var(--color-theme);
      font-size: 12px;
    }

    .select-columns {
      padding: 8px;
      margin-top: 8px;
      background-color: var(--color-header-bg);
      border-radius: 6px;
      overflow: hidden;

      &.show {
        max-height: 500px;
      }

      .title {
        font-size: 12px;
        font-weight: 700;
      }

      .content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 8px;
        gap: 8px;

        .column-item {
          height: 22px;
          padding: 0px 8px;
          background-color: #eceef0;
          line-height: 22px;
          border-radius: 12px;
          font-size: 12px;
        }
      }
    }
  }
}

.dialog-footer {
  .el-button {
    height: 40px;
  }

  .cancel-btn {
    width: 115px;
  }

  .download-btn {
    width: 136px;
  }
}
</style>
