<template>
  <div class="container">
    <div class="addtop flextwo">
      <div class="addtopleft">发布省份</div>
      <div class="addprovince flexone" @click="selectcity">
        <div class="proname">{{ proname }}</div>
        <div class="xiala">
          <img src="../../../assets/huixia.png" alt="" />
        </div>
      </div>
    </div>
    <div class="addtop flextwo" v-if="type != 1">
      <div class="addtopleft" v-if="type == 2">请选择招聘求职</div>
      <div class="addtopleft" v-if="type == 3">请选择求购转让</div>
      <div class="addtopleft" v-if="type == 4">请选择交友对象</div>
      <div class="addprovince flexone" @click="banggong">
        <div class="proname">{{ kindname }}</div>
        <div class="xiala">
          <img src="../../../assets/huixia.png" alt="" />
        </div>
      </div>
    </div>
    <div class="flextwo lianxitype">
      <div class="connectbox flexone">
        <div class="connectname">联系方式</div>
        <div class="connectenter">
          <input type="number" placeholder="输入号码" v-model="mobile" />
        </div>
      </div>
      <div class="connectbox flexone" v-if="type != 1">
        <div class="connectname">联系人</div>
        <div class="connectenter enternamek">
          <input type="text" placeholder="输入姓名" v-model="name" />
        </div>
      </div>
    </div>
    <div class="contracttext">
      <div class="text">
        <input
          type="text"
          placeholder="加个标题哦~"
          placeholder-class="entertitle"
          v-model="title"
        />
      </div>
      <div class="contractcontent">
        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          placeholder="请输入帖子内容"
          v-model="content"
        ></textarea>
      </div>
      <!-- 上传视频 -->
      <div v-if="type == 1">
        <div class="text">请上传视频大小在25M以下</div>
        <div style="margin-top:0.2rem">
           <van-uploader 
            v-model="fileListvideo"
            multiple="false"
            :after-read="afterReadvideo"
            :max-count="1"
             accept="video/*"
             :preview-image="true"
          
            style="margin-right: 0.2rem"
          />
        

        </div>
      
           
     
         

        <!-- <div class="addpicox flexone">
          <div class="addpic addvideo" v-if="videoimg == ''">
            <div class=" ">
              <input
                type="file"
                class="videoimgkk"
                accept="video/*"
                @change="uploadfileone"
              />
            </div>
            <img src="../../../assets/add.png" alt="" />
          </div>
          <div class="addpic addvideo" v-else style="position: relative;">
            <img :src="showimg" alt="">
            <img src="../../../assets/bofang_icon@2x.png" alt="" class="videobtn">
            <input
                type="file"
                class="videoimgkk"
                accept="video/*"
                @change="uploadfileone"
              />
          </div>
        </div> -->
      </div>

      <!-- 上传图片 -->
      <div class="addpicox flexone" v-else>
        <!-- <div class="addpic" v-for="(item, index) in images" :key="index">
          <image :src="item" mode=""></image>
          <div class="delimg" @click="deleteimg(index)" :data-url="item">
            <image src="../../../assets/close.png" mode=""></image>
          </div>
        </div> -->
        <div class="flexone">
          <van-uploader
            v-model="fileList"
            multiple="true"
            :after-read="afterRead"
            :max-count="9"
            @delete="deleftimg"
            style="margin-right: 0.2rem"
          />
          <!-- <img src="../../../assets/add.png" alt="" /> -->
        </div>
      </div>
    </div>

    <div class="queding" @click="issure == true ? sure() : ''">确定</div>
    

    <!-- 选择器 -->
    <van-picker
      title="标题"
      show-toolbar
      :columns="citylist"
      @confirm="onConfirm"
      @cancel="onCancel"
      v-if="showcity"
    />

    <!-- 选择器 -->
    <van-picker
      title="标题"
      show-toolbar
      :columns="banggongcolumns"
      @confirm="onConfirmkind"
      @cancel="onCancelkind"
      v-if="showkind"
    />
    <!-- 图片上传中 -->
    <van-loading type="spinner" color="#1989fa" v-if="cardzheng" />
  </div>
</template>

<script>
import { changename } from "../../../utils/base.js"; //城市去掉市
import area from "../../../utils/area.js";
import Vue from "vue";
import "vant/lib/index.css";
import { Picker, Toast } from "vant";
import { Uploader, Loading } from "vant";

Vue.use(Loading);
Vue.use(Toast);
Vue.use(Uploader);
Vue.use(Picker);
export default {
  data() {
    return {
      type: 2,
      // 上传图片
      images: [],
      chuanimage: [],
      delimg: [],
      fileList: [],
      videoimg: "",
      issure: true,
      kindname: "请选择",
      search_type: "",
      zhaoarr: [],
      showcity: false,
      citylist: area.province_list,
      banggongcolumns: ["帮工", "招聘"],
      proname: "",
      province_id: "",
      showcity: false,
      showkind: false, // 帮工招聘
      mobile: "", //手机号
      name: "", //联系人
      title: "", //帖子标题
      content: "", //帖子内容
      cardzheng: false,
      chuanvideo: "",
      showimg:'',//视频第一帧封面图
      fileListvideo:[]
    };
  },
  created() {
    this.proname = localStorage.getItem("proname");
    this.getprovinceid();
    this.type = this.$route.query.type;
    let type = this.type;
    if (type == 2) {
      this.banggongcolumns = ["招聘", "求职"];
    } else if (type == 3) {
      this.banggongcolumns = ["求购", "转让"];
    } else if (type == 4) {
      this.banggongcolumns = ["找男友", "找女友"];
    }
  },
  methods: {
    // 上传图片
    afterReadvideo(file){
      let that=this;
       that.cardzheng = true;
      console.log(file,'上传的视频');
      if (file.length == undefined) {
        var formdata = new FormData();
       
        //  file.file.name="视频"
        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.videoimg = res.data.url;
            //  that.fileListvideo=[];
             that.getshipinposter()
              that.cardzheng = false
            // that.cardzheng = false;
            // let url = "https://app.chinesenooddles.com" + res.data.url;
            // that.images.push(url);
            // that.chuanimage.push(res.data.url);
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    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 = "https://app.chinesenooddles.com" + res.data.url;
            console.log(that.fileList,'图片数组')
            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 = "https://app.chinesenooddles.com" + 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.videoimg = res.data.url;
          that.getshipinposter()
          
        })
        .catch(err => {
          that.cardzheng = false;
          console.log(err);
        });
    },
    // 返回视频封面图
    getshipinposter(){
      let that=this;
       var url = "/api/sundry/get_video_image";
      var params = {
       video:that.videoimg
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          that.showimg=res.data
         
        })
        .catch(err => {
          console.log(err, 78767767667);
        });
    },
    // 选择城市
    selectcity() {
      this.showcity = true;
    },
    // 确定选择城市
    onConfirm(value, index) {
      console.log(value, index);
      let that = this;
      this.showcity = false;
      if (changename(value) != "") {
        that.proname = changename(value);
      } else {
        that.proname = value;
      }
      that.getprovinceid();
    },
    onCancel() {
      this.showcity = false;
    },
    // 选择种类
    onConfirmkind(value, index) {
      console.log(value, index);
      if (value == "招聘") {
        this.search_type = 1;
      } else if (value == "求职") {
        this.search_type = 2;
      } else if (value == "求购") {
        this.search_type = 3;
      } else if (value == "转让") {
        this.search_type = 4;
      } else if (value == "找男友") {
        this.search_type = 5;
      } else if (value == "找女友") {
        this.search_type = 6;
      }
      this.showkind = false;
      this.kindname = value;
    },
    onCancelkind() {
      this.showkind = false;
    },

    //帮工招聘
    banggong() {
      this.showkind = true;
    },
    // 根据城市名字获取id
    getprovinceid() {
      let that = this;
      var url = "/api/question/get_area";
      var params = {
        province_name: that.proname
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          that.province_id = res.data.id;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 选择招聘求职
    bindzhaoChange(e) {
      this.kindname = this.zhaoarr[e.target.value].name;
      this.search_type = this.zhaoarr[e.target.value].id;
    },

    // 输入标题
    entertitle(e) {
      this.title = e.detail.value;
    },

    // 验证
    yanzheng() { },

    sure() {
      let that = this;
      that.issure = false;

      if (that.type == 1) {
        if (that.mobile == "") {
          Toast("请输入手机号");
          that.issure = true;
          return false;
        }

        if (that.mobile != "") {
          if (!/^1[3456789]\d{9}$/.test(that.mobile)) {
            Toast("请输入正确的联系方式");
            that.issure = true;
            return false;
          }
        }
      }
      if (that.type == 2) {
        if (that.search_type == "") {
          Toast("请选择招聘求职");
          that.issure = true;
          return false;
        }
        if (that.mobile == "") {
          Toast("请输入手机号");
          that.issure = true;
          return false;
        }
      }
      if (that.type == 3) {
        if (that.search_type == "") {
          Toast("请选择招求购转让");
          that.issure = true;
          return false;
        }
        if (that.mobile == "") {
          Toast("请输入手机号");
          that.issure = true;
          return false;
        }
        if (that.mobile != "") {
          if (!/^1[3456789]\d{9}$/.test(that.mobile)) {
            Toast("请输入正确的联系方式");
            that.issure = true;
            return false;
          }
        }
        if (that.name == "") {
          Toast("请输入联系人");
          that.issure = true;
          return false;
        }
      }

      if (that.type == 4) {
        if (that.search_type == "") {
          Toast("请选择交友方式");
          that.issure = true;
          return false;
        }
        if (that.mobile == "") {
          Toast("请输入手机号");
          that.issure = true;
          return false;
        }
        if (that.mobile != "") {
          if (!/^1[3456789]\d{9}$/.test(that.mobile)) {
            Toast("请输入正确的联系方式");
            that.issure = true;
            return false;
          }
        }
        if (that.name == "") {
          Toast("请输入联系人");
          that.issure = true;
          return false;
        }
      }
      if (that.title == "") {
        Toast("请输入标题");
        that.issure = true;
        return false;
      }
      if (that.content == "") {
        Toast("请输入帖子内容");
        that.issure = true;
        return false;
      }

      if (that.type == 1) {
        if (that.videoimg == "") {
          Toast("请上传视频");
          that.issure = true;
          return false;
        }
      }

      if (that.fileList.length != that.chuanimage.length) {
        Toast("图片上传中");
        that.issure = true;
        return false;
      }
      var url = "/api/forum/publish_forum";
      var params = {
        type: that.type,
        province_id: that.province_id,
        title: that.title,
        content: that.content,
        images: that.chuanimage.join(","),
        search_type: that.search_type,
        video: that.videoimg,
        name: that.name,
        mobile: that.mobile
      };
      console.log("7766554", params);
      that.$axios
        .post(url, params)
        .then(res => {
          console.log(res);
          Toast("发布成功");
          that.$router.push({
            path: "/"
          });
        })
        .catch(err => {
          console.log(err, 78767767667);
        });
    }
  }
};
</script>

<style scoped>
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.van-uploader{
 
}
.van-picker {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}
.text {
  color: #bdc4ce;
  font-size: 0.28rem;
}

.surebtn {
  position: fixed;
  bottom: 0;
  left: 0.32rem;
  bottom: 0.32rem;
}
.addpic {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0;
  margin-right: 0.18rem;
  margin-bottom: 0.2rem;
  position: relative;
}
.shangtu {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0;
  top: 0;
  background: transparent;
  border: none;
  outline: none;
  opacity: 0;
}
.addvideo {
  width: 1.5rem;
  height: 1.5rem;
  position: relative;
}
.videoimgkk {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0;
  top: 0;
  border: none;
  outline: none;
  opacity: 0;
}
.addvideo image {
  width: 100%;
  height: 100%;
}
.addvideo video {
  width: 100%;
  height: 100%;
}
.delimg {
  width: 0.4rem;
  height: 0.4rem;
  font-size: 0;
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
}
.entertitle {
  color: #bdc4ce;
  font-size: 0.28rem;
}
.text {
  padding-bottom: 0.28rem;
  box-sizing: border-box;
  border-bottom: 0.01rem solid #f5f5f5;
}
.title input {
  color: #bdc4ce;
  font-size: 0.28rem;
}
.contracttext {
  padding: 0.32rem 0.32rem 0.2rem;
  box-sizing: border-box;
  background: #fff;
  margin-top: 0.16rem;
  margin-bottom: 1.6rem;
}

.contractcontent {
  width: 6.86rem;
  height: 2.2rem;
  margin-bottom: 0.32rem;
}
.contractcontent textarea {
  width: 100%;
  height: 100%;
  color: #bdc4ce;
  font-size: 28rem;
  padding: 0.28rem 0;
  box-sizing: border-box;
}
.addtop {
  width: 7.5rem;
  height: 0.88rem;
  background: #fff;
  padding: 0 0.32rem;
  box-sizing: border-box;
}
.addtopleft {
  color: #3d444c;
  font-size: 0.28rem;
}
.addprovince {
  height: 0.6rem;
  border: 0.02rem solid rgba(192, 198, 208, 1);
  padding: 0.12rem 0.2rem;
  box-sizing: border-box;
  border-radius: 1.2rem;
}

.proname {
  color: #333;
  font-size: 0.23rem;
}
.xiala {
  width: 0.2rem;
  height: 0.2rem;
  font-size: 0;
  margin-left: 0.16rem;
}
.addpicox {
  margin-top: 0.2rem;
  flex-wrap: wrap;
}
.contractcontent textarea {
  color: #bdc4ce;
  font-size: 0.28rem;
}
.buybtn { 
  padding: 0.25rem 0.57rem;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
}
.queding {
  width: 6.35rem;
  height: 0.97rem;
  background: #c68c3e;
  border-radius: 0.31rem;
  margin: 2rem auto 0;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.97rem;
}

.connectname {
  color: #191919;
  font-size: 0.28rem;
}
.connectenter {
  width: 2.26rem;
  height: 0.46rem;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #d3d3d3;
  border-radius: 0.15rem;
  color:#333;
  font-size: 0.28rem;
  margin-left: 0.24rem;
}
.enternamek {
  width: 1.7rem;
}
.text input{
   color:#333;
  font-size: 0.24rem;
}
.connectenter input {
  width: 100%;
  height: 100%;
  background: transparent;
  padding: 0.12rem 0.2rem;
  box-sizing: border-box;
   color:#333;
  font-size: 0.28rem;
}
.contractcontent textarea{
  color:#333;
  font-size: 0.28rem;
}
.lianxitype {
  background: #fff;
  padding: 0.25rem 0.32rem;
  box-sizing: border-box;
}
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
}
.videobtn{
  width:0.7rem;
  height: 0.7rem;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}
</style>