<template>
  <div class="TableFilter">
    <div class="filterDiv">
      <div class="filterItem" v-for="(item, index) in option.filterset" :key="index">
        <a-row>
          <!-- 筛选标题 -->
          <a-col :span="option.dataStyle.colLeft">
            <div class="filterTitle">{{ item.title }}</div>
          </a-col>
          <!-- 筛选内容 -->
          <!-- 多选框 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-if="item.showType == 'checkbox'">
            <div class="filterContentDiv">
              <n-checkbox-group v-model:value="item.value">
                <n-checkbox
                  :style="{
                    marginRight: option.dataStyle.filterTitleFontSize + 'px',
                  }"
                  v-for="(checkboxItem, checkboxIndex) in item.options"
                  :key="checkboxIndex"
                  :value="checkboxItem.value"
                >
                  <template #default>
                    <span class="filterContentFont">{{ checkboxItem.label }}</span>
                  </template>
                </n-checkbox>
              </n-checkbox-group>
            </div>
          </a-col>
          <!-- 单选框 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'radio'">
            <div class="filterContentDiv">
              <n-radio-group v-model:value="item.value" name="radiogroup">
                <n-space>
                  <n-radio
                    :style="{
                      marginRight: option.dataStyle.filterTitleFontSize + 'px',
                    }"
                    v-for="(radioItem, radioIndex) in item.options"
                    :key="radioIndex"
                    :value="radioItem.value"
                  >
                    <span class="filterContentFont">{{ radioItem.label }}</span>
                  </n-radio>
                </n-space>
              </n-radio-group>
            </div>
          </a-col>
          <!-- 下拉框 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'select'">
            <div class="filterContentDiv">
              <n-select
                v-model:value="item.value"
                :options="item.options"
                :style="{ width: '50%' }"
                placeholder="请选择选项"
                clearable
              />
            </div>
          </a-col>
          <!-- 下拉框（多选） -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'selectGroup'">
            <div class="filterContentDiv">
              <n-select
                v-model:value="item.value"
                :options="item.options"
                placeholder="请选择选项（可多选）"
                clearable
                multiple
              />
            </div>
          </a-col>
          <!-- 按钮组 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'buttonGroup'">
            <div class="filterContentDiv" style="display: inline-flex">
              <div
                :style="{
                  marginRight: option.dataStyle.filterTitleFontSize + 'px',
                }"
                v-for="(buttonItem, buttonIndex) in item.options"
                :key="buttonIndex"
                :class="
                  item.value == buttonItem.value
                    ? 'filterContentFont_choose'
                    : 'filterContentFont_nochoose'
                "
                @click="clickFilterButton(item, buttonItem)"
              >
                {{ buttonItem.label }}
              </div>
            </div>
          </a-col>
          <!-- 按钮组（多选） -->
          <a-col
            :span="24 - option.dataStyle.colLeft"
            v-else-if="item.showType == 'buttonGroupList'"
          >
            <div class="filterContentDiv" style="display: inline-flex">
              <div
                :style="{
                  marginRight: option.dataStyle.filterTitleFontSize + 'px',
                }"
                v-for="(buttonItem, buttonIndex) in item.options"
                :key="buttonIndex"
                :class="
                  item.value && item.value.includes(buttonItem.value)
                    ? 'filterContentFont_choose'
                    : 'filterContentFont_nochoose'
                "
                @click="clickFilterButtonList(item, buttonItem)"
              >
                {{ buttonItem.label }}
              </div>
            </div>
          </a-col>
          <!-- 列搜索框 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'inputSearch'">
            <div class="filterContentDiv">
              <n-input-group>
                <n-input
                  v-model:value="item.value"
                  :style="{ width: '50%' }"
                  :placeholder="'请输入' + item.title"
                  clearable
                />
                <n-button type="primary" ghost @click="search"> 搜索 </n-button>
              </n-input-group>
            </div>
          </a-col>
          <!-- 全数据搜索框 -->
          <a-col
            :span="24 - option.dataStyle.colLeft"
            v-else-if="item.showType == 'inputSearchAll'"
          >
            <div class="filterContentDiv">
              <n-input-group>
                <n-input
                  v-model:value="item.value"
                  :style="{ width: '50%' }"
                  placeholder="请输入搜索数据"
                  clearable
                />
                <n-button type="primary" ghost @click="searchAll"> 搜索 </n-button>
              </n-input-group>
            </div>
          </a-col>
          <!-- 时间选择器 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'timePicker'">
            <div class="filterContentDiv">
              <n-time-picker
                v-model:formatted-value="item.value"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
                :style="{ width: '50%' }"
                clearable
                placeholder="请选择时间"
              />
            </div>
          </a-col>
          <!-- 时间范围 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'timeRange'">
            <div class="filterContentDiv" :style="{ display: 'inline-flex' }">
              <n-time-picker
                v-model:formatted-value="item.value"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
                :style="{ width: '40%', marginRight: '30px' }"
                clearable
                placeholder="请选择开始时间"
              />
              <n-time-picker
                v-model:formatted-value="item.value2"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
                :style="{ width: '40%' }"
                clearable
                placeholder="请选择结束时间"
              />
            </div>
          </a-col>
          <!-- 日期范围 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else-if="item.showType == 'dateRange'">
            <div class="filterContentDiv">
              <n-date-picker
                v-model:formatted-value="item.value"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                :style="{ width: '80%' }"
                size="small"
                clearable
              />
            </div>
          </a-col>
          <!-- 其他 -->
          <a-col :span="24 - option.dataStyle.colLeft" v-else>
            <div class="filterContent"> </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 表格部分 -->
    <!-- 表头 -->
    <div class="theadDiv">
      <n-table
        :bordered="option.dataStyle.tableBordered"
        :single-column="option.dataStyle.tableSigleColumn"
        :single-line="option.dataStyle.tableSingleLine"
        :size="option.dataStyle.tableSize"
      >
        <thead v-if="option.dataStyle.tableHeaderShow">
          <tr
            :style="{
              backgroud: option.dataStyle.tableHeaderBackgroud,
            }"
          >
            <th
              class="th"
              v-if="option.dataStyle.orderBumberShow"
              :style="{
                width: headWidths[0] + 'px',
              }"
            >
            </th>
            <th
              class="th"
              v-for="(item, index) in option.header"
              :key="index"
              :style="{
                width: headWidths[option.dataStyle.orderBumberShow ? index + 1 : index] + 'px',
              }"
            >
              {{ item.title }}
            </th>
            <th
              class="th"
              v-if="option.dataStyle.buttonDivShow"
              :style="{
                width: headWidths[headWidths.length - 1] + 'px',
              }"
            >
              操作
            </th>
          </tr>
        </thead>
      </n-table>
    </div>
    <!-- 表格数据 -->
    <div class="tbodyDiv">
      <n-table
        :bordered="option.dataStyle.tableBordered"
        :single-column="option.dataStyle.tableSigleColumn"
        :single-line="option.dataStyle.tableSingleLine"
        :size="option.dataStyle.tableSize"
      >
        <tbody>
          <tr
            v-for="(dataItem, dataIndex) in filterData"
            :key="dataIndex"
            :class="
              option.dataStyle.tableDataBackgroudShow
                ? 'td_background'
                : dataIndex % 2 == 0
                  ? 'td_image1'
                  : 'td_image2'
            "
          >
            <!-- 序号 -->
            <td
              id="dataTd_order"
              v-if="option.dataStyle.orderBumberShow"
              :style="{
                width: option.dataStyle.orderDivWidth + 'px',
              }"
            >
              {{ dataIndex + 1 }}
            </td>
            <!-- 数据 -->
            <td
              :id="'dataTd_' + headerIndex"
              v-for="(headerItem, headerIndex) in option.header"
              :key="headerIndex"
              :style="{
                width: headerItem.width + 'px',
              }"
            >
              <span>
                {{ dataItem[headerItem.key] ? convertData(headerItem, dataItem) : '--' }}
              </span>
            </td>
            <!-- 操作 -->
            <td
              id="dataTd_button"
              v-if="option.dataStyle.buttonDivShow"
              :style="{
                width: option.dataStyle.buttonDivWidth + 'px',
              }"
            >
              <div class="buttonDiv">
                <n-button
                  v-if="option.dataStyle.buttonDivShow1"
                  size="small"
                  quaternary
                  @click="pitchLocation(dataItem, dataIndex)"
                >
                  <Button1 :dataStyle="option.dataStyle" />
                </n-button>
                <span
                  v-if="option.dataStyle.buttonDivShow1 && option.dataStyle.buttonDivShow2"
                  class="buttonDivspan"
                >
                  |
                </span>
                <n-button
                  v-if="option.dataStyle.buttonDivShow2"
                  size="small"
                  quaternary
                  @click="moveLocation(dataItem, dataIndex)"
                >
                  <Button2 :dataStyle="option.dataStyle" />
                </n-button>
              </div>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import dayjs from 'dayjs';
  import { cloneDeep } from 'lodash-es';
  import Button1 from './svg/button1.vue';
  import Button2 from './svg/button2.vue';

  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h } = toRefs(props.chartConfig.attr);

  const option = reactive({
    header: props.chartConfig.option.header,
    dataset: props.chartConfig.option.dataset,
    filterset: props.chartConfig.option.filterset,
    dataStyle: props.chartConfig.option.dataStyle,
  });

  // 表头高度
  const headHeight: any = computed(() => {
    if (option.dataStyle.tableHeaderShow) {
      return document.querySelector('.theadDiv')?.offsetHeight + 10;
    } else {
      return 0;
    }
  });

  // 数据表实际宽度
  const headWidths = computed(() => {
    let widths: any = [];
    if (option.dataStyle.tableHeaderShow) {
      setTimeout(() => {
        if (option.dataStyle.orderBumberShow) {
          widths.push(document.getElementById('dataTd_order')?.offsetWidth);
        }
        option.header.forEach((item, index) => {
          let td = document.getElementById('dataTd_' + index);
          widths.push(td?.offsetWidth);
        });
        if (option.dataStyle.buttonDivShow) {
          widths.push(document.getElementById('dataTd_button')?.offsetWidth);
        }
        console.log(widths);
      }, 500);
    }
    return widths;
  });

  // 搜索框
  const searchFlag = ref(false);
  const searchAllFlag = ref(false);

  function search() {
    searchFlag.value = true;
  }
  function searchAll() {
    searchAllFlag.value = true;
  }

  // 数据过滤
  const filterData = computed(() => {
    let data = cloneDeep(option.dataset);
    option.filterset.forEach((filtersetItem) => {
      // console.log(filtersetItem);
      if (
        (filtersetItem.field && filtersetItem.value) ||
        (!filtersetItem.field && filtersetItem.showType == 'inputSearchAll')
      ) {
        switch (filtersetItem.compareType) {
          // 大于
          case 'greater':
            if (['timePicker'].includes(filtersetItem.showType)) {
              data = data.filter(
                (d) =>
                  dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
                    dayjs(filtersetItem.value, 'HH:mm:ss'),
                  ) > 0,
              );
            } else {
              data = data.filter(
                (d) => Number(d[filtersetItem.field]) > Number(filtersetItem.value),
              );
            }
            break;
          // 小于
          case 'less':
            if (['timePicker'].includes(filtersetItem.showType)) {
              data = data.filter(
                (d) =>
                  dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
                    dayjs(filtersetItem.value, 'HH:mm:ss'),
                  ) < 0,
              );
            } else {
              data = data.filter(
                (d) => Number(d[filtersetItem.field]) < Number(filtersetItem.value),
              );
            }
            break;
          // 大于等于
          case 'greaterAndEqual':
            if (['timePicker'].includes(filtersetItem.showType)) {
              data = data.filter(
                (d) =>
                  dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
                    dayjs(filtersetItem.value, 'HH:mm:ss'),
                  ) >= 0,
              );
            } else {
              data = data.filter(
                (d) => Number(d[filtersetItem.field]) >= Number(filtersetItem.value),
              );
            }
            break;
          // 小于等于
          case 'lessAndEqual':
            if (['timePicker'].includes(filtersetItem.showType)) {
              data = data.filter(
                (d) =>
                  dayjs(d[filtersetItem.field], 'HH:mm:ss').diff(
                    dayjs(filtersetItem.value, 'HH:mm:ss'),
                  ) <= 0,
              );
            } else {
              data = data.filter(
                (d) => Number(d[filtersetItem.field]) <= Number(filtersetItem.value),
              );
            }
            break;
          // 等于
          case 'equal':
            if (['checkbox'].includes(filtersetItem.showType)) {
              // 多选框不选中时，不展示
              data = data.filter((d) =>
                filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
              );
            } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
              // 下拉框（多选）、按钮组（多选）不选中时，全展示
              if (filtersetItem.value.length > 0) {
                data = data.filter((d) =>
                  filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
                );
              }
            } else {
              // 其他统一
              data = data.filter((d) => d[filtersetItem.field] == filtersetItem.value);
            }
            break;
          // 不等于
          case 'notequal':
            if (['checkbox'].includes(filtersetItem.showType)) {
              // 多选框不选中时，不展示
              data = data.filter((d) =>
                filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
              );
            } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
              // 下拉框（多选）、按钮组（多选）不选中时，全展示
              if (filtersetItem.value.length > 0) {
                data = data.filter((d) =>
                  filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
                );
              }
            } else {
              // 其他统一
              data = data.filter((d) => d[filtersetItem.field] !== filtersetItem.value);
            }
            break;
          // 含有
          case 'contain':
            if (['checkbox'].includes(filtersetItem.showType)) {
              // 多选框不选中时，不展示
              data = data.filter((d) =>
                filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
              );
            } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
              // 下拉框（多选）、按钮组（多选）不选中时，全展示
              if (filtersetItem.value.length > 0) {
                data = data.filter((d) =>
                  filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)),
                );
              }
            } else if (['inputSearch'].includes(filtersetItem.showType)) {
              // 搜索框单独处理
              if (searchFlag.value) {
                data = data.filter(
                  (d) => d[filtersetItem.field].indexOf(filtersetItem.value) !== -1,
                );
                searchFlag.value = false;
              }
            } else if (['inputSearchAll'].includes(filtersetItem.showType)) {
              // 全数据搜索框单独处理
              if (searchAllFlag.value) {
                data = data.filter((d) => {
                  let flag = false;
                  option.header.some((headerLi) => {
                    if (d[headerLi.key]) {
                      flag = flag ? true : d[headerLi.key].includes(filtersetItem.value);
                    }
                  });
                  return flag;
                });
                searchAllFlag.value = false;
              }
            } else {
              // 其他统一
              data = data.filter((d) => d[filtersetItem.field].indexOf(filtersetItem.value) !== -1);
            }
            break;
          // 不含有
          case 'notcontain':
            if (['checkbox'].includes(filtersetItem.showType)) {
              // 多选框不选中时，不展示
              data = data.filter((d) =>
                filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
              );
            } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) {
              // 下拉框（多选）、按钮组（多选）不选中时，全展示
              if (filtersetItem.value.length > 0) {
                data = data.filter((d) =>
                  filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)),
                );
              }
            } else {
              // 其他统一
              data = data.filter((d) => d[filtersetItem.field].indexOf(filtersetItem.value) == -1);
            }
            break;
          // 两者之间
          case 'between':
            if (['timeRange'].includes(filtersetItem.showType)) {
              data = data.filter((d) => {
                const time = dayjs(d[filtersetItem.field], 'HH:mm:ss');
                const startTime = dayjs(filtersetItem.value, 'HH:mm:ss');
                const endTime = dayjs(filtersetItem.value2, 'HH:mm:ss');
                return time.diff(startTime) >= 0 && time.diff(endTime) <= 0;
              });
            }
            if (['dateRange'].includes(filtersetItem.showType)) {
              data = data.filter((d) => {
                const time = dayjs(d[filtersetItem.field], 'YYYY-MM-DD HH:mm:ss');
                const startTime = dayjs(filtersetItem.value[0], 'YYYY-MM-DD HH:mm:ss');
                const endTime = dayjs(filtersetItem.value[1], 'YYYY-MM-DD HH:mm:ss');
                return time.diff(startTime) >= 0 && time.diff(endTime) <= 0;
              });
            }
            break;
        }
      }
    });
    return data;
  });

  // 筛选-按钮点击事件
  function clickFilterButton(item, buttonItem) {
    if (item.value == buttonItem.value) {
      item.value = '';
    } else {
      item.value = buttonItem.value;
    }
  }
  // 筛选-按钮点击事件（多选）
  function clickFilterButtonList(item, buttonItem) {
    if (!item.value) {
      item.value = [];
    }
    if (item.value.includes(buttonItem.value)) {
      item.value.splice(item.value.indexOf(buttonItem.value), 1);
    } else {
      item.value.push(buttonItem.value);
    }
  }

  // 数据转换
  function convertData(header, data) {
    let prefix = header.prefix ? header.prefix : '';
    let suffix = header.suffix ? header.suffix : '';
    let convertData = data[header.key];

    // 小数点保留后两位
    if (convertData && header.convert == '0' && isValidNumber(convertData)) {
      convertData =
        typeof convertData === 'string'
          ? String(parseFloat(convertData).toFixed(2))
          : String(convertData.toFixed(2));
    }
    // 转换时间格式（例：0小时0分钟0秒）
    if (convertData && header.convert == '1' && isValidTime(convertData)) {
      convertData =
        dayjs(convertData, 'HH:mm:ss').hour() +
        '小时' +
        dayjs(convertData, 'HH:mm:ss').minute() +
        '分钟' +
        dayjs(convertData, 'HH:mm:ss').second() +
        '秒';
    }
    // 转换日期格式（例：YYYY-MM-DD HH:mm:ss）
    let format = 'YYYY-MM-DD HH:mm:ss';
    if (header.convert == '2') {
      format = 'YYYY-MM-DD';
    }
    if (header.convert == '3') {
      format = 'YYYY/MM/DD';
    }
    if (
      convertData &&
      ['2', '3', '4'].includes(header.convert) &&
      isValidDate(convertData, format)
    ) {
      convertData = dayjs(convertData).format(format);
    }
    return prefix + convertData + suffix;
  }

  // 检查字符串可否转成数字
  function isValidNumber(str) {
    const regex = /^-?\d+(\.\d+)?$/;
    return regex.test(String(str).trim());
  }
  // 检查字符串可否转成时间
  function isValidTime(str) {
    const parsedDate = dayjs(str, 'HH:mm:ss');
    if (parsedDate.isValid()) {
      return true;
    } else {
      return false;
    }
  }
  // 检查字符串可否转成日期
  function isValidDate(str, format) {
    const parsedDate = dayjs(str, format);
    if (parsedDate.isValid()) {
      return true;
    } else {
      return false;
    }
  }

  // 表格按钮方法
  function pitchLocation(dataItem, dataIndex) {}

  function moveLocation(dataItem, dataIndex) {}

  // setdata 数据监听与更改
  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
    props.chartConfig.option.dataset = newData;
  });
</script>

<style lang="scss" scoped>
  .TableFilter {
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
  }

  .filterDiv {
    width: 100%;
    padding-top: v-bind('`${option.dataStyle.filterMarginTop}px`');
    padding-left: v-bind('`${option.dataStyle.filterMarginLeft}px`');
    padding-right: v-bind('`${option.dataStyle.filterMarginLeft}px`');
  }

  // 筛选标题
  .filterTitle {
    text-align: v-bind('`${option.dataStyle.filterTitleAlign}`');
    font-size: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
    color: v-bind('`${option.dataStyle.filterTitleFontColor}`');
    font-family:
      PingFangSC,
      PingFang SC;
    font-weight: 500;
    line-height: v-bind('`${option.dataStyle.filterTitleFontSize}px`');
    height: v-bind('`${option.dataStyle.filterItemHeight}px`');
    font-style: normal;
  }
  .filterContentDiv {
    width: 100%;
    height: v-bind('`${option.dataStyle.filterItemHeight}px`');
    justify-content: v-bind('`${option.dataStyle.filterContentAlign}`');
    text-align: v-bind('`${option.dataStyle.filterContentAlign}`');
    align-items: v-bind('`${option.dataStyle.filterContentAlign}`');
  }

  // 内容通用字体
  .filterContentFont {
    font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
    color: v-bind('`${option.dataStyle.filterChooseFontColor}`');
  }
  ::v-deep .n-checkbox-box {
    width: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
    height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
  }
  ::v-deep .n-radio__dot {
    width: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
    height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important;
  }

  .filterContentFont_nochoose {
    background: #1c211f;
    color: #18d09d;
    border: 1px solid #18d09d;
    font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
    width: v-bind('`${option.dataStyle.filterChooseFontSize + 62}px`');
    height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    text-align: center;
    line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
  }
  .filterContentFont_choose {
    background: #26d1ad;
    color: #0d2822;
    font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`');
    width: v-bind('`${option.dataStyle.filterChooseFontSize + 62}px`');
    height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
    text-align: center;
    line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`');
  }

  // 表头
  .theadDiv {
    margin-top: v-bind('`${option.dataStyle.tableMarginTop}px`');
    padding-left: v-bind('`${option.dataStyle.tableMarginLeft}px`');
    padding-right: v-bind('`${option.dataStyle.tableMarginLeft}px`');
  }
  // 表格部分
  .tbodyDiv {
    overflow-y: auto;
    height: v-bind(
      '`${h - headHeight - option.dataStyle.filterMarginTop - option.dataStyle.filterItemHeight * option.filterset.length  - option.dataStyle.tableMarginTop}px`'
    );
    padding-left: v-bind('`${option.dataStyle.tableMarginLeft}px`');
    padding-right: v-bind('`${option.dataStyle.tableMarginLeft}px`');
  }
  .tbodyDiv::-webkit-scrollbar {
    display: none;
  }
  .tbodyDiv {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .th {
    background: v-bind('`${option.dataStyle.tableHeaderBackgroud}`');
    text-align: v-bind('`${option.dataStyle.tableAlign}`');
    color: v-bind('`${option.dataStyle.tableHeaderFontColor}`');
    font-size: v-bind('`${option.dataStyle.tableHeaderFontSize}px`');
  }
  td {
    text-align: v-bind('`${option.dataStyle.tableAlign}`');
    background: #ffffff00;
    color: v-bind('`${option.dataStyle.tableDataFontColor}`');
    font-size: v-bind('`${option.dataStyle.tableDataFontSize}px`');
    border-bottom: 0px;
  }
  .td_background {
    background: v-bind('`${option.dataStyle.tableDataBackgroud}`');
  }
  .td_image1 {
    background-image: url('@/assets/images/chart/zhichu/component/ModalTable_td1.png');
    background-size: 100% 100%;
  }
  .td_image2 {
    background-image: url('@/assets/images/chart/zhichu/component/ModalTable_td2.png');
    background-size: 100% 100%;
  }

  .buttonDiv {
    display: flex;
    align-items: v-bind('`${option.dataStyle.tableAlign}`');
    justify-content: center;
    width: v-bind('`${option.dataStyle.buttonDivWidth}px`');
  }

  .buttonDivspan {
    color: #00611a;
  }
</style>
