<template>
  <div class="title">
    <h3>
      <component :is="renderIcon('antd CodeOutlined')" />
      脚本编辑
    </h3>
    <el-row>
      <el-button :icon="renderIcon('CirclePlus')" link>添加</el-button>
      <el-divider direction="vertical" />
      <el-button :icon="renderIcon('antd SaveOutlined')" link>保存</el-button>
      <el-button :icon="renderIcon('element FolderOpened')" link>打开</el-button>
      <el-button :icon="renderIcon('Delete')" link>删除</el-button>
      <el-divider direction="vertical" />
      <el-button :icon="renderIcon('antd PlayCircleOutlined')" link type="primary">运行</el-button>
      <el-button :icon="renderIcon('fa EyeDropper')" link>编码吸管</el-button>
      <el-divider direction="vertical" />
      <el-radio-group v-model="scriptIndex" size="small">
        <el-radio-button label="脚本1" :value="0" />
        <el-radio-button label="脚本2" :value="1" />
        <el-radio-button label="脚本3" :value="2" />
        <el-radio-button label="脚本4" :value="3" />
      </el-radio-group>
    </el-row>
    <span class="close" @click="closeMe">
      <component :is="renderIcon('element Close')"></component>
    </span>
  </div>
  <div class="calc-bottom-panel">
    <YvSrcEditor ref="jsEditor" language="javascript" v-model="script1" />
  </div>
</template>
<script>
import YvSrcEditor from '@/components/YvSrcEditor.vue'
import IWidgets from '../IWidgets.js'

export default {
  name: 'ScriptView',
  components: { YvSrcEditor },
  mixins: [IWidgets],
  data() {
    return {
      scriptIndex: 0,
      script1: '',
      searchKeyword: ''
    }
  }
}
</script>
<style lang="less">
.title{
  & > h3{
    margin-right:10px;
    .el-icon{
      position: relative;
      top:2px;
    }
  }
  &>.el-row{
    display: flex;
    align-items: center;
  }
}
</style>
