<template>
  <div class="full">
    <el-select-v2
      v-if="editable"
      v-model="selected"
      :options="options"
      class="full"
      :clearable="clearable"
      :size="size"
      @change="onChange"
    />
    <div v-else class="plain-label">
      <!-- <el-icon class="view" @click="previewFlowFun">
        <View />
      </el-icon> -->
      {{ selectedLabel }}
    </div>
    <flowViewDialog
      v-model:showDialog="flowVisible"
      :flowTemplateCode="selected"
    ></flowViewDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useTaskStore } from '@/stores/taskPool';
import flowViewDialog from '@/components/common/flow/flowViewDialog.vue';

interface Props {
  modelValue?: any;
  clearable?: boolean;
  editable?: boolean;
  size?: '' | 'large' | 'default' | 'small'
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  clearable: true,
  editable: true,
  size: 'default',
});
const emits = defineEmits(['update:modelValue', 'change']);

const selected = ref<any>(props.modelValue);

watch(() => props.modelValue, (v) => {
  selected.value = v;
});

watch(selected, (v) => {
  emits('update:modelValue', v);
});

const taskStore = useTaskStore();

const options = computed(() => taskStore.options);

const selectedLabel = computed(() => {
  const opt = options.value.find((o: any) => o.value === selected.value);
  return opt ? opt.label : '';
});

const onChange = (val: any) => {
  emits('change', val);
};

const flowVisible = ref(false);
const previewFlowFun = () => {
  flowVisible.value = true;
};

</script>

<style scoped lang="scss">
.full {
  width: 100%;
}

.plain-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  line-height: 1;
  .view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: var(--el-color-primary);
    margin-right: 0;
  }
}
</style>
