<template>
  <div id="updateUpdate">
    <div class="app">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="更新涉及" prop="seeFlag" v-if="isShowPj">
          <!-- <el-checkbox-group v-model="ruleForm.seeFlag">
            <el-checkbox label="PC端" name="seeFlag"></el-checkbox>
            <el-checkbox label="小程序端" name="seeFlag"></el-checkbox>
          </el-checkbox-group> -->
          <el-checkbox-group 
            v-model="ruleForm.seeFlagArray">
            <el-checkbox v-for="(item,index) in opt" :label="item.value" :key="index">{{item.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <div class="content" v-if="ruleForm.content">
            <WxEditor v-model="ruleForm.content" :uploadData="uploadData"/>
          </div>
          <div class="contents" v-if="id==undefined&&ruleForm.content==''">
            <WxEditor v-model="ruleForm.content" :uploadData="uploadData"/>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="btn">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >发布</el-button
          >
          <el-button>取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import WxEditor from "@/components/wechat/WxEditor";
export default {
  name: "updateUpdate",
  data() {
    return {
      id:"",
      isShowPj:false,
      opt:[
        {label:'PC端',value:1},
        {label:'小程序端',value:2},
      ],
      ruleForm: {
        title: "",
        seeFlagArray: [],
        content: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题名称", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        seeFlagArray: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个更新涉及",
            trigger: "change",
          },
        ],
      },
      uploadData: {
          "mediaType": 'image',
          "title": '',
          "introduction": '',
          'appId': ''
      },
    };
  },
  components: {
    WxEditor,
  },
  computed: {},
  watch: {},
  created() {
  },
  async mounted(){
    this.id = this.$route.query.id
    if(this.$route.query.pj=="3"){
      this.isShowPj = true;
    }else{
      this.isShowPj =false;
    }
    if(this.$route.query.id!=undefined){
      let s = await this.$api.http.updateInfoApi({id:this.$route.query.id})
      this.ruleForm = s.data
    }
    console.log(this.ruleForm)
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.orgType = this.$route.query.pj
          this.$api.http.updateAddApi(this.ruleForm).then((res) => {
            if(res.code == 0){
              this.$message.success("操作成功");
              this.$router.push(
                `/contentManage/updateRecord/list?org=${this.$route.query.pj}`
              )
            }
          });
        } else {
          this.$message.error("操作失败");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#updateUpdate {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
  .app {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    padding: 30px;
  }
}
.content{
  /deep/ #wxEditor{
    margin-top: -25px;
    .editor{
      height: 350px !important;
    }
  }
}
.contents{
  /deep/ #wxEditor{
    margin-top: -25px;
    .editor{
      height: 350px !important;
    }
  }
}
.btn{
  margin-top: 100px;
}
</style>
