<template>
  <div class="create-sub-task">
    <template>
      <div class="card">
        <u-row justify="between">
          <div class="left">
            <em>*</em>任务类型
          </div>
          <picker @change="change" :value="form.type" range-key="dictName" :range="$dict.getDict('workTaskType')">
            <u-row>
              <div v-if="form.type!=null" class="value">{{$dict.getDict('workTaskType')[form.type]["dictName"]}}</div>
              <div v-else class="placeholder">请选择</div>
              <div class="arrow"></div>
            </u-row>
          </picker>
        </u-row>
      </div>
      <div class="card">
        <u-row justify="between">
          <div class="left">
            <em>*</em>任务标题
          </div>
        </u-row>
        <u-gap height="16"></u-gap>
        <input maxlength="30" v-model.trim="form.taskTitle" placeholder="限30字">
        <u-gap height="32"></u-gap>
      </div>
      <div class="card">
        <u-row justify="between">
          <div class="left">
            <em>*</em>任务说明
          </div>
        </u-row>
        <u-gap height="16"></u-gap>
        <textarea maxlength="1000" v-model.trim="form.taskDescription" placeholder="请输入任务内容，限1000字"/>
      </div>
      <div class="card">
        <u-row justify="between">
          <div class="left">
            <em>*</em>截止日期
          </div>
          <picker @change="dateChange" mode="date" :value="form.lastTime" :start="startDate" :end="endDate">
            <u-row>
              <div v-if="form.lastTime!=null" class="value">{{form.lastTime}}</div>
              <div v-else class="placeholder">请选择</div>
              <div class="arrow" v-if="form.lastTime==null"></div>
              <div class="clear" v-else @click.stop="form.lastTime = null"></div>
            </u-row>
          </picker>
        </u-row>
      </div>
      <div class="card" style="padding: 13px 17px;margin-bottom: 0">
        <u-row justify="between">
          <div class="left" style="line-height: 22px;">
            <em>*</em>执行人
          </div>
          <AiPagePicker type="sysUser" :isShowPhone="true" :selected.sync="form.userInfoList"
           action="/app/wxcp/wxuser/list?status=1" nodeKey="id" class="select-user">
            <app-nucleic-acid-sampling v-if="form.userInfoList.length" class="value">
              已选择<em>{{form.userInfoList.slice(0,2).map(e=>e.name).join("、")}}</em>等
              <em>{{form.userInfoList.length}}</em>人
            </app-nucleic-acid-sampling>
            <span v-else class="color-999">请选择</span>
            <div class="arrow"></div>
          </AiPagePicker>
        </u-row>
      </div>
      <div class="card border" style="padding: 13px 17px;margin-bottom: 0">
        <u-row justify="between">
          <div class="left" style="line-height: 22px;">督办人</div>
          <AiPagePicker type="sysUser" :isShowPhone="true" :selected.sync="form.checkUserList"
           action="/app/wxcp/wxuser/list?status=1" nodeKey="id" class="select-user">
            <app-nucleic-acid-sampling v-if="form.checkUserList.length" class="value">
              已选择<em>{{form.checkUserList.slice(0,2).map(e=>e.name).join("、")}}</em>等
              <em>{{form.checkUserList.length}}</em>人
            </app-nucleic-acid-sampling>
            <span v-else class="color-999">请选择</span>
            <div class="arrow"></div>
          </AiPagePicker>
        </u-row>
      </div>
      <div class="card" style="padding: 13px 17px">
        <u-row justify="between">
          <div class="left" style="line-height: 22px;">抄送人</div>
          <AiPagePicker type="sysUser" :isShowPhone="true" :selected.sync="form.sendUserList"
           action="/app/wxcp/wxuser/list?status=1" nodeKey="id" class="select-user">
            <app-nucleic-acid-sampling v-if="form.sendUserList.length" class="value">
              已选择<em>{{form.sendUserList.slice(0,2).map(e=>e.name).join("、")}}</em>等
              <em>{{form.sendUserList.length}}</em>人
            </app-nucleic-acid-sampling>
            <span v-else class="color-999">请选择</span>
            <div class="arrow"></div>
          </AiPagePicker>
        </u-row>
      </div>
      <div class="card" style="padding: 12px 17px;">
        <u-row justify="between">
          <div class="left"> 发送任务通知</div>
          <switch :checked="!!form.isNofity" @change="(e)=>form.isNofity=Number(e.detail.value)"/>
        </u-row>
      </div>
      <div class="footer" @click="handleCreate">创建</div>
    </template>

  </div>
</template>

<script>

  export default {
    name: "create",
    data() {
      return {
        index: null,
        selectList: [],
        form: {
          parentTaskCode: null,
          type: null,
          taskTitle: "",
          taskDescription: "",
          lastTime: null,
          userInfoList: [],
          checkUserList: [],
          sendUserList: [],
          isNofity: 0
        },
        currentClick: null,
      }
    },
    onLoad(opt) {
      if (opt.taskCode) {
        this.form.parentTaskCode = opt.taskCode
      }
      this.$dict.load("workTaskType")
    },
    computed: {
      startDate() {
        return this.getDate('start');
      },
      endDate() {
        return this.getDate('end');
      }
    },
    methods: {
      handleCreate() {
        if (this.form.type==null) return this.$u.toast("请选择任务类型")
        if (!this.form.taskTitle) return this.$u.toast("请输入任务标题")
        if (!this.form.taskDescription) return this.$u.toast("请输入任务说明")
        if (this.form.lastTime==null) return this.$u.toast("请选择截止日期")
        if (!this.form.userInfoList.length) return this.$u.toast("请选择执行人")

        this.$http.post("/app/appworktaskinfo/addOrUpdate", {
          ...this.form,
          lastTime:this.form.lastTime + " 23:59:59"
        }).then(res => {
          if (res.code == 0) {
            this.$u.toast("创建成功")
            uni.$emit('getList')
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 500)

          }
        })
      },
      dateChange(e) {
        let date = this.getDate({format: true});
        if (new Date(date).getTime() > new Date(e.target.value).getTime()) {
          this.form.lastTime = null
          return this.$u.toast("截止时间不能小于当前时间")
        }
        this.form.lastTime = e.target.value
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      change(e) {
        this.form.type = e.detail.value
      },
      userChange(e) {
        if (this.currentClick == 0) {
          this.form.userInfoList = e
        } else if (this.currentClick == 1) {
          this.form.checkUserList = e
        } else if (this.currentClick == 2) {
          this.form.sendUserList = e
        }
        this.selectList = []
      }
    },
  }
</script>

<style lang="scss" scoped>
  .create-sub-task {
    min-height: 100%;
    background-color: #F5F5F5;
    box-sizing: border-box;
    padding: 16px 0 140px 0;

    .card {
      background-color: #FFFFFF;
      box-sizing: border-box;
      padding: 32px 34px;
      margin-bottom: 16px;

      .left {
        font-size: 32px;
        color: #333333;
        font-weight: 400;
        line-height: 48px;

        & > em {
          font-style: normal;
          font-size: 32px;
          color: #FF4466;
        }
      }

      .value {
        font-size: 32px;
        color: #333333;

        & > em {
          font-style: normal;
          font-size: 28px;
          color: #1365DD;
        }
      }

      .placeholder {
        font-size: 28px;
        color: #999999;
      }

      .arrow {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-top: 5px solid #CCCCCC;
        border-right: 5px solid #CCCCCC;
        transform: rotate(45deg);
        margin-left: 8px;
      }

      .clear {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #CCCCCC;
        margin-left: 8px;
        position: relative;

        &:before {
          content: "";
          width: 4px;
          height: 24px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) rotate(-45deg);
          background-color: #FFFFFF;
          border-radius: 4px;
        }

        &:after {
          content: "";
          width: 4px;
          height: 24px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%) rotate(45deg);
          background-color: #FFFFFF;
          border-radius: 4px;
        }
      }

      textarea {
        width: 100%;
      }
    }

    .border {
      border-top: 1px solid rgba(216, 221, 230, 0.5);
      border-bottom: 1px solid rgba(216, 221, 230, 0.5);
    }

    .footer {
      height: 112px;
      width: 100%;
      position: fixed;
      left: 0;
      bottom: 0;
      background: #1365DD;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      color: #FFFFFF;
    }
  }
</style>
