<template>
  <view>
    <u-navbar title="话题详情" :autoBack="true" placeholder></u-navbar>
    <u-divider></u-divider>
    <view class="mainBox">
      <u--input placeholder="请输入标题" border="bottom" v-model="titleValue" clearable></u--input>
    </view>

    <!-- 选择格式发布 -->
    <view class="mainBox">
      <view class="stateBox flexA">
        <view class="item flexC" :class="[isImg && 'Z']" @click="toggeleHandler(0)">图片</view>
        <view class="item flexC" :class="[!isImg && 'Z']" @click="toggeleHandler(1)">视频</view>
      </view>

      <u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>

      <!-- 上传 -->
      <view class="uploadImage flexA">
        <view v-for="(item, index) in viList" class="aa" :key="index">
          <view class="del" @click="delHandler(index)">×</view>
          <image v-if="item.type === 'v'" class="typeBox" src="/static/player.png" mode="scaleToFill" />
          <!-- <view >视频格式</view> -->
          <image class="sty" :src="item.image" @click="previewImageHandler(item.type)" mode="scaleToFill" />
        </view>
        <view
          @click="chooseVideoHandler('video')"
          class="flexC btnBox"
          v-if="(status == 'video' && !viList.length) || (status == 'image' && viList.length < 9)"
        >
          <u-icon name="camera-fill"></u-icon>
        </view>
      </view>
      <u-divider></u-divider>

      <!-- 分类 -->
      <view class="cateBox flexA">
        <view class="cateText">话题分类：</view>
        <view
          v-for="(item, index) in cateList"
          class="typeBox1 flexC"
          @click="toggleTypeHandler(item.id, index)"
          :class="[curType == index && 'ZZ']"
        >
          {{ item.type_name }}
        </view>
      </view>
    </view>

    <view class="bottomBtn">
      <view class="flexC" @click="getAddItem">发表</view>
    </view>
    <view class="whiteBox"></view>
    <view style="height: 130rpx"></view>
  </view>
</template>

<script>
import { getAddItem, getTabsCate } from '@/api'
export default {
  data() {
    return {
      isImg: true,
      // 标题
      titleValue: '',
      // 内容
      value1: '',
      status: 'image',
      viList: [],
      vue_uploadAction: 'https://antifakeshopcopy.brofirst.cn/api/common/upload',
      uploadFile: '',
      arr: [],
      cateList: [],
      curType: 0,
      typeId: 1,
      videoUrl: '',
    }
  },
  onLoad() {
    this.getTabsCate()
    this.getLocationHandler()
  },
  methods: {
    getLocationHandler() {
      uni.getLocation({
        type: 'wgs84',
        success: function (res) {
          console.log(res)
          console.log('当前位置的经度：' + res.longitude)
          console.log('当前位置的纬度：' + res.latitude)
          uni.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${
              res.longitude
            }&key=${'BT4BZ-MVGLR-NVEWD-W5KMR-7OAZJ-3GFX2'}`,
            data: {},
            success: res2 => {
              console.log(res2, '腾讯地图打印')
            },
          })
        },
        fail(err) {
          console.log(err)
        },
      })
    },
    // 切换图片 视频
    toggeleHandler(isImg) {
      if (isImg === 0) {
        this.viList = []
        this.isImg = true
        this.status = 'image'
      } else {
        this.viList = []
        this.isImg = false
        this.status = 'video'
      }
    },

    // async chooseVideoHandler(state) {
    //   uni.showLoading({
    //     mask: true,
    //     title: '上传中...',
    //   })
    //   // try {
    //     // 1.选择要上传的视频
    //   const res = await uni.chooseMedia({
    //     maxDuration: 60,
    //     sourceType: ['album'],
    //     mediaType: Array(this.status),

    //   })
    //     // let uploadFile = ''
    //   // 判断函数传来的类型是不是视频 如果是就使用视频缩略图 => thumbTempFilePath
    //   this.uploadFile = this.status == 'video' ? res[1].tempFiles[0].thumbTempFilePath : res[1].tempFiles[0].tempFilePath
    //   var that = this
    //   // } catch (error) {
    //   //   console.log(error)
    //   //   uni.hideLoading()
    //   // }
    //   this.arr = await uni.uploadFile({
    //     // 需要上传的地址
    //     url: that.vue_uploadAction,
    //     // filePath  需要上传的文件
    //     filePath: that.uploadFile,
    //     name: 'file',
    //     header: {
    //     	token: "781bb514-342d-4a67-9086-758b4e6477c0"		// 挂载请求头为用户的 token
    //     },
    //   })
    //   let data = JSON.parse(this.arr[1].data)
    //   console.log('data:', data)
    //   if (data.code !== 1) {
    //     // 视频上传失败了
    //     uni.hideLoading()
    //     uni.showToast({
    //       title: data.msg,
    //       icon: 'none',
    //     })
    //     return
    //   }
    //   // 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)
    //   this.viList.push({
    //     image: data.data.fullurl,
    //     type: this.status == 'video' ? 'v' : 'i',
    //   })
    //   uni.hideLoading()
    // },
    async chooseVideoHandler() {
      try {
        uni.showLoading({
          mask: true,
          title: '上传中...',
        })
        var uploadFile = ''
        // 1.选择要上传的视频
        const res = await uni.chooseMedia({
          maxDuration: 60,
          sourceType: ['album'],
          count: this.status == 'video' ? 1 : 9,
          mediaType: Array(this.status),
        })
        // console.log(res[1].tempFiles[0], 'url')
        // 判断函数传来的类型是不是视频 如果是就使用视频缩略图 => thumbTempFilePath
        console.log(res)
        this.status == 'video' && (this.videoUrl = res[1].tempFiles[0].tempFilePath)
        uploadFile = this.status == 'video' ? res[1].tempFiles[0].thumbTempFilePath : res[1].tempFiles.map(it => it.tempFilePath)
        var that = this
        console.log(uploadFile)
        if (this.status == 'video') {
          var arr = await uni.uploadFile({
            // 需要上传的地址
            url: that.vue_uploadAction,
            // filePath  需要上传的文件
            filePath: uploadFile,
            name: 'file',
            header: {
              token: '781bb514-342d-4a67-9086-758b4e6477c0', // 挂载请求头为用户的 token
            },
          })
          let data = JSON.parse(arr[1].data)
        console.log('data:', data)
        if (data.code !== 1) {
          // 视频上传失败了
          uni.hideLoading()
          uni.showToast({
            title: data.msg,
            icon: 'none',
          })
          return
        }
        // 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)
        this.viList.push({
          image: data.data.fullurl,
          type: this.status == 'video' ? 'v' : 'i',
        })
        this.viList.length >1 && this.viList.splice(1,10)
        uni.hideLoading()
        }

        if(this.status == 'image'){
          for (let i = 0; i < uploadFile.length; i++) {
            var arr = await uni.uploadFile({
            // 需要上传的地址
            url: that.vue_uploadAction,
            // filePath  需要上传的文件
            filePath: uploadFile[i],
            name: 'file',
            header: {
              token: '781bb514-342d-4a67-9086-758b4e6477c0', // 挂载请求头为用户的 token
            },
          })
          let data = JSON.parse(arr[1].data)
        console.log('data:', data)
        if (data.code !== 1) {
          // 视频上传失败了
          uni.hideLoading()
          uni.showToast({
            title: data.msg,
            icon: 'none',
          })
          return
        }
        // 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)
        this.viList.push({
          image: data.data.fullurl,
          type: this.status == 'video' ? 'v' : 'i',
        })
        this.viList.length >9 && this.viList.splice(9,10)
        uni.hideLoading()
          }
        }

        // let data = JSON.parse(arr[1].data)
        // console.log('data:', data)
        // if (data.code !== 1) {
        //   // 视频上传失败了
        //   uni.hideLoading()
        //   uni.showToast({
        //     title: data.msg,
        //     icon: 'none',
        //   })
        //   return
        // }
        // // 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)
        // this.viList.push({
        //   image: data.data.fullurl,
        //   type: this.status == 'video' ? 'v' : 'i',
        // })
        // uni.hideLoading()
      } catch (error) {
        // console.log(error)
        uni.hideLoading()
      }
    },
    previewImageHandler(type) {
      type === 'i' &&
        uni.previewImage({
          urls: this.viList.filter(t => t.type === 'i').map(t => t.image),
        })
    },
    delHandler(index) {
      this.viList.splice(index, 1)
    },

    async getTabsCate() {
      const { data } = await getTabsCate({
        page: 1,
        rows: 10,
      })
      console.log(data)
      this.cateList = data.data
    },

    toggleTypeHandler(id, index) {
      this.curType = index
      this.typeId = id
      // console.log(id,index)
    },

    // 创建接口
    async getAddItem() {
      if (this.titleValue.length == 0) {
        return uni.showToast({ title: '请填写标题', icon: 'none' })
      }
      if (this.value1.length == 0) {
        return uni.showToast({ title: '请填写内容', icon: 'none' })
      }
      if (this.viList.length == 0) {
        return uni.showToast({ title: '请上传图片或视频', icon: 'none' })
      }
      try {
        let VIList = {}
        if (this.status == 'video') {
          VIList = { video: this.videoUrl }
        } else {
          VIList = { imgList: this.viList.map(it => it.image) }
        }
        console.log(VIList)
        const res = await getAddItem({
          type_id: this.typeId, //	integer	是	类型ID
          title: this.titleValue, //	string	是	论坛标题
          content: this.value1, //	string	是	论坛内容
          file: VIList, //	string	否	文件json例如：{"video":"http://sdsads","imgList":["","",""]}
        })
        uni.showToast({ title: '发布成功' })
        uni.navigateBack({ delta: 1 })
        console.log(res, 'fabufabu')
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="scss">
page {
  background: #fff;
}
.mainBox {
  padding: 0 32rpx 32rpx;
  box-sizing: border-box;
}
.whiteBox {
  width: 100%;
  height: 60rpx;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
}
.bottomBtn {
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  background: #fff;
  position: fixed;
  bottom: 60rpx;
  left: 0;
  view {
    width: 686rpx;
    height: 88rpx;
    border-radius: 28rpx;
    background: linear-gradient(90deg, rgba(140, 72, 255, 1) 0%, rgba(123, 43, 255, 1) 100%);
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    font-weight: 700;
  }
}
.u-textarea {
  border: none !important;
}
.stateBox {
  margin-top: 16rpx;
  margin-bottom: 28rpx;
  width: 228rpx;
  height: 56rpx;
  border-radius: 200rpx;
  background: #f6f8fa;
  > .item {
    width: 50%;
    height: 100%;
    color: rgba(0, 0, 0, 0.4);
    font-size: 26rpx;
  }
}
.Z {
  background: #f1e8ff;
  border: 1rpx solid #b88dff;
  color: #6e16ff;
  font-size: 26rpx;
  border-radius: 200rpx;
  font-weight: 700;
}
.uploadImage {
  display: flex;
  flex-wrap: wrap;
}
.aa {
  margin-right: 20rpx;
  position: relative;
  > .del {
    position: absolute;
    top: 0;
    left: 8rpx;
    z-index: 999;
    color: #fff;
    font-size: 32rpx;
  }
  > .sty {
    width: 160rpx;
    height: 160rpx;
  }
  > .jinzhi {
    width: 160rpx;
    height: 160rpx;
    background: transparent;
    position: absolute;
    z-index: 998;
    top: 0;
    left: 0;
  }
}
.typeBox {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* top: 0;
  right: 0; */
}
.btnBox {
  /* margin: 0 auto; */
  margin-bottom: 28rpx;
  /* margin-left: 20rpx; */
  width: 160rpx;
  height: 160rpx;
  margin-top: 20rpx;
  background: #f4f5f7;
  color: #000;
}
.cateBox {
  flex-wrap: wrap;
  > .cateText {
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
    font-weight: 700;
    margin-right: 8rpx;
  }
  > .typeBox1 {
    padding: 8rpx 12rpx;
    box-sizing: border-box;
    border-radius: 154rpx;
    border: 1rpx solid transparent;
    background: rgba(247, 248, 250, 1);
    color: rgba(0, 0, 0, 0.9);
    margin-right: 24rpx;
    font-size: 24rpx;
  }
  > .ZZ {
    background: rgba(110, 22, 255, 0.1);
    border: 1rpx solid #b88dff;
    color: rgba(110, 22, 255, 1);
  }
}
</style>