<template>
  <div class="create-sub-task">
    <template v-if="!userSelect">
      <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>
          <u-row @click="handleSelectUser(0)" style="justify-content: flex-end">
            <div v-if="form.userInfoList.length" class="value">
              已选择<em>{{ form.userInfoList.slice(0, 2).map(e => e.name).join("、") }}</em>等
              <em>{{ form.userInfoList.length }}</em>人
            </div>
            <div v-else class="placeholder">请选择</div>
            <div class="arrow"></div>
          </u-row>
        </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>
          <u-row @click="handleSelectUser(1)" style="justify-content: flex-end">
            <div v-if="form.checkUserList.length" class="value">
              已选择<em>{{ form.checkUserList.slice(0, 2).map(e => e.name).join("、") }}</em>等
              <em>{{ form.checkUserList.length }}</em>人
            </div>
            <div v-else class="placeholder">请选择</div>
            <div class="arrow"></div>
          </u-row>
        </u-row>
      </div>
      <div class="card" style="padding: 13px 17px">
        <u-row justify="between">
          <div class="left" style="line-height: 22px;">抄送人</div>
          <u-row @click="handleSelectUser(2)" style="justify-content: flex-end">
            <div v-if="form.sendUserList.length" class="value">
              已选择<em>{{ form.sendUserList.slice(0, 2).map(e => e.name).join("、") }}</em>等
              <em>{{ form.sendUserList.length }}</em>人
            </div>
            <div v-else class="placeholder">请选择</div>
            <div class="arrow"></div>
          </u-row>
        </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>

    <AiSelectEnterprise :visible.sync="userSelect" :value="selectList" v-if="userSelect"
                        @change="userChange"></AiSelectEnterprise>
    <ai-back ref="aiBack" v-if="!userSelect"/>
  </div>
</template>

<script>
import AiBack from "../../../components/AiBack";
import AiSelectEnterprise from "../../../components/AiSelectEnterprise";

export default {
  name: "create",
  components: {AiBack, AiSelectEnterprise},
  data() {
    return {
      index: null,
      userSelect: false,
      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("创建成功")
          this.$refs["aiBack"].back()
        }
      })
    },
    handleSelectUser(status) {
      this.currentClick = status
      if (this.currentClick == 0 && this.form.userInfoList.length) {
        this.selectList = this.form.userInfoList
      } else if (this.currentClick == 1 && this.form.checkUserList.length) {
        this.selectList = this.form.checkUserList
      } else if (this.currentClick == 2 && this.form.sendUserList.length) {
        this.selectList = this.form.sendUserList
      }
      this.userSelect = true
    },
    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 {
      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>
