<template>
  <!-- 播种 -->
  <view class="content">
    <view class="card">
      <u--form labelWidth='120' :model="formData" :rules="rules" ref="form">
        <view class="c-title">除草信息</view>
        <view class="c-box">
          <u-form-item label="除草剂种类" prop="kind" borderBottom ref='item1' required>
            <up-input input-align="right" placeholder="请输入除草剂种类" :disabled="mode=='detail'" border="none"
              v-model="formData.kind"></up-input>
          </u-form-item>
          <u-form-item label="除草剂品牌" prop="breed" borderBottom required>
            <up-input input-align="right" placeholder="请输入除草剂品牌" :disabled="mode=='detail'" border="none"
              v-model="formData.breed"></up-input>
          </u-form-item>
          <u-form-item label="除草剂用量(斤)" prop="dosage" borderBottom required>
            <up-input input-align="right" placeholder="请输入除草剂用量" border="none" type='number' :disabled="mode=='detail'"
              v-model="formData.dosage"></up-input>
          </u-form-item>

          
          <u-form-item label="作业面积(亩)" prop="area" borderBottom required>
            <up-input input-align="right" placeholder="请输入作业面积" :disabled="mode=='detail'" type="number" border="none"
              v-model="formData.area"></up-input>
          </u-form-item>
          <u-form-item label="参与人员" prop="user" borderBottom required>
            <up-input input-align="right" placeholder="请输入参与人姓名" :disabled="mode=='detail'" type="txt" border="none"
              v-model="formData.user"></up-input>
          </u-form-item>
          <view class="" v-if="mode=='add'">
            <u-form-item label="开始日期" @click="openDate" prop="start_date" borderBottom required>
              <up-input input-align="right" placeholder="请选择日期" suffixIcon="arrow-down" suffix-icon-style="color: #b6b6b6;" readonly border="none" v-model="formData.start_date"
                style="pointer-events: none;"></up-input>
            </u-form-item>
            <u-form-item label="结束日期" prop="end_date" @click="openDate1" borderBottom required>
              <up-input input-align="right" placeholder="请选择日期" suffixIcon="arrow-down" suffix-icon-style="color: #b6b6b6;" readonly border="none" v-model="formData.end_date"
                style="pointer-events: none;"></up-input>
            </u-form-item>
          </view>
          <view class="" v-else>
            <u-form-item label="开始日期" prop="start_date" borderBottom required>
              <up-input input-align="right" placeholder="请选择日期" suffixIcon="arrow-down" suffix-icon-style="color: #b6b6b6;" readonly border="none" v-model="formData.start_date"
                style="pointer-events: none;"></up-input>
            </u-form-item>
            <u-form-item label="结束日期" prop="end_date" borderBottom required>
              <up-input input-align="right" placeholder="请选择日期" suffixIcon="arrow-down" suffix-icon-style="color: #b6b6b6;" readonly border="none" v-model="formData.end_date"
                style="pointer-events: none;"></up-input>
            </u-form-item>
          </view>
        </view>

        <view class="card-li">
          <view class="c-title">除草图片</view>
          <view class="c-box c-box-p">
            <view class="code-img1">
              <view class="" v-if="pic.length>0"
                style="display: flex;flex-direction: row;flex-wrap: wrap;margin-bottom: 30rpx;">
                <view class="" v-for="(item,i) in pic" style="margin-right: 30rpx;">
                  <view class="">
                    <u-icon name="close" size="15" style="margin-left:120.85rpx;" @click="delimg(i)"
                      v-show="mode=='add'"></u-icon>
                    <u-image :src="item" width="150.85rpx" height="150.85rpx" @click="perviewFn(item)"></u-image>
                  </view>
                </view>
              </view>

            </view>
            <view class="code-img" v-if="mode=='add'">
              <view class="" @click="updateImgFn">
                <view class="carime-icon">
                  <u-image src="/static/img/DJSC.png" width="91.12rpx" height="91.12rpx"></u-image>
                  <view class="">
                    点击上传图片
                  </view>
                </view>

              </view>

            </view>
          </view>
        </view>

        <view class="c-title">备注信息</view>
        <view class="c-box" style="padding: 0 20rpx;">
          <u-form-item prop="remark" borderBottom>
            <u--textarea v-model="formData.remark" :disabled="mode=='detail'" placeholder="请输入内容"></u--textarea>
          </u-form-item>
        </view>


      </u--form>
      <view>
        <!-- 	<uni-calendar ref="calendar" :showMonth="true" :lunar="true" :insert="false" @confirm="dateConfirmfn" />
				<uni-calendar ref="calendar1" :showMonth="true" :lunar="true" :insert="false"
					@confirm="dateConfirmfn1" /> -->
        <u-datetime-picker :show="show1" v-model="value1" mode="datetime" @confirm="dateConfirmfn"
          :formatter="formatter" @cancel="show1=false"></u-datetime-picker>
        <u-datetime-picker :show="show2" v-model="value1" mode="datetime" @confirm="dateConfirmfn1"
          :formatter="formatter" @cancel="show2=false"></u-datetime-picker>
      </view>
      <u-button class="btn" v-if="mode=='add'" @click="addFn">完成添加</u-button>
    </view>



  </view>

</template>

<script setup>
  import {
    Uploads
  } from "@/api/upload.js"
  import {
    reactive,
    ref
  } from "vue";
  import {
    onLoad,
    onReady
  } from '@dcloudio/uni-app';
  import {
    addaction,
    plantdetail
  } from '@/api/api.js'

  const pic = reactive([]);
  const calendar = ref(null)
  const calendar1 = ref(null)
  const form = ref(null)
  const task_id = ref('');
  const value1 = ref(Date.now());
  const show1 = ref(false);
  const show2 = ref(false);
  const openDate = () => {
    // calendar.value.open()
    show1.value = true
  }
  const dataobj = reactive({})
  const openDate1 = () => {
    // calendar1.value.open()
    show2.value = true
  }
  const formatter = (type, value) => {
    if (type === 'year') {
      return `${value}年`;
    }
    if (type === 'month') {
      return `${value}月`;
    }
    if (type === 'day') {
      return `${value}日`;
    }
    return value;
  };
  // console.log()
  const formData = reactive({
    kind: "",
    breed: "",
    dosage: "",
    start_date: "",
    dosage: "",
    end_date: "",
  })


  //获取时间
  const dateConfirmfn = (e) => {
    formData.start_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM ')
    show1.value = false
  }
  const dateConfirmfn1 = (e) => {
    formData.end_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM ')
    show2.value = false
  }
  const rules = ref({
    'kind': {
      type: 'string',
      required: true,
      message: '请填写除草剂种类',
      trigger: ['blur', 'change']
    },
    'breed': {
      type: 'string',
      required: true,
      message: '请填写除草剂品牌',
      trigger: ['blur', 'change']
    },
    'dosage': {
      type: 'string',
      required: true,
      message: '请填写除草剂用量',
      trigger: ['blur', 'change']
    },
    'start_date': {
      type: 'string',
      required: true,
      message: '请填写开始日期',
      trigger: ['blur', 'change']
    },
    'end_date': {
      type: 'string',
      required: true,
      message: '请填写结束日期',
      trigger: ['blur', 'change']
    },
    'area': {
      type: 'string',
      required: true,
      message: '请填写土地面积',
      trigger: ['blur', 'change']
    },
    'user': {
      type: 'string',
      required: true,
      message: '请填写参与人',
      trigger: ['blur', 'change']
    }
    // ,
    // 'remark': {
    // 	type: 'string',
    // 	required: true,
    // 	message: '请填写备注',
    // 	trigger: ['blur', 'change']
    // },
  })
  onReady(() => {
    form.value.setRules(rules);

  });
  //图片上传
  const updateImgFn = async () => {

    uni.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        Uploads(res.tempFilePaths[0], 'img').then(res => {
          console.log(res)
          if (res.code == 1) {
            pic.push(res.data.url)
            console.log(data.formData)

            uni.$u.toast('上传成功')


          }



        }).catch(err => {
          //console.log('err', err);
          // uni.$u.toast('上传失败')
        })
      },
      fail: function(err) {
        //console.log('choose失败');
        uni.$u.toast('添加失败')
      }
    });
    // let res = await Uploads()
    // data.formData.pic = res.data.image
  }
  //查看图片
  const perviewFn = (url) => {

    uni.previewImage({
      urls: [url]
    })
  }
  //图片删除
  const delimg = (i) => {
    pic.splice(i, 1);
  }

  const addFn = () => {
    form.value.validate().then(res => {
      // console.log(res)
      if (res) {

        if (formData.area > dataobj.area) {
          uni.$u.toast('作业面积不能超过种植面积')
          return
        }


        formData.pic = pic
        let data1 = {
          plant_id: task_id.value,
          type: 2,
          detail: JSON.stringify(formData)
        };
        if (formData.pic.length == 0) {

          uni.$u.toast('请上传图片')
          return
        }
        let endTime = new Date(formData.end_date)
        let startTime = new Date(formData.start_date)
        let plantTime = new Date(dataobj.plant_date)

        if (startTime < plantTime) {
          uni.$u.toast("除草时间必须超过种植的时间");
          return
        }
        if (endTime < plantTime) {
          uni.$u.toast("除草时间必须超过种植的时间");
          return
        }
        if (endTime < startTime) {
          uni.$u.toast("结束时间不能小于开始时间");
          return
        } else if (startTime > endTime) {
          uni.$u.toast("开始时间不能大于结束时间");
          return
        } else {
          console.log("开始时间和结束时间合法");
        }

        console.log('表单通过');

        // 表单验证通过，执行提交操作

        addaction(data1).then((res) => {
          console.log(res)
          if (res.code == 1) {
            uni.$u.toast(res.msg)
            uni.navigateBack({
              delta: 1
            })
          }
        })
        // uni.$u.toast('校验成功')
      }

    }).catch((err) => {
      uni.$u.toast(err[0].message)
      console.log(err)
    })



  }
  const getlist = () => {
    plantdetail({
      plant_id: task_id.value
    }).then((res) => {
      if (res.code == 1) {
        // console.log(res)
        Object.assign(dataobj, res.data)
      }
    });
  };

  const mode = ref('add')
  onLoad((options) => {
    if (options.task) {
      let data = options.task ? JSON.parse(decodeURIComponent(options.task)) : null;
      // console.log(data, data.detail)
      Object.assign(formData, data.detail);

      pic.splice(0, pic.length, ...data.detail.pic);

      mode.value = 'detail'
      uni.setNavigationBarTitle({
        title: '除草详情'
      })
      // formData=data.detail

    } else {
      task_id.value = options.id
    }


    getlist()
  })
</script>

<style lang='scss' scoped>
  page {
    background-color: #f7fffc;
  }

  .card {
    background-color: #f7fffc;
    padding: 0;
    padding-bottom: 80rpx;

    .c-title {
      font-weight: bold;
      display: flex;
      align-items: center;
      padding: 30rpx;
      padding-bottom: 15rpx;

      &:before {
        content: '';
        display: inline-block;
        height: 0.8rem;
        width: 6rpx;
        margin-top: 0.2rem;
        margin-right: 10rpx;
        background-color: #35d190;
        border-radius: 6rpx;
      }
    }

    .c-box {
      background-color: #fff;
      padding-left: 30rpx;
      padding-right: 20rpx;
      padding-bottom: 20rpx;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    }

    .c-box-p {
      padding: 20rpx;
    }

    .btn {
      margin: 20rpx auto;
      width: 694rpx;
      height: 80rpx;
      border-radius: 80rpx;
      background-color: #4ad69b;
      color: #fff;
    }
  }

  .tit {
    display: flex;
    justify-content: space-between;
  }

  .card-li {
    position: relative;
    margin-bottom: 0;

    span {
      position: absolute;
      left: -9px;
      color: #f56c6c;
      line-height: 20px;
      font-size: 20px;
      top: 3px;
    }

  }

  .confim-btn {
    margin: 0 auto;
    width: 196.26rpx;
    height: 66.59rpx;
    /* border: ; */
    border: #00A15E 1px solid;
    color: #00A15E;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
  }

  .up-img {
    width: 341.71rpx
  }

  .today-btn {
    width: 588.79rpx;
    background-color: #00A15E;
    color: white;
    position: fixed;
    bottom: 40rpx;
    /* transform: ; */
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #00A15E, #4CC593);
    /* margin: 0 auto; */
  }

  .code-img {
    background-color: #F4F4F4;
    height: 350.47rpx;
    position: relative;
    /* margin-bottom: 100rpx; */

    .carime-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

  }

  .confirm {
    position: fixed;
    height: 84.11rpx;
    display: flex;
    bottom: 30rpx;
    width: 750rpx;

    .confirm-btn {
      width: 315.42rpx;
      height: 84.11rpx;
      border: #00A15E 1px solid;
      margin: 0 auto;
      border-radius: 80rpx;
      text-align: center;
      line-height: 84rpx;
    }
  }
</style>