<template>
  <div>
    <el-form ref="propertyFormRef" :model="propertyForm" :inline-message="true" :rules="rules" label-position="top"
      :disabled="flowDetail.status == '2'">
      <el-form-item label="节点名称" prop="name">
        <el-input v-model="propertyForm.name" clearable> </el-input>
      </el-form-item>
      <el-form-item label="节点描述" prop="desc">
        <el-input v-model="propertyForm.desc" type="textarea" :rows="2"> </el-input>
      </el-form-item>

      <el-form-item label="语音类型" prop="type">
        <el-select v-model="propertyForm.attr.type" placeholder="请选择类型" clearable>
          <el-option label="本地语音" value="audio"></el-option>
          <el-option label="文本" value="text"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="propertyForm.attr.content" type="textarea" :rows="3"
          v-if="propertyForm.attr.type === 'text'" />

        <el-upload v-if="propertyForm.attr.type === 'audio'" :on-success="clUploadSucc" :limit="'1'"
          :headers="uploadHeadData" ref="uploadRef" accept=".mp3,.wav" class="upload-demo"
          :action="`${baseUrl}system/accessories/upload`" :show-file-list="false">
          <template #trigger>
            <div>
              <el-button link text type="primary" style="margin-right: 20px;">{{ propertyForm.attr.file ? '更换音频' :
                '上传音频' }}</el-button>
              <span v-if="propertyForm.attr.file">{{ propertyForm.attr.file.split('/').at(-1) }}</span>
              <span v-else>上传文件格式为.mp3,.wav，大小不能超过200kb</span>

            </div>
          </template>
        </el-upload>
      </el-form-item>

    </el-form>
    <div class="mt15" v-if="flowDetail.status != '2'">
      <el-button @click="cancelFunc"> 取消 </el-button>
      <el-button type="primary" @click="confirmFunc"> 确定 </el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { getToken } from '@/utils/auth';
import { ElMessage } from 'element-plus'

const props = defineProps({
  nodeData: Object,
  lf: Object || String,
  //详情
  flowDetail: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const uploadHeadData = ref({ Authorization: `Bearer ${getToken()}` });
const baseUrl = import.meta.env.VITE_APP_BASE_API;

const emit = defineEmits();



let propertyForm = reactive({
  name: '',
  desc: '',
  attr: {
    type: 'audio',
    content: '',
    file: '',
  },
});

let vars = reactive([]);
let sqlList = reactive([]);

let rules = reactive({
  name: [
    { required: true, message: '名称不能为空' },
    {
      max: 50,
      message: '最大50字符',
    },
  ],
  desc: [
    {
      max: 50,
      message: '最大50字符',
    },
  ],
  attr: [
    { required: true, message: '请选择文件类型' },
  ],
});
let propertyFormRef = ref(null);

//更新节点属性
const setProperties = () => {
  const params = {};
  vars.forEach((o) => {
    params[o.key] = o.value;
  })
  props.lf.setProperties(props.nodeData.id, {
    ...propertyForm,
    frontend_status: '1', //0配置错误，1配置正常
  });
};

//确定
const confirmFunc = () => {
  propertyFormRef.value.validate((valid) => {
    if (valid) {
      if (propertyForm.attr.type === 'text' && !propertyForm.attr.content) ElMessage.error('请输入文本内容');
      if (propertyForm.attr.type === 'audio' && !propertyForm.attr.file) ElMessage.error('请上传音频文件');
      setProperties();
      // props.lf.updateText(props.nodeData.id, propertyForm.name);
      emit('closed');
    }
  });
};

//取消
const cancelFunc = () => {
  emit('closed');
};


const clUploadSucc = ({ state, data }) => {
  if (state === 'success') {
    console.log(data, 'data');
    propertyForm.attr.file = data.url;
    ElMessage.success('上传成功');
  } else {
    ElMessage.error('上传失败');
  }
}

onMounted(() => {
  propertyForm.name = props.nodeData.properties.name;
  propertyForm.desc = props.nodeData.properties.desc ? props.nodeData.properties.desc : '';
  propertyForm.attr = props.nodeData.properties.attr ? props.nodeData.properties.attr : {};

});
</script>
<style scoped></style>