<template>
  <div class="page-container notice-addPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">{{addForm.id?'编辑':'新增'}}</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
      <p class="page-top-title-add-p" @click="submitForm">提交</p>
    </div>
    <div class="content-box">
      <el-form class="add-form-box scrollbar-box" :model="addForm" ref="form" :rules="rules" label-width="120px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title" placeholder="请输入标题"
                    maxLength="20" style="width:500px;"></el-input>
        </el-form-item>
        <el-form-item label="消息类型" prop="noticeType">
          <el-select v-model="addForm.noticeType" @change="noticeTypeChange" placeholder="请选择消息类型" style="width:500px;">
            <el-option
              v-for="dict in typeList"
              :key="dict.code"
              :label="dict.name"
              :value="dict.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="接收人" prop="sendType" v-if="addForm.noticeType == 1">
          <el-select v-model="addForm.sendType" @change="sendTypeChange" placeholder="请选择接收人" style="width:500px;">
            <el-option
              v-for="dict in userTypeList"
              :key="dict.code"
              :label="dict.name"
              :value="dict.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="指定用户" prop="userIds" v-if="addForm.noticeType == 1 && addForm.sendType == 5">
          <el-select
            style="width:500px;"
            v-model="addForm.userIds"
            filterable
            remote
            clearable
            multiple
            reserve-keyword
            placeholder="请输入至少2个字符搜索相关人员"
            :remote-method="userSelectList">
            <el-option
              v-for="item in optionsUser"
              :key="item.userId"
              :label="item.userName+(item.userType==1?' (教职工)':' (学生)')"
              :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="适用学院" prop="deptIds" v-if="addForm.noticeType == 1 && addForm.sendType == 6">
          <el-cascader
            style="width:500px;"
            ref="cascader"
            v-model="addForm.deptIds"
            :options="deptOptions"
            :props="{value: 'deptId', label: 'deptName',children:'child',multiple: true,emitPath:false}"
            placeholder="请选择适用学院"
            collapse-tags
          ></el-cascader>
        </el-form-item>
        <el-form-item label="实验室：" prop="subIds" v-if="addForm.noticeType == 1 && addForm.sendType == 7">
          <el-select
            style="width:500px;"
            v-model="addForm.subIds"
            :multiple="true"
            filterable
            remote
            reserve-keyword
            placeholder="请搜索选择实验室"
            :remote-method="subSelectList">
            <el-option
              v-for="item in subOptions"
              :key="item.subId"
              :label="item.subName"
              :value="item.subId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布单位" prop="company" v-if="addForm.noticeType == 2 || addForm.noticeType == 3">
          <el-input v-model="addForm.company" placeholder="请输入发布单位"
                    maxLength="20" style="width:500px;"></el-input>
        </el-form-item>
        <el-form-item label="发送状态" prop="sendState" v-if="addForm.noticeType == 1">
          <el-radio-group v-model="addForm.sendState" style="width:320px;">
            <el-radio :label="1">立即发送</el-radio>
            <el-radio :label="0">暂不发送</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="消息内容" prop="content" style="width:1000px;">
          <UEditor ref="UEditor" :content="addForm.content" :min-height="192" :noVideoImg="true"/>
          <!--<editor v-model="addForm.content" :min-height="192"/>-->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { systemNoticeGetSendType,systemNoticeAdd,systemNotifyAdd,
    systemNoticeDetail,systemNoticeUpdate,
    systemNoticeSendUserIds } from "@/api/systemManagement/index";
  import { systemNoticeGetNoticeType,systemUserSelect,
    systemDeptOrganizeStructure,laboratorySubRelInfoGetRelListByPower } from "@/api/commonality/permission";
  import { systemSubjectGetList } from '@/api/commonality/noPermission'
  export default {
    name: 'addPage',
    props:{
      propsData:{},
    },
    data(){
      return{
        // 消息类型
        typeList: [],
        //接收人
        userTypeList:[],
        optionsUser:[],
        subOptions:[],
        //学院
        deptOptions:[],
        addForm:{
          title:'',
          noticeType:'',
          sendType:'',
          userIds:'',
          deptIds:'',
          subIds:'',
          sendState:1,
          content:'',
        },
        // 表单校验
        rules: {
          title: [
            { required: true, message: "请输入标题", trigger: "blur" },
            { required: true, message: "请输入标题", validator: this.spaceJudgment, trigger: "blur" }
          ],
          noticeType: [
            { required: true, message: "请选择消息类型", trigger: "change" }
          ],
          sendType: [
            { required: true, message: "请选择接收人", trigger: "change" }
          ],
          userIds: [
            { required: true, message: "请选择指定用户", trigger: "change" }
          ],
          deptIds: [
            { required: true, message: "请选择指定部门", trigger: "change" }
          ],
          subIds: [
            { required: true, message: "请选择指定实验室", trigger: "change" }
          ],
          sendState: [
            { required: true, message: "请选择发送状态", trigger: "change" }
          ],
          content: [
            { required: true, message: "请输入消息内容", trigger: "blur" },
            { required: true, message: "请输入消息内容", validator: this.spaceJudgment, trigger: "blur" }
          ],
          company: [
            { required: true, message: "请输入发布单位", trigger: "blur" },
            { required: true, message: "请输入发布单位", validator: this.spaceJudgment, trigger: "blur" }
          ],
        }
      }
    },
    created(){
    },
    mounted(){
      this.getTreeselect();
      this.systemNoticeGetNoticeType();
      this.systemNoticeGetSendType();
      if(this.propsData.noticeId){
        this.systemNoticeDetail();
      }
    },
    methods:{
      /** 查询部门下拉树结构 */
      getTreeselect() {
        systemDeptOrganizeStructure({}).then(response => {
          this.deptOptions = response.data;
        });
      },
      //搜索实验室
      subSelectList(query){
        if (query !== '' && query.length>1) {
          systemSubjectGetList({"subName":query,}).then(response => {
            this.$set(this,'subOptions',response.data);
          });
        } else {
          this.$set(this,'subOptions',[]);
        }
      },
      //消息详情
      systemNoticeDetail(){
        systemNoticeDetail({noticeId:this.propsData.noticeId}).then(response => {
          this.$set(this,'addForm',{
            noticeId:this.propsData.noticeId,
            title:response.data.title,
            noticeType:response.data.noticeType,
            sendType:response.data.sendType,
            userIds:[],
            deptIds:[],
            subIds:[],
            sendState:response.data.sendState,
            content:response.data.content,
          });
          if(response.data.sendType == 5){
            this.systemNoticeSendUserIds();
          }else if(response.data.sendType == 6){

          }else if(response.data.sendType == 7){

          }
        });
      },
      //用户IDS
      systemNoticeSendUserIds(){
        systemNoticeSendUserIds({noticeId:this.propsData.noticeId}).then(response => {
          this.$set(this.addForm,'userIds',response.data);
          systemUserSelect({"userName":'','userType':'',userIds:response.data}).then(response => {
            this.$set(this,'optionsUser',response.data);
          });
        });
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(6);
      },
      /** 提交按钮 */
      submitForm() {
        this.$set(this.addForm,'content',this.$refs.UEditor.text||"");
        this.$refs["form"].validate(valid => {
          if (valid) {
            let obj = {
              title:this.addForm.title,
              content:this.$refs.UEditor.text||"",
            }
            if(this.addForm.noticeType == 1){
              obj.noticeType = this.addForm.noticeType;
              obj.sendType = this.addForm.sendType;
              obj.userIds = this.addForm.sendType == 5 ? this.addForm.userIds : [];
              obj.subIds = this.addForm.sendType == 7 ? this.addForm.subIds+'' : '';
              obj.sendState = this.addForm.sendState;
              if(this.addForm.sendType == 6){
                let list = this.$refs['cascader'].getCheckedNodes()
                let valueList = [];
                list.forEach((item)=>{
                  valueList.push(item.value)
                })
                obj.deptIds = valueList+'';
              }else {
                obj.deptIds = '';
              }
              console.log('obj',obj)
            }else{
              obj.notifyType = this.addForm.noticeType
              obj.company = this.addForm.company;
            }
            if (this.addForm.noticeId){
              obj.noticeId = this.addForm.noticeId;
              systemNoticeUpdate(obj).then(response => {
                this.msgSuccess(response.message)
                this.backPage();
              });
            } else {
              if(this.addForm.noticeType == 1){
                systemNoticeAdd(obj).then(response => {
                  this.msgSuccess(response.message)
                  this.backPage();
                });
              }else{
                systemNotifyAdd(obj).then(response => {
                  this.msgSuccess(response.message)
                  this.backPage();
                });
              }
            }
          }
        })
      },
      //消息类型
      systemNoticeGetNoticeType(){
        systemNoticeGetNoticeType().then(response => {
          this.$set(this,'typeList',response.data);
        });
      },
      //接收人
      systemNoticeGetSendType(){
        systemNoticeGetSendType().then(response => {
          this.$set(this,'userTypeList',response.data);
        });
      },
      /** 下列人员-懒加载 */
      userSelectList(query) {
        if (query !== '' && query.length>1) {
          systemUserSelect({"userName":query,'userType':''}).then(response => {
            this.$set(this,'optionsUser',response.data);
          });
        } else {
          this.$set(this,'optionsUser',[]);
        }
      },
      //消息类型切换
      noticeTypeChange(e){
        if(e == 1){
          this.$set(this.addForm,'sendType','');
          this.$set(this.addForm,'userIds','');
          this.$set(this.addForm,'deptIds','');
          this.$set(this.addForm,'subIds','');
        }else if(e == 2){
          this.$set(this.addForm,'company','');
        }
      },
      //接收人切换
      sendTypeChange(e){
        if(e == 5){
          this.$set(this.addForm,'deptIds','');
          this.$set(this.addForm,'subIds','');
        }else if(e == 6){
          this.$set(this.addForm,'userIds','');
          this.$set(this.addForm,'subIds','');
        }else if(e == 7){
          this.$set(this.addForm,'userIds','');
          this.$set(this.addForm,'deptIds','');
        }else{
          this.$set(this.addForm,'userIds','');
          this.$set(this.addForm,'deptIds','');
          this.$set(this.addForm,'subIds','');
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .notice-addPage{
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding:20px;
    }
  }
</style>
