<script setup lang="ts" name="ExpressionEditor">
import { ref, onMounted, toRefs } from "vue";
import ModalPop from "./ModalPop.vue"

const props = defineProps<{
  modelValue: boolean;
  data?: Object;
}>();

const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);

const editorValue = ref("");
const infoText = ref('')
const listData = ref([
  {
    name: 'convert_base1()'
  },
  {
    name: 'convert_base2()'
  }
])

// 确认
const confirm = () => {
  emit("confirm", editorValue.value);
};

// 测试
const test = () => {
  console.log("test");
};

const cancel = () => {
  emit("cancel");
}

// 划过事件
const hoverFunc = (item) => {
  infoText.value = item;
}

const change = (val) => {
  if(!val) return;
  console.log(props.data)
  editorValue.value = props.data.name;
}
</script>

<template>
  <ModalPop v-model="props.modelValue" title="编辑器" @cancel="cancel" @change="change">
    <template #content>
      <div class="title">算法名称 :</div>
      <div class="content">
        <div class="content_left">
          <div class="content_left_tap">函数</div>
          <div class="content_left_list">
            <el-scrollbar height="362px">
              <div class="function__item" @mouseover="hoverFunc(item)" v-for="(item,index) in listData" :key="index">{{ item.name }}</div>
            </el-scrollbar>
          </div>
        </div>
        <div class="content_right">
          <div class="content_right_info">
            <div class="content_right_info_title">说明</div>
            <div class="content_right_info_content">定义：{{ infoText }}</div>
          </div>
          <div class="content_right_editor">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="editorValue"
            />
          </div>
        </div>
      </div>
      <div style="display: flex; justify-content: center; padding-top: 20px;">
        <el-button type="primary" style="width: 150px;" @click="test">测试</el-button>
        <el-button type="info" style="width: 150px;" @click="cancel">取消</el-button>
        <el-button type="primary" style="width: 150px;" @click="confirm">确认</el-button>
      </div>
    </template>
  </ModalPop>
</template>

<style lang="scss" scoped>
.title{
  height: 32px; line-height: 32px;
}
.content{
  display: flex;
  height: 400px;
  width: 100%;
  &_left{
    height: 100%;
    width: 322px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(220, 229, 235);
    border-image: initial;
    &_tap{
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      font-weight: 700;
      border-bottom: 1px solid rgb(220, 229, 235);
      padding-left: 20px;
      color: rgb(44, 158, 247);
    }
    &_list{
      height: 100%;
      .function__item{
        padding-left: 20px;
        cursor: pointer;
        color: #7A8596;
      }
      .function__item:hover{
        background: rgb(243, 245, 250);
      }
    }
  }
  &_right{
    margin-left: 10px;
    height: 100%;
    flex: 1;
    &_info{
      height: 146px;
      border-style: solid;
      border-color: rgb(220, 229, 235);
      border-image: initial;
      border-width: 1px 1px 0px;
      padding: 0px 20px;
      &_title{
        height: 42px;
        line-height: 42px;
        color: rgb(122, 132, 149);
        font-size: 14px;
        font-weight: 700;
      }
      &_content{
        margin-top: -4px;
        color: rgb(122, 132, 149);
        font-size: 12px;
        word-break: break-all;
      }
    }
    &_editor{
      width: 100%;
      :deep(.el-textarea__inner){
        box-sizing: border-box !important;
        height: 254px !important;
        min-height: 254px !important;
        max-height: 254px !important;
        border-radius: 0px !important;
        padding: 12px 20px !important;
        background: rgb(243, 245, 250) !important;
      }
    }
  }
}
</style>