<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>
        <textarea v-model="form.content" placeholder="请输入" :maxlength="500"></textarea>
      </div>

      <div class="card">
        <AiUploader :multiple="true" type="image" :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" style="border-bottom: 1px solid #eeeeee" @click="handleSelectUser">
          <header><em>*</em>发送对象</header>
          <div class="right">
            <template v-if="!form.persons.length">
              <span>请选择</span>
            </template>
            <template v-else>
              已选择<em>{{form.persons.map(e=>e.name).slice(0,2).join("、")}}</em>等<em>{{form.persons.length}}</em>人
            </template>
            <div class="right-arrow"></div>
          </div>
        </u-row>

        <u-row justify="between" class="item" @click="userSelect=true">
          <header><em>*</em>发送时间</header>
        </u-row>
        <u-row justify="between">
          <div class="type" :class="[index==0 && 'active']" @click="index=0,form.releaseTime=null">立即发送
            <img :src="$cdn + 'notice/jiaobiao.png'" alt="" v-show="index==0">
          </div>
          <div class="type" :class="[index==1 && 'active']"  @click="index=1">定时发送
            <img :src="$cdn + 'notice/jiaobiao.png'" alt="" v-show="index==1">
          </div>
        </u-row>
        <u-gap height="38"></u-gap>
        <u-row justify="between" class="item" style="box-shadow: none;" @click="show=true" v-show="index==1">
          <header><em>*</em>定时发送时间</header>
          <div class="right">
            <template v-if="!form.releaseTime">
              <span>请选择</span>
            </template>
            <template v-else>
              <span>{{form.releaseTime}}</span>
            </template>
            <div class="right-arrow"></div>
          </div>
        </u-row>
      </div>

      <div class="footer">
        <div @click="add(0)">保存草稿</div>
        <div @click="add(1)">立即发布</div>
      </div>
    </div>
    <AiBack ref="aiBack" v-if="!userSelect"/>
    <u-picker v-model="show" mode="time" :params="options" @confirm="confirm"></u-picker>
  </div>
</template>

<script>
  import AiBack from "../../../components/AiBack";
  import AiUploader from "../../../components/AiUploader";
  import {mapActions} from "vuex";

  export default {
    name: "add",
    components: {AiBack,AiUploader},
    props:{
      params:Object
    },
    data() {
      return {
        show: false,
        index: 0,
        list: [],
        form: {
          id: null,
          title: "",
          content: "",
          persons: [],
          releaseTime:null,
          files: [],
        },
        userSelect: false,
        flag: null,
        options: {
          year: true,
          month: true,
          day: true,
          hour: true,
          minute: true,
          second: true,
          timestamp: true,
        },
      }
    },
    watch:{
      params:{
        handler:function (v) {
          if(this.params?.id){
            this.form.id = this.params?.id;
            this.flag = this.params?.flag;
          }
        },
        immediate:true
      }
    },
    created() {
      document.title = "新增公告";
      if(this.params?.id){
        this.getDetail();
      }
    },
    methods: {
      ...mapActions(['selectEnterpriseContact']),
      handleSelectUser() {
        this.selectEnterpriseContact({
          fromDepartmentId:0,
          type:["user"],
          selectedUserIds: this.form.persons?.map(e=>e.id)
        }).then(res => {
          this.form.persons = res?.userList || []
          console.log(this.form.persons);
        })
      },
      confirm(e){
        if(e.timestamp< (Date.now()/1000)|0){
          return this.$u.toast("发送时间不能小于当前时间");
        }
        this.form.releaseTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
      },
      fileList(e){
        this.form.files = e
      },
      change(e){
        this.form.persons = e
      },
      getDetail(){
        this.$http.post("/app/appannouncement/detail",null,{
          params:{
            id:this.form.id,
            detail: this.flag
          }
        }).then(res=>{
          if (res && res.data) {
            this.form.releaseTime = res.data.releaseTime;
            Object.keys(this.form).map(e=>{
              this.form[e] =  res.data[e];
            })
            this.index = res.data.releaseTime ? 1 : 0;
          }
        })
      },

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

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

          if(!this.form.persons.length) return this.$u.toast("请选择发送对象")

          if(this.index==1 && !this.form.releaseTime) return this.$u.toast("请选择定时发送时间")

          if(this.form.releaseTime && new Date(this.form.releaseTime).getTime() < Date.now()) return this.$u.toast("发送时间不能小于当前时间");
        }

        this.$http.post("/app/appannouncement/addOrUpdate", {
          ...this.form,
          status,
        }).then(res => {
          if (res.code == 0) {
            this.$u.toast(status == 1 ? "发布成功" : "保存成功")
            this.$refs["aiBack"].back()
          }
        })
      },
      select() {
        uni.navigateTo({
          url: "/pages/meetingNotice/components/notice"
        })
      }
    },
    computed:{
      background(){
        return `url(${this.$cdn}/notice/jiaobiao.png) no-repeat; background-size: 46px 48px;position: absolute;bottom: 0;right: 0;`
      },
    }
  }
</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;
          }
        }

        .type{
          width: 320px;
          height: 112px;
          background: #F5F5F5;
          color: #333333;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 30px;
          font-weight: 500;
          letter-spacing: 1px;
          position: relative;

          & > img{
            width: 46px;
            height: 48px;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
        .active{
          background-color: #E7F1FE;
          color: #1174FE;
        }
      }

      .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>
