<template>
  <div class='table-list'>
    <ul class='tab-tit'>
      <li v-for='it in props.tablist' :key='it' :class='it.actives ? "colos" : "blackcoko"' @click='changelicolor(it)'>
        <SvgIcon :icon="it.icon" :style="{ color: it.actives ? ' #fff !important' : ' #000 !important' }"></SvgIcon>
        <span>{{ it.title }}</span>
        <span :class='it.actives ? "numcolos" : ""' v-if="props.showCount && it.num >= 0">{{ it.num }}</span>
        <span>
          <img v-if='it.actives' :src="getImgUrl('img/Icons_zhankb.png')">
          <img v-else :src="getImgUrl('img/Iconsxk.png')"></span>
      </li>
    </ul>
    <component :is="pageData.componentObj" :opt="pageData.opt" :cardtype="props.cardtype" :obj='props.obj' @searchChange='searchChange'
      :isEdit="props.isEdit" :type='props.type' :showCount='props.showCount' :filetype="pageData.filetype"
      :sblx='pageData.sblx' @tableChange="tableChange" />
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { reactive, onMounted, watchEffect, ref } from "vue"
const emits = defineEmits(["handleChange", 'resetChange', 'tableChange']);
const props = defineProps({
  tablist: {
    default: () => [],
    type: Array
  },
  obj: {
    default: () => { },
    type: Object
  },
  //类型cs:场所；jzw:建筑物；lc:楼层；bw:部位 sb:设备
  type: {
    default: '',
    type: String
  },
  //是否显示统计数据
  showCount: {
    type: Boolean,
    default: true
  },
  // 风险告知卡类型
  cardtype: {
    type: String,
    default: ''
  },
  // 是否可以编辑
  isEdit: {
    type: Boolean,
    default: true
  }
});
const pageData = reactive({
  componentObj: null,
  filetype: null,
  sblx: null,
  opt: {}, // 其他参数 options,方便后期扩展更多 目前有 1.type
})

watchEffect(() => {
  const obj = props.tablist.find(item => { return item.actives })
  if (obj) {
    pageData.filetype = obj.filetype ? obj.filetype : null;
    pageData.sblx = obj.sblx ? obj.sblx : null;
    pageData.componentObj = obj.components
    pageData.opt = obj.opt || {}; // 其他参数 options
  }
})
onMounted(() => {
})

//点击事件
function changelicolor(val) {
  if (val.title == '重点部位') {
    props.obj.type = 'zdbw'
  } else if (val.title == '非重点部位') {
    props.obj.type = 'fzdbw'
  }
  pageData.componentObj = val.components
  emits("handleChange", val);
}
//刷新接口
function searchChange(val) {
  emits("resetChange", val);
}
//获取子表数据
function tableChange(val) {
  emits("tableChange", val);
}
</script>

<style lang="scss" scoped>
.tab-tit {
  display: flex;
  height: 100%;
  height: 54px;
  margin-bottom: 10px;
  cursor: pointer;
  // background: rgba(0, 156, 105, 0.2);
  background: var(--el-table-cell-bmx-backgroundcolor);

  >li {
    padding: 0 30px 0 10px;
    display: flex;
    align-items: center;
    height: 54px;
    // width: 235px;

    >span {
      display: black;
      margin: 2px 2px;
    }
  }
}

.wies {
  color: #fff !important;
}

.colos {
  color: #fff !important;
  clip-path: polygon(85% 0%, 98% 98%, 0% 106%, 0 0%);
  background-color: var(--el-color-primary) !important;
}

.blackcoko {
  color: #000;
}

.numcolos {
  padding: 2px 10px;
  line-height: 23px;
  border-radius: 20px;
  background: #fd9f29 !important;
  text-align: center !important;
}

.hamburger-container {
  padding: 0 8px;
  display: inline-block;
  cursor: pointer;

  .hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
  }
}
</style>
