<template>
<div class='container'>
  <form class="baseinfo-box" @submit='commit'>
    <div class="baseinfo">
    <div class="list-input">
      <span>值班人</span>
      <p class="text_right">{{name}}</p>
    </div>
    <div class="list-input">
      <span>值班日期</span>
      <div class="datebox">
        <!--<picker class="date" v-model="startDate" mode='date' :value='startDate' @change="pickerConfirm($event,'date')">
          <div hover-class='hover' :class="{unset:startDate==''}">{{startDate || '选择日期'}}</div>
        </picker>-->
        <picker class="date" v-model="startDate" mode='date' :value='startDate' @change="pickerConfirm($event,'date')">
          <div hover-class='hover' :class="{unset:startDate==''}">{{startDate || '选择日期'}}</div>
        </picker>
      </div>
    </div>
    <div class="list-input">
      <span>值班社区</span>
      <p class="text_right">{{commName}}</p>
    </div>
    <div class='greytitle'>值班证明图片</div>
    <div class="img-box" style='background:white;'>
      <div class='image' v-for="(item,i) in imgfiles" :key="i" @tap='previewImg(i)'>
        <img :src="item" mode='aspectFill'>
        <div @tap.stop='cancelImg(i)'><img src='/static/imgs/cancel.png'></div>
      </div>
      <div hover-class='fade' class='upload' @tap="chooseImage"><img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTU3NDYzMDY5MzcyIiBjbGFzcz0iaWNvbiIgc3R5bGU9IiIgdmlld0JveD0iMCAwIDEwNTUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1MDEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjUuOTM3NSIgaGVpZ2h0PSI2NCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5AZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IHJiaWNvbjsgc3JjOiB1cmwoImNocm9tZS1leHRlbnNpb246Ly9kaXBpYWdpaW9oZmxqY2ljZWdwZ2ZmcGJuam1namNuZi9mb250cy9yYmljb24ud29mZjIiKSBmb3JtYXQoIndvZmYyIik7IGZvbnQtd2VpZ2h0OiBub3JtYWw7IGZvbnQtc3R5bGU6IG5vcm1hbDsgfQo8L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNODU4LjU3OTY1MSAxMDcuMjY4Njc5IDUwMC44NTAwODEgMTA3LjI2ODY3OUM1MDAuODUwMDgxIDQ4LjExMzE1NyA0NTIuNjY1MjIgMCAzOTMuNTA5Njk4IDBMMzIxLjk0OTQ0MyAwQzI2Mi43OTM5MjIgMCAyMTQuNjgwNzY1IDQ4LjExMzE1NyAyMTQuNjgwNzY1IDEwNy4yNjg2NzlMMTA3LjM0MDM4MiAxMDcuMjY4Njc5QzQ4LjE4NDg2MSAxMDcuMjY4Njc5IDAgMTU1LjQ1MzU0IDAgMjE0LjUzNzM1N2wwIDU3Mi40MTAzMzVjMCA1OS4yMjcyMjUgNDguMTg0ODYxIDEwNy40MTIwODYgMTA3LjM0MDM4MiAxMDcuNDEyMDg2bDQ2Ny4xNDkzNTkgMGMxMC4yNTM2MjQgMCAxOS44NjE5MTQtNC4zNzM5MjMgMjYuNjczNzYyLTExLjkwMjgwOHMxMC4wMzg1MTMtMTcuNzgyNTA4IDguODkxMjU0LTI3Ljg5MjcyNWMtMS4wNzU1NTUtOS4zOTMxOC0xLjcyMDg4OC0xOC43ODYzNTktMS43MjA4ODgtMjguNTM4MDU4IDAtMTU4LjI0OTk4MiAxNDcuODUyOTUxLTI4NC44MDY5NDYgMzEyLjkxNDc4Mi0yNDIuMTQzMjY3IDEwLjY4Mzg0NiAyLjY1MzAzNiAyMi4wODQ3MjggMC40MzAyMjIgMzAuODMyNTc1LTYuNDUzMzMgOC43NDc4NDctNi43NDAxNDQgMTMuODM4ODA3LTE3LjIwODg3OSAxMy44Mzg4MDctMjguMTc5NTM5TDk2NS45MjAwMzQgMjE0LjUzNzM1N0M5NjUuOTIwMDM0IDE1NS40NTM1NCA5MTcuNzM1MTczIDEwNy4yNjg2NzkgODU4LjU3OTY1MSAxMDcuMjY4Njc5TDg1OC41Nzk2NTEgMTA3LjI2ODY3OXpNNDY1LjA2OTk1MyA3MTUuNTMwODQ1Yy0xMTguMzgyNzQ2IDAtMjE0LjY4MDc2NS05Ni4zNjk3MjItMjE0LjY4MDc2NS0yMTQuNzUyNDY4IDAtMTE4LjMxMTA0MyA5Ni4yOTgwMTgtMjE0LjY4MDc2NSAyMTQuNjgwNzY1LTIxNC42ODA3NjUgMTE4LjMxMTA0MyAwIDIxNC42MDkwNjEgOTYuMzY5NzIyIDIxNC42MDkwNjEgMjE0LjY4MDc2NUM2NzkuNjc5MDE0IDYxOS4xNjExMjMgNTgzLjQ1MjY5OSA3MTUuNTMwODQ1IDQ2NS4wNjk5NTMgNzE1LjUzMDg0NUw0NjUuMDY5OTUzIDcxNS41MzA4NDV6TTgwNC45NDUzMTIgMzc2LjY1OTMzOGMtNDAuMTU0MDUxIDAtNzIuNzA3NTEzLTMyLjQ4MTc1OS03Mi43MDc1MTMtNzIuNzA3NTEzIDAtNDAuMDgyMzQ3IDMyLjU1MzQ2My03Mi43MDc1MTMgNzIuNzA3NTEzLTcyLjcwNzUxM3M3Mi43MDc1MTMgMzIuNjI1MTY2IDcyLjcwNzUxMyA3Mi43MDc1MTNDODc3LjU4MTEyMiAzNDQuMTc3NTc5IDg0NS4wMjc2NTkgMzc2LjY1OTMzOCA4MDQuOTQ1MzEyIDM3Ni42NTkzMzhMODA0Ljk0NTMxMiAzNzYuNjU5MzM4ek05MzAuMTM5OTA2IDg1OC41MDc5NDgiIHAtaWQ9IjI1MDIiIGZpbGw9IiNBRUFFQUUiPjwvcGF0aD48cGF0aCBkPSJNMTAxMS4wOTMzNDEgNzg0Ljg2ODI4N2wtMTA4LjI3MjUzIDAgMC0xMDguMjcyNTNjMC0yMy45NDkwMjMtMTkuNDMxNjkyLTQzLjMwOTAxMi00My4zMDkwMTItNDMuMzA5MDEycy00My4zMDkwMTIgMTkuMzU5OTg5LTQzLjMwOTAxMiA0My4zMDkwMTJsMCAxMDguMjcyNTMtMTA4LjI3MjUzIDBjLTIzLjk0OTAyMyAwLTQzLjMwOTAxMiAxOS40MzE2OTItNDMuMzA5MDEyIDQzLjM4MDcxNnMxOS40MzE2OTIgNDMuMzA5MDEyIDQzLjMwOTAxMiA0My4zMDkwMTJsMTA4LjI3MjUzIDAgMCAxMDguMjcyNTNjMCAyMy45NDkwMjMgMTkuNDMxNjkyIDQzLjM4MDcxNiA0My4zMDkwMTIgNDMuMzgwNzE2czQzLjMwOTAxMi0xOS40MzE2OTIgNDMuMzA5MDEyLTQzLjM4MDcxNmwwLTEwOC4yNzI1MyAxMDguMjcyNTMgMGMyMy45NDkwMjMgMCA0My4zMDkwMTItMTkuMzU5OTg5IDQzLjMwOTAxMi00My4zMDkwMTJTMTAzNS4wNDIzNjQgNzg0Ljg2ODI4NyAxMDExLjA5MzM0MSA3ODQuODY4Mjg3eiIgcC1pZD0iMjUwMyIgZmlsbD0iI0FFQUVBRSI+PC9wYXRoPjwvc3ZnPg=='></div>
    </div>
    <div class='commit'>
      <button form-type='submit' hover-class='fade' :disabled='commiting' bindtap='submit'>提交</button>
    </div>
  </div>
  </form>
</div>
</template>
<script>
  export default {
    data() {
      return {
        SCID: '',
        name: '',
        commName: '',
        startDate: '',
        commiting: false,
        loaded: false,
        imgfiles: []
      }
    },
    methods: {
      commit(e){
        if(this.commiting) return
        if(!this.service.checkEmptyInput([this.startDate,this.commName,this.imgfiles,this.SCID],['值班日期','值班社区','值班证明图片','值班社区'])){
          return
        }
        wx.showModal({
          title:'',
          content:'确定要提交吗?',
          success: res => {
            if(res.confirm){
              this.execCommit(e)
            }
          }
        })
      },
      execCommit(e){
        this.commiting = true
        wx.showLoading({ title: '正在提交' })
        wx.request({
          url: this.rootUrl + 'duty/add',
          method: 'POST',
          header: { 'content-type': 'application/x-www-form-urlencoded' },
          data: {
            duty_date: this.startDate,
            SCID: this.SCID,
            sessionID: wx.getStorageSync('sessionID')
          },
          success: res => {
            console.log(res)
            if (res.statusCode == '500') {
              this.service.getUnionId(this.rootAvatar, this.rootUrl).then(res => this.submit_exec(content))
            } else {
              wx.hideLoading()
              if (res.data > 0) {
                this.upLoadImgs(res.data)
                wx.showModal({
                  title: '提交成功',
                  content: '',
                  showCancel: false
                })
                wx.hideLoading()
              } else {
                wx.showToast({ title: '提交失败', icon: 'none' })
              }
              this.commiting = false
              this.toHomelist()
            }
          }
        })
      },
      loadArticles () {
        this.getLawName()
      },
      // /*根据时间和当前律师获取值班街道*/
      getLawStreet(){
        wx.request({
          url: this.rootUrl + '/sch/getLawStreet',
          method: 'POST',
          header: { 'content-type': 'application/x-www-form-urlencoded' },
          data: {
            Schedule_Date: this.startDate,
            sessionID: wx.getStorageSync('sessionID')},
          success: res => {
            console.log(res.data)
              this.commName = res.data.comm_Name
               this.SCID = res.data.scid
          }
        })
      },
      // /*获取值班律师的姓名*/
      getLawName(){
        wx.showLoading({ title: '正在加载' })
        wx.request({
          url: this.rootUrl + '/law/getLawName',
          method: 'GET',
          header: { 'content-type': 'application/x-www-form-urlencoded' },
          data: { sessionID: wx.getStorageSync('sessionID')},
          success: res => {
            console.log(res)
            // this.name = res.data[0].name
            if(undefined != res.data[0].name){
              this.name = res.data[0].name
            }else{
              this.name = ''
            }
            wx.hideLoading()
          }
        })
      },
      //回到首页
      toHomelist: function () {
        wx.navigateBack({
          // url: '../homelist'
          delta: 1
        })
      },
      pickerConfirm(e, s) {
        switch (s) {
          case 'date': this.startDate = e.mp.detail.value;break
        }
        this.getLawStreet()
      },
      upLoadImgs(id) {
        wx.showLoading({ title: '正在上传图片' })
        const time = this.imgfiles.length
        let counter = time
        for(let i = 0; i < time; i++){
          wx.uploadFile({
            url: this.rootUrl + 'duty/addpic',
            filePath: this.imgfiles[i],
            formData: {
              id,
              filetype: 0
            },
            name: 'file',
            header: {
              'content-type': 'multipart/form-data'
            },
            success: res => {
              if(res.data == 1){
                console.log(res)
                wx.showLoading({ title: `图片上传成功` })
                wx.hideLoading()
                //
              }else{
                wx.showLoading({ title: `图片上传失败` })
                wx.hideLoading()
                //
              }
            },
            fail: res => {
              wx.hideLoading()
              wx.showToast({title:'上传失败',icon: 'none'})
              this.commiting = false
            }
          })
        }
      },
      chooseImage() {
        const count = 6 - this.imgfiles.length
        if(count==0){
          if(!wx.showModal({
            title: '上传限制',
            content: '图片数量上限为6张\n请删除部分图片后再上传新图片',
            showCancel: false,
            success: res => {
              if(res.confirm){return false}
            }
          })){return}
        }
        wx.chooseImage({
          count,
          sizeType: ['compressed'],
          success: res => {
            console.log(res)
            this.imgfiles = this.imgfiles.concat(res.tempFilePaths)
          }
        })
      },
      cancelImg(i){
        wx.showModal({
          title:'',
          content: '放弃上传这张照片吗?',
          success: res => {
            if(res.confirm){
              this.imgfiles.splice(i, 1)
            }
          }
        })
      },
      previewImg(i){
        wx.previewImage({
          urls: this.imgfiles,
          current: this.imgfiles[i]
        })
      }
    },
    onLoad() {
      this.getLawName()
    },
    onShow(){
      this.loadArticles()
    },
    onUnload() {
      this.commName = ''
      this.name = ''
      this.imgfiles = []
      this.loaded = false
    }
  }
</script>
<style lang="stylus" scoped>
.container
  position absolute
  min-height 100%
  width 100%
  Background()
  .baseinfo-box
    Background()
.datebox
  margin-right 0 !important
  width 100%
  text-align right
.date
  float right
  width 180rpx
.img-box
  padding 0 30rpx 30rpx 30rpx
  .image
    position relative
    > img
      Height_Width(100%)
    div
      position absolute
      top 0
      right 0
      background rgba(0,0,0,.5)
      Height_Width(100% / 5)
      Flex(flex,center,center)
      border-radius 0 0 0 10rpx
      img
        Height_Width(60%)
  .upload
    Flex(flex,center,center)
    background #f5f5f5
    img
      Height_Width(40%)
.text_right
  display: block;
  text-align: right;
  width: 100%;
  padding-right: 30rpx;
</style>

