<template>
  <div class="add">
    <div v-if="addList">
      <u-navbar title="新建走访" back-icon-color="#fff" title-color="#fff" title-width="300" title-size="36" :background="backgroundNavbar"> </u-navbar>

      <div class="header-content">
        <u-form :model="forms" ref="uForm" label-width="auto">
          <u-form-item label="区域选择" prop="areaId" required style="position: relative">
            <u-input v-model="forms.areaId" disabled placeholder="请选择区域" @click="showAreaId = true" />

            <u-select v-model="showAreaId" :list="areaIdlist" @confirm="changeAreaId"></u-select>

            <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
          </u-form-item>

          <u-form-item label="走访对象" prop="object" style="position: relative">
            <u-input v-model="forms.object" disabled placeholder="请选择走访对象" @click="toWalkObject" />
            <!-- @click="showObject = true" -->

            <u-select v-model="showObject" :list="Objectlist" @confirm="changeObject"></u-select>

            <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
          </u-form-item>

          <u-form-item label="现实状态" prop="nowStstus" required style="position: relative">
            <u-input v-model="forms.nowStstus" disabled placeholder="请选择走访对象" @click="showStstus = true" />

            <u-select v-model="showStstus" :list="Objectlist" @confirm="changeStstus"></u-select>

            <u-icon name="arrow-right" color="#CCCCCC" style="position: absolute; top: 25px; right: 30px"></u-icon>
          </u-form-item>

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

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

          <u-form-item label="图片(最多9张)" prop="avatar" required label-position="top">
            <ai-uploader v-model="forms.avatar" multiple @change="change" placeholder="上传图片" :limit="9"></ai-uploader>
          </u-form-item>
        </u-form>
      </div>

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

      <AiBack></AiBack>
    </div>

    <component v-else :is="comp" :params="params"></component>
  </div>
</template>

<script>
import AiUploader from '../../../components/AiUploader.vue'
import AiBack from '../../../components/AiBack.vue'
import walkObject from './walkObject.vue'

export default {
  name: 'add',
  components: { AiUploader, AiBack, walkObject },
  props: {},
  data() {
    return {
      backgroundNavbar: {
        backgroundColor: '#3975C6',
      },
      forms: {
        areaId: '',
        object: '',
        nowStstus: '',
        things: '',
        content: '',
        avatar: [],
      },
      showAreaId: false,
      areaIdlist: [
        {
          value: '1',
          label: '江',
        },
        {
          value: '2',
          label: '湖',
        },
      ],
      Objectlist: [
        {
          value: '0',
          label: '武汉',
        },
        {
          value: '1',
          label: '北京',
        },
      ],
      showObject: false,
      showStstus: false,
      flag: false,
      addList: true,
    }
  },
  computed: {},
  onLoad() {},
  onShow() {},
  methods: {
    submit() {
      if (this.flag) return

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

          this.flag = true
          this.$instance
            .post(`/appjobresume/addOrUpdate`, {
              areaId: this.forms.areaId,
              object: this.forms.object,
              nowStstus: this.forms.nowStstus,
              things: this.forms.things,
              content: this.forms.content,
              avatar: this.forms.avatar[0],
              // education: this.form.education == Number ? this.form.education : this.forms.educationValue,
              id: this.id,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$u.toast('保存成功')
                this.flag = false
                uni.navigateBack({})
              }
            })
        } else {
          this.$u.toast('保存失败')
        }
      })
    },

    changeAreaId(e) {
      console.log(e)
      this.forms.areaId = e[0].value
      this.forms.areaIdValue = e[0].label
    },

    changeObject(e) {
      console.log(e)
      this.forms.object = e[0].value
      this.forms.objectlabel = e[0].label
    },

    changeStstus(e) {
      console.log(e)
      this.forms.nowStstus = e[0].value
      this.forms.nowStstuslabel = e[0].label
    },

    toWalkObject() {
      this.addList = false
      this.comp = 'walkObject'
      this.params = 111
    },

    change(e) {
      console.log(e)
    },
  },
}
</script>

<style lang="scss" scoped>
.add {
  height: 100%;
  padding-bottom: 112px;
  .header-content {
    ::v-deep .u-form {
      .u-form-item {
        margin-bottom: 16px;
      }
      .u-form-item:last-child {
        margin-bottom: 0;
      }
    }
  }

  .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;
  }
}
</style>
