<template>
  <el-popover placement="bottom-start" trigger="click" :width="props.width">
    <template #reference>
      <el-input v-model="input" style="width:100%;height: 100%" clearable :disabled="disabled"></el-input>
    </template>
    <el-tabs v-model="tabName" class="demo-tabs">
      <el-tab-pane v-for="item in props.list" :label="item.name" :name="item.name">
        <div class="list">
          <div class="code-item">
            <div class="code-item-name" v-for="subItem in item.array" @click="inputStr(item,subItem)">
              {{subItem}}
            </div>
          </div>
          <div class="suffix">
            {{item.suffix}}
          </div>
        </div>

      </el-tab-pane>
    </el-tabs>
  </el-popover>

</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";

const input = defineModel<string | null>();

interface listItem {
  prefix?:string;
  name: string;
  array: Array<string>;
  suffix?: string;
}

const props = defineProps({
  list: {
    type: Array<listItem>,
    default: []
  },
  width: {
    type: Number,
    default: 1000
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const inputStr = (item:listItem,str: string) => {
  let strList = input.value ? input.value.split(",") : [];
  let prefix = item.prefix ? item.prefix : '';
  let suffix = item.suffix ? item.suffix : '';
  strList.push(prefix+str+suffix);
  input.value = strList.join(",");
}
const tabName = ref()
onMounted(()=>{
  tabName.value = props.list[0].name
})
</script>

<style scoped lang="scss">
.list{
  display: flex;
  .code-item {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
    border-bottom: 1px solid #fffeee;

    .code-item-name {
      float: left;
      font-size: 16px;
      box-sizing: border-box;
      padding: 5px;
      text-align: center;
      cursor: pointer;

      &:hover {
        color: #000;
      }
      &:after{
        clear: both;
      }
    }
  }
  .suffix{
    width: 50%;
    display: flex;
    justify-content: center;
    line-height: 45px;
    font-size: 45px;
    align-items: center;
  }
}

</style>