<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="materialType">
          <el-select v-model="propertyForm.materialType" placeholder="请选择短信模板" style="width: 100%" @change="msgTempChange">
            <el-option v-for="item in materialTypes" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="propertyForm.materialType == '2'" label="素材" prop="material">
          <el-input v-model="propertyForm.material" clearable placeholder="请输入远程链接"> </el-input>
        </el-form-item>
        <el-form-item v-else label="素材" prop="material">
          <el-select
            v-model="propertyForm.material"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键字查询"
            :remote-method="remoteMethod"
            :loading="loading"
            style="width: 240px"
          >
            <el-option
              v-for="item in knowOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </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 { getPageListData } from '@/api/main/system/system';

  const loading = ref(false)
  const knowOptions = ref([])

  const materialTypes = [{
    label: '知识库',
    value: '1'
  }, {
    label: '外部链接',
    value: '2'
  }];
  
  const props = defineProps({
    nodeData: Object,
    lf: Object || String,
    //详情
    flowDetail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const emit = defineEmits();
  
  let propertyForm = reactive({
    name: '',
    desc: '',
    materialType: '',
    material: '',
    assignList: [],
  });
  let rules = reactive({
    name: [
      { required: true, message: '名称不能为空' },
      {
        max: 50,
        message: '最大50字符',
      },
    ],
    desc: [
      {
        max: 50,
        message: '最大50字符',
      },
    ],
    materialType: [
      { required: true, message: '请选择素材类型' },
    ],
    material: [
      { required: true, message: '素材不能为空' },
    ],
  });
  let showGlobalContext = ref(false);
  let globalContextFlag = ref('');
  let tableIndex = ref(null);
  let propertyFormRef = ref(null);
  
  //更新节点属性
  const setProperties = () => {
    props.lf.setProperties(props.nodeData.id, {
      name: propertyForm.name,
      desc: propertyForm.desc,
      materialType: propertyForm.materialType,
      material: propertyForm.material,
      frontend_status: '1', //0配置错误，1配置正常
    });
  };
  
  //确定
  const confirmFunc = () => {
    propertyFormRef.value.validate((valid) => {
      if (valid) {
        setProperties();
        // props.lf.updateText(props.nodeData.id, propertyForm.name);
        emit('closed');
      }
    });
  };
  
  //取消
  const cancelFunc = () => {
    emit('closed');
  };

  const remoteMethod = (query, type) => {
    loading.value = true
    const params = {
      pageNum: 1,
      pageSize: 5,
      advSearchFlag: 0,
      
    }

    if (type == 'id') {
      params.docId = query
    } else {
      params.title = query
    }
    getPageListData('/km/doc', params).then(res => {
      knowOptions.value = res.data.map(item => {
        return {
          value: item.docId,
          label: item.title,
        }
      })

      loading.value = false
    }).catch(err => {
      loading.value = false
    })
  }
  
  onMounted(() => {
    propertyForm.name = props.nodeData.properties.name;
    propertyForm.desc = props.nodeData.properties.desc ? props.nodeData.properties.desc : '';
    propertyForm.materialType = props.nodeData.properties.materialType ? props.nodeData.properties.materialType : '';
    propertyForm.material = props.nodeData.properties.material ? props.nodeData.properties.material : '';

    if (propertyForm.materialType == '1' && propertyForm.material) {
      remoteMethod(propertyForm.material, 'id')

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