<template>
  <div>
    <van-nav-bar title="服务信息" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="message">
      <van-row class="row">
        <van-col span="24">项目名称：{{dataInfo.name}}</van-col>
      </van-row>
      <van-row class="row">
        <van-col span="24">项目内容：{{dataInfo.content}}</van-col>
      </van-row>
      <van-row class="row">
        <van-col span="24">服务内容：{{dataInfo.serviceContent}}</van-col>
      </van-row>
    </div>
    <van-form @submit="addProjectHistory">
      <div class="main">
        <van-row class="cell">
          <van-col span="6">服务对象：</van-col>
          <van-col span="18">
            <!-- <div class="serviceTarget" @click="serviceTargetPopup">{{form.serviceTarget}}</div> -->
            <van-field @click="serviceTargetPopup" :rules="[{ required: true}]" type="textarea" v-model="form.serviceTarget" placeholder="请输入服务对象" disabled />
            <van-popup position="bottom" v-model="serviceTargetShow">
              <div class="field">
                <div v-for="(item,index) in serviceTarget" :key="index">{{item}}
                  <van-icon name="clear" color="#999" @click="clearserviceTarget(index)" />
                </div>
              </div>
              <van-search placeholder="请输入姓名查询" @input="listChildInfoByName" v-model="positionSearch" />
              <van-picker cancel-button-text='取消' :confirm-button-text='childList.length>0?"选择":"确定"' value-key="title" show-toolbar :columns="childList" @confirm="onConfirmPicker"
                @cancel="serviceTargetShow = false">
                <template #option="item">
                  <span>{{item.name}}</span>
                  <span>({{item.idCard}})</span>
                </template>
              </van-picker>
            </van-popup>
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">服务时间：</van-col>
          <van-col span="18" @click="showPopup">
            <van-field v-model="form.servicetTime" :rules="[{ required: true}]" placeholder="请输入服务时间" disabled />
            <!-- {{form.servicetTime?form.servicetTime:'请选择'}} -->
          </van-col>
          <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
            <van-datetime-picker @confirm="dateConfirm" @cancel="showPopup" v-model="servicetTime" 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" @click="streetshowPopup">
            <van-field v-model="form.streetName" :rules="[{ required: true}]" placeholder="请选择街道" disabled />
            <!-- {{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.address" :rules="[{ required: true}]" placeholder="请输入服务地点" />
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">服务人员：</van-col>
          <van-col span="18">
            <van-field v-model="form.serviceStaff" :rules="[{ required: true}]" @click="serviceShow=true" placeholder="请选择服务人员" disabled />
            <van-popup v-model="serviceShow" position="bottom" :style="{ height: '50%' }">
              <div class="popup">
                <div class="btn">
                  <div @click="serviceShow=false" class="cancle">取消</div>
                  <div @click="serviceConfirm" class="confirm">确定</div>
                </div>
                <van-checkbox-group class="group" v-model="result">
                  <van-cell-group>
                    <van-cell v-for="(item,index) in employeeList" clickable :key="index" :title="item.name" @click="toggle(item,index)">
                      <template #right-icon>
                        <van-checkbox :name="item.name" ref="checkboxes" />
                      </template>
                    </van-cell>
                  </van-cell-group>
                </van-checkbox-group>
              </div>
            </van-popup>
          </van-col>
        </van-row>
        <van-row class="cell">
          <van-col span="6">服务记录：</van-col>
          <van-col span="18">
            <van-field class="textarea" v-model="form.serviceRecord" :rules="[{ required: true}]" rows="1" type="textarea" placeholder="请输入服务记录" />
          </van-col>
        </van-row>
        <vanUploader :text="'图片'" @getfileList="getfileList"></vanUploader>
        <vanUploader :text="'视频'" @getfileList="getfileList"></vanUploader>
      </div>
      <div class="but">
        <van-button native-type="submit">确 定</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import {
  addProjectHistory,
  getStreetList,
  listChildInfoByName,
  getEmployeeList,
} from '../../api/index.js'
import vanUploader from '../../components/vanUploader.vue'
export default {
  components: { vanUploader },
  data() {
    return {
      tionList: '',
      show: false,
      streetShow: false,
      serviceTargetShow: false,
      serviceShow: false,
      imgUrl: [],
      multiMediaUrl: [],
      form: {
        fileList: [],
        serviceTarget: '',
      },
      streetList: '',
      servicetTime: new Date(),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      customFieldName: {
        text: 'name',
        id: 'id',
      },
      dataInfo: '',
      childList: [],
      serviceTarget: [],
      employeeList: [],
      positionSearch: '',
      result: [],
      serviceTargetId: [],
    }
  },
  created() {
    this.dataInfo = this.$route.query.item
    this.form = { serviceTarget: '', fileList: [], ...this.dataInfo }
    this.getStreetList()
    this.getEmployeeList()
  },
  methods: {
    clearserviceTarget(index) {
      if (!this.form.serviceTarget) return
      var serviceTarget = this.form.serviceTarget.split(',')
      var serviceTargetId = this.form.serviceTargetId.split(',')
      serviceTarget.splice(index, 1)
      serviceTargetId.splice(index, 1)
      this.serviceTarget.splice(index, 1)
      this.serviceTargetId.splice(index, 1)
      this.form.serviceTarget = serviceTarget.join(',')
      this.form.serviceTargetId = serviceTargetId.join(',')
      console.log(this.form)
    },
    async getEmployeeList() {
      const res = await getEmployeeList()
      this.employeeList = res.data
    },
    async listChildInfoByName() {
      if (!this.positionSearch) return
      const res = await listChildInfoByName({ name: this.positionSearch })
      this.childList = res.data
    },
    toggle(item) {
      if (this.result.indexOf(String(item.name)) == -1) {
        this.result.push(String(item.name))
      } else {
        var index = this.result.indexOf(String(item.name))
        this.result.splice(index, 1)
      }
    },
    getConfirm() {},
    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
    },
    serviceTargetPopup() {
      this.serviceTargetShow = !this.serviceTargetShow
    },
    streetshowPopup() {
      this.streetShow = !this.streetShow
    },
    onChange() {},
    onConfirm(value) {
      this.form.streetName = value.name
      this.form.streetId = value.id
      this.form.areaId = value.id
      this.streetShow = false
    },
    serviceConfirm() {
      this.form.serviceStaff = this.result.join(',')
      this.serviceShow = false
    },
    onConfirmPicker(value) {
      if (!value) {
        console.log(value)
        this.serviceTargetShow = !this.serviceTargetShow
        return
      }
      this.serviceTarget.push(value.name)
      this.serviceTargetId.push(value.childId)
      this.$set(this.form, 'serviceTarget', this.serviceTarget.join(','))
      this.$set(this.form, 'serviceTargetId', this.serviceTargetId.join(','))
      this.childList = []
      this.positionSearch = ''
    },
    dateConfirm(v) {
      console.log(v)
      this.form.servicetTime = this.timeFormat(v)
      this.show = false
    },
    getfileList(v, index) {
      if (index == undefined) {
        if (
          v.indexOf('.png') != -1 ||
          v.indexOf('.jpg') != -1 ||
          v.indexOf('.jpeg') != -1
        ) {
          this.imgUrl.push(v)
        } else {
          this.multiMediaUrl.push(v)
        }
      } else {
        if (v == '图片') {
          this.imgUrl.splice(index, 1)
        } else {
          this.multiMediaUrl.splice(index, 1)
        }
      }
    },
    async addProjectHistory() {
      if (this.imgUrl.length == 0) {
        this.$toast.fail('请选择至少一张图片')
        return
      }
      this.form.multiMediaUrl = this.multiMediaUrl.join(',')
      this.form.imgUrl = this.imgUrl.join(',')
      var data = JSON.parse(JSON.stringify(this.form))
      data.servicetTime = data.servicetTime + ' 00:00:00'
      const res = await addProjectHistory(data)
      if (res.code == '0000') {
        this.$toast.success('成功')
        this.$router.go(-1)
      }
    },
    async getStreetList() {
      const res = await getStreetList()
      this.streetList = res.data
      console.log(this.streetList, 'this.streetList')
    },
  },
}
</script>
<style lang="scss" scoped>
.field {
  padding: 0 30px;
  display: flex;
  margin-top: 16px;
  div {
    margin: 0 10px;
    font-size: 26px;
    padding: 10px;
    line-height: normal;
    background-color: #eee;
    border-radius: 40px;
  }
}
.tx {
  width: 160px;
  height: 160px;
}
.message {
  padding: 0 30px;
}
.but {
  text-align: center;
}
.van-button {
  width: 690px;
  margin: 24px auto;
  color: #fff;
  background-color: #1677ff;
  border-radius: 8px;
  font-size: 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;
    min-height: 80px;
  }
  .van-cell {
    padding: 0;
    line-height: 80px;
  }
}
.textarea {
  line-height: 30px !important;
  margin-top: 25px;
}
.box {
  min-height: 240px;
  .boxlist {
    display: flex;
    flex-wrap: wrap;
    div {
      width: 200px;
      height: 200px;
      margin: 20px;
    }

    img {
      width: 100%;
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
    }
    // background-color: chocolate;
  }
}
.serviceTarget {
  min-height: 80px;
}
.popup {
  padding: 0 30px;
  overflow: hidden;
  height: 100%;
  .btn {
    padding: 16px 0;
    display: flex;
    height: 80px;
    justify-content: space-between;
  }
  .group {
    margin-top: 30px;
    height: calc(100% - 180px);
    overflow: auto;
  }
  .cancle {
    font-size: 26px;
    font-weight: bold;
  }
  .confirm {
    font-size: 26px;
    font-weight: bold;
  }
}
/deep/.van-field__control {
  color: #333;
}
/deep/.van-field__control:disabled {
  color: #333;
  -webkit-text-fill-color: unset;
}
</style>