<template>
  <div class="album">
    <u-navbar back-icon-color="#000" title="居民上报" title-color="#000" title-width="300" title-size="32" 
      :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44"></u-navbar>
    <div class="header-content-bg">
      <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
    </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">
            <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>
            <!-- <u-input style="width: 100%;" :height="200" v-model="value" type="textarea" :maxlength="500" :border="border" placeholder="请简要描述事件…" /> -->
          </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 form-gird">
          <div class="form-item__title">
            <i>*</i>
            <h2>所属网格</h2>
          </div>
          <div class="form-item__right">
            <AiPagePicker type="gird" v-model="form.girdId" :params="{formType:2, axiosUrl:'/app/appgirdinfo/listAllByWuxi'}" @select="handleSelectGrid" nodeKey="id">
              <AiMore v-model="form.girdName"/>
            </AiPagePicker>
          </div>
          <p class="tips">所属网格请详细选择到您具体所在的网格</p>
        </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 v-model="form.files" :limit="9"></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 class="footer" @click="submit">
      <div class="btn">保存</div>
    </div>
    <AiLogin ref="login"/>
  </div>
</template>

<script>
import {mapActions, mapState} from 'vuex'

export default {
  appName: "上报事件",
  customNavigation: true,
  data() {
    return {
      form: {
        content: '',
        lat: '',
        lng: '',
        address: '',
        name: '',
        phone: '',
        groupId: '',
        groupName: '',
        girdName: '',
        girdId: '',
        files: []
      },
      dictList: [],
      flag: false,
      backgroundNavbar: {
        background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
        backgroundSize: 'cover',
      },
    }
  },

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

  onLoad() {
    if (!this.token) {
      this.autoLogin().then(() => {
        this.getUser()
      })
    } else {
      this.getUser()
    }
  },

  methods: {
    ...mapActions(['autoLogin', 'getUserInfo']),
    
    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/apppatrolreportgroupv2/list?current=1&size=9999`).then(res => {
        if (res.code == 0) {
          this.dictList = res.data.records.map(v => {
            return {
              value: v.id,
              label: v.groupName
            }
          })
        }
      })
    },
    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.girdId) {
        return this.$toast('请选择所属网格')
      }
      if (this.flag) return
      
      this.$loading()
      this.$instance.post(`/app/apppatrolreportinfov2/addByGirdMember`, {
        ...this.form,
        openid: this.user.openid,
        portrait: this.user.avatarUrl,
        files: this.form.files,
        groupName: this.dictList.filter(v => v.value === this.form.groupId)[0].label
      }).then(res => {
        if (res.code == 0) {
          this.flag = true
          uni.$emit('update')
          setTimeout(() => {
            uni.redirectTo({
              url: './PhotoResult?id=' + res.data.id
            })
          }, 400)
        }
        this.$hideLoading()
      })
    },
    handleSelectGrid(v) {
      this.form.girdName = v.girdName
    },
    getUser() {
      this.getUserInfo().then(() => {
        this.getDict()
        this.form.phone = this.user.phone
        this.form.name = this.user.realName || ''
      }).catch(() => {
        this.$refs.login.show()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.album {
  padding-bottom: 252px;
  .header-content-bg {
    width: 100%;
    position: fixed;
    z-index: -1;
    img {
      width: 100%;
      height: 592px;
    }
  }
  .form-item__group {
    margin-bottom: 24px;
    background: #fff;
    width: calc(100% - 64px);
    margin: 16px 0 32px 32px;
    border-radius: 16px;
  }

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

    .form-item__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #DDD;
      position: relative;
      line-height: 44px;
      padding: 34px 32px 34px 0;
      input {
        flex: 1;
        height: 100%;
        text-align: right;
        padding-right: 10px;
      }

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

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

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

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

    .form-item__title {
      display: flex;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 32px;
      color: #333;

      i {
        font-size: 32px;
        position: absolute;
        left: -14px;
        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #F46;
      }

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

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


    &.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;
        margin-bottom: 16px;
      }

      .form-item__right {
        // padding-left: 18px;
      }
    }
  }
  .form-gird {
    padding-bottom: 64px!important;
  }
  .tips {
    font-size: 24px;
    color: #f46;
    line-height: 36px;
    position: absolute;
    bottom: 16px;
  }
  ::v-deep .AiMore {
    .u-icon__label {
      font-size: 28px!important;
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #F4F5FA;
    padding: 64px 64px 68px 64px;
    z-index: 9;
    .btn {
      width: calc(100% - 128px);
      line-height: 88px;
      background: #026AF2;
      border-radius: 44px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 34px;
      color: #FFF;
      text-align: center;
    }
  }
}
</style>
