<template>
  <div class="team-notice-send">
    <el-drawer
      :title="$t('pages.teamList.noticeSend.title')"
      :visible="true"
      :modal-append-to-body="true"
      :append-to-body="true"
      width="25%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div v-loading="submitLoading">
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="dataForm"
          label-position="left"
          label-width="70px"
          style="width: 450px; margin-left:50px;"
        >
          <el-form-item :label="$t('pages.teamList.noticeSend.titleLabel')" prop="title">
            <el-input
              v-model.trim="dataForm.title"
              :placeholder="$t('pages.teamList.noticeSend.titleLabel')"
              maxlength="60"
              show-word-limit
            />
          </el-form-item>
          <el-form-item :label="$t('pages.teamList.noticeSend.content')" prop="content">
            <el-input
              v-model.trim="dataForm.content"
              :placeholder="$t('pages.teamList.noticeSend.content')"
              type="textarea"
              :rows="5"
              maxlength="200"
              show-word-limit
            />
          </el-form-item>
          <el-form-item :label="$t('pages.teamList.noticeSend.link')">
            <el-input
              v-model.trim="dataForm.link"
              :placeholder="$t('pages.teamList.noticeSend.link')"
            />
          </el-form-item>
          <el-form-item :label="$t('pages.teamList.noticeSend.cover')">
            <el-form-item>
              <upload-image
                v-model="dataForm.cover"
                :file-dir="$application.fileBucket.cover"
              />
            </el-form-item>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
          <el-button @click="handleClose">
            {{ $t('pages.teamList.action.cancel') }}
          </el-button>
          <el-button
            v-loading="submitLoading"
            type="primary"
            @click="handleSubmit()"
          >
            {{ $t('pages.teamList.action.submit') }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { sendTeamNotice } from '@/api/team'
function getFormData() {
  return {
    teamId: '',
    title: '',
    content: '',
    cover: '',
    link: ''
  }
}
export default {
  name: 'TeamNoticeSend',
  props: {
    teamId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      submitLoading: false,
      rules: {
        title: [
          { required: true, message: this.$t('pages.teamList.validation.titleRequired'), trigger: 'blur' }
        ],
        content: [
          { required: true, message: this.$t('pages.teamList.validation.contentRequired'), trigger: 'blur' }
        ]
      },
      dataForm: {
        teamId: '',
        title: '',
        content: '',
        cover: '',
        link: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      const that = this
      that.$refs.dataForm.validate(valid => {
        if (valid) {
          that.dataForm.teamId = that.teamId
          that.$confirm(this.$t('pages.teamList.confirm.sendNotice'), this.$t('pages.teamList.confirm.deleteTitle'), {
            type: 'warning'
          }).then(() => {
            that.submitLoading = true
            sendTeamNotice(that.dataForm).then(res => {
              that.$opsMessage.success()
              that.submitLoading = false
              that.dataForm = getFormData()
              that.handleClose()
            }).catch(er => {
              that.submitLoading = false
              console.error(er)
            })
          }).catch(() => {
          })
        } else {
          console.error('error submit!!')
          return false
        }
      })
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
