<template>
  <div style="display: flex;justify-content: normal;width: 100%">
    <div style="width: 1000px">
      <!-- 添加或修改入群欢迎语管理对话框 -->
        <el-form ref="form" :model="form" :rules="rules" label-width="160px" size="medium">
          <el-form-item label="AI外呼客服" prop="aiSopCallRoleId">
            <el-select
              v-model="form.aiSopCallRoleId"
              placeholder="请选择AI外呼客服"
              clearable
              size="small"
              @change="handleWorkflowIdOptionsChange">
              <el-option
                v-for="item in aiSopCallRoleOptions"
                :key="item.id"
                :label="item.callRoleName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否定时呼叫" prop="isTimerSend">
            <el-radio-group v-model="form.isTimerSend" size="medium">
              <el-radio label="1">定时呼叫</el-radio>
              <el-radio label="2">立即呼叫</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="form.isTimerSend === '1'" prop="timerSend">
            <el-date-picker
              v-model="form.timerSend"
              type="datetime"
              placeholder="选择定时呼叫时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="09:00:00">
            </el-date-picker>
          </el-form-item>

        </el-form>

    </div>

  </div>
</template>

<script>
import ImageUpload from "@/views/qw/material/ImageUpload";
import {listRole} from "../../../api/aiSopCall/aiSopCallRole";

export default {
  name: "Welcome",
  components: {ImageUpload},

  data() {
    return {
      //上传地址
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      //放大图片
      dialogImageUrl:null,
      dialogVisible:false,
      // 遮罩层
      loading: true,
      //群发文本类型(复用)
      groupMsgTextTypeOptions:[],
      //是否允许成员在待发送列表中再次选择
      allowSelectOptions:[],
      formData:null,

      //呼叫ai客服角色
      aiSopCallRoleOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,

      details:{
        title:"",
        open:false,
      },

      // 表单参数
      form: {
        aiSopCallRoleId:null,
        aiSopCallRoleName:null,
        allowSelect: '1',
        msgType:'1',
        fileUrl:null,
        videoUrl: null,
        isTimerSend:'2'
      },
      // 表单校验
      rules: {
        aiSopCallRoleId:[
          {required:true,message:"请选择AI外呼客服",trigger:"blur"}
        ],
      }
    };
  },
  created() {

    //文本类型字典
    this.getDicts("sys_qw_welcome_type").then(response => {
      this.groupMsgTextTypeOptions = response.data;
    });

    // 修改调用方式，添加错误处理
    listRole().then(response => {
      this.aiSopCallRoleOptions = response.rows;
    });

    //是否允许成员在待发送列表中再次选择
    this.getDicts("sys_qw_allow_select").then(response => {
      this.allowSelectOptions = response.data;
    });

  },
  methods: {
    // 监听 AI 客服角色选择变化
    handleWorkflowIdOptionsChange(value) {
      if (value) {
        const selectedOption = this.aiSopCallRoleOptions.find(item => item.id === value);
        if (selectedOption) {
          this.form.aiSopCallRoleName = selectedOption.callRoleName;
        }
      } else {
        this.form.aiSopCallRoleName = null;
      }
    },
    /** 表单验证 */
    async validateChildForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(async valid => {
          if (valid) {
            resolve(true);
          } else {
            console.error("表单验证失败");
            reject(false);
          }
        });
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        // sender: null,
        // gender:99,
        allowSelect: '1',
        textContent: null,
        msgid: null,
        // corpId: null,
        // companyId: null,
        // tagNames: null,
        // groupChatNamesList: [],
        // fromUserCount: null,
        // toUserCount: null,
        // fromUserNum: null,
        // toUserNum: null,
        // createTime: null,
        // createTime:null,
        // updateTime: null,
        timerSend:'',
        isTimerSend:'2',
        msgType:'1',
        // //选择的成员账号
        // userIdsSelectList:[],
        // //选择的群聊
        // groupChatSelectList:[],
        // //选择的时间
        // timeScreenCharge:[],

        // //全部客户还是部分客户
        // groupMsgSelectType:'1',

        // //选择的标签列表
        // tagsIdsSelectList:[],
        //
        // //排除的标签
        // outTagsIdsSelectList:[],

        imageMediaId: null,
        imagePicUrl: null,
        linkTitle: null,
        linkPicurl: null,
        linkDesc: null,
        linkUrl: null,
        miniprogramTitle: null,
        miniprogramPicMediaId: null,
        miniprogramPicUrl: null,
        miniprogramAppid: null,
        miniprogramPage: null,
        fileMediaId: null,
        fileUrl: null,
        videoMediaId: null,
        videoUrl:null,
      };
      this.resetForm("form");
    },
  }
};
</script>
<style scoped>
.flex-container > div {
  width: 100%; /* 确保每个子div宽度充满容器宽度 */
}


</style>
