<template>
  <div
    :class="
      props.shadow ? 'w-99/100 p-2 bg-white d-shadow' : 'w-99/100 p-2 bg-white'
    "
  >
    <div class="flex justify-between w-full h-60px p-4">
      <div class="flex">
        <el-image :src="titleImg" class="w-4px h-20px" />
        <span class="title ml-4">{{ title }}</span>
        <div class="left_buttons">
          <slot name="left_buttons" />
        </div>
      </div>
      <slot name="title" />
      <div class="flex items-center justify-around">
        <vxe-toolbar ref="xToolbar" custom :refresh="{ query: refresh }">
          <template #buttons>
            <div class="mr-0">
              <slot name="buttons" />
            </div>
          </template>
        </vxe-toolbar>
      </div>
    </div>
    <slot name="detectType" />
    <vxe-table
      border
      ref="xTable1"
      :data="dataList"
      :loading="loading"
      :column-config="{ resizable: true, keyField: props.id }"
      :row-config="{ isHover: true }"
      :sort-config="{ remote: true }"
      :seq-config="{ startIndex: (current - 1) * size }"
      :tooltip-config="tableConfig.tableTooltipConfig"
      :expand-config="{ 'expand-config': true, showIcon: false }"
      :checkbox-config="checkBoxConfig"
      @checkbox-change="selectChangeEvent"
      @checkbox-all="selectAllChangeEvent"
      @sort-change="sortChangeEvent"
      class="mytable-scrollbar"
    >
      <vxe-column
        v-if="showSelection"
        field="select"
        type="checkbox"
        width="60"
        align="center"
        fixed="left"
      ></vxe-column>

      <vxe-column
        v-if="showIndex"
        type="seq"
        title="序号"
        align="center"
        width="60"
        fixed="left"
      ></vxe-column>

      <slot name="table" />
    </vxe-table>

    <el-pagination
      class="flex justify-end mt-4"
      v-if="showPageSize"
      v-model:page-size="size"
      v-model:current-page="current"
      :page-sizes="[10, 20, 30, 50]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-pagination
      class="flex justify-end mt-4"
      v-if="showPage"
      v-model:page-size="size"
      v-model:current-page="current"
      :background="true"
      layout="total, prev, pager, next,"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts">
export default {
  name: "tableProBar"
};
</script>
<script setup lang="ts">
import titleImg from "/@/assets/common/title-before.png";
import { ref, onMounted, nextTick, onBeforeUnmount, watch } from "vue";
import { VxeTablePropTypes } from "vxe-table";
import {
  VxeTableInstance,
  VxeToolbarInstance,
  VxeTableEvents
} from "vxe-table";
import _ from "lodash";
import { loadGreyData } from "/@/api/comprehensiveQuery/comprequeryapi";
import { string } from "vue-types";

const props = defineProps({
  // 头部最左边的标题
  title: {
    type: String,
    default: "列表"
  },
  // id字段
  id: {
    type: String,
    default: "id"
  },
  colist: {
    type: Array,
    default: () => {
      return [];
    }
  },
  // 表格数据
  dataList: {
    type: Array,
    default: () => {
      return [];
    }
  },
  // 是否显示加载动画，默认false 不加载
  loading: {
    type: Boolean,
    default: false
  },

  // 总数
  totalCount: {
    type: Number,
    default: () => {
      return 0;
    }
  },
  current: {
    type: Number,
    default: () => {
      return 1;
    }
  },
  // 是否显示阴影
  shadow: {
    type: Boolean,
    default: true
  },
  showIndex: {
    type: Boolean,
    default: false
  },

  //是否选择checkbox
  showSelection: {
    type: Boolean,
    default: false
  },
  enableSelectChange: {
    type: Boolean,
    default: false
  },
  showPage: {
    type: Boolean,
    default: false
  },
  showPageSize: {
    type: Boolean,
    default: true
  },
});

const emit = defineEmits([
  "refresh",
  "checkBox",
  "selectionChange",
  "checkbox-change",
  "checkbox-all",
  "checkbox-config"
]);
const xTable1 = ref({} as VxeTableInstance);
const xToolbar = ref({} as VxeToolbarInstance);
const current = ref(props.current);
const size = ref(10);
const sort = ref("");
const orderType = ref("");
let checkboxColumn = null;

let refresh = page1 => {
  emit(
    "refresh",
    {
      current: current.value,
      size: size.value
      // sort: sort.value,
      // order: orderType.value
    },
    page1
  );
};

watch(props, val => {
  current.value = props.current;
});
const checkBoxConfig = {
  checkMethod: ({ row }) => {

    if (row.auditStatus != null) {
      if (row.auditStatus != "0") {
        return false;
      } else {
        return true;
      }
    }
    if (row.telNumber != null) {
      if (row.deliverFlag != "0" ) {
        return false;
      } else {
        return true;
      }
    }
    if (row.policyInfoId != null) {
      if (
        row.auditType == "1" ||
        row.auditType == "2" ||
        row.auditType == "3"
      ) {
        return false;
      } else {
        return true;
      }
    }
    if (row.hideTempletNo != null) {
      if (
        row.auditFlag == "4" ||
        row.auditFlag == "5" ||
        row.auditFlag == "7"||
        row.auditFlag == "0"
      ) {
        return false;
      } else {
        return true;
      }
    }
    if (row.patternNo != null && row.patternName != "") {
      if (row.auditFlag == "2"||row.auditFlag == "1") {
        return false;
      } else {
        return true;
      }
    } else {
      return true;
    }


  },
  visibleMethod({ row }) {

    if (row.auditStatus != null) {
      if (row.auditStatus != "0") {
        return false;
      } else {
        return true;
      }
    }
    if (row.telNumber!= null||row.judicatureName!=null) {
      if (row.deliverFlag != "0" ) {
        return false;
      } else {
        return true;
      }
    }
    if (row.policyInfoId != null) {
      if (
        row.auditType == "1" ||
        row.auditType == "2" ||
        row.auditType == "3"
      ) {
        return false;
      } else {
        return true;
      }
    }
    if (row.hideTempletNo != null) {
      if (
        row.auditFlag == "4" ||
        row.auditFlag == "5" ||
        row.auditFlag == "7"||
        row.auditFlag == "0"
      ) {
        return false;
      } else {
        return true;
      }
    }
    if (row.patternNo != null && row.patternName != "") {
      if (row.auditFlag == "2"||row.auditFlag == "1") {
        return false;
      } else {
        return true;
      }
    } else {
      return true;
    }


  },
  //开启保留翻页选中
  reserve: true
};

// 翻页
let handleCurrentChange = (val: number) => {
  // current.value = val;
  refresh(false);
};

// 分页大小修改
let handleSizeChange = () => {
  refresh(true);
};

// 复选框勾选全部事件
let selectAllChangeEvent: VxeTableEvents.CheckboxAll = () => {
  let $table = xTable1.value;
  let selectRecords = $table.getCheckboxRecords();
  let checkedList = [];
  if (selectRecords.length == 0) {
    checkedList = [];
  } else {
    checkedList = selectRecords;
  }
  emit("checkbox-all", checkedList);
};

// 复选框勾选事件
let selectChangeEvent: VxeTableEvents.CheckboxChange = () => {
  let $table = xTable1.value;
  let selectRecords = $table.getCheckboxRecords();
  let checkedList = [];

  selectRecords.forEach(item => {
    const index = _.findIndex(item);
    if (index == -1) {
      checkedList.push(item);
    }
  });
  emit("checkbox-change", checkedList);
};

// 排序事件
let sortChangeEvent: VxeTableEvents.SortChange = ({ column, order }) => {
  if (order === "desc" || order === "asc") {
    sort.value = column.field;
    orderType.value = order;
  } else {
    sort.value = "";
  }
  refresh(false);
};

const tableConfig = ref({
  tableTooltipConfig: {
    showAll: true,
    enterable: true,
    contentMethod: ({ column }) => {
      const { title } = column;
      // 重写默认的提示内容
      if (title === "操作") {
        return "";
      }
      // 其余的单元格使用默认行为
      return null;
    }
  } as VxeTablePropTypes.TooltipConfig
});

onMounted(() => {
  // 将表格和工具栏进行关联
  xTable1.value.connect(xToolbar.value);
});

onBeforeUnmount(() => {
  xToolbar.value.reactData.columns.push(checkboxColumn);
});

defineExpose({ xTable1 });
</script>
<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.left_buttons {
  padding-left: 40px;
}

.vxe-input .vxe-input--suffix-icon {
  display: none !important;
  transition: transform 0.2s ease-in-out;
}

:deep(.vxe-input .vxe-input--suffix) {
  right: 0.2em;
  display: none !important;
}

:deep(.el-pagination) {
  .more + .number {
    display: none;
  }
}
</style>

<template>
  <div class="main">
    <table-pro-bar
      ref="tableRef"
      :data-list="dataList"
      :loading="loading"
      :showIndex="true"
      :current="params.current"
      :total-count="totalCount"
      :show-illustrate="true"
      :id="'countId'"
      @refresh="searchList"
      @check-box="checkBoxEvent"
      class="mt-4"
    >
      <template #table>
        <vxe-column
          show-overflow
          v-for="(col, index) in colList"
          :key="index"
          :prop="col.filed"
          :visible="col.flag"
          :title="col.name"
          :field="handleColLabel(col.filed)"
          :min-width="handleMinWidth(col.name)"
          :show-overflow-tooltip="handleColTooltip(col.filed)"
          :sortable="handleColSort(col.filed)"
          :align="handleColAlign(col.filed)"
        >
          <template #default="scope">
            <span>{{ scope.row[col.filed] }}</span>
          </template>
        </vxe-column>
        <vxe-column align="center" title="操作" width="180" fixed="right">
          <template #default="{ row, rowIndex }">
            <!--            <el-button type="primary" link @click="handleUpdate(rowIndex, row)">-->
            <!--              {{ $t("buttons.hsmodify") }}-->
            <!--            </el-button>-->

            <!--            <el-button type="primary" link @click="handleDelete(row, rowIndex)">-->
            <!--              {{ $t("buttons.hsdelete") }}-->
            <!--            </el-button>-->
          </template>
        </vxe-column>
      </template>
    </table-pro-bar>

  </div>
</template>
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { reactive, ref, onMounted, computed, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import TableProBar from "@/components/ReTable/src/tablePro.vue";
import { ElTree } from "element-plus";
import Del from "@iconify-icons/mdi/delete-forever-outline";
import { Delete } from '@element-plus/icons-vue'
defineOptions({
  name: "plan"
});

interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const defaultProps = {
  children: "children",
  label: "label"
};

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const type = route.query?.type ?? null;
const status = route.query?.status ?? null;
const totalCount = ref(0);
const dataList = ref([]);
const loading = ref(false);
// 表格组件参数
const colList: any = ref([
  {
    flag: true
  }
]);
// 筛选参数
const form: any = reactive({
  type: type ? type : null,
  status: status ? status : null
});
// 表格参数
const params = ref({
  current: 1,
  size: 10
});
const checkedList = ref([]);

// 同步查询列表
const onSearch = async () => {
  // loading.value = true;
  const copyForm = JSON.parse(JSON.stringify(form));
  Object.keys(copyForm).forEach((key: any, index: any) => {
    if (copyForm[key] == null || copyForm[key] == "") {
      delete copyForm[key];
    }
  });
  // let { data } = await keyAreaList({
  //   ...copyForm,
  //   ...params.value
  // }).finally(() => {
  //   loading.value = false;
  // });
  let data = {
    records: [

      {
        zoneId: "243",
        zoneName: "北京"
      }, {
        zoneId: "143",
        zoneName: "天津"
      },
      {
        zoneId: "243",
        zoneName: "北京"
      }

    ],
    title: { zoneId: { name: "地区编码", show: true }, zoneName: { name: "地区名称", show: true } }

  };
  colList.value = [];

  Object.keys(data.title).forEach((key: any, index: any) => {
    let val = data.title[key];
    colList.value.push({ name: val.name, filed: key, flag: val.show });
  });
  dataList.value = data.records;
  // totalCount.value = data.total;
  // await onTextInfoViolationType();
};


// 重置筛选
const resetForm = () => {
  form.type = null;
  form.status = null;
  searchList(params.value, true);
};

// 查询列表
let searchList = (param, current?: boolean) => {
  params.value = param;
  if (current) {
    params.value.current = 1;
  }
  onSearch();
};

// 复选框选择事件
let checkBoxEvent = checked => {
  checkedList.value = checked;
};
// 关闭新增/修改框回调
let onConfirm = (flag?: boolean) => {
  if (flag) {
    searchList(params.value);
  }
};


// 表格列宽度
const handleMinWidth = (col: string) => {
  let width = "100px";
  switch (col) {
    case "样本名称":
      width = "350px";
      break;
    case "样本文件名":
      width = "350px";
      break;
    default:
      break;
  }
  return width;
};
// 设置单元格是否启用提示
const handleColTooltip = () => false;
// 设置单元格是否排序
const handleColSort = (col: string) => {
  let sort = false;
  const sortList: any[] = [];
  if (sortList.indexOf(col) !== -1) {
    sort = true;
  }
  return sort;
};
// 设置单元格align
const handleColAlign = (col: string) => {
  return "center";
};
// 表格列名称
const handleColLabel = (col: string) => col;

onMounted(async () => {
  searchList(params.value);
});


</script>

<style lang="scss" scoped>
@import "@/style/component.scss";
</style>