<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-02-23 15:59:57
-->
<template>
  <div class="page">
    <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"
                      :disabled="lookOver"
                      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-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 :label="item.value"
                      :disabled="lookOver||(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"
                        :disabled="lookOver"></el-input>
            </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="name">
              <el-date-picker :disabled="lookOver"
                              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="6"
                  v-show="ruleForm.websiteType == 1">
            <el-form-item :label="'发布位置'">
              <el-select clearable
                         :disabled="lookOver"
                         :placeholder="'请选择'"
                         multiple
                         v-model="ruleForm.publishLocations">
                <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="6"
                  v-show="ruleForm.websiteType == 1">
            <el-form-item :label="'等级'">
              <el-select clearable
                         :disabled="lookOver"
                         :placeholder="'请选择'"
                         multiple
                         v-model="ruleForm.grades">
                <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="6"
                  v-show="ruleForm.websiteType == 2">
            <el-form-item :label="'角色'">
              <el-select clearable
                         :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="6">
            <el-form-item :label="'强制弹窗'">
              <el-select clearable
                         :disabled="lookOver"
                         :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="'内容'"
                          v-if="lookOver">
              <editor ref="sptwEditor"
                      :readOnly="lookOver"
                      v-model="ruleForm.content"
                      :min-height="196"
                      :uploadUrl="uploadImgUrl" />
            </el-form-item>
            <el-form-item :label="'内容'"
                          v-else>
              <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"
                 v-has-buttons="['EmailedAdd']"
                 class="thebtn1"> {{ '确认' }}</el-button>
    </div>
  </div>
</template>

<script>
import Editor from '@/components/Editor'
import * as api from '@/api/notice.js'
export default {
  components: {
    Editor,
  },
  data() {
    return {
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
      ruleForm: {
        functionType: 1,
        startTime: '',
        endTime: '',
        websiteTypes: [],
        publishLocations: [],
        grades: [],
      },
      rules: {},
      localList: [],
      popList: [],
      webList: [],
      gradeList: [],
      pkId: '',
      funcList: [],
      jsList: [],
      isAdmin: false,
      lookOver: false,
    }
  },
  mounted() {
    this.pkId = this.$route.query.pkId || ''
    this.isAdmin = this.$route.query.isAdmin || false
    this.lookOver = this.$route.query.type == 1 ? true : false
    this.getData()
    if (this.pkId != '') {
      this.getDetails()
    }
  },
  methods: {
    getRadio(e) {
      if (this.ruleForm.functionType == 2) {
        this.ruleForm.websiteTypes = []
      }
      this.$forceUpdate()
    },
    getRadios(e) {
      console.log(
        '%c [ e ]-193',
        'font-size:13px; background:#129bc0; color:#56dfff;',
        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])
          let pub = this.ruleForm.publishLocation.split(',')
          pub = pub.map((item) => {
            return parseInt(item)
          })
          this.$set(this.ruleForm, 'publishLocations', pub)

          let gra = this.ruleForm.grade.split(',')
          gra = gra.map((item) => {
            return parseInt(item)
          })
          this.$set(this.ruleForm, 'grades', gra)

          this.$set(this.ruleForm, 'ruleFormTime', [
            this.ruleForm.startTime,
            this.ruleForm.endTime,
          ])
          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
      })
      // api.noticeGrade().then((res) => {
      //   this.gradeList = res.data
      // })
    },
    submit() {
      this.ruleForm.grade = this.ruleForm.grades.join(',')
      this.ruleForm.publishLocation = this.ruleForm.publishLocations.join(',')
      this.ruleForm.websiteType
      let obj = Object.assign({}, this.ruleForm, { pkId: this.pkId })
      let urlRequest = ''

      if (this.pkId != '') {
        urlRequest = api.noticeUpdate
      } else {
        urlRequest = api.noticeSaveMember
      }

      urlRequest(obj).then((res) => {
        this.$message({
          message: '添加成功',
          type: 'success',
        })

        this.$router.replace({
          path: '/announcement/email',
        })

        // console.log(
        //   '%c [ res ]-238',
        //   'font-size:13px; background:#5f4299; color:#a386dd;',
        //   res
        // )
      })
    },
  },
}
</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>
