<template>
  <div class="create-sub-task">
    <template>
      <u-navbar back-icon-color="#000" title="创建任务" title-color="#000" title-width="300" title-size="32" 
        :title-bold="true" :background="backgroundNavbar" :is-fixed="true" height="44" z-index="999">
      </u-navbar>
      <div class="header-content-bg">
        <img src="https://cdn.sinoecare.com/i/2024/07/12/6690a1303d423.png" alt="">
      </div>
      <div class="card-content">
        <div class="card flex">
          <div class="left">
            <em>*</em>任务类型
          </div>
          <picker @change="change" :value="form.type" range-key="dictName" :range="$dict.getDict('workTaskType')" class="right">
            <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>
        </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 flex">
          <div class="left">
            <em>*</em>截止日期
          </div>
          <div class="right">
            <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>
          </div>
        </div>
        <div class="card flex" style="padding: 13px 17px;margin-bottom: 0">
          <div class="left" style="line-height: 22px;">
            <em>*</em>执行人
          </div>
          <div class="right">
            <AiPagePicker type="sysUser" :isShowPhone="true" :params="{axiosUrl:'/app/wxcp/wxuser/list?status=1'}"
              nodeKey="id" class="select-user" @select="handleUserInfoList">
              <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>
          </div>
        </div>
        <div class="card flex border" style="padding: 13px 17px;margin-bottom: 0">
          <div class="left" style="line-height: 22px;">督办人</div>
          <div class="right">
            <AiPagePicker type="sysUser" :isShowPhone="true" :params="{axiosUrl:'/app/wxcp/wxuser/list?status=1'}"
              nodeKey="id" class="select-user" @select="handleCheckUserList">
              <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>
          </div>
        </div>
        <div class="card flex" style="padding: 13px 17px">
          <div class="left" style="line-height: 22px;">抄送人</div>
          <div class="right">
            <AiPagePicker type="sysUser" :isShowPhone="true" :params="{axiosUrl:'/app/wxcp/wxuser/list?status=1'}"
              nodeKey="id" class="select-user" @select="handleSendUserList">
              <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>
          </div>
        </div>
        <div class="card flex flex-card" style="padding: 12px 17px;">
          <div class="left"> 发送任务通知</div>
          <div class="right">
            <switch :checked="!!form.isNofity" @change="(e)=>form.isNofity=Number(e.detail.value)"/>
          </div>
        </div>
      </div>
      <div class="footer" @click="handleCreate">
        <div class="btn">创建</div>
      </div>
    </template>

  </div>
</template>

<script>
  export default {
    name: "create",
    appName: '创建任务',
    customNavigation: true,
    data() {
      return {
        index: null,
        selectList: [],
        form: {
          parentTaskCode: null,
          type: null,
          taskTitle: "",
          taskDescription: "",
          lastTime: null,
          userInfoList: [],
          checkUserList: [],
          sendUserList: [],
          isNofity: 0
        },
        currentClick: null,
        backgroundNavbar: {
          background: 'url(https://cdn.sinoecare.com/i/2024/07/12/6690a1309c7d3.png) no-repeat',
          backgroundSize: 'cover',
        },
        barStyle: {
          'width': '20px',
          'height': '4px',
          'border-radius': '3px',
          'bottom': '-4px',
          'background': '#026AF2'
        },
        statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      }
    },
    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.$instance.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
      },
      handleUserInfoList(e) {
        this.form.userInfoList = e
      },
      handleCheckUserList(e) {
        this.form.checkUserList = e
      },
      handleSendUserList(e) {
        this.form.sendUserList = e
      }
    },
  }
</script>

<style lang="scss" scoped>
  .create-sub-task {
    min-height: 100%;
    background-color: #F5F5F5;
    box-sizing: border-box;
    .header-content-bg {
      width: 100%;
      position: fixed;
      img {
        width: 100%;
        height: 592px;
      }
    }
    .card-content {
      position: relative;
      z-index: 2;
      padding-bottom: 200px;
    }
    .card {
      background-color: #FFF;
      padding: 32px 34px;
      box-sizing: border-box;
      margin: 0 0 16px 32px;
      width: calc(100% - 64px);
      border-radius: 16px;

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

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

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

        & > em {
          display: inline-block;
          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 {
        display: inline-block;
        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%;
      }
    }

    .flex {
      display: flex;
      .left {
        width: 150px;
      }
      .right {
        width: calc(100% - 150px);
        text-align: right;
        .placeholder {
          display: inline-block;
        }
        .value {
          display: inline-block;
        }
      }
    }

    .flex-card {
      .left {
        width: 200px;
      }
      .right {
        width: calc(100% - 200px);
      }
    }

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

    .color-999 {
      font-size: 28px;
    }

    .footer {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #F4F5FA;
      padding: 64px 64px 68px 64px;
      z-index: 9;
      .btn {
        width: calc(100% - 128px);
        line-height: 88px;
        background: #026AF2;
        border-radius: 44px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 34px;
        color: #FFF;
        text-align: center;
      }
    }
  }
</style>
