<style>
.release {
  width: 100%;
  height: 100vh;
  background: #fff;
}

.release .release-box {
  width: 100%;
  padding: 15px;
}

.release .option-box {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  color: #333333;
  border-bottom: 1px soild #dfdfdf;
}

.release .ob-l {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.release .ob-r {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10px;
}

.release .releasebtn {
  width: 690rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  background: #40766e;
  border-radius: 22.5px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 60rpx;
}

.release .slot-btn {
  width: 200rpx;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: rgb(244, 245, 246);
  border-radius: 10rpx;
  margin-left: 5px;
}

.release .slot-btn .mian-title {
  font-size: 28rpx;
  color: #888;
  font-weight: 600;
  margin: 10rpx 0;
}

.release .audio {
  width: 100%;
  margin: 10px 0;
  height: 40px;
  background: #f9f9f9;
  border-radius: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

.release .audio-o {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 12px;
  color: #333333;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.release .as-box {
  width: 100%;
  height: 240px;
  background: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.release .as-yuyin {
  margin-top: 20px;
  width: 90px;
  height: 90px;
  border: 3px solid #4f877f;
  background: #40766e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.release .now-date {
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}

.release .as-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 5px;
}

.release .as-btn-item {
  width: 85px;
  height: 40px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #40766e;
  border: 1px solid #40766e;
}

.release .audio-ot {
  width: 1;
  flex: 1;
  margin-right: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 10px;
  justify-content: space-between;
  height: 30px;
  background: #ebebeb;
  border-radius: 4px;
}

.release .videostyle {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #f9f9f9;
  border: 1px dashed #d2d2d2;
}

#myVideo {
  width: 150px;
  height: 200px;
}

.release-top {
  width: 100%;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.release-item {
  width: 90rpx;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.r-item-img {
  width: 90rpx;
  height: 90rpx;
  margin-bottom: 10px;
}

.r-item-img image {
  width: 100%;
  height: 100%;
}

.pubox {
  width: 100%;

  padding: 0 15px;
}

.pubox-top {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #111;
}

.ht-box {
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
}

.foritem {
  height: 30px;
  font-size: 12px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  margin-right: 25px;
  margin-bottom: 15px;
}

.release .pubox {
  width: 100%;

  padding: 0 15px;
}

.release .pubox-top {
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #111;
}

.release .box-item {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e2e2e2;
  display: flex;
  align-items: center;
}

.release .titleinput {
  height: auto;
  border-bottom: 1px solid #e2e2e2;
  box-sizing: border-box;
  padding: 40rpx 0;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111;
}
.release .textarea {
  box-sizing: border-box;
  padding: 40rpx 0;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #111;
}
.continue {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
</style>
<template>
  <view class="release">
    <view style="width: 100%; margin-top: 15px">
      <u-upload
        :action="action"
        :max-count="9"
        @on-remove="onRemove1"
        :custom-btn="true"
        @on-success="uploadSuccessHandler"
      >
        <view slot="addBtn" class="slot-btn">
          <u-icon name="plus" size="40" color="#888"></u-icon>
          <!-- <view class="mian-title">上传图片</view> -->
        </view>
      </u-upload>
    </view>

    <view class="release-box">
      <view
        class="box-item"
        style="justify-content: space-between"
        @click="show = true"
      >
        <text style="font-size: 12px; color: #666666">选择分类</text>
        <view class="flex-row" style="display: flex">
          <text
            style="margin-right: 5px; font-size: 12px; color: #999999"
            v-if="addMsg.ForumId == 0"
            >选择合适的贴吧</text
          >
          <text
            style="margin-right: 5px; font-size: 12px; color: #111111"
            v-if="addMsg.ForumId > 0"
            >{{ ForumName }}</text
          >
          <u-icon name="arrow" color="#A5A4AC" size="30"></u-icon>
        </view>
      </view>
      <input
        type="text"
        class="titleinput"
        maxlength="50"
        v-model="addMsg.ActivityTitle"
        placeholder="请将标题写在这里~"
      />
      <!-- <textarea
        class="textarea"
        placeholder="今天有什么可以给大家分享呢？"
        style="width: 100%; height: 100px"
        maxlength="-1"
        confirm-type="done"
        v-model="addMsg.Content"
      >
      </textarea> -->
      <view
        style="height: 135px; width: 100%; padding: 15px 0"
        @click="gorichText"
      >
        <view
          v-html="addMsg.Content"
          v-if="addMsg.Content != ''"
          style="width: 100%; height: 100px; overflow: hidden"
        ></view>
        <view v-else style="color: #999999; font-size: 14px">详情描述</view>
        <view
          v-if="addMsg.Content.length > 0"
          class="continue"
          :style="{ color: mainColor }"
        >
          继续编辑
        </view>
      </view>
      <view
        class="releasebtn"
        @click="publish"
        :style="{ background: mainColor }"
      >
        发布
      </view>
    </view>
    <u-popup v-model="whoshow" mode="center" length="70%" border-radius="14">
      <view
        style="width: 100%; background: #fff; border-radius: 6px; padding: 20px"
      >
        <u-radio-group
          v-model="addMsg.IsOpen"
          :active-color="mainColor"
          @change="whoshow = false"
        >
          <u-radio
            shape="circle"
            style="width: 100%; margin: 5px 0"
            v-for="(item, index) in list"
            :key="index"
            :name="item.Id"
          >
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </view>
    </u-popup>

    <!-- 选择分类 -->
    <u-popup v-model="show" mode="bottom" border-radius="20">
      <view class="pubox">
        <view class="pubox-top">
          <view></view>
          <text>选择吧</text>
          <u-icon
            name="cross"
            color="#555"
            size="40"
            @click="show = false"
          ></u-icon>
        </view>
        <view
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 10px;
          "
        >
          <view style="font-size: 20px; color: #111111; font-weight: 400"
            >选择你感兴趣的贴吧</view
          >
          <view style="font-size: 13px; color: #999999; margin: 10px 0"
            >贴吧只能选择一个，发布前可更改</view
          >
        </view>

        <scroll-view
          scroll-y="true"
          style="
            max-height: calc(100vh * 0.7 - 65px);
            padding-bottom: 20px;
            min-height: calc(100vh * 0.4 - 65px);
          "
        >
          <view class="ht-box">
            <view
              v-for="(x, y) in forumList"
              :key="y"
              class="foritem"
              @click="select(x)"
              :style="{
                color: x.Id == addMsg.ForumId ? '#FFF' : '#666666',
                background: x.Id == addMsg.ForumId ? mainColor : '#F9F9F9',
              }"
            >
              {{ x.Name }}
            </view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
export default {
  data() {
    return {
      pageTitle: "发布帖子",
      mainColor: "",
      secondary: "",
      pricecolor: "",
      action: this.host2 + "/api/File/UploadTencent",
      addMsg: {
        Id: 0,
        ForumId: 0,
        ActivityTitle: "",
        Content: "",
        ImageList: [],
        IsOpenEnroll: 2,
        Distinguish: 1,
        ManNum: 0,
        WoManNum: 0,
      },

      //---------------------
      show: false,
      forumList: [],
      ForumName: "",
    };
  },

  onLoad(options) {
    if (options && options.type) {
      this.addMsg.FileType = options.type;
      if (options.file) {
        this.addMsg.ImageList = [];
        this.addMsg.ImageList.push(options.file);
      }
    }
    this.mainColor = this.$uiConfig.mainColor;
    this.secondary = this.$uiConfig.secondary;
    this.pricecolor = this.$uiConfig.pricecolor;
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId
      ? uni.getStorageSync("mall_UserInfo").MallBaseId
      : 1;
    this.action =
      this.host2 + "/api/File/UploadTencent?MallBaseId=" + MallBaseId;
  },
  created() {
    this.GetForumList();
  },

  methods: {
    publish() {
      //发布
      if (this.addMsg.ForumId == 0) {
        uni.showToast({
          title: "请选择分类",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (this.addMsg.ActivityTitle == "") {
        uni.showToast({
          title: "请输入标题...",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (this.addMsg.Content == "") {
        uni.showToast({
          title: "请输入帖子内容...",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      uni.showLoading({
        title: "发布中...",
      });
      this.request2(
        {
          url: "/api/AppletMiai/SetSimpleActivityInfo",
          data: this.addMsg,
        },
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            uni.showToast({
              title: res.message,
              position: "bottom",
              icon: "none",
              duration: 2000,
            });
            let pages = getCurrentPages(); // 当前页面
            let beforePage = pages[pages.length - 2]; // 前一个页面
            setTimeout(() => {
              uni.navigateBack({
                success: function () {
                  beforePage.$vm.getList(); // 执行前一个页面的created方法
                },
              });
            }, 500);
          }
        }
      );
    },
    //打开地图
    getAddress() {
      let that = this;
      uni.chooseLocation({
        success: function (res) {
          that.addMsg.Address = res.name;
          that.addMsg.LatAndLong = res.longitude + "," + res.latitude;
        },
        fail: function (err) {
          that.fetchAgainLocation();
        },
      });
    },
    uploadSuccessHandler(data, index, lists) {
      let r = JSON.parse(data);
      console.log(468, r);
      this.addMsg.ImageList.push(r.data);
    },
    onRemove1(index) {
      this.addMsg.ImageList.splice(index, 1);
    },

    GetForumList() {
      this.request2(
        {
          url: "/api/AppletMiai/GetForumList",
          data: {},
        },
        (res) => {
          if (res.resultCode == 1) {
            this.forumList = res.data;
            for (let i = 0; i < this.forumList.length; i++) {
              if (this.forumList[i].Id == this.addMsg.ForumId) {
                this.ForumName = this.forumList[i].Name;
              }
            }
          }
        }
      );
    },
    select(x) {
      this.addMsg.ForumId = x.Id;
      this.ForumName = x.Name;
      this.show = false;
    },
    gorichText() {
      let data = this.addMsg.Content;
      data = encodeURIComponent(data); //加密
      uni.navigateTo({
        url: "/pages/blindDate/richText?Content=" + data,
      });
    },
    Children(e) {
      this.addMsg.Content = e;
    },
  },
};
</script>
