<template>
  <div class="app-container" :style="{height:height+'px'}">
    <van-nav-bar
      :title="pageTit"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <van-form @submit="submitInteraction">
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label="供求类型"
        placeholder="点击选择供求类型"
        @click="showPicker = true"
        required
        :rules="[{ required:true }]"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field v-model="form.projectName" label="项目名称" placeholder="请输入项目名称" required :rules="[{ required:true }]"/>
      <van-field v-model="form.location" label="项目地址" placeholder="请输入项目地址" required :rules="[{ required:true }]"/>
      <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
      <van-field v-model="form.phone" label="联系电话" placeholder="请输入联系电话" required :rules="[{ required:true }]"/>
      <van-field v-model="form.projectContent" label="项目详情" type="textarea" autosize placeholder="请输入项目详情" required :rules="[{ required:true }]"/>
      <van-field name="uploader" label="上传相关附件" required :rules="[{ required:true }]">
        <template #input>
          <van-uploader :after-read="afterRead" :before-delete="deleteFile" v-model="fileList" multiple :max-count="5" />
        </template>
      </van-field>
      <div class="submit">
        <van-button round block type="info" color="#007E72" native-type="submit">发布</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getMember , userDemand , updateDemand , selectDemand , base64Attach , showImg , deleteUserImg ,supplyDetail} from "@/api/user/index";
import { getInfo } from "@/api/login/index";
import {Dialog} from "vant";
export default {
  name: "supplyAdd",
  data() {
    return {
      height:0,
      pageTit:'',
      value: '',
      showPicker: false,
      columns:['供应','需求'],
      fileList:[],
      form:{
        projectName:'',
        location:'',
        realname:'',
        phone:'',
        projectContent:'',
        logintime:'',
        deptId:100,
        supplyDemandType:''
      },
      file:{
        tableName:'t_transaction_supply_demand',
        tableId:'',
        files:[],
        fileType:'',
        bizPath:'transaction'
      },
      upLoadList:[]
    };
  },
  created() {
    this.height = document.body.clientHeight;
    console.log(this.$route.query.type)
    if (this.$route.query.type == 'update'){
      this.getInteraction();
      this.pageTit = '修改供求';
    }else{
      this.getInfo();
      this.pageTit = '发布供求';
    }
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器

      for ( var i = 0 ; i < this.fileList.length ; i++){
        if(this.fileList[i].url == undefined&&this.fileList!='') {
          this.fileList[i] = {url:this.fileList[i].content, id: '', isImage: true};
        }
      }
    },
    deleteFile(elIndex){
      // deleteUserImg(elIndex.id).then(response => {});
      if(elIndex.id != ''){
        deleteUserImg(elIndex.id).then(response => {});
      }
      return (file, name) => {
        let fileIndex = name.index
        this.fileList[elIndex].splice(fileIndex, 1)
        this.upLoadList[elIndex].splice(fileIndex, 1)
      }
    },
    onConfirm(value, index) {
      this.value = value;
      this.showPicker = false;
      this.form.supplyDemandType = index + 1 ;
    },
    getInfo(){
      getInfo().then(response => {
        getMember(response.user.userId).then(response => {
          this.form.realname = response.data.realname;
          this.form.phone = response.data.phone;
          this.form.memberId = response.data.id;
        });
      });
    },
    getInteraction(){
      supplyDetail(this.$route.query.id).then(response => {
        this.form.projectName = response.data.projectName;
        this.form.location = response.data.location;
        this.form.projectContent = response.data.projectContent;
        this.form.realname = response.data.realname;
        this.form.phone = response.data.phone;
        this.form.id = this.$route.query.id;
        this.form.supplyDemandType = response.data.supplyDemandType;
        this.getDicts("supply_demand_type").then(res => {
          this.value = this.selectDictLabel(res.data,response.data.supplyDemandType);
        });
        showImg(response.data.id).then(responseSecond => {
          for (var i = 0 ; i < responseSecond.data.length ; i++){
            this.fileList.push({url:this.global.severApi+responseSecond.data[i].fileUrl,id:responseSecond.data[i].id})
          }
        });
      });
    },
    submitInteraction(){
      this.form.logintime = this.getNowFormatDate();
      if(this.$route.query.type == 'update'){
        this.file.tableId = this.$route.query.id ;
        updateDemand(this.form).then(response => {
          this.$toast.loading({
            message: "上传中...",
            forbidClick: true,
            duration: 0,
          });
          for (var i = 0 ; i < this.fileList.length ; i++){
            if(this.fileList[i].url.indexOf('http://') == -1&&this.fileList!=''){
              this.file.files.push(this.fileList[i].url);
            }
          }
          base64Attach(this.file).then(response => {
            if (response.code == 200){
              Dialog.confirm({
                title: '系统提示',
                message: '修改成功',
                confirmButtonText: '确定',
                showCancelButton:false
              }).then(() => {
                self.location=document.referrer;
              })
            }
          });
        });
      }else{
        userDemand(this.form).then(response => {
          this.file.tableId = response.data;
          this.$toast.loading({
            message: "上传中...",
            forbidClick: true,
            duration: 0,
          });
          for(var i = 0 ; i < this.fileList.length ; i++){
            this.file.files.push(this.fileList[i].url);
          }

          base64Attach(this.file).then(response => {
            if (response.code == 200){
              Dialog.confirm({
                title: '系统提示',
                message: '发布成功',
                confirmButtonText: '确定',
                showCancelButton:false
              }).then(() => {
              })
            }
          });
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
  .app-container {
    background-color: #FFF;
  }
  .submit{
    position: fixed;
    bottom: 5%;
    width: 90%;
    left: 5%;
    background-color: #FFFFFF;
    p{
      text-align: center;
      margin-bottom: 0.2rem;
      span{
        color: #007E72;
      }
    }
  }
</style>
