<template>
  <!-- 新建任务 -->
  <view>
    <view class="task_box">
      <!-- 主题 -->
      <!-- 信息填写表单 -->
      <view class="u-page">
        <view class="u-demo-block">
          <view class="u-demo-block__content">
            <u--form labelPosition="left" :model="model1" ref="form1">
              <u-form-item label="任务主题:" prop="userInfo.title" borderBottom ref="item">
                <u--input v-model="model1.userInfo.title" border="none" placeholder="请输入"></u--input>
              </u-form-item>
              <u-cell-group>
                <view class="cell" v-for="(item, index) in list" :key="index">
                  <u-cell @click="showPicker(index)" :title="item.title" isLink :value="item.value"
                    :label="item.value?'':'请选择'">
                  </u-cell>

                </view>
              </u-cell-group>
              <!-- 指派给 -->

              <u-picker :show="flag1" :columns="columns3" ref="uPicker4" @cancel="cancel" closeOnClickOverlay
                @close="flag1 = false" @confirm="confirm" @change="changeHandler1" keyName="name" :defaultIndex=[0,0]>
              </u-picker>
              <!-- 协作人 -->
              <u-picker :show="flag2" :columns="columns3" ref="uPicker5" @cancel="cancel" @close="flag2 = false"
                @confirm="confirm" @change="changeHandler2" keyName="name" closeOnClickOverlay :defaultIndex=[0,0]>
              </u-picker>

              <!-- 验收人 -->
              <u-picker :show="flag3" :columns="columns3" ref="uPicker6" @cancel="cancel" @close="flag3 = false"
                @confirm="confirm" @change="changeHandler3" keyName="name" closeOnClickOverlay :defaultIndex=[0,0]>
              </u-picker>
              <!-- 任务性质 -->
              <u-form-item label="任务性质:" prop="userInfo.isbug" borderBottom @click="show3 = true; hideKeyboard()"
                ref="item3">
                <u--input v-model="model1.userInfo.isbug" disabled disabledColor="#ffffff" placeholder="请选择"
                  border="none"></u--input>
              </u-form-item>
              <!-- 开始时间 -->
              <u-form-item label="任务开始时间:" prop="userInfo.start_time" borderBottom
                @click="starttime = true; hideKeyboard()" ref="item8">
                <u--input v-model="model1.userInfo.start_time" disabled disabledColor="#ffffff" placeholder="请选择"
                  border="none"></u--input>
              </u-form-item>
              <!-- 预计结束日期 -->
              <u-form-item label="预计结束日期:" prop="userInfo.end_time" borderBottom @click="endtime = true; hideKeyboard()"
                ref="item4">
                <u--input v-model="model1.userInfo.end_time" disabled disabledColor="#ffffff" placeholder="请选择"
                  border="none"></u--input>
              </u-form-item>
              <!-- 月份 -->
              <u-form-item label="月份:" prop="userInfo.demo1" borderBottom @click="endmonth = true; hideKeyboard()"
                ref="item5">
                <u--input v-model="model1.userInfo.demo1" disabled disabledColor="#ffffff" placeholder="请选择"
                  border="none"></u--input>
              </u-form-item>
              <!-- 关联项目 -->
              <u-form-item label="关联项目:" prop="userInfo.project" borderBottom @click="show4 = true; hideKeyboard()"
                ref="item6">
                <u--input v-model="model1.userInfo.project" disabled disabledColor="#ffffff" placeholder="请选择"
                  border="none"></u--input>
              </u-form-item>
              <!-- 优先级 -->
              <u-form-item label="优先级:" prop="userInfo.priority_status" borderBottom
                @click="show5 = true; hideKeyboard()" ref="item7">
                <u--input v-model="model1.userInfo.priority_status" disabled disabledColor="#ffffff" placeholder="请选择"
                  border="none"></u--input>
              </u-form-item>

              <view class="gray"></view>
              <!-- 详细描述 -->
              <view class="elaborate_box">
                <view class="elaborate">详细描述:</view>
                <u-form-item prop="userInfo.docContent_markdown_doc" ref="item8">
                  <u--textarea v-model="model1.userInfo.docContent_markdown_doc" count autoHeight maxlength='200'></u--textarea>
                </u-form-item>
              </view>
            </u--form>
            </u-action-sheet>
            <!-- 任务性质 -->
            <u-action-sheet :show="show3" :actions="actions3" title="请选择任务性质" @close="show3 = false" @select="Select3">
            </u-action-sheet>
            <!-- 关联项目 -->
            <u-action-sheet :show="show4" :actions="actions4" title="请选择关联项目" @close="show4 = false" @select="Select4">
            </u-action-sheet>
            <!-- 优先级 -->
            <u-action-sheet :show="show5" :actions="actions5" title="请选择优先级" @close="show5 = false" @select="Select5">
            </u-action-sheet>
            <!-- 开始时间 -->
            <u-datetime-picker :show="starttime" :value="start_time" mode="datetime" closeOnClickOverlay
              @confirm="start_timeConfirm" @cancel="start_timeClose" @close="start_timeClose"></u-datetime-picker>
            <!-- 结束日期 -->
            <u-datetime-picker :show="endtime" :value="end_time" mode="datetime" closeOnClickOverlay
              @confirm="end_timeConfirm" @cancel="end_timeClose" @close="end_timeClose"></u-datetime-picker>
            <!-- 结束月份 -->
            <u-datetime-picker :show="endmonth" :value="demo1" mode="date" closeOnClickOverlay
              @confirm="end_monthConfirm" @cancel="end_monthClose" @close="end_monthClose"></u-datetime-picker>
          </view>
        </view>
      </view>
      <!-- 信息填写表单 end-->

      <!-- 提交按钮 -->
      <view class="btn_box">
        <u-button type="error" class="btn reset" text="重置" @click="reset"></u-button>
        <u-button type="primary" class="btn sub" text="立即提交" @click="submit"></u-button>
      </view>


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

<script>
  import {
    addNewTaskApi,
    getDepartmentApi,
    getDepartmentPersonApi
  } from '@/api/oa.js'
  import { Toast } from '../../../libs/uniApi'
  import {
    data
  } from '../../../uni_modules/uview-ui/libs/mixin/mixin'
  export default {
    data() {
      return {
        index: 0,
        loading: false,
        columnData: [

        ],
        columns3: [],
        model1: {
          userInfo: {
            title: '', //任务主题
            director_name: '', //指派给
            assist_admin_names: '', //协作人
            isbug: '', //任务性质
            start_time: '', //开始时间
            end_time: '', //结束日期
            demo1: '', //结束月份
            project: '', //关联项目
            priority_status: '', //优先级，
            assist_check_names: '', //验收人
            docContent_markdown_doc: '', //详细内容
          },
        },
        flag1: false, //指派给
        flag2: false, //协作人
        flag3: false, //验收人

        show3: false, //
        show4: false, //
        show5: false, //
        list: [{
            title: '指派给:',
            value: '',
          },
          {
            title: '协作人:',
            value: ''
          },
          {
            title: '验收人:',
            value: ''
          },
        ],
        starttime: false, //开始时间
        endtime: false, //结束日期
        endmonth: false, //结束月份
        start_time: Number(new Date()), //开始时间
        end_time: Number(new Date()),
        demo1: Number(new Date()),
        actions3: [{
          name: '部门工作',
          index: '0'
        }, {
          name: '部门协助',
          index: '1'
        }, ],
        actions4: [{
          name: '项目1',
          id: '78'
        }, ],
        actions5: [{
          name: '一般',
          id: '1',
        }, {
          name: '紧急',
          id: '4'
        }],
        rules: {

        },
      }
    },
    onLoad() {
      this.getDepartment()

    },
    onShow() {},
    methods: {
      groupChange(n) {
        // console.log('groupChange', n);
      },
      navigateBack() {
        uni.navigateBack()
      },
      Select3(e) {
        this.model1.userInfo.isbug = e.name
        this.model1.userInfo.is_bug = e.index //任务性质id
        this.$refs.form1.validateField('userInfo.is_bug')
      },
      Select4(e) {
        this.model1.userInfo.project = e.name
        this.model1.userInfo.project_id = e.id //关联项目id
        this.$refs.form1.validateField('userInfo.project')
      },
      Select5(e) {
        this.model1.userInfo.priority_status = e.name
        this.model1.userInfo.priority = e.id //优先级id
        this.$refs.form1.validateField('userInfo.priority')
      },
      change(e) {
        // console.log(e);
      },
      //开始日期
      start_timeClose() {
        this.starttime = false
        this.$refs.form1.validateField('userInfo.start_time')
      },
      start_timeConfirm(e) {
        this.starttime = false
        this.model1.userInfo.start_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
        this.$refs.form1.validateField('userInfo.start_time')
      },
      //结束日期
      end_timeClose() {
        this.endtime = false
        this.$refs.form1.validateField('userInfo.end_time')
      },
      end_timeConfirm(e) {
        this.endtime = false
        this.model1.userInfo.end_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
        this.$refs.form1.validateField('userInfo.end_time')
      },
      //结束月份
      end_monthClose() {
        this.endmonth = false
        this.$refs.form1.validateField('userInfo.demo1')
      },
      end_monthConfirm(e) {
        this.endmonth = false
        this.model1.userInfo.demo1 = uni.$u.timeFormat(e.value, 'yyyy-mm')
        this.$refs.form1.validateField('userInfo.demo1')
      },
      //新建任务
      async addNewTask(data) {
        const res = await addNewTaskApi(data)
        Toast('slkdff')
      },
      //获取部门列表
      async getDepartment() {
        const res = await getDepartmentApi()
        const deArr = res[0].children
        this.columns3.push(deArr)
        let id = deArr[0].id
        this.getDepartmentPerson(id)

      },
      //获取部门对应的人员列表
      async getDepartmentPerson(id) {
        const data = {
          did: id
        }
        const res = await getDepartmentPersonApi(data)
        const nameArr = []
        res.forEach(item => {
          let obj = {}
          obj.name = item.name
          obj.id = item.id
          nameArr.push(obj)
        })
        this.columnData = []
        this.columnData = nameArr
        // this.columnData = res
        if (this.columns3[1]) {
          return
        } else {
          this.columns3.push(nameArr)
          // this.columns3.push(res)
        }
      },

      async submit() {
		//结束时间不能低于开始时间
		var d1 = new Date( this.model1.userInfo.start_time)
		const date1 =d1.getTime()
		var d2 = new Date( this.model1.userInfo.end_time)
		const date2 =d2.getTime()
		if(date1>date2){
			Toast('结束时间不低于开始时间')
			this.model1.userInfo.end_time = ''
			return
		}
        this.model1.userInfo.director_name = this.list[0].value
        this.model1.userInfo.assist_admin_names = this.list[1].value
        this.model1.userInfo.assist_check_names = this.list[2].value
        let userInfo = this.model1.userInfo
        const arr = Object.values(userInfo)
        const bool = arr.every(item => item)
        if (bool) {
          this.model1.userInfo.director_uid = this.list[0].id+''
          this.model1.userInfo.assist_admin_ids = this.list[1].id+''
          this.model1.userInfo.assist_check_ids = this.list[2].id+''
          this.model1.userInfo.ueditorcontent = this.model1.userInfo.docContent_markdown_doc
          // const { msg } = await this.addNewTask(this.model1.userInfo)
		  console.log(this.model1.userInfo);
          const res = await addNewTaskApi(this.model1.userInfo)
          if(res.code==0){
			  uni.$u.toast('验收时间不能大于本月月底18点')
			  return
		  }else{
			  // 新建任务成功跳转回上一页
			  uni.showToast({
			  	title: '已提交',
			  });
			  setTimeout(function() {
			  	uni.navigateBack({
			  		delta: 1
			  	});
			  }, 1000) 	
		  }
        } else {
          uni.$u.toast('请填写所有信息')
          return
        }
      },
      reset() {
        this.list.forEach(item => {
          item.value = ''
        })
        for (let i in this.model1.userInfo) {
          this.model1.userInfo[i] = ''
        }
 
      },
      hideKeyboard() {
        uni.hideKeyboard()
      },
      //picker选择器
      showPicker(index) {
        console.log(index);
        this.index = index + 1
        this[`show${index + 1}`] = true
      },
      //两级联动
      changeHandler1(e) {
        this.change(e)
        const {
          columnIndex,
          value,
          values,
          index,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker4
        } = e
        let id = e.value[0].id
        if (columnIndex === 0) {
          this.getDepartmentPerson(id)
          this.loading = true
          uni.$u.sleep(500).then(() => {
            picker.setColumnValues(1, this.columnData)
            this.loading = false
          })
        }
      },
      changeHandler2(e) {
        this.change(e)
        const {
          columnIndex,
          value,
          values,
          index,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker5
        } = e
        let id = e.value[0].id
        if (columnIndex === 0) {
          this.getDepartmentPerson(id)
          this.loading = true
          uni.$u.sleep(500).then(() => {
            picker.setColumnValues(1, this.columnData)
            this.loading = false
          })
        }
      },
      changeHandler3(e) {
        this.change(e)
        const {
          columnIndex,
          value,
          values,
          index,
          // 微信小程序无法将picker实例传出来，只能通过ref操作
          picker = this.$refs.uPicker6
        } = e
        let id = e.value[0].id
        if (columnIndex === 0) {
          this.getDepartmentPerson(id)
          this.loading = true
          uni.$u.sleep(500).then(() => {
            picker.setColumnValues(1, this.columnData)
            this.loading = false
          })
        }
      },
      change(e) {
        // console.log('change', e);
      },
      showPicker(index) {
        this.index = index + 1
        this[`flag${index + 1}`] = true
      },
      close() {
        // console.log('close');
        this[`flag${this.index}`] = false
      },
      confirm(e) {
        const num = this.index - 1
        const name = e.value[1]
        if (name == undefined) {
          this.list[num].value = '暂无'
        } else {
          this.list[num].value = name.name
          this.list[num].id = name.id
        }

        this[`flag${this.index}`] = false
      },
      cancel() {
        // console.log('cancel');
        this[`flag${this.index}`] = false
      },


    },
    onReady() {
      // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
      this.$refs.form1.setRules(this.rules)
    },

  }
</script>

<style lang="scss" scoped>
  /deep/.u-form {
    background-color: #fff;
  }

  /deep/.uicon-arrow-right {
    display: none;
  }

  /deep/.u-cell__right-icon-wrap {
    display: none !important;
  }

  /deep/.u-form-item {
    padding: 0 28rpx;
  }

  /deep/.u-form-item__body__left {
    width: 220rpx !important;
    // background-color: pink;
  }

  /deep/.input-placeholder,
  /deep/.u-input__content,
  /deep/.uni-input-wrapper {
    font-size: 28rpx !important;
  }

  /deep/.u-textarea {
    padding: 0 !important;
  }

  /deep/.u-form-item__body__right__message {
    margin-left: 220rpx !important;
  }

  /deep/.u-cell__title {
    display: inline-block !important;
    flex: none;
  }

  /deep/.u-cell__body {
    padding: 21rpx 0 !important;
  }

  /deep/.u-line:first-child {
    border-bottom: none !important;
  }

  /deep/.u-cell__value {
    color: black !important;
  }

  /deep/.u-cell__title-text {
    display: inline-block !important;
    width: 220rpx !important;
  }

  /deep/.u-cell__label {
    font-size: 28rpx !important;
    color: #CCCCCC !important;
  }

  /deep/.u-cell__body__content {
    flex: none !important;
  }

  .cell {
    margin: 0 auto;
    width: 694rpx;
    // background-color: pink;
  }

  .row {
    margin: 0 auto;
    margin-top: 21rpx;
    width: 694rpx;
    height: 0rpx;
    border-bottom: 1rpx solid #CCCCCC;
  }

  .de {
    font-size: 28rpx;

    .miaoshu {
      font-size: 28rpx;
      color: #CCCCCC;
    }
  }

  .ch {
    color: rgb(192, 196, 204);
  }

  .gray {
    // width: 750rpx;
    height: 35rpx;
    background-color: #F5F5F5;
  }

  .elaborate_box {
    background-color: #fff;
    padding: 35.5rpx 28rpx;
	margin-bottom: 200rpx;
    overflow: hidden;

    .elaborate {
      color: #666666;
      font-size: 32rpx;
     
    }

    .elaborate_info {
      width: 100%;
      // height: 350rpx;
      font-size: 28rpx;
    }
  }

  .btn_box {
    z-index: 9999;
    position: fixed;
    bottom: 0;
    width: 750rpx;
    height: 156rpx;
    background: #FFFFFF;
    display: flex;

    .btn {
      text-align: center;
      line-height: 88rpx;
      // width: 375rpx;
      height: 88rpx;
    }

    .reset {
      border: none;
      background-color: #fff;
      color: #999999;
    }

    .sub {
      color: #fff;
      background-color: $theme-oa-color;
    }
  }
</style>
