<!--
 * @Date: 2024-07-23 10:34:37
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-11 17:00:25
 * @FilePath: /custom_table/src/views/index.vue
 * @Description: 文件描述
-->
<template>
  <div class="table-container">
    <el-row class="table-header" justify="space-between">
      <el-col :span="12">
        <div class="table-tools">
          <el-button type="primary" :icon="Plus" @click="addItem">添加</el-button>&nbsp;
          <div class="table-tools-item">
            <el-icon style="vertical-align: middle"><Download /></el-icon>
            <span class="table-tools-item-text">导入</span>
          </div>
          <div class="table-tools-item">
            <el-icon style="vertical-align: middle"><Upload /></el-icon>
            <span class="table-tools-item-text">导出</span>
          </div>
          <div class="table-tools-item">
            <el-icon style="vertical-align: middle"><Delete /></el-icon>
            <span class="table-tools-item-text">删除</span>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="text-align: right;">
          <el-input
            v-model="input3"
            style="width: 300px; margin-right: 1rem;"
            placeholder="搜索数据"
            :prefix-icon="Search"
          >
            <!-- <template #append>
              <el-select v-model="select" placeholder="Select" style="width: 115px">
                <el-option label="Restaurant" value="1" />
                <el-option label="Order No." value="2" />
                <el-option label="Tel" value="3" />
              </el-select>
            </template> -->
          </el-input>
          <el-popover :visible="filter_visible" :width="400" placement="bottom-end">
            <template #reference>
              <div class="tooltip-container">
                <el-icon style="vertical-align: middle" @click="filter_visible=true"><Filter /></el-icon>
                <span class="tooltip-text">筛选条件</span>
              </div>
            </template>
            <el-form ref="filter_target" :model="form" label-width="auto" style="max-width: 600px">
              <div style="padding: 0.5rem 0; display: flex; align-items: center; color: #C2915F; margin-bottom: 0.5rem;">
                <el-icon size="1.5rem" style="vertical-align: middle;"><Plus />&nbsp;</el-icon><span style="font-size: 0.85rem;">添加筛选条件</span>
              </div>
              <el-form-item label="字段状态">
                <el-select v-model="form.status" @visible-change="handleVisibleChange" placeholder="请选择">
                  <el-option label="状态1" value="type1" />
                  <el-option label="状态2" value="type2" />
                </el-select>
              </el-form-item>
              <el-form-item style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee;">
                <el-button type="primary">筛选</el-button>
                <el-button type="link">清空</el-button>
              </el-form-item>
            </el-form>
          </el-popover>
          &nbsp;
          <el-popover trigger="click" placement="bottom-end">
            <template #reference>
              <div class="tooltip-container">
                <el-icon style="vertical-align: middle"><Operation /></el-icon>
                <span class="tooltip-text">显示字段</span>
              </div>
            </template>
            <div>
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="全选" value="全选" />
                <el-checkbox label="字段 A" value="Value A" />
                <el-checkbox label="字段 B" value="Value B" />
                <el-checkbox label="字段 C" value="Value C" />
              </el-checkbox-group>
            </div>
          </el-popover>
          &nbsp;
          <el-popover trigger="click" :width="400" placement="bottom-end">
            <template #reference>
              <div class="tooltip-container">
                <el-icon style="vertical-align: middle"><Sort /></el-icon>
                <span class="tooltip-text">排序</span>
              </div>
            </template>
            <div style="padding: 0.5rem 0; display: flex; align-items: center; color: #C2915F; margin-bottom: 0.5rem;">
              <el-icon size="1.5rem" style="vertical-align: middle;"><Plus />&nbsp;</el-icon><span style="font-size: 0.85rem;">添加排序规则</span>
            </div>
            <div>
              <el-row align="middle">
                <el-col :span="12">
                  <div style="font-size: 1rem;">日期</div>
                </el-col>
                <el-col :span="10">
                  <el-radio-group v-model="sortRadio" size="large">
                    <el-radio-button label="升序" value="asc" />
                    <el-radio-button label="降序" value="desc" />
                  </el-radio-group>
                </el-col>
                <el-col :span="2">
                  <el-icon size="1.25rem" style="vertical-align: middle;"><Delete /></el-icon>
                </el-col>
              </el-row>
              <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #eee;">
                <el-button type="primary">排序</el-button>
                <el-button type="link">清空</el-button>
              </div>
            </div>
          </el-popover>
          &nbsp;
          <div class="tooltip-container">
            <el-icon style="vertical-align: middle" @click="refresh"><Refresh /></el-icon>
            <span class="tooltip-text">刷新</span>
          </div>
          &nbsp;
      </el-col>
    </el-row>
    <el-table
      :data="tableData" stripe border :height="table_height"
      style="width: 100%; margin: 1rem 0;"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @cell-click="handleCellClick"
      header-row-class-name="table-header-row"
    >
      <el-table-column type="selection" fixed width="55" />
      <el-table-column prop="date" label="Date" width="180">
        <template v-if="false" #default="scope">
          123
        </template>
      </el-table-column>
      <el-table-column prop="name" label="Name" width="180">
        <template v-if="true" #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><Bell /></el-icon>
            <el-popover
              placement="bottom"
              title="姓名"
              :width="200"
              trigger="click"
            >
              <template #reference>
                <span class="target-name" style="margin-left: 10px; color: blueviolet;">{{ scope.row.name }}</span>
              </template>
              <template #default>
                <div>其他内容的介绍</div>
              </template>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="Address" width="180" show-overflow-tooltip />
      <el-table-column prop="text1" label="text1" width="380" />
      <el-table-column prop="text2" label="text2" width="380" />
      <el-table-column prop="text3" label="text3" width="380" />
      <el-table-column prop="text4" label="text4" width="380" />
      <el-table-column prop="text5" label="text5" width="380" />
    </el-table>
    <el-row class="table-footer" justify="space-between">
      <el-col :span="8">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :size="size"
          layout="total, sizes"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
      <el-col :span="8">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :size="size"
          layout="prev, pager, next"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="display: flex; justify-content: center;"
        />
      </el-col>
      <el-col :span="8">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :size="size"
          layout="jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="display: flex; justify-content: end;"
        />
      </el-col>
    </el-row>
  </div>

  <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="70%" modal-class="drawer-modal">
    <el-row class="drawer-header" style="border-bottom: 1px solid #eee; padding: 1rem;">
      <el-col :span="12">
        <span>一行的数据详情页</span>
      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-icon @click="drawer = false"><Close /></el-icon>
      </el-col>
    </el-row>
    <div class="drawer-tools">
      <div class="drawer-tools-item">
        <el-icon style="vertical-align: middle"><CopyDocument /></el-icon>
        <span class="drawer-tools-item-text">复制</span>
      </div>
      <div class="drawer-tools-item">
        <el-icon style="vertical-align: middle"><Edit /></el-icon>
        <span class="drawer-tools-item-text">编辑</span>
      </div>
      <div class="drawer-tools-item">
        <el-icon style="vertical-align: middle"><Delete /></el-icon>
        <span class="drawer-tools-item-text">删除</span>
      </div>
    </div>
    <div class="drawer-iframe">
      <iframe :src="iframe_src" frameborder="0" class="my_iframe" id="_iframe"></iframe>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, unref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Plus, Download, Upload, Search, ArrowDown } from '@element-plus/icons-vue'
// import { ClickOutside as vClickOutside } from 'element-plus'
import { onClickOutside } from '@vueuse/core'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const tableData = ref([])

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log("🚀 ~ file: index.vue:136 ~ handleSelectionChange ~ multipleSelection.value:", multipleSelection.value);
}

const table_height = ref('780')

onMounted(() => {
  for (let index = 0; index < 50; index++) {
    tableData.value.push({
      id: index,
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
      text1: '2016-05-01',
      text2: 'Tom',
      text3: 'No. 189, Grove St, Los Angeles',
      text4: 'No. 189, Grove St, Los Angeles',
      text5: 'No. 189, Grove St, Los Angeles',
    })
  }
  // 表格高度
  nextTick(() => {
    let height = $(window).height();
    let header_height = $('.table-header').height();
    let footer_height = $('.table-footer').height();
    // 动态计算高度
    table_height.value = height - header_height - footer_height - 70;
  });
});

const currentPage4 = ref(4)
const pageSize4 = ref(100)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

const handleCellClick = (row, column, cell, event) => { // 点击单元格
  console.warn(row, column, cell, event);
  // TEST: 测试点击到姓名时不弹出抽屉
  let flag = $(event.target).hasClass('target-name'); // 点击到了名字
  if (!flag) {
    drawer.value = true;
  }
}
const handleRowClick = (row, column, event) => {
  // console.warn(row, event, column);
  // drawer.value = true;
}

const form = ref({
  status: ''
})

const filter_visible = ref(false);
const buttonRef = ref(null);
const popoverRef = ref(null);

const filter_target = ref(null);

onClickOutside(filter_target, event => {
  filter_visible.value = false;
});

const handleVisibleChange = (v) => { // 下拉框出现/隐藏时触发, 不让弹窗消失
  filter_visible.value = true;
}

const checkList = ref([]);

const refresh = () => {
  location.reload();
}

const drawer = ref(false);
const iframe_src = ref('https://content-static.cctvnews.cctv.com/snow-book/index.html?item_id=16178737121463290737&channelId=1119&toc_style_id=feeds_default&share_to=wechat&track_id=cbcca7b0-6de2-4474-9a9f-96902fbaea50');

const addItem = () => {
  drawer.value = true;
}

watchEffect(() => {
  if (drawer.value) {
    // 强制刷新iframe
    nextTick(() => {
      document.getElementById('_iframe').contentWindow.location.reload(true);
      let height = $('.drawer-modal').height();
      let header_height = $('.drawer-header').height();
      let tools_height = $('.drawer-tools').height();
      // 动态计算高度
      $('.drawer-iframe').height(height - header_height - tools_height);
      $('#_iframe').height(height - header_height - tools_height);
    });
  }
});

const sortRadio = ref('asc');
</script>

<style lang="less">
.table-container {
  padding: 1rem;
  .table-tools {
    display: flex;
    .table-tools-item {
      margin-right: 0.5rem;
      padding: 0.25rem 0.5rem;
      &:hover {
        cursor: pointer;
        background-color: #eee;
        padding: 0.25rem 0.5rem;
        border-radius: 5px;
      }
      .table-tools-item-text {
        vertical-align: middle;
        font-size: 0.85rem;
        margin-left: 0.25rem;
      }
    }
  }
  .tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer; /* 悬停时显示手形指针 */
    margin: 0 0.25rem;
  }

  .tooltip-text {
    font-size: 0.8rem;
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 10px;
    position: absolute;
    z-index: 100;
    top: 125%; /* 使 tooltip 位于触发元素下方 */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    white-space: nowrap; /* 防止文字换行 */
    &::after {
      content: "";
      position: absolute;
      top: -10px; /* 三角形放在 Tooltip 上方 */
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px;
      border-style: solid;
      border-color: transparent transparent black transparent; /* 创建黑色的小三角形 */
    }
  }

  .tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }

  .target-name {
    &:hover {
      cursor: pointer;
    }
  }

  .table-header-row {
  }
  .el-table th.el-table__cell {
    background-color: #f6f7fa !important;
  }
}

.my_iframe {
  width: 70%;
}

.drawer-modal {
  .el-drawer__body {
    padding: 0 !important;
  }
  .drawer-header {
  }
  .drawer-tools {
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    padding: 1rem;
    display: flex;
    .drawer-tools-item {
      margin-right: 0.5rem;
      padding: 0.25rem 0.5rem;
      &:hover {
        cursor: pointer;
        background-color: #eee;
        padding: 0.25rem 0.5rem;
        border-radius: 5px;
      }
      .drawer-tools-item-text {
        vertical-align: middle;
        font-size: 0.85rem;
        margin-left: 0.25rem;
      }
    }
  }
  .drawer-iframe {
    height: 100vh;
    position: fixed;
    width: 100%;
  }
}
</style>