<template>
  <el-popover
    ref="popoverRefs"
    placement="bottom"
    :width="246"
    trigger="click"
    popper-class="hct-popper"
  >
    <div class="hct-screen">
      <div class="hct-screen-content">
        <el-input
          v-model="screenList[screenType].label"
          disabled
        />

        <el-select
          v-model="conditionType"
          :teleported="false"
          class="m-2"
          placeholder="Select"
          size="large"
          @change="conditionChange"
        >
          <el-option
            v-for="item in conditionList[screenType]"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
        <div
          v-if="inputType()==0"
          class="hct-screen-input"
        >
          <el-input v-model="searchData" />
        </div>
        <div
          v-if="inputType()==1"
          class="hct-screen-input"
        >
          <el-input
            v-model="startData"
            placeholder="请输入"
          />
          <el-input
            v-model="endData"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="hct-screen-footer">
        <span>重新筛选</span>
        <div class="hct-screen-btn">
          <el-button @click="onClose">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="confim"
          >
            确定
          </el-button>
        </div>
      </div>
    </div>
    <template
      v-for="(index, name) in $slots"
      #[name]
      :key="name"
    >
      <slot :name="name" />
    </template>
  </el-popover>
</template>

<script setup>
import { reactive, ref } from "vue";
let props = defineProps({
  screenType: {
    type: Number,
    defalut: 0,
  },
});
// const popoverVisible = ref(false);
let screenVisible = ref(false);
let screenType = ref(props.screenType);
if (!screenType.value) {
  screenType.value = 0;
}
let conditionType = ref(0); // 筛选类型
// const emits = defineEmits(["update:visible"]);
let popoverRefs = ref();
const onClose = () => {
  screenVisible.value = false;
  popoverRefs.value.hide();
  // emits("update:visible", false);
};
const confim = () => {
  screenVisible.value = false;
  popoverRefs.value.hide();
};
const change = () => {
  // console.log("选中", popoverRefs);
};
const conditionChange = () => {
  // console.log(conditionType.value);
};
const inputType = () =>{
  if(screenType.value==0) {
    return 0
  } else if ((screenType.value==1&&conditionType.value==6) || (screenType.value==2&&conditionType.value==3)) {
    return 1
  }
  
}
let searchData = ref("");
let startData = ref("");
let endData = ref("");
let selectData = ref("");
let screenList = reactive([
  {
    id: 0,
    label: "文字筛选",
  },
  {
    id: 1,
    label: "数字筛选",
  },
  {
    id: 2,
    label: "日期筛选",
  },
]);
let conditionList = reactive([
  [
    {
      id: 0,
      label: "包含",
    },
    {
      id: 1,
      label: "不包含",
    },
    {
      id: 2,
      label: "等于",
    },
    {
      id: 3,
      label: "开头",
    },
    {
      id: 4,
      label: "结尾",
    },
    {
      id: 5,
      label: "空",
    },
    {
      id: 6,
      label: "非空",
    },
  ],
  [
    {
      id: 0,
      label: "大于",
    },
    {
      id: 1,
      label: "大于等于",
    },
    {
      id: 2,
      label: "小于",
    },
    {
      id: 3,
      label: "小于等于",
    },
    {
      id: 4,
      label: "等于",
    },
    {
      id: 5,
      label: "不等于",
    },
    {
      id: 6,
      label: "介于",
    },
    {
      id: 7,
      label: "不介于",
    },
  ],
  [
    {
      id: 0,
      label: "等于",
    },
    {
      id: 1,
      label: "小于",
    },
    {
      id: 2,
      label: "大于",
    },
    {
      id: 3,
      label: "介于",
    },
    {
      id: 4,
      label: "不介于",
    },
  ],
]);
let select = ref(true);
defineExpose({
  startData,
  endData,
  searchData,
  selectData
})
</script>
<style lang="scss">
.hct-popper {
  padding: 0 !important;
}
:focus {
  outline: 0;
}
</style>
<style scoped lang='scss'>
.hct-screen {
  width: 246px;
  height: 208px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.16);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  .hct-screen-tab {
    display: flex;
    justify-content: space-between;
    height: 38px;
    line-height: 38px;
    border-bottom: 1px solid #dddddd;
    .hct-screen-item {
      display: inline-block;
      width: 50%;
      text-align: center;
    }
    .active {
      color: #3592ff;
    }
  }
}
.hct-screen-content {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  box-sizing: border-box;
  // padding-top: 14px;
  :deep(.el-select) {
    margin-bottom: 14px;
    width: 226px;
    height: 34px;
  }
  > :deep(.el-input) {
    padding: 0 10px;
    height: 34px;
    line-height: 34px;
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .hct-screen-input {
    width: 100%;
    padding: 0 10px 12px;
    border-bottom: 1px solid #dddddd;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    box-sizing: border-box;
    > :deep(.el-input) {
      // width: 226px;
      height: 34px;
      margin: 0 5px 12px;
    }
  }
}
.hct-screen-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  line-height: 54px;
  padding: 0 10px;
  > span {
    font-size: 12px;
    color: #999;
  }
}
</style>