<template>
  <div class="hct-logistics">
    <el-select
      ref="selectRefs"
      v-model="logistics"
      class="m-2"
      placeholder="请选择头程 | 尾程"
      size="large"
      filterable
      clearable
      @visible-change="visibleChange"
    >
      <template #empty>
        <div class="hct-logistics-tab">
          <span
            class="hct-logistics-cancel"
            @click="cancel"
          >取消</span>
          <span
            class="hct-logistics-confirm"
            @click="confim"
          >确认</span>
        </div>
        <div class="hct-logistics-list">
          <div class="hct-logistics-left">
            <div
              v-for="(item, i) in leftList"
              :key="i"
              :class="['hct-logistics-item', leftValue == i ? 'active' : '']"
              @click="select('leftValue', i)"
            >
              {{ item.label }}
            </div>
          </div>
          <div class="hct-logistics-right">
            <div
              v-for="(item, i) in rightList"
              :key="i"
              :class="['hct-logistics-item', rightValue == i ? 'active' : '']"
              @click="select('rightValue', i)"
            >
              {{ item.label }}
            </div>
          </div>
        </div>
      </template>
    </el-select>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";
let props = defineProps({
  leftList: Array,
  rightList: Array,
});
let emit = defineEmits(['visibleChange','confim','emit'])
let leftList = ref(props.leftList);
let rightList = ref(props.rightList);
let logistics = ref("");
let leftValue = ref(0);
let rightValue = ref(0);
let selectRefs = ref();
const select = (type, i) => {
  if (type == "leftValue") {
    leftValue.value = i;
  } else {
    rightValue.value = i;
  }
  emit('emit')
};
const confim = () => {
  logistics.value =
    leftList.value[leftValue.value].label +
    " | " +
    rightList.value[rightValue.value].label;
  selectRefs.value.blur();
  emit('confim')
};
const visibleChange = (val) => {
  if (!val) {
    nextTick(() => {
      selectRefs.value.blur();
    });
  }
  emit('visibleChange')
};
defineExpose({
  confim,
  leftValue,
  rightValue,
  logistics
})
</script>

<script>
export default {
  name: "HctLogistics",
};
</script>

<style scoped lang='scss'>
.hct-logistics {
}
.hct-logistics-list {
  display: flex;
  justify-content: space-between;
  height: 200px;
  padding: 0 20px;
  box-sizing: border-box;
  .hct-logistics-left,
  .hct-logistics-right {
    width: 50%;
    overflow-y: auto;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    .hct-logistics-item {
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .active {
      color: #3592ff;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
.hct-logistics-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  box-sizing: border-box;
  font-size: 12px;
  color: #666;
  .hct-logistics-confirm {
    color: #3592ff;
  }
}
/* 整个滚动条 */
:deep(::-webkit-scrollbar) {
  /* 对应纵向滚动条的宽度 */
  // width: 6px;
  display: none;
}

</style>