<template>
  <div class="containerbox">
    <div class="flextwo sharetopk" @click="back">
      <div class="leftrow leftrowkimg">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">发布</div>
      <div class="sharebtn">
        <!-- <img src="../../../assets/sharebtn.png" alt /> -->
      </div>
    </div>
    <div class="topcontainer">
      <div class="publishitem flextwo" @click="selectkind">
        <div class="publeft flexone">
          <div class="kindname">
            <span class="kindleft">分类</span>
            {{ kindname }}
          </div>
        </div>

        <img src="../../../assets/grayrow.png" alt class="yourow" />
      </div>
      <div class="enterkind">
        <textarea name id cols="30" rows="10" placeholder="请输入您的想法" v-model="kindidea"></textarea>
      </div>
      <!-- <div @click="uppic">上传图片</div> -->

      <div>
        <van-uploader
          v-model="fileList"
          multiple="true"
          :after-read="afterRead"
          :max-count="9"
          @delete="deleftimg"
        />

        <!-- <div class="pubimg">
          <img src="../../../assets/addpub.png" alt />
        </div>-->
      </div>

      <div class="videoimgll">
        <img src="../../../assets/upvideo.png" alt class="videoimgbtn" v-if="video_image==''" />
        <img :src="video_image" alt v-else />
        <div class="videoimgkk">
          <input type="file" accept="video/*" @change="uploadfileone" />
        </div>
        <img src="../../../assets/anniu.png" alt class="listanniu" v-if="video_image!=''" />
      </div>

      <!-- <div class="pubimg"></div> -->
    </div>

    <van-loading type="spinner" color="#1989fa" v-if="cardzheng" />

    <div class="kaishilu" @click="publish">发布</div>
    <div class="pubpicker" v-if="showkind">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
        @setValues="getvalue"
      />
    </div>
    <!-- 发布成功 -->
    <div class="register" v-if="success">
      <div class="pubsuccess">
        <div class="pubsuccessname">发布成功</div>
        <div class="pubsure" @click="sure">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import wx from "weixin-js-sdk";
import "vant/lib/index.css";
console.log(wx);
import { Picker, Uploader, Toast, Loading } from "vant";


Vue.use(Loading);

Vue.use(Picker);
Vue.use(Toast);
Vue.use(Uploader);
export default {
  data() {
    return {
      columns: [],
      showkind: false,
      kindname: "请选择分类",
      success: false,
      kindidea: "",
      fileList: [],
      images: [],
      chuanimage: [],
      delimg: [],
      sort: [],
      sort_id: "",
      chuanvideo: '',
      showvideo: '',
      video_image: '',
      cardzheng: false
    };
  },
  created() {
    document.title = "唐元集";
    this.getkindlist();
  },
  methods: {
    uppic() {
      console.log(3378378);
      wx.ready(() => {
        wx.chooseImage({
          count: 1,
          sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            that.pic = localIds[0];
          }
        });
      });

      // 预览图片接;
      // wx.uploadImage({
      //   localId: "", // 需要上传的图片的本地ID，由chooseImage接口获得
      //   isShowProgressTips: 1, // 默认为1，显示进度提示
      //   success: function(res) {
      //     var serverId = res.serverId; // 返回图片的服务器端ID
      //   }
      // });
    },
    back() {
      this.$router.go(-1);
    },
    selectkind() {
      this.showkind = true;
    },

    onCancel() {
      console.log(347344);
      this.showkind = false;
    },
    onConfirm(value, index) {
      console.log(78343784);
      this.showkind = false;
      this.kindname = value;
      this.sort_id = this.sort[index].id;
    },

    sure() {
      this.success = false;
    },
    // 上传图片
    afterRead(file) {
      let that = this;
      console.log(file);
      console.log(file.length);
      that.cardzheng = true
      if (file.length == undefined) {
        var formdata = new FormData();
        formdata.append("file", file.file);
        that.delimg.push(file.file.name);
        var url = "/api/common/upload";
        that.$uploadFile
          .post(url, formdata)
          .then(function (res) {
            console.log(res);
            that.cardzheng = false;
            let url = "http://tangyuanji.t.brotop.cn" + res.data.url;
            that.images.push(url);
            that.chuanimage.push(res.data.url);
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        for (var i = 0; i < file.length; i++) {
          console.log(file[i].file);

          var formdata = new FormData();
          formdata.append("file", file[i].file);
          that.delimg.push(file[i].file.name);

          var url = "/api/common/upload";

          that.$uploadFile
            .post(url, formdata)
            .then(function (res) {
              console.log(res);

              that.cardzheng = false;
              let url = "http://tangyuanji.t.brotop.cn" + res.data.url;
              that.images.push(url);
              that.chuanimage.push(res.data.url);
            })
            .catch(err => {
              console.log(err);
              that.cardzheng = false;
            });
        }
      }
    },


    // 删除文件
    deleftimg(e) {
      let that = this;
      let item = e.file.name;
      this.delimg.forEach(function (value, index, array) {
        if (value == item) {
          that.delimg.splice(index, 1);
          that.images.splice(index, 1);
          that.chuanimage.splice(index, 1);
          that.fileList.splice(index, 1)
        }
      });
      this.delimg = this.delimg;
      this.images = this.images;
      this.chuanimage = this.chuanimage;

      this.$forceUpdate();
    },
    // 上传视频

    uploadfileone(e) {
      let that = this;

      that.cardzheng = true
      console.log(e);
      let file = e.target.files[0];
      console.log(file);
      var formdata = new FormData();

      formdata.append("file", file);
      // formdata.append("token", localStorage.getItem("token"));
      var url = "/api/common/upload";
      that.$uploadFile
        .post(url, formdata)
        .then(function (res) {
          console.log(res);
          that.cardzheng = false
          that.chuanvideo = res.data.url;
          that.showvideo = res.data.priview_url;
          that.video_image = res.data.video_image
        })
        .catch(err => {
          that.cardzheng = false
          console.log(err);
        });
    },
    // 获取分类列表
    getkindlist() {
      let that = this;
      var url = "/api/social/sort";
      let param = {};

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          let data = res.data;
          data.forEach(function (value, index) {
            that.columns.push(value.sort_name);
          });
          that.columns = that.columns;
          that.sort = res.data;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    getvalue(value) {
      console.log(value);
    },
    // 发布
    publish() {
      let that = this;
      var url = "/api/social/send";
      if (that.sort_id == "") {
        Toast("请选择分类");
        return false;
      }
      if (that.kindidea == "") {
        Toast("请输入您的想法");
        return false;
      }
      if (that.chuanimage.length != that.fileList.length) {
        Toast("图片上传中");
        return false;
      }
      if (that.chuanvideo == '' && that.cardzheng == true) {
        Toast("视频上传中");
        return false;
      }
      let param = {
        sort_id: that.sort_id,
        description: that.kindidea,
        images: that.chuanimage.join(","),
        video: that.chuanvideo
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          Toast("发布成功");
          that.$router.go(-1);
        })
        .catch(function (err) {
          console.log(err);
        });
    }
  }
};
</script>

<style scoped>
@import "../../../style/society.css";
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.topcontainer {
  padding: 0 0.32rem;
  box-sizing: border-box;
  background: #fff;
  padding-bottom: 0.32rem;
  box-sizing: border-box;
  margin-top: 0.8rem;
}
.kindleft {
  color: #323233;
  font-size: 0.28rem;
  margin-right: 0.32rem;
}
.videoimgkk {
  width: 1.58rem;
  height: 1.58rem;
  position: absolute;
  left: 0;
  top: 0;
}
.videoimgll {
  width: 1.58rem;
  height: 1.58rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #999;
}
.videoimgkk input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  opacity: 0;
  /* background: transparent;
  outline: none;
  border: none; */
}
.listanniu {
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.videoimgbtn {
  width: 0.8rem;
  height: 0.8rem;
}
</style>