<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" />
    <Chart ref="chartRef" />
  </div>
</template>
<script lang="ts" setup>
import tool from './tool.vue';
import Chart from '@/components/Draggable/chart.vue';
import { inject } from 'vue';

defineOptions({
  name: 'hw-chart'
});
const chartRef = ref();

const props = defineProps({
  options: Object,
  formData: Object
});

onMounted(() => {
  chartRef.value.setData({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  });
});

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>



