<template>
  <div>
    <van-nav-bar title="新建随访" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="main">
      <van-form @submit="saveFollowUp">
        <van-row class="cell">
          <van-col span="4">姓名：</van-col>
          <van-col span="8" @click="searchshow=true">
            <van-field v-model="form.name" placeholder="请选择" :rules="[{ required: true}]" disabled />
          </van-col>
          <van-popup position="bottom" v-model="searchshow" :style="{ height: '50%' }">
            <van-search placeholder="请输入姓名查询" @input="listChildInfoByName" v-model="positionSearch" />
            <van-picker value-key="name" item-height="48" visible-item-count="5" show-toolbar :columns="childList" @confirm="onConfirmPicker" @cancel="showPicker = false">
              <template #option="item">
                <div>{{item.name}}</div>
                <div>({{item.idCard}})</div>
              </template>
            </van-picker>
            <!-- <van-picker v-show="streetList.length>0" show-toolbar :columns="childList" @confirm="onConfirm" @cancel="streetshowPopup" @change="onChange" value-key="name" /> -->
          </van-popup>
          <van-col span="6">儿童类型：</van-col>
          <van-col span="6">
            <van-field v-model="form.typeDesc" placeholder="请选择" disabled />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="4">年龄：</van-col>
          <van-col span="8" @click="searchshow=true">
            <van-field v-model="form.age" placeholder="请选择" disabled />
          </van-col>
          <van-col span="6">性别：</van-col>
          <van-col span="6">
            <van-field v-model="form.genderDesc" placeholder="请选择" disabled />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">教育情况：</van-col>
          <van-col span="18">
            <van-field v-model="form.school" placeholder="教育情况" disabled />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">健康情况：</van-col>
          <van-col span="18">
            <van-field v-model="['','健康','患病','残疾'][form.healthStatus]" placeholder="健康情况" disabled />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">监护人：</van-col>
          <van-col span="18">
            <van-field v-model="form.guardianName" placeholder="监护人" disabled />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="9">监护人联系方式：</van-col>
          <van-col span="15">
            <van-field v-model="form.guardianPhone" placeholder="监护人联系方式" disabled />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">居住地址：</van-col>
          <van-col span="18">
            <van-field v-model="form.address" placeholder="居住地址" disabled />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="7">帮扶责任人：</van-col>
          <van-col span="17">
            <van-field v-model="form.tutelageName" placeholder="帮扶责任人" disabled />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">随访时间：</van-col>
          <van-col span="18">
            <van-field v-model="form.followDate" @click="showPopup" placeholder="请选择" :rules="[{ required: true}]" disabled />
          </van-col>
          <!-- <van-col span="18" @click="showPopup">{{form.followDate?form.followDate:'请选择'}}</van-col> -->
          <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
            <van-datetime-picker @confirm="dateConfirm" @cancel="showPopup" v-model="followDate" type="date" :min-date="minDate" :max-date="maxDate" :columns-order="[ 'year','month', 'day']"
              :formatter="formatter" />
          </van-popup>
        </van-row>
        <van-row class="cell">
          <van-col span="6">选择街道：</van-col>
          <van-col span="18">
            <van-field v-model="form.streetName" @click="streetshowPopup" placeholder="请选择" :rules="[{ required: true}]" disabled />
          </van-col>
          <!-- <van-col span="18" @click="streetshowPopup">{{form.streetName?form.streetName:'请选择'}}</van-col> -->
          <van-popup v-model="streetShow" position="bottom" :style="{ height: '50%' }">
            <van-picker default-index="2" show-toolbar :columns="streetList" @confirm="onConfirm" @cancel="streetshowPopup" @change="onChange" value-key="name" />
          </van-popup>
        </van-row>
        <van-row class="cell">
          <van-col span="6">随访地点：</van-col>
          <van-col span="18">
            <van-field v-model="form.place" placeholder="请输入随访地点" :rules="[{ required: true}]" />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">随访人员：</van-col>
          <van-col span="18">
            <van-field v-model="form.personnel" placeholder="请输入" :rules="[{ required: true}]" />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">联系方式：</van-col>
          <van-col span="18">
            <van-field v-model="form.phone" type="tel" placeholder="请输入手机号" :rules="[{validator,required: true, message:'手机号格式不正确'}]" />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">随访记录：</van-col>
          <van-col span="18">
            <van-field class="textarea" :rules="[{ required: true}]" v-model="form.remark" rows="1" type="textarea" placeholder="请输入随访记录" />
          </van-col>
        </van-row>
        <vanUploader :text="'图片'" @getfileList="getfileList"></vanUploader>
        <vanUploader :text="'视频'" @getfileList="getfileList"></vanUploader>
        <div style="text-align:center;">
          <van-button native-type="submit" :disabled="disabled">确 定</van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>
<script>
import {
  saveFollowUp,
  getStreetList,
  listChildInfoByName,
} from '../../api/index.js'
import vanUploader from '../../components/vanUploader.vue'
export default {
  components: { vanUploader },
  data() {
    return {
      show: false,
      searchshow: false,
      streetShow: false,
      disabled: false,
      fileList: [],
      form: {
        fileList: [],
      },
      streetList: '',
      followDate: new Date(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      positionSearch: '',
      childList: [],
      pics: [],
      videos: [],
    }
  },
  created() {
    this.getStreetList()
  },
  methods: {
    async listChildInfoByName() {
      if (!this.positionSearch) return
      const res = await listChildInfoByName({ name: this.positionSearch })
      this.childList = res.data
    },

    validator(val) {
      return /^1(3|4|5|6|7|8|9)\d{9}$/.test(val)
    },
    formatter(type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      return val
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear()
      let month = time.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }

      let day = time.getDate()
      if (day < 10) {
        day = '0' + day
      }
      return year + '-' + month + '-' + day
    },
    showPopup() {
      this.show = !this.show
    },
    streetshowPopup() {
      this.streetShow = !this.streetShow
    },
    onChange() {},
    onConfirm(value) {
      this.form.streetName = value.name
      this.form.areaId = value.id
      this.streetShow = false
    },
    onConfirmPicker(value) {
      this.form.childId = value.id
      this.form.name = value.name
      this.form.typeDesc = value.typeDesc
      this.form.age = value.age + '岁'
      this.form.genderDesc = value.genderDesc
      this.form.school = value.educationLevel
      this.form.healthStatus = value.healthStatus
      this.form.address = value.address
      this.form.tutelageName = value.tutelageName
      this.form.guardianName = value.guardianName
      this.form.guardianPhone = value.guardianPhone
      this.searchshow = false
    },
    dateConfirm(v) {
      console.log(v)
      this.form.followDate = this.timeFormat(v)
      this.show = false
    },
    async saveFollowUp(values) {
      if (this.pics.length == 0) {
        this.$toast.fail('请选择至少一张图片')
        return
      }
      this.form.pics = this.pics.join(',')
      this.form.videos = this.videos.join(',')
      var data = JSON.parse(JSON.stringify(this.form))
      data.followDate = data.followDate + ' 00:00:00'
      const res = await saveFollowUp(data)
      if (res.code == '0000') {
        this.$toast.success('成功')
        this.$router.go(-1)
      }
    },
    async getStreetList() {
      const res = await getStreetList()
      this.streetList = res.data
    },
    getPositionList() {},
    getfileList(v, index) {
      if (index == undefined) {
        if (
          v.indexOf('.png') != -1 ||
          v.indexOf('.jpg') != -1 ||
          v.indexOf('.jpeg') != -1
        ) {
          this.pics.push(v)
        } else {
          this.videos.push(v)
        }
      } else {
        if (v == '图片') {
          this.pics.splice(index, 1)
        } else {
          this.videos.splice(index, 1)
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.tx {
  width: 160px;
  height: 160px;
}
.message {
  padding: 0 30px;
}
.topBox {
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}
.van-row {
  font-size: 30px;
  text-align: left;
}
.row {
  .van-col {
    line-height: 60px;
  }
}
.main {
  padding: 0 30px;
}
.cell {
  border-bottom: 1px solid #eee;
  margin-top: 16px;
  .van-col {
    line-height: 80px;
  }
  .van-cell {
    padding: 0;
    line-height: 80px;
    font-size: 30px;
  }
}
.textarea {
  line-height: 30px !important;
  margin-top: 25px;
}
.van-button {
  width: 690px;
  margin: 24px auto;
  color: #fff;
  background-color: #1677ff;
  border-radius: 8px;
  font-size: 30px;
}
.box {
  position: relative;
  height: 240px;
  .boxlist {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    flex-wrap: wrap;
    div {
      width: 200px;
      height: 200px;
      margin: 20px;
    }

    img {
      width: 100%;
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
    }
    // background-color: chocolate;
  }
  .van-uploader {
    position: absolute;
    top: 0;
    left: 0;
    /deep/.van-uploader__wrapper {
      .van-uploader__upload {
        width: 200px;
        height: 200px;
      }
    }

    /deep/.van-uploader__preview {
      margin: 20px;
      .van-uploader__file {
        opacity: 0;
      }
      .van-image {
        width: 200px;
        height: 200px;
        opacity: 0;
        // margin: 20px;
      }
      width: 200px;
      height: 200px;
    }
  }
}
/deep/.van-field__control {
  color: #333;
}
/deep/.van-field__control:disabled {
  color: #333;
  -webkit-text-fill-color: unset;
}
</style>