<template>
  <div class="hw-input" @click.stop="inputClick"
       :style="`background-color: ${(selectUuid === options.uuid) ? '#0001':'#0000'};border-color: ${(selectUuid === options.uuid) ? '#00afff':'#0000'}`">
    <tool v-if="selectUuid === options.uuid" :options="options" />
    <el-form-item :label="options.name" :required="options.required">
      <el-slider v-model="formData[options.key || ('slider-'+options.uuid)]" :disabled="options.disabled"
      />
    </el-form-item>
  </div>
</template>
<script lang="ts" setup>
import tool from './tool.vue';
import { inject } from 'vue';

defineOptions({
  name: 'hw-slider'
});

const props = defineProps({
  options: Object,
  formData: Object
});
const { options, formData } = toRefs(props);
const getOptions = inject('getOptions');

const selectUuid = inject('selectUuid');
const getSelectUuid = inject('getSelectUuid');
const inputClick = () => {
  getOptions(options.value);
  getSelectUuid(options.value.uuid);
};
</script>
<style scoped lang="less">
.hw-input {
  margin: 2px;
  border: 1px solid #0000;
  position: relative;
  padding: 12px 2px 2px;

  &:hover {
    background-color: #0001;
    border: 1px solid #00afff;
  }
}
</style>



