<template>
  <div class="page">
    <topBar
      v-if="topList.length > 0"
      :topList="topList"
      :moren="moren"
    ></topBar>
    <div class="main">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item :label="'显示类型'" prop="name">
          <el-radio-group v-model="ruleForm.functionType" @change="getRadio">
            <el-radio
              :label="item.value"
              v-for="item in funcList"
              :key="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" prop="name">
          <el-radio-group v-model="ruleForm.websiteType" @change="getRadios">
            <el-radio
              :label="item.value"
              :disabled="item.value == 2 && ruleForm.functionType == 2"
              v-for="item in webList"
              :key="item.value"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="22">
            <el-form-item :label="'公告标题'" prop="name">
              <el-input clearable v-model="ruleForm.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="'起止日期'" prop="name">
              <el-date-picker
                v-model="ruleForm.ruleFormTime"
                @change="changeTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                :range-separator="'至'"
                :start-placeholder="'开始日期'"
                :end-placeholder="'结束日期'"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" v-show="ruleForm.websiteType == 1">
            <el-form-item :label="'发布位置'">
              <el-select
                clearable
                :placeholder="'请选择'"
                multiple
                v-model="ruleForm.publishLocation"
              >
                <el-option
                  v-for="item in localList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-show="ruleForm.websiteType == 1">
            <el-form-item :label="'等级'">
              <el-select
                clearable
                :placeholder="'请选择'"
                multiple
                v-model="ruleForm.grade"
              >
                <el-option
                  v-for="item in gradeList"
                  :key="item.pkId"
                  :label="item.gradeName"
                  :value="item.pkId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-show="ruleForm.websiteType == 1">
            <el-form-item :label="'真实奖衔'">
              <el-select
                clearable
                :placeholder="'请选择'"
                multiple
                v-model="ruleForm.awards"
              >
                <el-option
                  v-for="item in awardsList"
                  :key="item.pkId"
                  :label="item.awardsName"
                  :value="item.pkId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" v-show="ruleForm.websiteType == 2">
            <el-form-item :label="'角色'">
              <el-select
                clearable
                multiple
                :placeholder="'请选择'"
                v-model="ruleForm.role"
              >
                <el-option
                  v-for="item in jsList"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="'强制弹窗'">
              <el-select
                clearable
                :placeholder="'请选择'"
                v-model="ruleForm.isPopScreen"
              >
                <el-option
                  v-for="item in popList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item :label="'内容'">
              <editor
                ref="sptwEditor"
                v-model="ruleForm.content"
                :min-height="196"
                :uploadUrl="uploadImgUrl"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="footer">
      <el-button size="small" class="thebtn2"> {{ '取消' }}</el-button>
      <el-button size="small" @click="submit" class="thebtn1"> {{ '确认' }}</el-button>
    </div>
  </div>
</template>

  <script>
import Editor from "@/components/Editor";
import * as api from "@/api/notice.js";
import { getAwardsListChiose } from "@/api/level";
import topBar from "@/components/topBar";
export default {
  components: {
    Editor,topBar
  },
  name: "ReleaseAnnouncement",
  data() {
    return {
      moren: "releaseAnnouncement",
      topList: [
        {
          name: "发布公告",
          path: "releaseAnnouncement",
        },
      ],
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/upload",
      ruleForm: {
        title: "",
        functionType: 1,
        startTime: "",
        endTime: "",
        websiteType: "",
        publishLocation: [],
        grade: [],
        awards: [],
        isPopScreen: "",
        content: "",
        role: [],
      },
      rules: {},
      localList: [],
      popList: [],
      webList: [],
      gradeList: [],
      awardsList: [],
      pkId: "",
      funcList: [],
      jsList: [],
      isAdmin: false,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getRadio(e) {
      if (this.ruleForm.functionType == 2) {
        this.ruleForm.websiteType = "";
      }
      this.$forceUpdate();
    },
    getRadios(e) {},
    changeTime(val) {
      this.ruleForm.startTime = val[0];
      this.ruleForm.endTime = val[1];
    },

    getData() {
      api.noticeWebsite().then((res) => {
        this.webList = res.data;
      });
      api.noticeFuncType().then((res) => {
        this.funcList = res.data;
      });
      api.roleList().then((res) => {
        this.jsList = res.rows;
      });
      api.noticeLocation().then((res) => {
        this.localList = res.data;
      });
      api.noticePopup().then((res) => {
        this.popList = res.data;
      });
      api.getGradeRanglist().then((res) => {
        this.gradeList = res.data;
      });

      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows;
      });
    },
    submit() {
      this.ruleForm.publishLocation = this.ruleForm.publishLocation.toString();
      this.ruleForm.grade = this.ruleForm.grade.toString();
      this.ruleForm.awards = this.ruleForm.awards.toString();
      this.ruleForm.role = this.ruleForm.role.toString();
      api.showNoticePetition(this.ruleForm).then((res) => {
        if (res.code == 200) {
          this.$router.push({
            path: "fbZxqc",
            query: {
              data: JSON.stringify(res.data),
              // rechargeData: JSON.stringify(this.form),
            },
          });
        }
        // if (this.isAdmin) {
        //   this.$router.replace({
        //     path: "/announcement/noticeList/admin",
        //   });
        // } else {
        //   this.$router.replace({
        //     path: "/announcement/noticeList",
        //   });
        // }
      });
    },
  },
};
</script>

  <style lang="scss" scoped>
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  }
  ::v-deep .el-select {
    width: 100%;
  }
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
</style>
