<template>
  <div class="PhotoForm">
    <div class="form-item__group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>事件类型</h2>
          </div>
          <div class="form-item__right">
            <AiSelect :list="dictList" v-model="form.groupId" placeholder="请选择"></AiSelect>
          </div>
        </div>
      </div>
      <div class="form-item form-item__textarea">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>事件描述</h2>
          </div>
          <div class="form-item__right">
            <textarea v-model="form.content" :maxlength="500" placeholder="请简要描述事件…"></textarea>
          </div>
        </div>
      </div>
    </div>
    <div class="form-item__group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>上报位置</h2>
          </div>
          <div class="form-item__right" @click="chooseAddress">
            <span v-if="form.address">{{ form.address }}</span>
            <i v-else>请选择</i>
            <u-icon name="arrow-right" color="#ddd"/>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>所属地区</h2>
          </div>
          <div class="form-item__right">
            <AiAreaPicker class="ai-area"  v-model="form.areaId" :fullName.sync="form.areaName" @input="areaSelect">
              <div class="ai-area__wrapper">
                <span class="label" v-if="form.areaName">{{ form.areaName }}</span>
                <span v-else style="color: #999999;">请选择</span>
                <u-icon name="arrow-right" style="display: inline-block;" color="#ddd"/>
              </div>
            </AiAreaPicker>
          </div>
        </div>
      </div>
    </div>
    <div class="form-item__group">
      <div class="form-item form-item__imgs">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i style="opacity: 0;">*</i>
            <h2>图片上传</h2>
            <span>(最多9张)</span>
          </div>
          <AiUploader type='image' v-model="form.files" :limit="9" multiple></AiUploader>
        </div>
      </div>
    </div>
    <div class="form-item__group">
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>姓名</h2>
          </div>
          <div class="form-item__right">
            <input placeholder="请输入" v-model="form.name" :maxlength="20"/>
          </div>
        </div>
      </div>
      <div class="form-item">
        <div class="form-item__wrapper">
          <div class="form-item__title">
            <i>*</i>
            <h2>联系方式</h2>
          </div>
          <div class="form-item__right">
            <input placeholder="请输入" v-model="form.phone" :maxlength="11"/>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-wrapper">
      <div class="btn" hover-class="text-hover" @click="submit">提交</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  data() {
    return {
      form: {
        content: '',
        lat: '',
        lng: '',
        address: '',
        name: '',
        phone: '',
        groupId: '',
        groupName: '',
        girdName: '',
        girdId: '',
        files: [],
        areaId: '',
        areaName: '',
      },
      dictList: [],
      flag: false,
    }
  },

  computed: {
    ...mapState(['user'])
  },

  onLoad(o) {
    this.getDict()
    this.form.phone = this.user.phone
    this.form.name = this.user.realName || ''
    uni.setNavigationBarTitle({
      title: '微心愿'
    })
    if(o.id) {
      this.getDetail(o.id)
    }
  },

  methods: {
    chooseAddress() {
      uni.authorize({
        scope: 'scope.userLocation',
        success: () => {
          uni.chooseLocation({
            success: res => {
              this.form.address = res.address
              this.form.lat = res.latitude
              this.form.lng = res.longitude
            }
          })
        },
        fail: () => {
          this.$dialog.confirm({
            content: '您未授权定位权限，无法选择位置'
          }).then(() => {
            wx.openSetting({
              success: res => {
                if (!res.authSetting['scope.userLocation']) {
                  this.$dialog.alert({
                    content: '您未授权定位权限，无法选择位置'
                  }).then(() => {
                  })
                } else {
                  console.log('设置定位权限')
                }
              }
            })
          })
        }
      })
    },
    getDict() {
      this.$instance.post(`/app/appclapeventgrouppingchang/list?current=1&size=100000`).then(res => {
        if (res?.code == 0) {
          this.dictList = res.data.records.map(v => {
            return {
              value: v.id,
              label: v.groupName
            }
          })
        }
      })
    },
    areaSelect(v) {
      console.log(v);
    },
    getDetail(id) {
      this. $instance.post(`/app/appclapeventinfopingchang/queryDetailById?id=${id}`).then(res => {
        if(res?.data) {
          console.log(res);
          this.form = res.data
          this.form.files = res.data.files
        }
      })
    },
    submit() {
      if (!this.form.groupId) {
        return this.$toast('请选择事件类型')
      }

      if (!this.form.content) {
        return this.$toast('请输入事件描述')
      }
      if (!this.form.address) {
        return this.$toast('请选择上报位置')
      }

      if (!this.form.name) {
        return this.$toast('请输入上报人姓名')
      }

      if (!this.form.phone) {
        return this.$toast('请输入上报人联系方式')
      }

      if (this.form.areaId.substr(this.form.areaId.length - 3, 3) === '000') {
        return this.$toast('所属地区必须选到村或社区')
      }

      if (this.flag) return
      this.flag = true

      this.$loading()
      this.$instance.post(`/app/appclapeventinfopingchang/addOrUpdate`, {
        ...this.form,
        openid: this.user.openid,
        groupName: this.dictList.filter(v => v.value === this.form.groupId)[0].label
      }).then(res => {
        this.$hideLoading()
        this.flag = false
        if (res?.code == 0) {
          uni.$emit('update')
          setTimeout(() => {
            uni.redirectTo({
              url: `./PhotoResult?id=${res.data.id}`
            })
          }, 400)
        }
        this.$hideLoading()
      })
    },
    handleSelectGrid(v) {
      this.form.girdName = v.girdName
    }
  }
}
</script>

<style lang="scss" scoped>
.PhotoForm {
  padding-bottom: 140px;

  .form-item__group {
    margin-bottom: 24px;
    background: #fff;
  }

  .form-item {
    padding-left: 32px;

    .form-item__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 128px;
      padding-right: 28px;
      border-bottom: 1px solid #DDDDDD;

      input {
        flex: 1;
        height: 100%;
        text-align: right;
        padding-right: 10px;
      }

      .form-item__right {
        display: flex;
        align-items: center;
        font-size: 32px;

        span {
          max-width: 400px;
          margin-right: 8px;
          color: #333333;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        i {
          margin-right: 8px;
          color: #999999;
        }
      }
    }

    &:last-child {
      .form-item__wrapper {
        border-bottom: none;
      }
    }

    .form-item__title {
      display: flex;
      align-items: center;

      i {
        font-size: 32px;
        color: #FF4466;
      }

      span {
        font-size: 28px;
        color: #999999;
      }

      h2 {
        padding: 0 4px;
        font-weight: 600;
        font-size: 32px;
        color: #333333;
      }
    }


    &.form-item__imgs, &.form-item__textarea {
      .form-item__wrapper {
        display: block;
        height: auto;
        padding-bottom: 32px;
      }

      textarea {
        width: 100%;
        height: 160px;
      }

      .form-item__title {
        padding: 32px 0;
      }

      .form-item__right {
        padding-left: 18px;
      }
    }
  }
}
</style>
