<template>
  <div class="app-container">
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">

    <div v-if="!form.welcomeId">
      <el-form-item label="欢迎语类型" prop="welcomeType">
        <el-radio-group v-model="form.welcomeType">
          <el-radio :label="item.dictValue" v-for="item in welcomeTypeOptions">{{item.dictLabel}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
    <el-form-item label="消息文本内容" prop="textContent">
      <el-input v-model="form.textContent" type="textarea" maxlength="4000" show-word-limit placeholder="消息文本内容" />
    </el-form-item>
    <div v-if="form.welcomeType=='1'">
      <el-form-item label="上传图片" prop="materialUrl">
        <ImageUpload v-model="form.imagePicUrl" type="image" :num="10" :width="150" :height="150" />
      </el-form-item>
    </div>
    <div v-if="form.welcomeType=='2'">
      <el-form-item label="图文标题" prop="linkTitle">
        <el-input v-model="form.linkTitle" type="textarea" maxlength="128" show-word-limit placeholder="请输入图文消息标题，最长为128字节" />
      </el-form-item>
      <el-form-item label="上传图文封面" prop="linkPicurl">
        <ImageUpload v-model="form.linkPicurl" type="image" :num="10" :width="150" :height="150" />
      </el-form-item>
      <el-form-item label="图文的描述" prop="linkDesc">
        <el-input v-model="form.linkDesc" type="textarea" maxlength="512" show-word-limit placeholder="请输入内容,，最长为512字节" />
      </el-form-item>
      <el-form-item label="上传图文的图片" prop="linkUrl">
        <ImageUpload v-model="form.linkUrl" type="image" :num="10" :width="150" :height="150" />
      </el-form-item>
    </div>

    <div v-if="form.welcomeType=='3'">
      <el-form-item label="小程序标题" prop="miniprogramTitle">
        <el-input v-model="form.miniprogramTitle" type="textarea" maxlength="64" show-word-limit placeholder="请输入小程序消息标题，最长为64字节" />
      </el-form-item>
      <el-form-item label="上传小程序封面" prop="miniprogramPicUrl">
        <ImageUpload v-model="form.miniprogramPicUrl" type="image" :num="10" :width="150" :height="150" />
      </el-form-item>
      <el-form-item label="小程序appid" prop="miniprogramAppid">
        <el-input v-model="form.miniprogramAppid" placeholder="请输入小程序appid，必须是关联到企业的小程序应用" />
      </el-form-item>
      <el-form-item label="小程序page路径" prop="miniprogramPage">
        <el-input v-model="form.miniprogramPage" placeholder="请输入小程序page路径" />
      </el-form-item>
    </div>

    <div v-if="form.welcomeType=='4'">
      <el-form-item label="上传文件" prop="fileUrl">
        <el-upload v-if="form.fileUrl==null || form.welcomeId"
                   v-model="form.fileUrl"
                   class="avatar-uploader"
                   :action="uploadUrl"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUploadFile">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-link v-if="form.fileUrl" type="primary" :href="downloadUrl(form.materialUrl)" download>
          下载文件
        </el-link>
      </el-form-item>
    </div>

    <div v-if="form.welcomeType=='5'">
      <el-form-item label="上传视频" prop="videoUrl">
        <el-upload v-if="form.videoUrl==null || form.welcomeId"
                   v-model="form.videoUrl"
                   class="avatar-uploader"
                   :action="uploadUrl"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :before-upload="beforeAvatarUploadVideo">
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <video v-if="form.videoUrl"
               :src="form.videoUrl"
               controls style="width: 200px;height: 100px">
        </video>
      </el-form-item>
    </div>
    <div v-if="!form.welcomeId">
      <el-form-item label="是否通知成员" prop="notify">
        <el-radio-group v-model="form.notify">
          <el-radio :label="item.dictValue" v-for="item in sysNoticeStatus">{{item.dictLabel}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>

    <el-form-item label="创建人" prop="createName">
      <el-input v-model="form.createName" placeholder="请输入创建人" />
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
  </div>
</template>

<script>
import { listWelcome, getWelcome, delWelcome, addWelcome, updateWelcome, exportWelcome } from "@/api/qw/welcome";
import ImageUpload from "@/views/qw/material/ImageUpload";

export default {
  name: 'materialAdd',
  components: {ImageUpload},

  data(){
    return {
      //上传地址
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      //欢迎语类型
      welcomeTypeOptions:[],
      //通知类型
      sysNoticeStatus:[].map(item => {
        return { ...item, dictValue: parseInt(item.dictValue, 10) }; // 转换为整数
      }),
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        welcomeType:[
          {required:true,message:"类型不能为空",trigger:"blur"}
        ],
        textContent:[
          {required:true,message:"消息文本不能为空",trigger:"blur"}
        ],
        createName:[
          {required:true,message:"创建人也要填噢",trigger:"blur"}
        ]
      }
    }
  },
  created() {
    this.getList();
    //文本类型字典
    this.getDicts("sys_qw_welcome_type").then(response => {
      this.welcomeTypeOptions = response.data;
    });

    this.getDicts("sys_company_status").then(response => {
      this.sysNoticeStatus = response.data;
    });

  },
  methods:{

    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.welcomeId != null) {
            updateWelcome(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWelcome(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
  },
  // 表单重置
  reset() {
    this.form = {
      welcomeId: null,
      templateId: null,
      welcomeType: null,
      textContent: null,
      imageMediaId: null,
      imagePicUrl: null,
      linkTitle: null,
      linkPicurl: null,
      linkDesc: null,
      linkUrl: null,
      miniprogramTitle: null,
      miniprogramPicMediaId: null,
      miniprogramPicUrl: null,
      miniprogramAppid: null,
      miniprogramPage: null,
      fileMediaId: null,
      videoMediaId: null,
      fileUrl: null,
      notify: null,
      corpId: null,
      videoUrl: null,
      companyId: null,
      updateTime: null,
      createTime: null,
      createName: null
    };
    this.resetForm("form");
  },
}
</script>

<style scoped>

</style>
