<template>
  <div class="containerbox">
    <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>
        <van-uploader
          v-model="fileList"
          multiple="true"
          :after-read="afterRead"
          :max-count="8"
          @delete="deleftimg"
        />

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

    <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 { Picker, Uploader, Toast } from 'vant';
import "vant/lib/index.css";
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: ''
    }
  },
  created() {
    this.getkindlist()
  },
  methods: {
    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)
      if (file.length == undefined) {
        var formdata = new FormData();
        formdata.append("file", file.file);
        that.delimg.push(file.file.name)
        var url = "/api/common/upload";
        let param = {
          id: 1
        }

        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);
            });
        }


      }
    },

    // 删除文件
    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);
        }
      });
      this.delimg = this.delimg
      this.images = this.images;
      this.chuanimage = this.chuanimage;

      this.$forceUpdate();

    },
    // 获取分类列表
    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
      }
      let param = {
        sort_id: that.sort_id,
        description: that.kindidea,
        images: that.chuanimage.join(",")
      };

      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";
.topcontainer {
  padding: 0 0.32rem;
  box-sizing: border-box;
  background: #fff;
  padding-bottom: 0.32rem;
  box-sizing: border-box;
}
.kindleft {
  color: #323233;
  font-size: 0.28rem;
  margin-right: 0.32rem;
}
</style>