<template>
  <div class="comp-content">
    <el-select v-model="fileType" placeholder="请选择文件标签" @change="changeFileType">
      <el-option
        v-for="item in ALL_FILE_TYPE.A"
        :key="item.value + 'fileType'"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { useDict } from '@/utils/useDict';
import { dataUpdateFileApi } from '@/api/data/data';
import { ElMessage } from 'element-plus';

interface Props {
  modelValue: any; // 数字，字符串，null
  id: string | number;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  id: '', // 修改文件类型时接口需要传的id
});

const fileType = ref();
watch(
  () => props.modelValue,
  (val: any) => {
    fileType.value = val === null ? '' : String(val);
  },
  { deep: true, immediate: true }
);

const { ALL_FILE_TYPE } = useDict('ALL_FILE_TYPE');

const changeFileType = () => {
  const params = {
    id: props.id,
    fileType: Number(fileType.value),
  };
  dataUpdateFileApi(params).then(() => {
    ElMessage.success('修改文件类型成功');
  });
};
</script>

<style lang="scss" scoped>
.comp-content {
  width: 100%;
  .select {
    width: 100%;
  }
}
</style>
