<template>
  <div class="page">
    <div class="textarea-div border">
      <div class="title mar-b32"><span>*</span>活动标题</div>
      <div class="pad-l20">
        <u-input type="textarea" v-model="params.title" :border="false" height="44" :auto-height="true" placeholder="请输入标题（60字以内）" :placeholder-style="placeholderStyle" maxlength="60" />
      </div>
    </div>
    <div class="textarea-div mar-b16">
      <div class="title mar-b32"><span>*</span>活动详情</div>
      <div class="pad-l20">
        <u-input type="textarea" v-model="params.content" :border="false" :height="140" :auto-height="true" placeholder="请输入活动详情（500字以内）" :placeholder-style="placeholderStyle" maxlength="500" />
      </div>
    </div>
    <div class="textarea-div mar-b16">
      <div class="title mar-b32"><span>*</span>活动封面图</div>
      <div class="pad-l20">
        <AiUploader v-model="files"></AiUploader>
      </div>
    </div>
    <div class="input-div">
      <div class="border-content border">
        <div class="title"><span>*</span>活动主题</div>
        <div class="value" @click="selectClick(topicList, 'target')">
          <span :class="params.target ? '' : 'color-999'">{{ params.target || '请选择' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon" />
        </div>
      </div>
    </div>
    <div class="input-div">
      <div class="border-content border">
        <div class="title"><span>*</span>活动类型</div>
        <div class="value" @click="selectClick(activeTypeList, 'type')">
          <span :class="params.type ? '' : 'color-999'">{{ params.type || '请选择' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon" />
        </div>
      </div>
    </div>
    <div class="input-div">
      <div class="border-content border">
        <div class="title"><span>*</span>报名范围</div>
        <div class="value" @click="selectClick($dict.getDict('activityScope'), 'scope')">
          <span :class="params.scope === '' ? 'color-999' : ''">{{ $dict.getLabel('activityScope', params.scope) || '请选择' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon" />
        </div>
      </div>
    </div>
    <div class="input-div" v-if="params.scope == 1">
      <div class="border-content border">
        <div class="title"><span>*</span>发布单位</div>
        <div class="value">
          <AIsEarchPopup title="请选择发布单位" placeholder="搜索单位名称" :ops="{ label: 'name', search: 'name' }" url="/admin/partyOrganization/queryPartyOrganizationListByName" @select="(v) => (selectedOrg = v)">
            <div class="picker-input" slot="btn">
              <view class="uni-input color-999" v-if="!selectedOrg.id">请选择</view>
              <view class="uni-input" v-else>{{ selectedOrg.name }}</view>
              <image src="https://cdn.cunwuyun.cn/img/right-icon-999.png" class="right-icon"></image>
            </div>
          </AIsEarchPopup>
        </div>
      </div>
    </div>

    <div class="input-div" v-if="params.scope == 2">
      <div class="border-content border">
        <div class="title"><span>*</span>发布小区</div>
        <div class="value" @click="estateSelect = true">
          <span :class="params.communityName ? '' : 'color-999'">{{ params.communityName || '请选择' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon" />
        </div>
      </div>
    </div>
    <u-select v-model="estateSelect" mode="mutil-column-auto" :list="estateTreeData" @confirm="handleBindEstate" value-name="id" label-name="name" />

    <div class="input-div mar-b16">
      <div class="border-content">
        <div class="title"><span>*</span>活动名额</div>
        <div class="value">
          <u-input type="input" v-model="params.total" :border="false" :height="44" :auto-height="true" placeholder="如不限制人数，填写0" input-align="right" :placeholder-style="placeholderStyle" maxlength="5" />
        </div>
      </div>
    </div>
    <div class="input-div">
      <div class="border-content border">
        <div class="title"><span>*</span>开始时间</div>
        <div class="value" @click="selectDate('beginTime')">
          <span :class="params.beginTime ? '' : 'color-999'">{{ params.beginTime || '请选择' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon" />
        </div>
      </div>
    </div>
    <div class="input-div">
      <div class="border-content border">
        <div class="title"><span>*</span>结束时间</div>
        <div class="value" @click="selectDate('endTime')">
          <span :class="params.endTime ? '' : 'color-999'">{{ params.endTime || '请选择' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon" />
        </div>
      </div>
    </div>
    <div class="input-div">
      <div class="border-content border">
        <div class="title"><span>*</span>报名截止时间</div>
        <div class="value" @click="selectDate('stopSignupTime')">
          <span :class="params.stopSignupTime ? '' : 'color-999'">{{ params.stopSignupTime || '请选择' }}</span>
          <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon" />
        </div>
      </div>
    </div>
    <div class="input-div mar-b16">
      <div class="border-content">
        <div class="title"><span>*</span>活动地点</div>
        <div class="value">
          <input type="text" maxlength="20" v-model="params.address" :border="false" :height="44" :auto-height="true" placeholder="请输入" input-align="right" :placeholder-style="placeholderStyle" />
        </div>
      </div>
    </div>
    <div class="input-div">
      <div class="border-content border">
        <div class="title"><span>*</span>联系人</div>
        <div class="value">
          <u-input type="input" v-model="params.contactPerson" :border="false" :height="44" :auto-height="true" placeholder="请输入" input-align="right" :placeholder-style="placeholderStyle" maxlength="10" />
        </div>
      </div>
    </div>
    <div class="input-div mar-b16 pad-b220">
      <div class="border-content">
        <div class="title"><span>*</span>联系方式</div>
        <div class="value">
          <u-input type="input" v-model="params.contactPhone" :border="false" :height="44" :auto-height="true" placeholder="请输入" input-align="right" :placeholder-style="placeholderStyle" maxlength="11" />
        </div>
      </div>
    </div>
    <div class="footer-btn">
      <div class="btn" @click="add">保存</div>
    </div>

    <u-select v-model="showSelect" :list="selectList" label-name="dictName" value-name="dictValue" @confirm="selectConfirm"></u-select>
    <u-picker mode="time" v-model="showDate" :start-year="startYear" @confirm="dateConfirm" :params="timeParams"></u-picker>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'AddActive',
  components: {},
  computed: {
    ...mapState(['user', 'global']),
  },
  data() {
    return {
      files: [],
      showSelect: false,
      selectList: [],
      topicList: [], //活动主题分类
      activeTypeList: [],
      selectData: '',
      showDate: false,
      startYear: '',
      beginTimestamp: '',
      params: {
        title: '',
        content: '',
        url: '',
        target: '',
        type: '',
        scope: '',
        total: '',
        address: '',
        beginTime: '',
        endTime: '',
        stopSignupTime: '',
        contactPerson: '',
        contactPhone: '',
        status: 0,
        createUserId: '',
        createUserName: '',
        orgName: '',
        avatar: '',
        id: '',
        orgId: '',
        orgName: '',
        communityId: '',
        communityName: '',
      },
      timeParams: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
        timestamp: true,
      },
      placeholderStyle: 'color:#999;font-size:16px;',
      selectedOrg: {},
      estateTreeData: [],
      estateSelect: false,
    }
  },
  onLoad(option) {
    this.$dict.load('activityScope').then(() => {
      this.getTopicList()
      console.log(option)
      if (option.id) {
        uni.setNavigationBarTitle({ title: '编辑活动' })
        this.params.id = option.id
        this.getDetail()
      } else {
        this.params.contactPerson = this.user.realName
        this.params.contactPhone = this.user.phone
      }
    })
    var date = new Date()
    this.startYear = date.getFullYear()
    this.getEstates()
  },
  methods: {
    getEstates() {
      this.$http.post(`/app/appvanguardcommunityinfo/getTree?type=1&areaId=${this.global.areaId}`).then((res) => {
        if (res?.data) {
          this.estateTreeData = res.data?.children
        }
      })
    },
    handleBindEstate(e) {
      this.params.communityId = e[2].value
      this.params.communityName = e[2].label
    },
    getDetail() {
      this.$http.post(`/app/appactivityinfo/queryDetailById?id=${this.params.id}`).then((res) => {
        if (res?.data) {
          this.files = [
            {
              url: res.data.url,
            },
          ]
          this.params = res.data
        }
      })
    },
    getTopicList() {
      this.$http.post(`/app/appactivitytopic/list?status=1&size=1000`).then((res) => {
        if (res.code == 0) {
          res.data.records.map((item) => {
            ;(item.dictName = item.name), (item.dictValue = item.content)
          })
          this.topicList = res.data.records
        }
      })
    },
    selectClick(list, data) {
      if (data == 'type' && !list.length) {
        //活动类型
        return this.$toast('请先选择活动主题')
      }
      this.selectData = data
      this.selectList = list
      this.showSelect = true
    },
    selectConfirm(e) {
      console.log(e)
      if (this.selectData == 'target' || this.selectData == 'type') {
        this.params[this.selectData] = e[0].label
      } else {
        this.params[this.selectData] = e[0].value
      }

      if (this.selectData == 'target') {
        //选择主题分类
        var content = e[0].value.split(',')
        this.activeTypeList = []
        this.type = ''
        content.map((items) => {
          var info = { dictName: items }
          this.activeTypeList.push(info)
        })
      }
    },
    selectDate(data) {
      if (data == 'endTime' && !this.params.beginTime) {
        return this.$toast('请先选择活动开始时间')
      }
      if (data == 'stopSignupTime' && !this.params.beginTime) {
        return this.$toast('请先选择活动开始时间')
      }
      this.selectData = data
      this.showDate = true
    },
    dateConfirm(e) {
      console.log(e)
      if (this.selectData == 'beginTime') {
        this.beginTimestamp = e.timestamp
        this.params.endTime = ''
        this.params.stopSignupTime = ''
      }
      if (this.selectData == 'endTime' && e.timestamp < this.beginTimestamp) {
        return this.$toast('活动结束时间不能晚于开始时间')
      }

      if (this.selectData == 'stopSignupTime' && e.timestamp > this.beginTimestamp) {
        return this.$toast('报名截止时间不能早于开始时间')
      }
      this.params[this.selectData] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
    },
    add() {
      if (!this.params.title) {
        return this.$toast('请输入活动标题')
      }
      if (!this.params.content) {
        return this.$toast('请输入活动标题')
      }
      if (!this.files.length) {
        return this.$toast('请上传活动封面')
      }
      if (!this.params.target) {
        return this.$toast('请选择活动主题')
      }
      if (!this.params.type) {
        return this.$toast('请选择活动类型')
      }
      if (this.params.scope === '') {
        return this.$toast('请选择报名范围')
      }
      if (this.params.scope == 1 && !this.selectedOrg.id) {
        return this.$toast('请选择发布单位')
      }
      if (this.params.scope == 2 && !this.params.communityId) {
        return this.$toast('请选择发布小区')
      }

      if (!this.params.total) {
        return this.$toast('请输入活动名额')
      }
      if (!this.params.address) {
        return this.$toast('请输入活动地点')
      }
      if (!this.params.beginTime) {
        return this.$toast('请选择开始时间')
      }
      if (!this.params.endTime) {
        return this.$toast('请选择结束时间')
      }
      if (!this.params.stopSignupTime) {
        return this.$toast('请选择报名截止时间')
      }
      if (!this.params.contactPerson) {
        return this.$toast('请输入联系人')
      }
      if (!this.params.contactPhone) {
        return this.$toast('请输入联系方式')
      }
      if (this.params.scope == 1) {
        this.params.orgId = this.selectedOrg.id
        this.params.orgName = this.selectedOrg.name
      }
      this.params.url = this.files[0].url
      this.params.createUserId = this.user.partyId
      this.params.createUserName = this.user.realName
      this.params.orgName = this.user.partyOrgName
      this.params.avatar = this.user.avatarUrl
      this.confirmAdd()
    },
    confirmAdd() {
      this.$http.post(`/app/appactivityinfo/addOrUpdate`, this.params).then((res) => {
        if (res.code == 0) {
          this.$toast(this.params.id ? '活动编辑成功' : '活动新增成功')
          setTimeout(() => {
            uni.$emit('refresh')
            uni.navigateBack()
          }, 2000)
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.textarea-div {
  width: 100%;
  padding: 32px 32px 38px 32px;
  box-sizing: border-box;
  background-color: #fff;
}
.input-div {
  width: 100%;
  padding-left: 32px;
  box-sizing: border-box;
  background-color: #fff;
  .border-content {
    display: flex;
    justify-content: space-between;
    line-height: 44px;
    color: #333;
    padding: 34px 32px 34px 0;
    .right-icon {
      width: 32px;
      height: 32px;
      margin-left: 8px;
      vertical-align: middle;
    }
    .color-999 {
      color: #999;
    }
  }
}
.title {
  font-size: 32px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #333;
  line-height: 44px;
  span {
    font-family: PingFangSC-Regular, PingFang SC;
    color: #ff4466;
    margin-right: 4px;
  }
}
.border {
  border-bottom: 2px solid #ddd;
}
.mar-b32 {
  margin-bottom: 32px;
}
.pad-l20 {
  padding-left: 20px;
}
.mar-b16 {
  margin-bottom: 16px;
}
.pad-b220 {
  padding-bottom: 220px;
}
.footer-btn {
  width: 100%;
  padding: 116px 32px 32px;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #f3f6f9;
  z-index: 99;
  .btn {
    width: 100%;
    height: 92px;
    line-height: 92px;
    text-align: center;
    background: #1365dd;
    border-radius: 8px;
    font-size: 34px;
    color: #fff;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }
}
.value {
  width: calc(100% - 240px);
  text-align: right;
}
::v-deep ai-search-popup {
  width: 100%;
  .uni-input {
    display: inline-block;
  }
}
</style>
