<template>
  <div class="app-container">

    <div style="margin: 30px;" v-if="this.form.sendType == 1 "> sop规则【企微接口】模板</div>
    <div style="margin: 30px;" v-if="this.form.sendType == 2 "> sop规则【AI插件】模板</div>

    <div style="margin-top: 10px;margin-left: 50px;margin-right: 100px;margin-bottom: 60px;">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入模板标题" />
        </el-form-item>

        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictValue"
            >{{dict.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="间隔天数" prop="gap">
          <el-input-number v-model="form.gap"  :min="1" label="间隔天数"></el-input-number>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort"  :min="0" label="排序"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: flex-end;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {addTemp} from "@/api/qw/sopTemp";
import ImageUpload from "@/views/qw/sop/ImageUpload";
import FriendMaterial from "@/views/qw/friendMaterial/index.vue";
import userVideo from "@/views/qw/userVideo/userVideo.vue";

export default {
  name: "addSopTemp",
  components: { ImageUpload,FriendMaterial,userVideo},
  data() {
    return {

      //图片放大
      dialogVisible: false,
      dialogImageUrl:null,

      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS2",
      uploadUrlByVoice:process.env.VUE_APP_BASE_API+"/common/uploadOSSByHOOKVoice",
      //上传语音的遮罩层
      voiceLoading :false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      sysFsSopWatchStatus: [],
      //消息内容类型 企微版
      sysQwSopContentType:[],
      //插件版
      sysQwSopAiContentType:[],
      //链接版类别
      sysQwSopSettingType:[],

      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // sop模板表格数据
      setting: [],
      courseList:[],
      videoList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 状态字典
      statusOptions: [],
      // 查询参数
      form: {
        name: null,
        setting: null,
        status: "1",
        sort: 1,
        companyId: null,
        gap:1,
      },
      videoNumOptions:{
        title:'选择视频号',
        open:false,
        content:null,
        contentIndex:null,
        setIndex:null,
      },
      // 表单校验
      rules: {
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '排序不能为空', trigger: 'blur' }
        ],
        gap: [
          { required: true, message: '间隔天数不能为空', trigger: 'blur' }
        ],
      },
      contentRules:{
        time:[{ required: true, message: '时间不能为空', trigger: 'blur' }],
      }
    };
  },
  created() {

    this.getDicts("sys_company_status").then(response => {
      this.statusOptions = response.data;
    });
    this.form.sendType = this.$route.params && this.$route.params.command;
    setTimeout(() => {
      this.getList();
    }, 200);

  },
  methods: {
    // 取消按钮
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.replace('/qw/conversion/sopTemp')
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        setting: null,
        status: "0",
        sort: null,
        createTime: null,
        createBy: null,
        companyId: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTemp(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              // this.$router.replace('/qw/conversion/sopTemp')
              window.location.replace('/qw/conversion/sopTemp')
              this.reset();
            });
          } else {
            addTemp(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.$store.dispatch("tagsView/delView", this.$route);
              // this.$router.replace('/qw/conversion/sopTemp')
              window.location.replace('/qw/conversion/sopTemp')
              this.reset();
            });
          }
        }
      });
    },
  }
};
</script>

<style scoped>
.custom-input /deep/ .el-input__inner {
  height: 20px;
  text-align: center;
}

.custom-input /deep/ .el-input__icon {
  line-height: 10px;
}
</style>
