<template>
  <div class="add-meeting">
    <div v-if="!userSelect">
      <div class="card">
        <header><em>*</em>会议标题</header>
        <input v-model="form.title" placeholder="请输入" :maxlength="30">
      </div>
      <div class="card">
        <header><em>*</em>起止时间</header>
        <u-row justify="between">
          <div class="time" @click="pick(0)">
            <span>{{ form.startTime.time }}</span>
            <span>{{ form.startTime.year }}年{{ form.startTime.month }}月{{
                form.startTime.day
              }}日 周{{ form.startTime.weekday }}</span>
          </div>
          <div class="arrow"></div>
          <div class="time" @click="pick(1)">
            <span>{{ form.endTime.time }}</span>
            <span>{{ form.endTime.year }}年{{ form.endTime.month }}月{{ form.endTime.day }}日 周{{
                form.endTime.weekday
              }}</span>
          </div>
        </u-row>
      </div>
      <div class="card">
        <header><em>*</em>会议地点</header>
        <input v-model="form.address" placeholder="请输入" :maxlength="30">
      </div>
      <div class="card">
        <header>会议内容</header>
        <textarea v-model="form.content" placeholder="请输入" :maxlength="500"></textarea>
      </div>

      <div class="card">
        <AiUploader :multiple="true" type="file" :limit="9" placeholder="上传附件" @list="fileList"
                    :def="form.files" action="/admin/file/add2"></AiUploader>
      </div>

      <div class="card item-wrap">
        <u-row justify="between" class="item" @click="handleSelectUser">
          <header><em>*</em>参会人</header>
          <div class="right">
            <template v-if="!form.attendees.length">
              <span>请选择</span>
            </template>
            <template v-else>
              已选择<em v-text="form.attendees.length"/>人
            </template>
            <div class="right-arrow"></div>
          </div>
        </u-row>
      </div>
      <div class="card item-wrap" style="margin-top: 0">
        <u-row justify="between" class="item">
          <header>参会提醒</header>
          <picker class="right" @change="beforeNoticeChange" :value="form.noticeBefore" range-key="dictName"
                  :range="$dict.getDict('meetingNoticeBefore')">
            <span>{{
                form.noticeBefore != null ? $dict.getDict('meetingNoticeBefore')[form.noticeBefore]["dictName"] : "请选择"
              }}</span>
            <div class="right-arrow"></div>
          </picker>
        </u-row>
      </div>
      <div class="card item-wrap" style="margin-top: 0">
        <u-row justify="between" class="item">
          <header>确认提醒</header>
          <picker class="right" @change="afterNoticeChange" :value="form.noticeAfter" range-key="dictName"
                  :range="$dict.getDict('meetingNoticeAfter')">
            <span>{{
                form.noticeAfter != null ? $dict.getDict('meetingNoticeAfter')[form.noticeAfter]["dictName"] : "请选择"
              }}</span>
            <div class="right-arrow"></div>
          </picker>
        </u-row>
      </div>
      <div class="footer">
        <div @click="add(0)">保存草稿</div>
        <div @click="add(1)">发布会议</div>
      </div>
    </div>
    <u-picker mode="time" v-model="show" :params="options" @confirm="confirm"></u-picker>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  name: "addMeeting",
  props: {
    params: {
      type: [Number, String]
    }
  },
  data() {
    const initTime = {
      time: "",
      year: "",
      month: "",
      day: "",
      weekday: "",
      timestamp: "",
    }
    return {
      show: false,
      index: 0,
      list: [],
      form: {
        id: null,
        title: "",
        startTime: {...initTime},
        endTime: {...initTime},
        address: "",
        content: "",
        attendees: [],
        noticeBefore: 4,
        noticeAfter: 0,
        files: [],
      },
      userSelect: false,
      clickedUserSelect: false
    }
  },

  onLoad(opt) {
    if (opt.id) {
      this.form.id = opt.id
      this.getDetail()
    }

    this.$nextTick(() => {
      let date = new Date();
      this.form.startTime.time = date.getHours()?.toString()?.padStart(2, "0") + ":" + date.getMinutes()?.toString()?.padStart(2, "0")
      this.form.startTime.year = date.getFullYear()
      this.form.startTime.month = (date.getMonth() + 1)?.toString()?.padStart(2, "0")
      this.form.startTime.day = date.getDate()
      this.form.startTime.weekday = '日一二三四五六'.charAt(date.getDay())
      this.form.endTime = {...this.form.startTime}
    })
  },

  onShow() {
    document.title = "新增会议";
    this.$dict.load("meetingNoticeBefore", "meetingNoticeAfter");
  },

  computed: {
    options() {
      return {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        timestamp: true,
      }
    }
  },
  methods: {
    ...mapActions(['selectEnterpriseContact']),
    handleSelectUser() {
      if (this.clickedUserSelect) return this.$u.toast("正在打开人员选择器")
      this.clickedUserSelect = true
      this.selectEnterpriseContact({
        fromDepartmentId: 0,
        type: ["user"],
        selectedUserIds: this.form.attendees?.map(e => e.id)
      }).then(res => {
        this.change(res?.userList || [])
        this.clickedUserSelect = false
      }).catch(() => {
        this.clickedUserSelect = false
      })
    },
    fileList(e) {
      this.form.files = e
    },
    change(e) {
      this.form.attendees = e
    },
    beforeNoticeChange(e) {
      this.form.noticeBefore = e.detail.value
    },
    afterNoticeChange(e) {
      this.form.noticeAfter = e.detail.value
    },

    getDetail() {
      this.$http.post("/app/appmeetinginfo/info-id", null, {
        params: {
          id: this.form.id
        }
      }).then(res => {
        if (res && res.data) {
          this.form.title = res.data.title
          this.form.address = res.data.address
          this.form.content = res.data.content
          this.form.attendees = res.data.attendees
          this.form.noticeBefore = res.data.noticeBefore
          this.form.noticeAfter = res.data.noticeAfter
          this.form.files = res.data.files
          this.form.startTime.time = res.data.startTime.split(" ")[1].substr(0, 5)
          this.form.startTime.year = res.data.startTime.split(" ")[0].split("-")[0]
          this.form.startTime.month = res.data.startTime.split(" ")[0].split("-")[1]
          this.form.startTime.day = res.data.startTime.split(" ")[0].split("-")[2]
          this.form.startTime.weekday = '日一二三四五六'.charAt(new Date(res.data.startTime.split(" ")[0]).getDay())
          this.form.startTime.timestamp = new Date(res.data.startTime).getTime()

          this.form.endTime.time = res.data.endTime.split(" ")[1].substr(0, 5)
          this.form.endTime.year = res.data.endTime.split(" ")[0].split("-")[0]
          this.form.endTime.month = res.data.endTime.split(" ")[0].split("-")[1]
          this.form.endTime.day = res.data.endTime.split(" ")[0].split("-")[2]
          this.form.endTime.weekday = '日一二三四五六'.charAt(new Date(res.data.endTime.split(" ")[0]).getDay())
          this.form.endTime.timestamp = new Date(res.data.endTime).getTime()
        }
      })
    },
    confirm(e) {
      if (new Date().getTime() / 1000 > e.timestamp) return this.$u.toast("选择时间不能小于当前时间")
      if (this.index == 0) {
        this.form.startTime = {...e}
        this.form.startTime.time = e.hour + ":" + (e.minute.length > 1 ? e.minute : ("0" + e.minute))
        this.form.startTime.weekday = '日一二三四五六'.charAt(new Date(e.timestamp * 1000).getDay())
      } else {
        if (this.form.startTime.timestamp >= e.timestamp) {
          return this.$u.toast("结束时间不能小于开始时间");
        }
        this.form.endTime = {...e}
        this.form.endTime.time = e.hour + ":" + (e.minute.length > 1 ? e.minute : ("0" + e.minute))
        this.form.endTime.weekday = '日一二三四五六'.charAt(new Date(e.timestamp * 1000).getDay())
      }
    },

    add(status) {
      if (status == 1) {
        if (!this.form.title) return this.$u.toast("请输入会议标题")

        if (this.form.startTime.timestamp >= this.form.endTime.timestamp) return this.$u.toast("结束时间不能小于开始时间")

        if (!this.form.address) return this.$u.toast("请输入会议地点")

        // if (!this.form.content) return this.$u.toast("请输入会议内容")

        if (!this.form.attendees.length) return this.$u.toast("请选择参会人")
      }

      this.$http.post("/app/appmeetinginfo/add-update", {
        ...this.form,
        files: this.form.files.map(e => e.id),
        status,
        startTime: this.form.startTime.year + "-" + this.form.startTime.month + "-" + this.form.startTime.day + " " + this.form.startTime.time + ":00",
        endTime: this.form.endTime.year + "-" + this.form.endTime.month + "-" + this.form.endTime.day + " " + this.form.endTime.time + ":00",
      }).then(res => {
        if (res.code == 0) {
          this.$u.toast(status == 1 ? "发布成功" : "保存成功")
          uni.navigateBack({})
        }
      })
    },

    pick(index) {
      this.index = index
      this.show = true
    },
  },
}
</script>

<style lang="scss" scoped>
.add-meeting {
  min-height: 100%;
  background: #F5F5F5;
  padding-bottom: 140px;

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

    header {
      font-size: 32px;
      font-weight: 400;
      color: #333333;

      em {
        font-style: normal;
        font-size: 32px;
        color: #FF4466;
        margin-right: 8px;
        vertical-align: middle;
      }
    }

    input {
      margin: 32px 0 16px;
      box-sizing: border-box;
      padding: 0 16px;
    }

    textarea {
      width: 100%;
      height: 160px;
      margin: 32px 0 16px;
      box-sizing: border-box;
      padding: 0 16px;
    }

    .u-row {
      margin-top: 34px;

      .time {
        display: flex;
        flex-direction: column;

        & > span:first-child {
          font-size: 60px;
          font-weight: 600;
          color: #333333;
          line-height: 84px;
        }

        & > span:last-child {
          font-size: 22px;
          color: #333333;
        }
      }

      .arrow {
        width: 28px;
        height: 68px;
        overflow: hidden;
        position: relative;
        transform: rotate(180deg);

        &:before, &:after {
          content: "";
          width: 50px;
          height: 50px;
          position: absolute;
          transform: scaleY(1.3) translate(30%, -40px) rotate(45deg);
        }

        &:before {
          top: 59px;
          background-color: #CCCCCC;
        }

        &:after {
          left: 7px;
          top: 59px;
          background-color: #FFFFFF;
        }
      }
    }

    .item {
      height: 112px;
      box-shadow: 0px -1px 0px 0px #D8DDE6;
      margin-top: 0;

      .right {
        font-size: 28px;
        color: #999999;
        display: flex;
        align-items: center;

        em {
          font-style: normal;
          color: #1365DD;
        }
      }

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

  .item-wrap {
    padding: 0 32px;
  }

  .footer {
    height: 112px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;

    & > div {
      font-size: 36px;
      color: #333333;
    }

    & > div:first-child {
      width: 270px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    & > div:last-child {
      width: calc(100% - 270px);
      height: 100%;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1365DD;
    }
  }
}
</style>
