<template>
  <div>
    <div class="detailItem">
      <div class="imgparent">
        <van-nav-bar
          title="填写请假信息"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
      <div class="formtr">
        <van-form @submit="onSubmit">
          <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="部门"
            placeholder="请选择部门"
            @click="show = true"
            :rules="[{ required: true, message: '请选择部门' }]"
            
          />
          <van-popup
            v-model="show"
            round
            position="bottom"
          >
            <van-cascader
              v-model=" form.leavefrom_department"
              title="请选择所在部门"
              :options="options"
              @close="show = false"
              @finish="onFinish"
              :field-names="fieldNames"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            name="picker"
            :value="valuetao"
            label="请假类型"
            placeholder="点击选择请假类型"
            @click="showPickertwo = true"
            class="stru"
            v-model="form.leavefrom_leave_type"
            :rules="[{ required: true, message: '请选择请假类型' }]"
          />
          <van-popup
            v-model="showPickertwo"
            position="bottom"
          >
            <van-picker
              show-toolbar
              :columns="columnstwo"
              @confirm="onConfirmtwo"
              @cancel="showPickertwo = false"
               v-model="form.leavefrom_leave_type"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            name="datetimePicker"
            v-model="form.leavefrom_start_time"
            :value="valuestartime"
            label="开始时间"
            placeholder="点击选择开始时间"
            @click="showPickerstr = true"
            class="stru"
            :rules="[{ required: true, message: '请选择开始时间' }]"
          />
          <van-popup
            v-model="showPickerstr"
            position="bottom"
          >
            <van-datetime-picker
              type="datetime"
              v-model="currentDate"
              @confirm="onConfirmstatime"
              @cancel="showPickerstr = false"
              :min-date="minDate"
              :max-date="maxDate"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            name="datetimePicker"
            :value="valueendtime"
            label="结束时间"
            placeholder="点击选择结束时间"
            @click="showPickerend = true"
            class="stru"
            v-model="form.leavefrom_end_time "
            :rules="[{ required: true, message: '请选择结束时间' }]"
          />
          <van-popup
            v-model="showPickerend"
            position="bottom"
          >
            <van-datetime-picker
              type="datetime"
              v-model="currentDate"
               :min-date="minDate"
              :max-date="maxDate"
              @confirm="onConfirmsendtime"
              @cancel="showPickerend = false"
            />
          </van-popup>
          <van-field
            v-model="form.leavefrom_reason"
            rows="2"
            autosize
            label="请假事由"
            type="textarea"
            maxlength="50"
            placeholder="请输入请假事由"
            show-word-limit
            class="stru"
            :rules="[{ required: true, message: '请输入请假事由' }]"
          />
          <van-field
            name="uploader"
            label="文件上传"
            class="stru"
          >
            <template #input>
              <!-- <van-uploader v-model="uploader" /> -->
              <van-uploader   class="df_txt_box" v-model="fileList" multiple :max-count="3"  :after-read="afterRead"   />
            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button
              round
              block
              type="info"
              native-type="submit"
            >提交</van-button>
          </div>
        </van-form>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      valuetao: "",
      valuestartime: "",
      valueendtime: "",
       fieldValue: '',
      cascaderValue: '',
       show: false,
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        
      ],
      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
      columnstwo: ["杭州1", "宁波1", "温州1", "嘉兴1", "湖州1"],
      showPicker: false,
      showPickertwo: false,
      showPickerstr: false, //开始时间
      showPickerend: false, //结束时间
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      message: "",
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      fokeu:{
        table:'leavefrom',
        objId:-1,
        fixedData:{}
      },
      form:{},
      fieldNames:{
        text:'label',
        value:'id'
      },
      text:'',
      fileList: [

						],
      uejtyu:[],
      imgList:[]
    };
  },
  props: ["detailitem"],
  created(){
    this.department()
    this.leaveType()
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
    // 请假类型
    onConfirmtwo(value) {
      this.valuetao = value;
      this.showPickertwo = false;
    },
    // 开始时间
    onConfirmstatime(value) {
      const month = value;
      this.valuestartime = this.formatDateTime(month)
      this.form.leavefrom_start_time = this.valuestartime
      this.showPickerstr = false;
    },
    // 结束时间
    onConfirmsendtime(value) {
      const month = value;
       this.valueendtime = this.formatDateTime(month)
        this.form.leavefrom_end_time= this.valueendtime
      this.showPickerend = false;
    },
    // 部门
     onFinish({ selectedOptions }) {
      this.show = false;
      console.log(selectedOptions[selectedOptions.length - 1].label)
      this.uejtyu = []
      // this.fieldValue = selectedOptions.map((option) => {
      //   // console.log(option)
      //   option.label
      //   // console.log(option.id)
      //   this.uejtyu.push(option.label)
      // }).join('/');
      this.fieldValue = selectedOptions[selectedOptions.length - 1].label
      // this.fieldValue = this.uejtyu.join('/')
      this.form.leavefrom_department = selectedOptions[selectedOptions.length - 1].id
      console.log(this.form.leavefrom_department)

    },
    // 提交
    async onSubmit(values) {
      console.log(this.form)
      console.log("submit", values);
      this.fokeu.fixedData = this.form
       const res = await this.$http.post("/boman-web-core/p/cs/objectSave",this.fokeu);
       if(res.data.code !== 200){
        this.$msg.fail(res.data.msg)
        return  false
       }
      this.$router.push("/ubmit");
    },
    // 部门数据
    async department(){
      const res = await this.$http.get("/system/dept/treeselect");
      console.log(res.data)
      if(res.data.code !== 200){
        this.$msg.fail(res.data.msg)
        return false
      }
      this.options = res.data.data
      console.log(this.options)
    },
    // 请假类型
    async leaveType(){
      const res = await this.$http.get("/boman-system/dict/data/type/" + 'leavefrom');
      console.log(res.data)
      if(res.data.code !== 200){
        this.$msg.fail(res.data.msg)
        return false
      }
      this.columnstwo = res.data.data
      console.log(this.columnstwo)
    },
    //递归
    dietj(index){
       console.log(index)
       let iuy = []
      for(var i = 0 ; i < index.length; i++){
        index[i].value = index[i].id
        iuy = index[i].children
        // this.dietj(index[i].children)
         console.log(iuy)
         if(index[i].children !== undefined){
           if(index[i].children != 0){
             console.log(index[i].children)
             this.dietj(index[i].children)
           }else{
             return
           }
         }

      }
    },
    formatDateTime(inputTime) {
     let date = new Date(inputTime);
      let y = date.getFullYear();
      let m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let ms = date.getMinutes();
      ms = ms < 10 ? "0" + ms : ms;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      const time = y + '-' + m + '-' + d + ' ' + h + ':' + ms + ':' + s;
      this.text = time;
      
      console.log(time);
      return this.text;
      console.log(second);
      // return this.shoutime
    },
    // 图片上传接口
    async uplod(index){
      const res = await this.$http.post("/boman-file/upload/base64",{
        file:index
      });
      if(res.data.code == 200){
         this.imgList.push(res.data.url)
         this.form.url = this.imgList.join(',')
         this.$Notify({
											type: 'success',
											message: '上传成功'
										});
      }else{
        this.$msg.fail(res.data.msg)
      }
     

      console.log(res)
    },
    // 图片上传
    afterRead(filed) {
						// 此时可以自行将文件上传至服务器
						console.log(this.fileList);
            this.uplod(filed.content)
						// var tu = this.base64ImgtoFile(file.content)
						// console.log(tu)
						// this.filety.file = filed.content
						// this.filety.file = filed.content
						// console.log(this.file)
					
					},
  }
};
</script>

<style lang="less">
.formtr {
  .stru {
    .van-field__control {
      text-align: right;
    }
  }

  .van-cell:not(:last-child)::after {
    border-bottom: 0;
  }
  .van-field__control--custom {
    justify-content: flex-end;
  }
  .van-cell {
    font-weight: 500;
    color: #343434;
    padding: 5.6vw 4.267vw;
  }
  .van-field__control{
    text-align: right;
  }
}
</style>


<style scoped lang="less">
.detailItem {
  background-color: #fff;
  height: 100vh;
  p {
    font-size: 3.333vw;
    padding: 0.833vw 0;
  }
  .imgparent {
    position: relative;
    .bottom {
      padding: 0 2.778vw;
      margin-bottom: 1.389vw;
      position: absolute;
      bottom: 0.556vw;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
      justify-content: space-between;
      color: white;
      display: flex;
      left: 0;
      right: 0;
    }
  }
}
.formtr {
  .stru {
    .van-field__control {
      text-align: right;
    }
  }
}
</style>