<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="template">
          <el-select v-model="propertyForm.template" placeholder="请选择短信模板" style="width: 100%" @change="msgTempChange">
          <el-option v-for="item in tempList" :key="item.templateId" :label="item.templateName" :value="item.templateId"/>
        </el-select>
        <div class="templateBox">
              <div>
                <span v-for="(node, index) in msgContent" :key="index">
                  <el-tag v-if="node.isTag" @click="node.click">{{ node.content }}</el-tag>
                  <el-link type="primary" v-if="node.isLink" @click="node.click" style="line-height: 24px;">{{ node.content }}</el-link>
                  <span v-if="!node.isTag && !node.isLink" v-html="node.content"></span>
                </span>
                 
              </div>
            </div>
        </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';
  import { matchTags } from '@/utils/sms'

  

  const props = defineProps({
    nodeData: Object,
    lf: Object || String,
    //详情
    flowDetail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const emit = defineEmits();
  
  let propertyForm = reactive({
    name: '',
    desc: '',
    template: '',
    assignList: [],
  });
  let rules = reactive({
    name: [
      { required: true, message: '名称不能为空' },
      {
        max: 50,
        message: '最大50字符',
      },
    ],
    desc: [
      {
        max: 50,
        message: '最大50字符',
      },
    ],
    template: [
      { required: true, message: '请选择短信模板' },
    ]
  });
  let propertyFormRef = ref(null);
  
  //更新节点属性
  const setProperties = () => {
    props.lf.setProperties(props.nodeData.id, {
      name: propertyForm.name,
      desc: propertyForm.desc,
      template: propertyForm.template,
      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 tempList = ref(null);

  const getSmsTemplate = async () => {
    getPageListData('/sms/template', {
      // offset: 0,
      // size: 999,
    }).then(res => {
      if (res.data) {
        tempList.value = res.data
        
        if (!msgContent.value) { 
          msgTempChange(propertyForm.template)
        }
      }
    })
    
  }

  const msgContent = ref()
  const msgTempChange = (val) => {
    console.log(tempList.value, val, 'val')
    const msgTeml = tempList.value.find((o) => {
      return o.templateId === val;
    });
    console.log(msgTeml, 'ss')
    if (msgTeml && msgTeml.content) {
      msgContent.value = matchTags(msgTeml.content, {
        // url: {
        //   label: '问卷',
        //   click: questionHandle,
        // },
      });
    }
  }
  
  onMounted(() => {
    getSmsTemplate();
    propertyForm.name = props.nodeData.properties.name;
    propertyForm.desc = props.nodeData.properties.desc ? props.nodeData.properties.desc : '';
    propertyForm.template = props.nodeData.properties.template ? props.nodeData.properties.template : '';
    console.log(propertyForm.template, 'propertyForm.template')
    
  });
  </script>
  <style scoped lang="scss">
.templateBox {
  margin-top: 10px;
  font-size: 14px;
  line-height: 32px;
  .template-title {
    margin-bottom: 15px;
  }

  .questionnaire{
    height: 300px;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
  
}
</style>
  