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

<script>
import Editor from "@/components/Editor";
import { getAwardsListChiose } from "@/api/level";
import * as api from "@/api/notice.js";
export default {
  components: {
    Editor,
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/upload",
      ruleForm: {
        title: "",
        content: "",
        functionType: 1,
        websiteType: 1,
        startTime: "",
        endTime: "",
        isPopScreen: "",
        websiteTypes: [],
        publishLocation: [],
        grade: [],
        awards: [],
        role: [],
        systemType: "",
      },
      rules: {
        title: [{ required: true, message: "请输入公告标题", trigger: "blur" }],
        functionType: [
          { required: true, message: "请选择显示类型", trigger: "change" },
        ],
        role: [{ required: true, message: "请选择", trigger: "change" }],
        grade: [{ required: true, message: "请选择", trigger: "change" }],
        awards: [{ required: true, message: "请选择", trigger: "change" }],
        publishLocation: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        websiteType: [
          { required: true, message: '请选择', trigger: "change" },
        ],
        ruleFormTime: [
          { required: true, message: "请选择起止时间", trigger: "change" },
        ],
        isPopScreen: [
          { required: true, message: '请选择', trigger: "change" },
        ],
        systemType: [{ required: true, message: "请选择", trigger: "change" }],
        content: [
          { required: true, message: '请输入', trigger: "blur" },
        ],
      },

      localList: [],
      popList: [],
      webList: [],
      gradeList: [],
      pkId: "",
      funcList: [],
      jsList: [],
      isAdmin: false,
      lookOver: false,
      awardsList: [],
      queryType: 0,
      systemList: [],
    };
  },
  mounted() {
    this.pkId = this.$route.query.pkId || "";
    this.isAdmin = this.$route.query.isAdmin || false;
    this.lookOver = !!(
      this.$route.query.type == 1 || this.$route.query.type == 2
    );
    this.queryType = this.$route.query.type;
    console.log(
      "%c [ this.queryType ]-253",
      "font-size:13px; background:#abb16f; color:#eff5b3;",
      this.queryType
    );
    this.getData();
    if (this.pkId != "") {
      this.getDetails();
    }
  },
  methods: {
    getRadio(e) {
      if (this.ruleForm.functionType == 2) {
        this.ruleForm.websiteTypes = [];
      }
      this.$forceUpdate();
    },
    getRadios(e) {},
    changeTime(val) {
      this.ruleForm.startTime = val[0];
      this.ruleForm.endTime = val[1];
    },
    getDetails() {
      api
        .noticeDetails({
          pkId: this.pkId,
        })
        .then((res) => {
          this.ruleForm = res.data;
          this.$set(this.ruleForm, "websiteTypes", [this.ruleForm.websiteType]);
          if (this.ruleForm.publishLocation) {
            let pub = this.ruleForm.publishLocation.split(",");
            pub = pub.map((item) => {
              return parseInt(item);
            });
            this.$set(this.ruleForm, "publishLocation", pub);
          }
          if (this.ruleForm.grade) {
            let gra = this.ruleForm.grade.split(",");
            gra = gra.map((item) => {
              return parseInt(item);
            });
            this.$set(this.ruleForm, "grade", gra);
          }

          if (this.ruleForm.awards) {
            let awar = this.ruleForm.awards.split(",");
            awar = awar.map((item) => {
              return parseInt(item);
            });
            this.$set(this.ruleForm, "awards", awar);
          }
          if (this.ruleForm.role) {
            let jue = this.ruleForm.role.split(",");
            jue = jue.map((item) => {
              return parseInt(item);
            });
            this.$set(this.ruleForm, "role", jue);
          }

          this.$set(this.ruleForm, "ruleFormTime", [
            this.ruleForm.startTime,
            this.ruleForm.endTime,
          ]);
          console.log(
            "%c [  this.ruleForm ]-310",
            "font-size:13px; background:#2bcef0; color:#6fffff;",
            this.ruleForm
          );
          this.$forceUpdate();
        });
    },
    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;
      });
      api.systemTypeAll().then((res) => {
        this.systemList = res.data;
      });
    },
    submit() {
      let postObj = JSON.parse(JSON.stringify(this.ruleForm));
      if (typeof this.ruleForm.grade === "object") {
        postObj.grade = this.ruleForm.grade.join(",");
      }
      if (typeof this.ruleForm.awards === "object") {
        postObj.awards = this.ruleForm.awards.join(",");
      }
      if (typeof this.ruleForm.publishLocation === "object") {
        postObj.publishLocation = this.ruleForm.publishLocation.join(",");
      }
      if (typeof this.ruleForm.role === "object") {
        postObj.role = this.ruleForm.role.join(",");
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          const obj = Object.assign({}, postObj, { pkId: this.pkId });
          api.showNoticePetition(obj).then((res) => {
            if (res.code == 200) {
              this.$router.push({
                path: "/announcement/fbZxqc",
                query: {
                  data: JSON.stringify(res.data),
                  type: this.$route.query.type,
                },
              });
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</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;
  }
}
::v-deep .el-form-item {
  padding-bottom: 20px;
}
</style>
