<template>
  <el-button id="1" @click="show(0)">
    显示0
  </el-button>
  <el-button class="2" @click="show(1)">
    显示1
  </el-button>
  <el-button type="primary">
    Primary
  </el-button>
  <div class="table-con">
    <hct-table v-if="showTable" :showOperate="true" :tableHeader="tableHeader" ref="hctTableRefs" :data="tableData" :show-operate="true"
      :operateWidth="400" :isAutoTable="true" operateFixed="right">
      <template #operate>
        <el-button>111</el-button>
      </template>
      <el-table-column label="序号" type="index" width="180" />
                <el-table-column prop="scc" label="交易单号" width="180" />
                <el-table-column prop="coTypeName" label="创建时间" width="180" />
    </hct-table>
    <div class="fixed">
      555555
    </div>
  </div>

  <!-- <hct-setting
    ref="hctLayoutSettingRefs"
    v-model:moveList="moveList"
    v-model:fixedList="fixedList"
    @onSave="onSave()"
    @cancel="cancel()"
  />
  <hctSearch
    :is-custom="true"
    :list="leftList"
    value="value"
    label="label"
    value-text="编码"
    label-text="名称"
  />
  <hctPopover
    trigger="click"
    effect="light"
    classed="hct-popovers"
  >
    123
    <template #content>
      <div style="width: 200px">
        哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈好好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        哈哈哈哈哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈好好哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
      </div>
    </template>
  </hctPopover>
  <hctLogistics
    :left-list="leftList"
    :right-list="rightList"
  />
  <hctMessage :message-list="messageList" /> -->
</template>

<script setup>
import hctTable from "./components/hct-table/hct-table.vue";
import hctSetting from "./components/hct-setting/hct-setting.vue";
import hctSearch from "./components/hct-search/hct-search.vue";
import hctPopover from "./components/hct-popover/hct-popover.vue";
import hctLogistics from "./components/hct-logistics/hct-logistics.vue";
import hctMessage from "./components/hct-message/hct-message.vue";
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
let leftList = ref([
  {
    value: "Option1",
    label: "美森正班",
  },
  {
    value: "Option2",
    label: "美森正班",
  },
  {
    value: "Option3",
    label: "美森正班",
  },
  {
    value: "Option4",
    label: "美森正班",
  },
  {
    value: "Option5",
    label: "美森正班",
  },
  {
    value: "Option1",
    label: "内陆航运",
  },
  {
    value: "Option2",
    label: "内陆航运",
  },
  {
    value: "Option3",
    label: "内陆航运",
  },
  {
    value: "Option4",
    label: "内陆航运",
  },
  {
    value: "Option5",
    label: "内陆航运",
  },
]);
let rightList = ref([
  {
    value: "Option1",
    label: "内陆航运",
  },
  {
    value: "Option2",
    label: "内陆航运",
  },
  {
    value: "Option3",
    label: "内陆航运",
  },
  {
    value: "Option4",
    label: "内陆航运",
  },
  {
    value: "Option5",
    label: "内陆航运",
  },
  {
    value: "Option1",
    label: "美森正班",
  },
  {
    value: "Option2",
    label: "美森正班",
  },
  {
    value: "Option3",
    label: "美森正班",
  },
  {
    value: "Option4",
    label: "美森正班",
  },
  {
    value: "Option5",
    label: "美森正班",
  },
]);
const value = ref("");
const pageSize4 = ref(100);
const currentPage4 = ref(4);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
let hctLayoutSettingRefs = ref();
const tableData = [
  {
    id: "1545220989462851586",
    coName: "华采通物流公司",
    scc: "91440300MA5G9KAK19",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-07-08 09:39:27",
  },
  {
    id: "1543954108491837441",
    coName: "华南城报关代理",
    scc: "92440300MA5GYHN09C",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-07-04 21:45:19",
  },
  {
    id: "1542749744423055362",
    coName: "华南城物流公司",
    scc: "91440300MR5GYHN09D",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-07-01 13:59:37",
  },
  {
    id: "1542747856474550273",
    coName: "测试数据",
    scc: null,
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-07-01 13:52:07",
  },
  {
    id: "1542448649557585921",
    coName: "宝能物流集团有限公司",
    scc: "91440300306202158W",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 18:03:10",
  },
  {
    id: "1542422787852414978",
    coName: "深圳市龙岗区月君花庭贸易商行",
    scc: "92440300MA5GYHN09J",
    coTypeName: "外贸代理",
    coType: 3,
    createTime: "2022-06-30 16:20:24",
  },
  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },
  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },

  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },

  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },

  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },
  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },

  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },
  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },
  {
    id: "1542422282384257026",
    coName: "深圳金胜冷链物流有限公司",
    scc: "91440300MA5G9KAK18",
    coTypeName: "物流公司",
    coType: 1,
    createTime: "2022-06-30 16:18:24",
  },
  {
    id: "1542421265701744642",
    coName: "四川翠宏食品有限公司",
    scc: "91510681060348180D",
    coTypeName: "报关代理",
    coType: 2,
    createTime: "2022-06-30 16:14:21",
  },
];
const tableHeader = reactive([
  {
    id: "93",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "coTypeName-coName",
    showName: "区",
    indexs: 1,
    isShow: true,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2803",
    userId: "1",
  },
  {
    id: "94",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "businessType",
    showName: "业务类型",
    indexs: 2,
    isShow: true,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2804",
    userId: "1",
  },
  {
    id: "95",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "chatId",
    showName: "群聊ID",
    indexs: 3,
    isShow: true,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2805",
    userId: "1",
  },
  {
    id: "96",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "city",
    showName: "市",
    indexs: 4,
    isShow: true,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2806",
    userId: "1",
  },
  {
    id: "97",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "contact",
    showName: "联系人",
    indexs: 5,
    isShow: true,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2807",
    userId: "1",
  },
  {
    id: "98",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "contactPhone",
    showName: "联系电话",
    indexs: 6,
    isShow: true,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2808",
    userId: "1",
  },
  {
    id: "99",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "country",
    showName: "出口国家",
    indexs: 7,
    isShow: false,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2809",
    userId: "1",
  },
  {
    id: "101",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "enterpriseAddress",
    showName: "企业地址",
    indexs: 8,
    isShow: false,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2810",
    userId: "1",
  },
  {
    id: "102",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "enterpriseName",
    showName: "企业名称",
    indexs: 9,
    isShow: false,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2811",
    userId: "1",
  },
  {
    id: "103",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "enterpriseNo",
    showName: "企业ID",
    indexs: 10,
    isShow: false,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2812",
    userId: "1",
  },
  {
    id: "104",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "province",
    showName: "省",
    indexs: 11,
    isShow: false,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2813",
    userId: "1",
  },
  {
    id: "105",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "salesPlatform",
    showName: "销售平台",
    indexs: 12,
    isShow: false,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2814",
    userId: "1",
  },
  {
    id: "100",
    serverName: "scrm",
    modelName: "enterprise",
    sequenceName: "enterpriseList",
    fieldName: "createTime",
    showName: "创建时间",
    indexs: 13,
    isShow: false,
    isFixed: false,
    colWidth: 120,
    colType: 1,
    showType: 1,
    isFilter: true,
    dictType: 0,
    dictUrl: null,
    dictData: null,
    whereFieldName: null,
    isOrder: false,
    userSelfId: "2815",
    userId: "1",
  },
]);
const moveList = ref([]);
const fixedList = ref([]);

const show = (i) => {
  hctLayoutSettingRefs.value.showVisible = true;
  hctLayoutSettingRefs.value.showType = i;
  console.log(hctLayoutSettingRefs.value.showType);
  if (moveList.value.length) {
    moveList.value = [];
  }
  if (fixedList.value.length) {
    fixedList.value = [];
  }
  if (i) {
    tableHeader.forEach((ele, i) => {
      // ele.indexs = ele.indexs || i + 1;
      if (ele.isFixed) {
        fixedList.value.push(ele);
      } else {
        moveList.value.push(ele);
      }
    });
  } else {
    tableHeader.forEach((ele, i) => {
      // ele.indexs = ele.indexs || i + 1;
      if (ele.isOrder) {
        fixedList.value.push(ele);
      } else {
        moveList.value.push(ele);
      }
    });
  }
};
const onSave = (e) => {
  console.log(123, e, "movelist", tableHeader);
};
const cancel = (e) => {
  console.log(1234, e, "movelist", tableHeader);
};
let showTable = ref(false)
onMounted(() => {
  let hctTableRefs = ref();
  showTable.value = true;
  setTimeout(() => {
    // console.log(document.body.offsetHeight, document.getElementById('hct-table').nextSibling);
  }, 500)
});

const messageList = ref([
  { id: 0, value: "0" },
  { id: 0, value: "0" },
  { id: 0, value: "0" },
  { id: 0, value: "0" },
  { id: 0, value: "0" },
]);
</script>

<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.content {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;

  :deep(.el-table__header .el-table__cell) {
    background-color: #fff !important;
    // border: 0 solid #000;
  }

  :deep(.el-table__header) {
    border: 0 solid #000;
  }
}

.table-con {
  height: 500px;
  overflow: hidden;
}

.hct-popovers {
  color: red;
}

.icon-btn-edit {
  margin-right: 10px;
}

.fixed {
  position: fixed;
  bottom: 20px;
  right: 5px;
  padding-top: 20px;
  margin-top: 100px;
}
</style>
