<template>
  <div class="countrybill-wrapper">
    <div class="header-box">
      <div class="header-top">
        <SelectBox :placeholder-name="areaPlaceHolder" select-title="科技领域" :select-list="areaList"
          :select-name="selectedArea" @update:select-text="handleSelectArea" />
        <SelectBox :placeholder-name="DatePlaceHolder" select-title="提出时间" :select-list="dateList"
          :select-name="selectedDate" :custom-time="customTime" @update:select-text="handleSelectDate"
          @update:custom-time="handleCustomDate" />
        <SelectBox v-if="isFolderAll" :placeholder-name="partyPlaceHolder" select-title="所属党派" :select-list="partyList"
          :select-name="selectedParty" @update:select-text="handleSelectArea" />
        <SelectBox v-if="isFolderAll" :placeholder-name="congressPlaceHolder" select-title="提出议院" :select-list="congressList"
          :select-name="selectedCongress" @update:select-text="handleSelectArea" />
        <SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="委员会" :select-list="areaList"
          :select-name="selectedArea" @update:select-text="handleSelectArea" />
        <SelectBox v-if="isFolderAll" :placeholder-name="areaPlaceHolder" select-title="提出议员" :select-list="areaList"
          :select-name="selectedArea" @update:select-text="handleSelectArea" />
        <SelectBox v-if="isFolderAll" :placeholder-name="statusPlaceHolder" select-title="所处阶段" :select-list="statusList"
          :select-name="selectedStauts" @update:select-text="handleSelectArea" />
      </div>
      <div class="header-footer">
        <div class="header-footer-left">
          <ActiveTag v-for="tag, index in activeTagList" :key="index" :tagName="tag.name"
            @close="handleCloseCurTag(tag, index)" />
        </div>
        <div class="header-footer-right">
          <HeaderBtnBox :isShowAll="isFolderAll" @show-all="handleSwitchFolderAll" />
        </div>
      </div>
    </div>
    <div class="chart-main-box" v-if="isShowChart">
      <div class="info-box">
        <div class="switch-box" @click="handleSwitchChartData">
          <img src="@/views/dataLibrary/assets/icons/chart-active.svg" alt="">
        </div>
        <div class="num-box text-title-3-bold">
          {{ `共 ${totalNum} 条数据` }}
        </div>
      </div>
      <div class="content-box">
        <div class="content-header">
          <ChartHeader :list="staticsDemensionList" @clickItem="handleClickDemensionItem">
            <template #chart-header-right>
              <el-select v-model="selectedTime" placeholder="选择时间" style="width: 150px"
                v-show="curDemension === '提案时间'">
                <el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>

            </template>
          </ChartHeader>
        </div>
        <div class="content-main">
          <ChartContainer chartTitle="美国会法案提出数量随时间变化趋势" :chartTypeList="curChartTypeList"
            @clickChartItem="handleSwitchActiveChart">
            <template #chart-box>
              <LineChart v-if="activeChart === '折线图'" :lineChartData="lineChartData" />
              <PieChart v-if="activeChart === '饼状图'" :pieChartData="pieChartData" />
              <BarChart v-if="activeChart === '柱状图'" :barChartData="barChartData" />
              <RaderChart v-if="activeChart === '雷达图'" :radarChartData="radarChartData" />
            </template>
          </ChartContainer>

        </div>
      </div>
    </div>
    <div class="data-main-box" v-else>
      <div class="data-main-box-header">
        <div class="switch-box" @click="handleSwitchChartData">
          <img src="@/views/dataLibrary/assets/icons/data-active.svg" alt="">
        </div>
        <div class="num-box text-title-3-bold">
          {{ `共 ${totalNum} 条数据` }}
        </div>
      </div>
      <div class="data-main-box-main">
        <div class="data-main-box-main-header">
          <div class="header-left">
            <div class="header-left-item1">
              <el-checkbox v-model="isSelectedAll" label="全选" @change="handleSelectAllChange" size="large" />
            </div>
            <div class="header-left-item2 text-tip-1">{{ `已选择${selectedCount}项` }}</div>
            <div class="header-left-item2 text-tip-1 cancel" @click="handleClearAll" v-show="selectedCount">{{ '取消' }}
            </div>
          </div>
          <div class="header-right">
            <div class="header-right-item item1">
              <div class="icon">
                <img src="../../assets/icons/download.svg" alt="">
              </div>
              <div class="text text-tip-1">{{ '导出' }}</div>
            </div>
            <div class="header-right-item2 item2">
              <el-select v-model="curOperation" placeholder="批量操作" style="width: 120px">
                <el-option v-for="item in operationList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="header-right-item3 item3">
              <el-select v-model="isSort" placeholder="发布时间" style="width: 166px" @change="handlePxChange">
                <template #prefix>
                  <div style="display: flex; align-items: center; height: 100%">
                    <img src="../../assets/icons/desc-icon.svg" style="width: 14px; height: 14px" />
                  </div>
                </template>
                <el-option v-for="item in releaseTimeList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="data-main-box-main-content">
          <el-table ref="tableRef" :data="tableData" row-key="id" @selection-change="handleSelectionChange"
            @select="handleSelect" @select-all="handleSelectAll" style="width: 100%" :row-style="{ height: '52px' }">
            <el-table-column type="selection" width="55" />
            <el-table-column label="Date" width="180" class-name="date-column">
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column property="name" label="Name" width="180" />
            <el-table-column property="address" label="use show-overflow-tooltip" width="360" show-overflow-tooltip />
            <el-table-column property="address" label="address" />
          </el-table>
        </div>
      </div>
      <div class="data-main-box-footer">
        <el-pagination background layout="prev, pager, next" :total="totalNum" v-model:current-page="currentPage"
          :page-size="pageSize" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, nextTick } from 'vue'
import ChartContainer from '../../components/ChartContainer/index.vue'
import ChartHeader from '../../components/ChartHeader/index.vue'
import ActiveTag from '../../components/ActiveTag/index.vue'
import HeaderBtnBox from '../../components/HeaderBtnBox/index.vue'
import LineChart from '../../components/LineChart/index.vue'
import PieChart from '../../components/PieChart/index.vue'
import BarChart from '../../components/BarChart/index.vue'
import RaderChart from '../../components/RadarChart/idnex.vue'
import SelectBox from '../../components/SelectBox/index.vue'
import { useRoute } from "vue-router";
const route = useRoute();
// 图表/数据
const isShowChart = ref(true)

const handleSwitchChartData = () => {
  isShowChart.value = !isShowChart.value
}

// 总计数据
const totalNum = ref(12)

// 统计维度列表
const staticsDemensionList = ref([
  {
    name: '提案时间',
    active: true,
    chartTypeList: ['折线图', '柱状图']
  },
  {
    name: '科技领域',
    active: false,
    chartTypeList: ['饼状图']
  },
  {
    name: '提出议院',
    active: false,
    chartTypeList: ['饼状图', '雷达图']
  },
  {
    name: '提出委员会',
    active: false,
    chartTypeList: ['折线图', '柱状图', '饼状图']
  },
  {
    name: '提出议员党派',
    active: false,
    chartTypeList: ['饼状图']
  },
  {
    name: '立法阶段',
    active: false,
    chartTypeList: ['饼状图']
  },
])

const curChartTypeList = computed(() => {
  let arr = staticsDemensionList.value.filter(item => item.active)
  return arr[0].chartTypeList
})

// 当前维度
const curDemension = ref('提案时间')

const handleClickDemensionItem = (val) => {
  staticsDemensionList.value.forEach(item => {
    item.active = false
  })
  val.active = true
  curDemension.value = val.name
  activeChart.value = val.chartTypeList[0]
}

const selectedTime = ref('按月统计')
const timeList = ref([
  {
    label: '按年统计',
    value: '按年统计'
  },
  {
    label: '按季统计',
    value: '按季统计'
  },
  {
    label: '按月统计',
    value: '按月统计'
  },
])

// 激活的标签列表
const activeTagList = ref([
  {
    name: '人工智能'
  },
  {
    name: '共和党'
  },
  {
    name: '2025-01-01 至 2025-12-31'
  },

])

const handleCloseCurTag = (tag, index) => {
  // alert(tag.name)
  activeTagList.value.splice(index, 1)
}

const activeChart = ref('折线图')

const handleSwitchActiveChart = val => {
  activeChart.value = val.name
}

const lineChartData = ref({
  dataX: ['2025-08', '2025-09', '2025-10', '2025-11', '2025-12', '2026-01', '2026-02',],
  dataY: [123, 51, 64, 72, 58, 69, 105]
})

const pieChartData = ref([
  {
    name: '核',
    value: 24
  },
  {
    name: '极地',
    value: 24
  },
  {
    name: '新材料',
    value: 24
  },
  {
    name: '深海',
    value: 30
  },
  {
    name: '海洋',
    value: 31
  },
  {
    name: '先进制造',
    value: 31
  },
  {
    name: '生物科技',
    value: 32
  },
  {
    name: '新能源',
    value: 35
  },
  {
    name: '集成电路',
    value: 16
  },
  {
    name: '新一代通信网络',
    value: 55
  },
  {
    name: '量子科技',
    value: 33
  },
  {
    name: '人工智能',
    value: 55
  }
])

const barChartData = ref({
  dataX: ['2025-08', '2025-09', '2025-10', '2025-11', '2025-12', '2026-01', '2026-02',],
  dataY: [123, 51, 64, 72, 58, 69, 105]
})

const radarChartData = ref({
  title: [
    {
      name: '航空航天',
      max: 10
    },
    {
      name: '先进制造',
      max: 10
    },
    {
      name: '量子科技',
      max: 10
    },
    {
      name: '人工智能',
      max: 10
    },
    {
      name: '新材料',
      max: 10
    },
    {
      name: '集成电路',
      max: 10
    },
  ],
  data: [
    {
      name: "337调查",
      value: [10, 5, 2, 8, 5, 7
      ]
    },
    {
      name: "232调查",
      value: [2, 5, 3, 8, 10, 2]
    },
    {
      name: "301调查",
      value: [5, 8, 2, 9, 1, 5]
    }
  ]
}

)


// 数据- 是否全选
const isSelectedAll = ref(false)

const curOperation = ref('')
const operationList = ref([
  {
    name: 'aaa',
    id: 'aaa'
  },
  {
    name: 'bbb',
    id: 'bbb'
  },
  {
    name: 'ccc',
    id: 'ccc'
  },
])

// 领域
const areaPlaceHolder = ref('请选择领域')
const selectedArea = ref('')
const areaList = ref([
  {
    name: '人工智能',
    id: '人工智能'
  },
  {
    name: '集成电路',
    id: '集成电路'
  },
  {
    name: '先进制造',
    id: '先进制造'
  },
])

const handleSelectArea = (value) => {
  selectedArea.value = value
}

// 提出时间
const DatePlaceHolder = ref('请选择时间')
const selectedDate = ref('')
const dateList = ref([
  {
    name: '自定义',
    id: '自定义'
  },
  {
    name: '2026',
    id: '2026'
  },
  {
    name: '2025',
    id: '2025'
  },
  {
    name: '2024',
    id: '2024'
  },
  {
    name: '2023',
    id: '2023'
  },
  {
    name: '2022',
    id: '2022'
  },
])
const customTime = ref('')  // 自定义时间

const handleCustomDate = value => {
  console.log('value', value);
  customTime.value = value
}

const handleSelectDate = (value) => {
  selectedDate.value = value
}

// 党派列表
const partyList = ref([
  {
    name: '共和党',
    id: '共和党'
  },
  {
    name: '民主党',
    id: '民主党'
  },
  {
    name: '其他',
    id: '其他'
  },
])

const selectedParty = ref('')
const partyPlaceHolder = ref('请选择党派')

// 议院列表
const congressList = ref([
  {
    name: '众议院',
    id: '众议院'
  },
  {
    name: '参议院',
    id: '参议院'
  }
])

const selectedCongress = ref('')
const congressPlaceHolder = ref('请选择议院')

// 议院列表
const statusList = ref([
  {
    name: '提出',
    id: '0'
  },
  {
    name: '通过',
    id: '1'
  }
])

const selectedStauts = ref('')
const statusPlaceHolder = ref('请选择立法阶段')

// 展开全部 / 收起
const isFolderAll = ref(false)
const handleSwitchFolderAll = () => {
  isFolderAll.value = !isFolderAll.value
}



const tableRef = ref(null)

// 表格数据
const tableData = ref([
  {
    id: 1,
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  },
  {
    id: 2,
    date: '2016-05-03',
    name: 'Helen Jacobi',
    address: '760 A Street, South Frankfield, Illinois',
  },
  {
    id: 3,
    date: '2016-05-02',
    name: 'Brandon Deckert',
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    id: 5,
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    id: 6,
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    id: 7,
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    id: 8,
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    id: 9,
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  {
    id: 10,
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
  // {
  //   id: 11,
  //   date: '2016-05-01',
  //   name: 'Margie Smith',
  //   address: '23618 Windsor Drive, West Ricardoview, Idaho',
  // },
  // {
  //   id: 12,
  //   date: '2016-05-01',
  //   name: 'Margie Smith',
  //   address: '23618 Windsor Drive, West Ricardoview, Idaho',
  // }
])



const releaseTimeList = ref([
  {
    label: "按发布时间倒序",
    value: true
  },
  {
    label: "按发布时间升序",
    value: false
  }
]);

const isSort = ref(true); // true 倒序  false 升序
// const handleSwithSort = () => {
// 	isSort.value = !isSort.value;
// };
const handlePxChange = val => {

};

const currentPage = ref(1);
const pageSize = ref(10)

// 存储选中的数据（跨页）[citation:3][citation:8]
const selectedMap = ref(new Map())  // 使用 Map 存储，key 为唯一 id

// 计算已选中的条数
const selectedCount = computed(() => selectedMap.value.size)

// 获取表格数据（示例）
const fetchTableData = async () => {
  // 调用接口获取数据...
  // const res = await getList({ page: currentPage.value, size: pageSize.value })
  // tableData.value = res.data
  // total.value = res.total

  // 数据加载后，回显已选中的行 
  nextTick(() => {
    tableData.value.forEach(row => {
      if (selectedMap.value.has(row.id)) {
        tableRef.value?.toggleRowSelection(row, true)
      }
    })
  })
}

// 单选事件 
const handleSelect = (selection, row) => {
  if (selection.some(item => item.id === row.id)) {
    // 选中：添加到 Map
    selectedMap.value.set(row.id, row)
  } else {
    // 取消选中：从 Map 移除
    selectedMap.value.delete(row.id)
  }
}

// 全选/全不选事件 
const handleSelectAll = (selection) => {
  if (selection.length > 0) {
    // 全选：将当前页所有数据添加到 Map
    tableData.value.forEach(row => {
      if (!selectedMap.value.has(row.id)) {
        selectedMap.value.set(row.id, row)
      }
    })
  } else {
    // 全不选：从 Map 中移除当前页的所有数据
    tableData.value.forEach(row => {
      selectedMap.value.delete(row.id)
    })
  }
}

// 处理选择变化（用于统计）
const handleSelectionChange = (val) => {
  // 这里可以做一些额外的处理，但主要统计使用 selectedMap
  console.log('当前页选中数量:', val.length)
}

// 全选当前页按钮
const handleSelectAllPage = () => {
  if (tableData.value.length === 0) return

  // 检查当前页是否已全选
  const currentPageSelected = tableData.value.every(row =>
    selectedMap.value.has(row.id)
  )

  if (currentPageSelected) {
    // 已全选，则取消当前页的全选
    tableData.value.forEach(row => {
      tableRef.value.toggleRowSelection(row, false)
      selectedMap.value.delete(row.id)
    })
  } else {
    // 未全选，则全选当前页
    tableData.value.forEach(row => {
      tableRef.value.toggleRowSelection(row, true)
      if (!selectedMap.value.has(row.id)) {
        selectedMap.value.set(row.id, row)
      }
    })
  }
}

// 处理全选
const handleSelectAllChange = () => {
  if (isSelectedAll.value) {
    handleSelectAllPage()
  } else {
    handleClearAll()
  }

  //  if (isSelectedAll.value) {
  //   // 全选：将当前页所有数据添加到 Map
  //   tableData.value.forEach(row => {
  //     if (!selectedMap.value.has(row.id)) {
  //       selectedMap.value.set(row.id, row)
  //     }
  //   })
  // } else {
  //   // 全不选：从 Map 中移除当前页的所有数据
  //   tableData.value.forEach(row => {
  //     selectedMap.value.delete(row.id)
  //   })
  // }
}

// 清空所有选择
const handleClearAll = () => {
  selectedMap.value.clear()
  tableRef.value?.clearSelection()
}

// 翻页
const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchTableData()
}


// 监听数据变化，回显选中状态 [citation:4][citation:8]
watch(tableData, () => {
  nextTick(() => {
    tableData.value.forEach(row => {
      if (selectedMap.value.has(row.id)) {
        tableRef.value?.toggleRowSelection(row, true)
      }
    })
  })
})

onMounted(() => {
  selectedArea.value = route.query.domains?JSON.parse(route.query.domains)[0]:''
  selectedDate.value = route.query.proposedDateStart

  activeTagList.value = [
  ]
  if (selectedArea.value) {
    activeTagList.value.push(
      { name: selectedArea.value }
    )
  }
  if (selectedDate.value) {
    activeTagList.value.push({
      name: selectedDate.value
    })
  }
  if (route.query.status === '0' || route.query.status === '1') {
    activeTagList.value.push({
      name: route.query.status === '0' ? '提出' : '通过'
    })
  }

  // 初始化
  fetchTableData()

})

</script>

<style lang="scss" scoped>
.countrybill-wrapper {
  width: 1600px;
  height: 968px;
  overflow: hidden;
  overflow-y: auto;

  .headere-box {
    width: 1568px;
    height: 112px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid var(--bg-black-5);
    margin: 16px auto;
  }

  .header-box {
    width: 1568px;
    min-height: 112px;
    border-radius: 10px;
    background: rgb(255, 255, 255);
    border: 1px solid var(--bg-black-5);
    margin: 16px auto;
    box-sizing: border-box;
    padding: 16px 24px;

    .header-top {
      min-height: 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px 42px;
      // transition: all ease 1s;
    }


    .header-footer {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;

      .header-footer-left {
        display: flex;
        justify-content: space-between;
        gap: 8px;
      }
    }
  }

  .chart-main-box {
    .info-box {
      margin: 0 auto;
      width: 1568px;
      height: 30px;
      display: flex;
      justify-content: space-between;

      .switch-box {
        width: 160px;
        border-radius: 20px;
        border: 1px solid var(--color-primary-100);
        height: 30px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .num-box {
        color: var(--color-red-100);
      }
    }

    .content-box {
      margin: 0 auto;
      margin-top: 16px;
      width: 1568px;
      height: 766px;
      border-radius: 10px;
      background: rgba(255, 255, 255);
      border: 1px solid var(--bg-black-5);

      .content-header {
        margin: 16px 24px;
        width: 1520px;
        height: 28px;
      }

      .content-main {
        width: 1520px;
        margin: 0 auto;
      }
    }
  }

  .data-main-box {
    width: 1568px;
    height: 810px;
    border-radius: 10px;
    background: var(--bg-white-100);
    margin: 0 auto;
    overflow: hidden;

    .data-main-box-header {
      margin: 16px auto;
      width: 1520px;
      height: 30px;
      display: flex;
      justify-content: space-between;

      .switch-box {
        width: 160px;
        border-radius: 20px;
        border: 1px solid var(--color-primary-100);
        height: 30px;
        cursor: pointer;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .num-box {
        box-sizing: border-box;
        padding: 2px 0;
        color: var(--color-red-100);
      }
    }

    .data-main-box-main {
      width: 1520px;
      // height: 633px;
      height: 680px;
      border-radius: 10px;
      border: 1px solid var(--bg-black-5);
      margin: 0 auto;

      .data-main-box-main-header {
        height: 48px;
        background: var(--bg-black-2);
        display: flex;
        justify-content: space-between;

        .header-left {
          margin-left: 16px;
          height: 48px;
          display: flex;
          gap: 16px;
          align-items: center;

          .header-left-item2 {
            color: var(--color-primary-100);

          }

          .cancel {
            cursor: pointer;
          }
        }

        .header-right {
          margin-right: 16px;
          display: flex;
          gap: 8px;
          align-items: center;

          .header-right-item {
            height: 30px;
            padding: 5px 16px;
            border: 1px solid var(--bg-black-10);
            border-radius: 4px;
            background: var(--bg-white-100);
            cursor: pointer;
          }

          .item1 {
            display: flex;
            gap: 2px;
            justify-content: center;
            align-items: center;

            &:hover {
              background: var(--color-primary-2);
            }

            .icon {
              width: 16px;
              height: 16px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .text {
              color: var(--text-primary-65-color);
            }
          }

          .item2 {}

          .item3 {}
        }
      }

      .data-main-box-main-content {}
    }

    .data-main-box-footer {
      margin: 16px auto 0;
      height: 40px;
      width: 1520px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}

.date-column {
  background-color: #ecf5ff;
}

.date-column .cell {
  color: #409eff !important;
  font-weight: 500;
}
</style>