<style lang="less">
  group {
    height: 38px;
  }
  .person-info-text-center {
    text-align: center;
    font-size: 14px;
  }
  .pi-modal-form-new {
    font-size: 14px;
    line-height: 45px;
    width: 84%;
    height: 1040px;
    margin:0 auto;
  }
  .pi-form-border {
    border-top: 1px solid #000;
    border-left: 1px solid #000;
  }
  .pi-form-right {
    border-right: 1px solid #000;
  }
  .pi-form-bottom {
    border-bottom: 1px solid #000;
  }
  .pi-form-title {
    background-color: #f7f7f7;
    text-align: center;
    color: #4b8ce6;
    height: 45px;
  }
  .pi-form-title1 {
    background-color: #f7f7f7;
    text-align: center;
    color: #4b8ce6;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    text-align: center;
    padding-left: 5%;
  }
  .pi-form-content {
    height: 45px;
    padding-left: 8px;
  }
  .pi-photo {
    width: 100%;
    height: 179px;
    float: left;
  }
  .pi-form-input {
    border: none;
    color: #777;
    width: 95%;
    height: 90%;
  }
  .pi-form-input1 {
    border: none;
    color: #777;
    width: 100%;
    height: 90%;
  }
  .pi-w90 {
    width: 11%;
    float: left;
  }
  .pi-w120 {
    width: 15%;
    float: left;
  }
  .pi-w140 {
    width: 17%;
    float: left;
  }
  .pi-w160 {
    width: 20%;
    float: left;
  }
  .pi-w180 {
    width: 23%;
    float: left;
  }
  .pi-w390 {
    width: 390px;
    float: left;
  }
  .pi-w208 {
    width: 25.9%;
    float: left;
  }
  .pi-w210 {
    width: 25.9%;
    float: left;
  }
  .pi-w580 {
    width: 71.9%;
    float: left;
  }
  .pi-w670 {
    width: 82.9%;
    float: left;
  }
  .pi-w500 {
    width: 50%;
    height: 300px;
    float: left;
  }
  .pi-w499 {
    width: 49.9%;
    height: 300px;
    float: left;
  }
  .pi-select-w670 {
    width: 83%;
    float: left;
    height: auto;
  }
  .pi-w280 {
    width: 280px;
    float: left;
  }
  .pi-w300 {
    width: 300px;
    float: left;
  }
  .pi-remark {
    padding-left: 80px;
    font-size: 14px;
  }
  .pi-remark-content {
    width: 812px;
    overflow: auto;
    word-break: break-all;
    border: 1px solid #727171;
    padding: 10px;
  }
  .pi-w259 {
    width: 25.8%;
    float: left;
  }
</style>
<template>
  <div>
    <Modal v-model="controlData.showDetail" title="个人信息" width="1000px">
      <Form :model="userInfo" label-position="right" :label-width="100">
        <div class="pi-modal-form-new">
          <div>
            <div class="pi-w140 pi-form-border">
            <img class="pi-photo" :src="showphoto">
            <Icon @click="updatePhoto" type="md-camera" size="20" style="position:absolute;z-index:100;left:210px;top: 220px"/>
            </div>
            <div class="pi-w90 pi-form-border pi-form-title">姓名</div>
            <div class="pi-w160 pi-form-border pi-form-content">
              <input type="text" class="pi-form-input" v-model="userInfo.name">
            </div>
            <div class="pi-w90 pi-form-border pi-form-title">性别</div>
            <div class="pi-w120 pi-form-border pi-form-content">
              <Select v-model="userInfo.sex" class="pi-form-input">
                <Option :value="'男'" :key="1">男</Option>
                <Option :value="'女'" :key="2">女</Option>
              </Select>
            </div>
            <div class="pi-w90 pi-form-border pi-form-title">民族</div>
            <div class="pi-w120 pi-form-border pi-form-content pi-form-right">
              <input type="text" class="pi-form-input" v-model="userInfo.folk">
            </div>
            <div class="pi-w90 pi-form-border pi-form-title">身份证号</div>
            <div class="pi-w160 pi-form-border pi-form-content">{{userInfo.cardno}}</div>
            <div>
              <div class="pi-w210 pi-form-border pi-form-title" >联系方式</div>
              <div class="pi-w259 pi-form-border pi-form-content pi-form-right" style="float: left; width: 26.1%">
                <input class="pi-form-input" v-model="userInfo.mobile" type="text ">
              </div>
            </div>
<!--            <div class="pi-w90 pi-form-border pi-form-title">住址</div>-->
<!--            <div class="pi-w580 pi-form-border pi-form-content pi-form-right">-->
<!--              <input type="text" class="pi-form-input" v-model="userInfo.address">-->
<!--            </div>-->
            <div class="pi-w90 pi-form-border pi-form-title">现住地址</div>
            <div class="pi-w580 pi-form-border pi-form-content pi-form-right" style="float: left; width: 72%">
              <input type="text" class="pi-form-input" v-model="userInfo.present_address">
            </div>
<!--            <div class="pi-w90 pi-form-border pi-form-title">户籍地址</div>-->
<!--            <div class="pi-w580 pi-form-border pi-form-content pi-form-right">-->
<!--              <input type="text" class="pi-form-input" v-model="userInfo.domicile_address">-->
<!--            </div>-->
            <div class="pi-w90 pi-form-border pi-form-title">户籍地址</div>
            <div class="pi-w580 pi-form-border pi-form-content pi-form-right" style="float: left; width: 72%">
              <input type="text" class="pi-form-input" v-model="userInfo.register_address">
            </div>
<!--            <div class="pi-w140 pi-form-border pi-form-title">现住地址</div>-->
<!--            <div class="pi-w670 pi-form-border pi-form-content pi-form-right">-->
<!--              <input type="text" class="pi-form-input" v-model="userInfo.present_address">-->
<!--            </div>-->
            <div class="pi-w140 pi-form-border pi-form-title">银行卡收入情况</div>
            <div class="pi-w140 pi-form-border pi-form-content">
              <Select v-model="userInfo.personal_income" class="pi-form-input">
                <Option v-for="item in selectList.personal_incomeList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </div>
<!--            <div class="pi-w140 pi-form-border pi-form-title">共同居住人员</div>-->
<!--            <div class="pi-w120 pi-form-border pi-form-content">-->
<!--              <Select v-model="userInfo.co_resident" class="pi-form-input">-->
<!--                <Option v-for="item in selectList.co_residentList" :value="item.value" :key="item.value">{{item.label}}</Option>-->
<!--              </Select>-->
<!--            </div>-->
            <div class="pi-w140 pi-form-border pi-form-title">工作单位</div>
            <div class="pi-form-border pi-form-content pi-form-right" style="float: left; width: 49%">
              <input type="text" class="pi-form-input" v-model="userInfo.work_unit">
            </div>
            <div class="pi-w140 pi-form-border pi-form-title">文化程度</div>
            <div class="pi-w140 pi-form-border pi-form-content">
              <Select v-model="userInfo.education" class="pi-form-input">
                <Option v-for="item in selectList.educationList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </div>
            <div class="pi-w140 pi-form-border pi-form-title">婚姻状况</div>
            <div class="pi-w120 pi-form-border pi-form-content">
              <Select v-model="userInfo.marriage" class="pi-form-input">
                <Option v-for="item in selectList.marriageList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </div>
            <div class="pi-w90 pi-form-border pi-form-title">生育子女</div>
            <div class="pi-w180 pi-form-border pi-form-content pi-form-right">
              <Select v-model="userInfo.child" class="pi-form-input">
                <Option v-for="item in selectList.childList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </div>
            <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">政治面貌</div>
            <div class="pi-w140 pi-form-border pi-form-content pi-form-bottom">
              <Select v-model="userInfo.political_outlook" class="pi-form-input">
                <Option v-for="item in selectList.political_outlookList" :value="item.value" :key="item.value">{{item.label}}</Option>
              </Select>
            </div>
            <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">兵役情况</div>
            <div class="pi-w120 pi-form-border pi-form-content pi-form-bottom">
              <Select v-model="userInfo.military" class="pi-form-input">
                <Option :value="'是'" :key="5">是</Option>
                <Option :value="'否'" :key="6">否</Option>
              </Select>
            </div>
            <div class="pi-w90 pi-form-border pi-form-title pi-form-bottom">职业</div>
            <div class="pi-w180 pi-form-border pi-form-content pi-form-right pi-form-bottom">
              <Select v-model="userInfo.occupation" class="pi-form-input">
                <Option v-for="item in selectList.occupationList" :value="item.value" :key="item.value"> {{item.label}}</Option>
              </Select>
            </div>
          </div>
<!--          <div style="height: auto;float: left;width: 101.5%;position: relative;display: table;">-->
<!--            <div class="pi-w140 pi-form-border pi-form-title1 pi-form-bottom">重点人群</div>-->
<!--            <div class="pi-w670 pi-form-border pi-form-content1 pi-form-right pi-form-bottom" style="margin-left:17%">-->
<!--              <Select v-model="controlData.personTags" multiple class="pi-form-input1">-->
<!--                <Option v-for="item in selectList.labelTagList" :value="item.value" :max-tag-count="5"-->
<!--                :key="item.value">{{item.label}}-->
<!--                </Option>-->
<!--              </Select>-->
<!--            </div>-->
<!--          </div>-->
          <!-- <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">重点人群</div>
          <div class="pi-w670 pi-form-border pi-form-content pi-form-right pi-form-bottom">
            <Select v-model="controlData.personTags" multiple class="pi-form-input1">
              <Option v-for="item in selectList.labelTagList" :value="item.value" :max-tag-count="5"
              :key="item.value">{{item.label}}
              </Option>
            </Select>
          </div> -->
          <div class="group" style="width: 100%;height: auto;">
            <Card v-for="item in focusGroupTypeList" :key="item.id" style="width: 33%;margin: 0px 1px;float: left;height: 250px;">
              <p slot="title" style="height: 16px;font-size: 13px">{{item.name}}</p>
              <div style="height: 180px;overflow: auto;">
                <CheckboxGroup v-model="userInfo.groupList" v-for="obj in item.children" :key="obj.id" style="float: left;">
                  <Checkbox :label="obj.id" :disabled="obj.community_update === '1'" border style="font-size: 12px;float: left">{{obj.NAME}}</Checkbox>
                </CheckboxGroup>
              </div>
            </Card>
          </div>
        </div>
        <br/>
        <br/>
        <br/>
        <div class="pi-remark">备注：</div>
        <div class="person-info-text-center">
          <textarea class="pi-remark-content" v-model="userInfo.remarks" rows="5"/>
        </div>
      </Form>
      <div slot="footer">
        <Button size="large" @click="controlData.showDetail=false">取消</Button>
        <Button type="primary" size="large" @click="saveUser">确定</Button>
      </div>
    </Modal>
    <Modal
      v-model="PhotoModal"
      width="400"
      title="上传头像">
      <Button type="primary" style="margin-right: 15px" @click="PZPhoto">拍照</Button>
      <Button type="primary" @click="SCPhoto">上传</Button>
    </Modal>
    <Modal v-model="up_pic_mol" title="图片上传" :closable="false">
      <Upload multiple action="http://10.40.20.4:8081/api/uc/mzsc/uploadService/uploadPic" :before-upload="beforeUpload">
        <Button icon="ios-cloud-upload-outline">上传图片</Button>
        <span style="margin-left: 250px">请上传小于2M的图片</span>
      </Upload>
      <img :src="temp_photo" style="width: 100%"/>
    </Modal>
    <Modal v-model="face_mol" title="拍照" @on-visible-change="modalChange" width="700">
    <face-camera :isPlay="face_shows" :extraData="upPicData" :file-path="filePath"
                 :file-name="fileName" @img-result="imgResult"></face-camera>
    <div slot="footer">
      <Button type="error" @click="face_mol=false">关闭</Button>
    </div>
  </Modal>
    <Modal
      v-model="mshow"
      title="高拍仪"
      @on-visible-change="modalChange3"  @on-cancel="closeHeight1" @on-ok="closeHeight1">
      <wl-equipment
        :file-path="filePath"
        :file-name="fileName"
        v-model="obj"
        :type="type"
        :is-open="openNow"
        user_idcard="cardId"
        ref="wlEquipment"
        @change1="change1"
      ></wl-equipment>
<!--      @change="geyImgUrl"-->
<!--      @get_info="imgResult"-->
    </Modal>
  </div>
</template>

<script>
import itemdata from './itemdata'
import { createuser, getgrouplist, getdownlist, getFocusGroupList } from '@/api/mainv3'
import { saveAndSendMsgCode } from '@/api/eventlist'
import { getSign, createUpLoadFiles } from '@/api/common'
import WlEquipment from '@/components/wl-equipment/index'
import FaceCamera from '@/components/face-camera/index'
import Gmk from '@/view/login/Gmk.vue'

export default {
  name: 'PersonInfoModal',
  props: {
    userInfo: Object,
    controlData: Object,
    severUserInfo: Object,
    focusGroupTypeList: Array
  },
  components: {
    FaceCamera,
    WlEquipment
  },
  data () {
    return {
      userGroupList: [],
      istest: Gmk.istest,
      face_mol: false,
      filePath: '',
      fileName: '',
      type: '',
      openNow: false,
      obj: {},
      gpy_mol: false,
      face_shows: false,
      mshow: false,
      up_pic_mol: false,
      temp_photo: '',
      PhotoModal: false,
      showphoto: '',
      // 小区，组，楼，单元，层，户，选中项和备选项列表
      detailAreaList: {
        select1: '',
        select2: '',
        select3: '',
        select4: '',
        select5: '',
        select6: '',
        list1: [],
        list2: [],
        list3: [],
        list4: [],
        list5: [],
        list6: []
      },
      selectList: {
        co_residentList: itemdata.co_residentList,
        personal_incomeList: itemdata.personal_incomeList,
        living_conditionList: itemdata.living_conditionList,
        educationList: itemdata.educationList,
        childList: itemdata.childList,
        marriageList: itemdata.marriageList,
        political_outlookList: itemdata.political_outlookList,
        occupationList: itemdata.occupationList,
        labelTagList: itemdata.labelTagList
      },
      upPicData: {
        fileName: '',
        filePath: ''
      },
      time: 61,
      loading: false
    }
  },
  methods: {
    getGroupList () {
      getFocusGroupList().then(res => {
        if (res.data.errcode === 0) {
          this.focusGroupTypeList = res.data.data
          console.log(this.focusGroupTypeList)
        } else {
          this.$Notice.error({
            title: '获取标签列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    closeHeight1 () {
      this.mshow = false
      this.openNow = false
    },
    modalChange (e) {
      this.face_shows = e
    },
    modalChange2 (e) {
      this.openNow = e
    },
    modalChange3 (e) {
      this.openNow = e
    },
    // 新高拍仪拍照回调函数
    change1 (data) {
      if (data.url) {
        this.showphoto = data.url
        this.userInfo.photo = data.url
      } else {
        this.$Notice.error({ title: '拍照失败,请重新拍摄' })
      }
    },
    imgResult (data) {
      console.log(data, '!@#$')
      this.face_mol = false
      this.face_shows = false
      this.PhotoModal = false
      this.showphoto = data
      this.userInfo.photo = data
    },
    PZPhoto () {
      if (this.severUserInfo.email === 'JieYuDevice') {
        this.face_mol = true
        this.gpy_mol = true
        this.gpy_shows = true
        // alert(123)
      } else {
        this.type = 'faceCamera'
        this.mshow = true
        this.openNow = true
        this.PhotoModal = false
      }
      this.upPicData.fileName = this.datetime2str(new Date()) + '.png'
      this.fileName = this.datetime2str(new Date()) + '.png'
      this.upPicData.filePath = 'userphoto/' + this.datetime2str(new Date())
      this.filePath = this.upPicData.filePath
      // this.formItem.paramIndex = params.index
    },
    // 时间转字符串 年月日时分秒
    datetime2str (date) {
      let time1 = date.getFullYear() + ''
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hh = date.getHours()
      let mm = date.getMinutes()
      let ss = date.getSeconds()
      time1 += month < 10 ? '0' + month : month
      time1 += day < 10 ? '0' + day : day
      time1 += hh < 10 ? '0' + hh : hh
      time1 += mm < 10 ? '0' + mm : mm
      time1 += ss < 10 ? '0' + ss : ss
      return time1
    },
    getMsgCode () {
      let params = {
        mobile: this.userInfo.mobile
      }
      saveAndSendMsgCode(params).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '获取验证码成功，请查看验证码！' })
          this.loading = true
          this.set60s(this.time)
        } else {
          this.$Notice.error({ title: '获取验证码失败', desc: res.data.errmsg })
        }
      })
    },
    set60s (intime) {
      let that = this
      console.log(intime, 'aaa')
      intime = intime - 1
      that.time = intime
      if (intime === 0) {
        that.loading = false
        that.time = 60
      } else {
        setTimeout(function () {
          that.set60s(intime)
        }, 1000)
      }
    },
    beforeUpload (file) {
      this.upPicData.fileName = this.upPicData.fileName + '.' + file.type.substring(6)
      let that = this
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        let index = reader.result.indexOf('base64,') + 7
        that.upPicData.file = reader.result.substring(index)
        that.upPic(that.upPicData)
      }
      return false
    },
    upPic (obj) {
      var time = new Date().getTime()
      this.timeStep = time.toString()
      let param = {
        filePath: obj.filePath,
        fileName: obj.fileName,
        timestamp: this.timeStep
      }
      getSign(param).then(res => {
        if (res.data.errcode === 0) {
          createUpLoadFiles(res.data.data.docking_url, { sign: res.data.data.sign, timestamp: this.timeStep, filePath: obj.filePath, fileName: obj.fileName, file: obj.file }).then(res => {
            if (res.data.errcode === 0) {
              let imgurl = res.data.data
              this.temp_photo = imgurl
              this.showphoto = imgurl
              this.userInfo.photo = imgurl
            } else {
              this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
            }
          })
        } else {
          this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
        }
      })
    },
    SCPhoto () {
      this.up_pic_mol = true
      this.PhotoModal = false
    },
    updatePhoto () {
      this.PhotoModal = true
    },
    saveUser () {
      let that = this
      that.userInfo.focus_group = this.controlData.personTags.toString()
      that.userInfo.final_id = this.detailAreaList.select6
      if (that.controlData.uploadHeader && that.controlData.photo) {
        let timeStep = new Date().getTime().toString()
        let param = {
          filePath: 'userphoto',
          fileName: timeStep + '.jpg',
          timestamp: timeStep
        }
        getSign(param).then(res => {
          if (res.data.errcode === 0) {
            let tempphoto = that.controlData.photo
            let index = tempphoto.indexOf('base64,') + 7
            param.sign = res.data.data.sign
            param.file = tempphoto.substring(index)
            createUpLoadFiles(res.data.data.docking_url, param).then(res => {
              if (res.data.errcode === 0) {
                that.userInfo.photo = res.data.data
                that.uploadCardInfo(that.userInfo)
              } else {
                this.$Notice.error({ title: '上传失败', desc: res.data.data.msg })
              }
            })
          }
        })
      } else {
        let ids = []
        for (let i = 1; i < 7; i++) {
          let tempStr = this.detailAreaList['select' + i]
          if (!tempStr) {
            break
          }
          ids.push(tempStr)
        }
        // that.userInfo.photo = null
        that.userInfo.ids = ids.toString()
        that.uploadCardInfo(that.userInfo)
      }
    },
    uploadCardInfo (userInfo) {
      createuser(userInfo).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({ title: '个人信息更新成功' })
          this.controlData.showDetail = false
          this.$emit('result', this.controlData.cardno)
        } else {
          this.$Notice.error({ title: '个人信息更新失败', desc: res.data.errmsg })
        }
      })
    },
    // 获取组数据
    findGroupList (id, initFlag) {
      getgrouplist({ 'id': id }).then(ret => {
        if (ret.data.errcode === 0) {
          this.detailAreaList.list2 = ret.data.data
          if (initFlag && this.detailAreaList.select2) {
            this.changeDown(this.detailAreaList.select2, 3, initFlag)
          }
        } else {
          this.$Notice.error({ title: '获取列表失败', desc: '' })
        }
      })
    },
    // 获取楼，单元，层，户列表接口
    changeDown (id, level, initFlag) {
      getdownlist({ 'pid': id }).then(res => {
        if (res.data.errcode === 0) {
          this.detailAreaList['list' + level] = res.data.data
          let temp = this.detailAreaList['select' + level]
          if (initFlag && temp) {
            this.changeDown(temp, level + 1, initFlag)
          }
        } else {
          this.$Notice.error({ title: '', desc: res.data.errmsg })
        }
      })
    },
    photoShow (val) {
      console.log(val, 'val')
      this.showphoto = val
    }
  },
  watch: {
    'controlData.showDetail' (val) {
      if (val) {
        this.detailAreaList.list1 = this.controlData.smallarealist
        this.detailAreaList.select1 = this.controlData.idsArr[0] || ''
        this.detailAreaList.select2 = this.controlData.idsArr[1] || ''
        this.detailAreaList.select3 = this.controlData.idsArr[2] || ''
        this.detailAreaList.select4 = this.controlData.idsArr[3] || ''
        this.detailAreaList.select5 = this.controlData.idsArr[4] || ''
        this.detailAreaList.select6 = this.controlData.idsArr[5] || ''
        this.showphoto = this.controlData.photo
        // this.controlData.idsArr[0].toString() === this.controlData.smallarealist[0].id.toString() &&
        if (this.detailAreaList.select1) {
          this.findGroupList(this.detailAreaList.select1, true)
        }
      }
    }
  },
  mounted () {
    // this.getGroupList()
  }
}
</script>
