<template>
  <div class="add">
    <div v-if="addList">
      <div class="header-description">
        <u-form :model="forms" ref="uForm" label-width="auto">
          <u-form-item label="区域选择" prop="areaId" class="areaIds" style="position: relative">
            <AiAreaPicker v-model="forms.areaId" :areaId="areaIdProps" @select="areaSelect" style="color: #333"></AiAreaPicker>
            <u-icon name="arrow-right" color="rgb(192, 196, 204)" size="30" style="margin-left: 4px" />
          </u-form-item>

          <div class="line"></div>

          <u-form-item label="走访对象" prop="name" required :right-icon="id ? '' : 'arrow-right'" class="create_user_names">
            <u-input v-model="forms.name" disabled placeholder="请选择走访对象" @click="toWalkObject" />
          </u-form-item>

          <div class="line"></div>

          <u-form-item label="现实状态" prop="reality" :right-icon="id ? '' : 'arrow-right'" class="realitys">
            <u-input v-model="forms.reality" disabled placeholder="请选择现实状态" @click="realityClick" />

            <u-select v-model="showStstus" :list="$dict.getDict('realityStatus')" value-name="dictValue" label-name="dictName" @confirm="realityStstus"></u-select>
          </u-form-item>

          <div class="line"></div>

          <u-form-item label="入户走访事项" prop="title" required label-position="top" :border-bottom="false">
            <u-input v-model="forms.title" placeholder="请输入入户走访事项(30字以内)" type="textarea" auto-height height="60" :maxlength="30" />
          </u-form-item>
          <div class="hint">{{ forms.title.length }}/30</div>

          <div class="line"></div>

          <u-form-item label="入户走访内容" prop="description" label-position="top" :border-bottom="false">
            <u-input v-model="forms.description" placeholder="请输入入户走访事项(500字以内)" type="textarea" auto-height height="60" :maxlength="500" />
            <!-- <div>{{ forms.description.length }}/500</div> -->
          </u-form-item>
          <div class="hint">{{ forms.description.length }}/500</div>

          <div class="line"></div>

          <u-form-item label="图片(最多9张)" prop="images" class="avatars" label-position="top" :border-bottom="false">
            <AiUploader :def.sync="forms.images" multiple placeholder="上传图片" :limit="9" action="/admin/file/add2"></AiUploader>
          </u-form-item>
        </u-form>
      </div>

      <div class="btn" @click="submit">保存</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'add',
  components: {},
  props: {},
  data() {
    return {
      show: false,
      forms: {
        areaId: '',
        areaName: '',

        optionId: '',
        name: '',

        reality: '',
        realityValue: '',
        menuLevel3Name: '',
        applicationId: '',
        title: '',
        description: '',
        images: [],
      },
      showAreaId: false,
      showStstus: false,
      flag: false,
      addList: true,
      areaIdProps: '',
      clickedUserSelect: false,
      id: '',

      name: '',
      optionId: '',
    }
  },
  computed: { ...mapState(['user']) },
  onLoad(o) {
    this.id = o.id ? o.id : ''
    this.areaIdProps = this.user.areaId
    if (!this.id) {
      this.forms.areaId = this.user.areaId
      this.areaName = this.user.areaName
    }
    this.$dict.load('realityStatus').then(() => {
      this.getDetail()
    })

    uni.$on('goBack', (data) => {
      this.forms.menuLevel3Name = data.applicationName
      this.forms.applicationId = data.applicationId
      this.forms.name = data.selectUser.name
      this.forms.optionId = data.selectUser.id
    })
  },
  onShow() {
    document.title = '新建走访'
  },
  mounted() {},
  methods: {
    realityClick() {
      if (this.id) return
      if (!this.forms.name) {
        return this.$u.toast('请选择走访对象')
      }
      this.showStstus = true
    },

    getDetail() {
      if (this.id) {
        this.$http.post(`/app/appvisitvondolence/queryDetailById?id=${this.id}`).then((res) => {
          if (res?.data) {
            this.forms = res.data
            this.forms.create_user_name = res.data.name
            this.forms.realityValue = res.data.reality
            this.forms.reality = this.$dict.getLabel('realityStatus', res.data.reality)
            if (res.data.images) {
              this.forms.images = JSON.parse(res.data.images || '[]')
            }
          }
        })
      }
    },

    submit() {
      if (this.flag) return

      this.$refs.uForm.validate((valid) => {
        if (valid) {
          if (!this.forms.name) {
            return this.$u.toast('请选择走访对象')
          }
          if (!this.forms.title) {
            return this.$u.toast('请输入入户走访事项')
          }

          const imgs = []
          if (this.forms.images) {
            this.forms.images.map((e) => {
              imgs.push({ url: e.url, id: e.id })
            })
          }

          this.flag = true
          this.$http
            .post(`/app/appvisitvondolence/addOrUpdate`, {
              areaId: this.forms.areaId,
              applicationId: this.forms.applicationId,
              name: this.forms.name,
              optionId: this.forms.optionId,
              // menuLevel3Name: this.forms.menuLevel3Name,
              applicationId: this.forms.applicationId,

              reality: this.forms.realityValue ? this.forms.realityValue : this.forms.reality,
              title: this.forms.title,
              description: this.forms.description,
              createUserId: this.user.id,
              createUserName: this.user.name,
              images: JSON.stringify(imgs) || [],
              id: this.id,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$u.toast('保存成功')
                this.flag = false
                uni.$emit('updateList')
                setTimeout(() => {
                  uni.navigateBack()
                }, 600)
              }
            })
        } else {
          this.$u.toast('保存失败')
        }
      })
    },

    areaSelect(e) {
      this.forms.areaId = e
    },

    realityStstus(e) {
      this.forms.reality = e[0].label
      this.forms.realityValue = e[0].value
    },

    toWalkObject() {
      uni.navigateTo({ url: `./selectType` })
    },
  },
}
</script>

<style lang="scss" scoped>
.add {
  height: 100%;
  background: #f3f6f9;

  .header-description {
    padding-bottom: 162px;
    background: #f3f6f9;
    ::v-deep .u-form {
      background: #fff;
      .u-form-item {
        .u-form-item__body {
          .u-form-item--right__content__slot {
            padding-bottom: 0;
          }
        }
      }

      .u-form-item:last-child {
        margin-bottom: 0;
        padding-bottom: 20px !important;
      }

      .areaIds {
        .u-form-item__body {
          .u-form-item--right {
            .u-form-item--right__content {
              .u-form-item--right__content__slot {
                .AiAreaPicker {
                  width: 100%;
                  display: flex;
                  justify-content: flex-end;

                  .AiSearchPopup {
                    .areaSelector {
                      .location {
                        opacity: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .create_user_names,
      .realitys {
        .u-form-item__body {
          .u-form-item--right__content__slot {
            .u-input {
              text-align: right !important;
            }
          }
        }
      }

      .line {
        height: 16px;
        background: #f3f6f9;
      }

      .hint {
        padding: 4px 32px 8px 0;
        text-align: right;
        color: #999;
      }

      .avatars {
        .u-form-item__body {
          .default {
            width: 160px;
            height: 160px;
          }
        }
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 112px;
    line-height: 112px;
    background: #1365dd;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #ffffff;
    z-index: 999;
  }
}
</style>
