<template>
  <ai-detail class="ActiveAdd">
    <!-- 返回按钮 -->
    <template #title>
      <ai-title title="发起活动" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>

    <!-- 内容 -->
    <template #content>
      <el-form class="el-form" :model="formData" ref="ruleForm" :rules="formRules" label-width="100px" label-suffix="：" align-items="center">
        <ai-card title="活动信息">
          <div slot="content" class="ai-content">
            <!-- 发布地区 -->
            <el-form-item label="发布地区" prop="areaId" class="line">
              <ai-area-select always-show clearable :instance="instance" v-model="formData.areaId" :areaLevel="5" size="small" @fullname="(name) => (areaName = name)" :disabled-level="user.info.areaList.length"> </ai-area-select>
            </el-form-item>

            <!-- 标题 -->
            <el-form-item label="标题" prop="title" class="line">
              <el-input placeholder="请输入..." v-model="formData.title" show-word-limit maxlength="60" size="small" clearable></el-input>
            </el-form-item>

            <div class="float">
              <!-- 活动时间 -->
              <el-form-item label="活动时间" prop="beginTime">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.beginTime" type="datetime" placeholder="选择日期时间" size="small"> </el-date-picker>
              </el-form-item>

              <!-- 至 -->
              <el-form-item label="至" prop="endTime">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.endTime" type="datetime" placeholder="选择日期" size="small"> </el-date-picker>
              </el-form-item>
            </div>

            <!-- 活动地点 -->
            <el-form-item label="活动地点" prop="address" class="line">
              <el-input placeholder="请输入..." v-model="formData.address" show-word-limit maxlength="20" size="small" clearable></el-input>
            </el-form-item>

            <!-- 参与名额 -->
            <el-form-item label="参与名额" prop="total" class="width">
              <el-input placeholder="请输入..." v-model="formData.total" size="small" clearable></el-input>
              <span class="text">"0"表示不限制活动报名人数</span>
            </el-form-item>

            <!-- 截止日期 -->
            <el-form-item label="截止日期" prop="stopSignupTime" class="line">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.stopSignupTime" type="datetime" placeholder="选择日期" size="small"> </el-date-picker>
            </el-form-item>

            <div class="float">
              <!-- 联系人 -->
              <el-form-item label="联系人" prop="contactPerson" class="width">
                <el-input placeholder="请输入..." v-model="formData.contactPerson" size="small" clearable></el-input>
              </el-form-item>

              <!-- 联系电话 -->
              <el-form-item label="联系电话" prop="contactPhone" class="phonenumber">
                <el-input placeholder="联系电话..." v-model="formData.contactPhone" size="small" clearable></el-input>
              </el-form-item>
            </div>

            <!-- 活动介绍 -->
            <el-form-item label="活动介绍" prop="content" class="line">
              <ai-editor v-model="formData.content" :instance="instance" />
            </el-form-item>

            <!-- 略缩图 -->
            <el-form-item label="略缩图" prop="imgUrl" class="line" v-if="isEdit != true">
              <ai-uploader :isShowTip="true" :instance="instance" v-model="formData.imgUrl" :limit="1" :cropOps="cropOps" is-crop>
                <template slot="tips">
                  <p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
                  <p>图片比例：1.6：1</p>
                </template>
              </ai-uploader>
            </el-form-item>
          </div>
          <!-- / -->
        </ai-card>
      </el-form>
    </template>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm('ruleForm')">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'ActiveAdd',
  components: {},
  props: { instance: Function, dict: Object, params: Object, disabledLevel: Number },
  data() {
    return {
      formData: {
        areaId: '',
        title: '',
        beginTime: '',
        endTime: '',
        address: '',
        stopSignupTime: '',
        total: '',
        contactPerson: '',
        contactPhone: '',
        content: '',
        imgUrl: [],
      },
      id: '',
    }
  },
  computed: {
    ...mapState(['user']),

    isEdit() {
      return !!this.params.id
    },

    cropOps() {
      return {
        width: '336px',
        height: '210px',
      }
    },

    formRules() {
      return {
        areaId: [
          { required: true, message: '请选择发布地区', trigger: 'change' },
          {
            validator: (r, v, cb) => (/0{3}$/g.test(v) ? cb('请选择到村') : cb()),
          },
        ],
        title: [{ required: true, message: '请输入标题', trigger: 'change' }],
        beginTime: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
        endTime: [{ required: true, message: '请选择至', trigger: 'change' }],
        address: [{ required: true, message: '请输入活动地点', trigger: 'change' }],
        stopSignupTime: [{ required: true, message: '请选择截止日期', trigger: 'change' }],
        total: [{ required: true, message: '请输入参与名额', trigger: 'change' }],
        contactPerson: [{ required: true, message: '请输入联系人', trigger: 'change' }],
        contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'change' }],
        content: [{ required: true, message: '请输入活动介绍', trigger: 'change' }],
        imgUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
      }
    },
  },
  watch: {},
  created() {
    this.formData.areaId = this.user.info.areaId
    
    if (this.params && this.params.id) {
      this.id = this.params.id
    }

    this.getEdit()
  },
  mounted() {},
  methods: {
    getEdit() {
      this.instance.post(`/app/apppartyreport/queryDetailById?id=${this.id}`).then((res) => {
        if (res.code == 0) {
          this.formData = res.data
        }
      })
    },

    // 确定新增
    confirm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.instance
            .post(`/app/apppartyreport/addOrUpdate`, {
              areaId: this.formData.areaId,
              title: this.formData.title,
              beginTime: this.formData.beginTime,
              endTime: this.formData.endTime,
              address: this.formData.address,

              stopSignupTime: this.formData.stopSignupTime,
              total: this.formData.total,
              contactPerson: this.formData.contactPerson,
              contactPhone: this.formData.contactPhone,
              content: this.formData.content,
              imgUrl: this.formData.imgUrl[0].url,
              id: this.id,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message.success('提交成功')
                setTimeout(() => {
                  this.cancel(true)
                }, 1000)
              }
            })
        }
      })
    },

    // 返回按钮
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: isRefresh ? true : false,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.ActiveAdd {
  .el-form {
    .ai-card {
      .ai-content {
        .width {
          .text {
            margin-left: 50px;
            color: #adadad;
          }
          .el-form-item__content {
            .el-input {
              width: 220px;
            }
          }
        }
        .float {
          .width {
            .el-form-item__content {
              .el-input {
                width: 220px;
              }
            }
          }
          display: flex;
          .phonenumber {
            margin-left: 45px;
          }
        }
      }
    }
  }
}
</style>
