<template>
  <div class="page">
    <header></header>
    <div class="form">
      <div class="main">
        <div class="textarea">
          <div class="color-666"><span class="color-red">*</span>会议内容</div>
          <textarea
              type="textarea"
              placeholder="请输入会议内容（3000字以内）"
              v-model="baseInfo.content"
              adjust-position="false"
              maxlength="3000"
          ></textarea>
        </div>
        <div class="uni-uploader">
          <div class="title-box title-box-margin">
            <span class="title color-666">图片资料（最多9张）</span>
          </div>
          <div class="uni-uploader-body">
            <div class="uni-uploader__files">
              <block v-for="(image, index) in imageList" :key="index">
                <div class="uni-uploader__file">
                  <image
                      class="uni-uploader__img"
                      :src="image.accessUrl"
                      :data-index="index"
                      @tap="previewImage"
                  ></image>
                  <AiUniIcon
                      type="clear"
                      class="icon"
                      color="#8f8f94"
                      size="26"
                      @click="deleteImage(index)"
                  ></AiUniIcon>
                </div>
              </block>
              <div
                  class="pre-div"
                  @tap="chooseImageType"
                  v-if="imageList.length < 9"
              >
                <span class="pre-label">+</span>
                <span class="add-image">添加照片</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="report" @click="report()">提交</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  appName: "编辑会议",
  name: "fillLog",
  data() {
    return {
      reportId: "",
      baseInfo: {
        content: "",
        fileIds: [],
        reportId: "",
        id: "",
        images: [],
        meetingId: "",
        createUserName: "",
      },
      imageList: [],
      sourceTypeIndex: 2,
      sourceType: [
        // 图片来源类型
        ["camera"],
        ["album"],
      ],
    };
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#D7261E",
    })
    this.baseInfo.meetingId = options.id;
    this.getDetailInfo();
  },
  methods: {
    getDetailInfo() {
      this.$instance.post(`/app/appthreemeetinginfoexpand/queryDetailById?id=${this.baseInfo.meetingId}`).then((res) => {
        if (res.data) {
          if (res.data.images != null) {
            this.imageList = JSON.parse(res.data.images);
          }
          this.baseInfo = {...res.data};
        }
      })
    },
    // 选择照片类型
    chooseImageType() {
      let that = this;
      uni.showActionSheet({
        itemList: ["拍照", "从相册选择"],
        success: function (res) {
          // console.log(res.tapIndex)
          that.sourceTypeIndex = res.tapIndex;
          // console.log(that.sourceTypeIndex)
          that.chooseImage();
        },
      });
    },
    showModel(title) {
      uni.showModal({
        title: "温馨提示",
        content: title,
        showCancel: false,
        confirmColor: "#135AB8",
        success(res) {
          if (res.confirm) {
          }
        },
      });
    },
    chooseImage: async function () {
      let that = this;
      if (that.imageList.length === 9) {
        let isContinue = await that.isFullImg();
        // console.log("是否继续?", isContinue);
        if (!isContinue) {
          return;
        }
      }
      uni.chooseImage({
        // 从相册选择或相机拍摄
        sourceType: that.sourceType[that.sourceTypeIndex],
        // 最多可以选择的图片数量
        count: 9,
        success: (res) => {
          // 图片的本地文件路径列表
          that.tempFilePaths = res.tempFilePaths;
          // console.log(res.tempFilePaths)
          for (let i = 0; i < that.tempFilePaths.length; i++) {
            let str = "";
            let token = uni.getStorageSync("token");
            // console.log('token',token)
            // url String 是 开发者服务器 url
            // files Aarry 否 需要上传的文件列表。使用 files 时，filePath 和 name 不生效。 5+App
            // filePath String 是 要上传文件资源的路径。
            // name String 是 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
            // header Object 否 HTTP 请求 Header, header 中不能设置 Referer
            // formData Object 否 HTTP 请求中其他额外的 form data
            // success Function 否 接口调用成功的回调函数
            // fail Function 否 接口调用失败的回调函数
            // complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行）
            uni.uploadFile({
              url: this.$instance.defaults.baseURL + "/admin/file/add",
              filePath: that.tempFilePaths[i],
              name: "file",
              // formData:params,
              header: {
                "Content-Type": "multipart/form-data",
                access_token: token,
                Authorization: token,
              },
              success(res) {
                // console.log('uploader',res)
                str = JSON.stringify(JSON.parse(res.data).data[0]).replace(
                    /"/g,
                    ""
                );
                var temp = {
                  fileId: str.split(";")[1],
                  accessUrl: str.split(";")[0],
                };
                that.imageList = that.imageList.concat(temp);
                if (that.imageList.length > 9) {
                  that.imageList = that.imageList.slice(0, 9);
                  uni.showToast({
                    title: "图片最多只能上传9张",
                    icon: "none",
                  });
                }
                that.imgUrl = JSON.stringify(that.imageList);

                // console.log('imageList-upload',that.imageList)
              },
              fail(res) {
                console.log("error", res);
              },
            });
          }
        },
      });
    },
    // 预览图片(大图预览)
    previewImage: function (e) {
      let that = this;
      // console.log('预览',e)
      var current = e.target.dataset.index;
      // console.log(current)

      var tempList = [];
      for (var i in that.imageList) {
        tempList.push(that.imageList[i].accessUrl);
      }

      uni.previewImage({
        // 当前图片的索引、链接
        current: tempList[current],
        urls: tempList,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function (err) {
            // console.log(err.errMsg);
          },
        },
      });
    },
    // 删除照片
    deleteImage(index) {
      this.imageList.splice(index, 1);
    },
    report() {
      if (!this.baseInfo.content) {
        uni.showToast({title: "会议内容不能为空", icon: "none"});
        return false;
      }
      this.baseInfo.fileIds = [];
      this.imageList.forEach((e) => {
        this.baseInfo.fileIds.push(e.fileId);
      });
      this.baseInfo.images = JSON.stringify(this.imageList);
      this.baseInfo.createUserName = this.user.realName;
      this.$instance
      .post(`/app/appthreemeetinginfoexpand/addOrUpdate`, this.baseInfo, null)
      .then((res) => {
        if (res.code == 0) {
          uni.showToast({
            title: "会议纪要提交成功",
            icon: "none",
            duration: 2000,
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 2,
            });
          }, 2000);
        }
      })
      .catch((err) => {
        uni.showToast({
          title: err,
          icon: "none",
          duration: 1000,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~dvcp-wui/common";

.page {
  width: 100%;
  height: 100%;
  font-size: 32px;

  header {
    width: 100%;
    height: 112px;
    background-color: #D7261E;
  }

  .form {
    width: 100%;
    padding: 32px;
    box-sizing: border-box;
    margin-top: -100px;

    .main {
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      box-sizing: border-box;
    }

    .basic-item {
      font-size: 32px;
      justify-content: space-between;
      width: 100%;
      height: 112px;
      padding: 32px 32px 32px 12px;
      box-sizing: border-box;
      background-color: #fff;
      border-bottom: 1px solid #eee;

      input {
        text-align: right;
      }

      .wid-110 {
        width: 214px;
      }

      .skill-span {
        max-width: 432px;
        text-align: right;
        display: inline-block;
        overflow: hidden;
        span-overflow: ellipsis;
        white-space: nowrap;
        font-size: 30px;
      }

      .picker {
        justify-content: flex-end;
        align-items: center;
        color: #999999;
        font-size: 32px;
        background-color: #ffffff;
      }

      .picker > .AiArea {
        background-color: #fff !important;
      }

      .image {
        width: 32px;
        height: 32px;
        vertical-align: middle;
      }

      .wei-span {
        width: 40%;
      }

      .msg-value {
        width: 60%;
      }

      .msg-btn {
        width: 160px;
        text-align: right;
        background-color: #fff !important;
      }

      button {
        font-size: 28px;
        background-color: #fff;
        line-height: 48px;
        padding: 0;
      }

      button::after {
        border: 0;
      }

      .button-hover {
        background-color: #fff;
      }

      button[disabled] {
        background-color: #fff !important;
        font-size: 28px;
        border-radius: 0;
      }
    }

    /* 上传照片 */
    .uni-uploader {
      flex: 1;
      flex-direction: column;
    }

    .uni-uploader-head {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .uni-uploader-info {
      color: #b2b2b2;
    }

    .uni-uploader-body {
      margin-top: 16px;
    }

    .uni-uploader__files {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    .uni-uploader__file {
      margin-right: 10px;
      margin-bottom: 20px;
      width: 160px;
      height: 160px;
      position: relative;
    }

    .uni-uploader__img {
      display: block;
      width: 160px;
      height: 160px;
    }

    .pre-label {
      font-size: 80px;
      color: #dddddd;
    }

    .add-image {
      color: #dddddd;
      font-size: 24px;
    }

    .pre-div {
      width: 160px;
      height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      border-radius: 8px;
      border: 2px solid #dddddd;
    }

    .icon {
      position: absolute;
      top: -15px;
      right: -10px;
    }
  }

  .report {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 112px;
    line-height: 112px;
    font-size: 32px;
    text-align: center;
    background: rgba(230, 0, 18, 1);
    color: #fff;
  }
}
</style>
