<!-- 发起订单 -->
<template>
  <view class="content">
    <!--		<view class="c-top">-->
    <!--			<view class="" @click="getback()">-->
    <!--				<uni-icons type="left" size="18"></uni-icons>-->
    <!--			</view>-->
    <!--			<view class="c-title">新增文件</view>-->
    <!--			<view class=""></view>-->
    <!--		</view>-->
    <headersVue titles="新增文件" style="position: static !important;">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="dil">
      <view class="tinput" v-if="maneizhi=='2'">
        <view class="text1">
          <text class="hong1">*</text>
          文件路径
        </view>
        <view class="you">
          <ss-upload v-if="maneizhi==2" ref="ssUpload" @getFile="getFile" @uploadSuccess="uploadSuccess"
                     :uploadOptions="uploadOptions" :isUploadServer="isUploadServer" :webviewStyle="webviewStyle"
                     :fileInput="fileInput">
            <text>附件上传</text>
          </ss-upload>

        </view>
      </view>
      <view style="padding:24rpx;" v-if="maneizhi=='2'">
        <!-- #ifdef MP-WEIXIN || H5 -->
        <view v-if="files.length">
          <view v-for="item in files">
            <view>名称：{{ item.name }}</view>
            <view>大小：{{ item.size }}</view>
            <view>类型：{{ item.type }}</view>
          </view>
        </view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS-->
        <view style="margin-top:40rpx">{{ filesApp }}</view>
        <!-- #endif -->
        <!-- 	<view style="margin-top:40rpx;word-break: break-all;" v-if="result">
            上传服务器结果：{{result}}
          </view> -->
      </view>
      <view class="xinput">
        <view class="text1">
          <text class="hong1">*</text>
          分类
        </view>
        <view class="xz">
          <view :class="{'xlan':maneizhi == item.id}" class="kuang" v-for="(item,index) in taplist" :key="index"
                @click="getzhi2(item.id,item.text)">
            <view class="">{{ item.text }}</view>
          </view>
        </view>
      </view>

      <!-- 填空 -->
      <view class="tinput">
        <view class="text1" v-if="maneizhi=='1'">
          <text class="hong1">*</text>
          文件夹名称
        </view>
        <view class="text1" v-else>
          <text class="hong1">*</text>
          文件名称
        </view>
        <view class="you">
          <input type="text" placeholder="请输入名称" v-model="box.fileName">
        </view>
      </view>

      <!-- style="height: 0px; overflow: hidden; display: none;" -->


      <view class="tinput" v-if="maneizhi=='2'">
        <view class="text1">
          <text class="hong1">*</text>
          提醒时间
        </view>
        <view class="you" @click="show = true ">
          <text>{{ time || '' }}</text>
        </view>
      </view>
      <u-datetime-picker
          :show="show"
          v-model="value1"
          @cancel="cancels"
          @confirm="confirms"
          mode="date"
          return-type='string'
      ></u-datetime-picker>
      <view class="anniu" @click="getnewsadd()">
        <text>保存</text>
      </view>
      <view style="width: 100%; height: 60px;"></view>
    </view>


  </view>
</template>

<script>
import request from '../../utils/request'
import config from '@/config'
import {getToken} from '@/utils/auth'
import upload from '@/utils/upload.js'
import headersVue from "@/components/header/headers.vue";

var wvCurrent;
export default {
  components: {headersVue},
  data() {
    return {
      time: '请选择提醒时间',
      value1: '2023-10-10',
      baseUrl: this.$baseUrl,
      show: false,
      maneizhi: 2,
      type: 'add',
      fileId: null,
      id: 1,

      taplist: [
        {text: '文件夹', id: 1},
        {text: '文件', id: 2},
      ],
      box: {
        type: 2,
        fatherId: '',
        filePath: '',
        fileName: '',
        warnTime: '',
      },
      fileLists: null,
      files: [],
      filesApp: '',
      isUploadServer: true,
      uploadOptions: {},
      webviewStyle: {
        height: '60px',
        width: '130px',
        position: '',
        background: 'transparent',
        position: 'absolute',
        top: '95px',
        right: '20px',
      },
      fileInput: {//设置app端html里面input样式与内容
        fileStyle: {

          borderRadius: '10px',
          backgroundColor: '#000000',
          color: '#fff',
          fontSize: '20px',
        },
        fileTitle: ''
      },
      fileInputs: {//设置app端html里面input样式与内容
        fileStyle: {

          borderRadius: '10px',
          backgroundColor: '#000000',
          color: '#fff',
          fontSize: '20px',
        },
        fileTitle: '上传附件'
      },
      result: '',
      uploadWaiting: true,

    }
  },
  onLoad(option) {
    this.type = option.type
    this.fileId = option.fileId
    this.uploadOptions = {
      // 上传服务器地址，此地址需要替换为你的接口地址
      url: this.$baseUrl + '/common/upload', //仅为示例，非真实的接口地址,
      //请求方式，get,post
      type: 'post',
      // 上传附件的key
      name: 'file',
      // 根据你接口需求自定义请求头
      header: {"Authorization": 'Bearer ' + getToken()},
      // 根据你接口需求自定义body参数
      formData: config.formData
    }
  },
  mounted() {
  },
  onShow() {
    if (this.type == 'edit') this.getDetail();
  },
  methods: {
    async getDetail() {

      let res = await request({
        url: '/inspectionFile/inspectionFile/' + this.fileId,
        method: 'get'
      })
      if (res.code == 200) {
        this.box = res.data
        this.maneizhi = this.box.type
        this.time = this.box.warnTime
      }
    },
    cancels() {
      this.show = false
    },
    confirms(e) {
      var timestamp = e.value;
      var date = new Date(timestamp);
      var year = date.getFullYear();
      var month = ("0" + (date.getMonth() + 1)).slice(-2);
      var day = ("0" + date.getDate()).slice(-2);
      var formattedDate = year + "-" + month + "-" + day;
      this.box.warnTime = formattedDate
      this.time = formattedDate
      this.show = false

    },
    //发布按钮
    async getnewsadd() {
      if (this.maneizhi == '2') {
        if (this.box.fileName == '' || this.box.warnTime == '') {
          uni.showToast({
            title: '必填项不能有空！',
            icon: 'none'
          })
          return
        }
        if (!this.uploadWaiting) {
          uni.showToast({
            title: '请等待上传完成！',
            icon: 'none'
          })
          return
        }
        if (this.box.filePath == '') {
          uni.showToast({
            title: '必填项不能有空！',
            icon: 'none'
          })
          return
        }
      } else {
        if (this.box.fileName == '') {
          uni.showToast({
            title: '必填项不能有空！',
            icon: 'none'
          })
          return
        }
      }
      this.uploadWaiting = false
      if (this.type == 'add') {
        this.box.fatherId = this.fileId
        let res = await request({
          url: '/inspectionFile/inspectionFile/add',
          method: 'post',
          data: this.box
        })
        if (res.code == 200) {
          uni.showToast({
            title: '发布成功'
          })
          setTimeout(() => {
            uni.navigateBack();
          }, 1000);
        }
      }
      if (this.type == 'edit') {
        let res = await request({
          url: '/inspectionFile/inspectionFile/edit',
          method: 'post',
          data: this.box
        })
        if (res.code == 200) {
          uni.showToast({
            title: '发布成功'
          })
          setTimeout(() => {
            //返回并刷新页面
            uni.navigateBack();
          }, 1000);

        }
      }

    },

    getback() {
      uni.navigateBack({
        delta: 1,
      })
    },

    getzhi2(id, text) {
      if (this.type == 'add') {
        this.maneizhi = id
        this.value = text
        this.box.type = id
      }

    },
    uploadFile() {
      setTimeout(() => {
        this.$refs.ssUpload.uploadFile()
      })
    },
    //获取文件
    getFile(result) {

      //#ifdef H5 || MP-WEIXIN
      this.files = result.tempFiles
      // #endif
      // #ifdef APP-PLUS
      this.filesApp = result
      // #endif
    },
    uploadSuccess(result) {
      this.result = result
      this.box.filePath = result[0].data.url
      console.log(result)
      console.log(this.box.filePath, '图片路径')
      this.uploadWaiting = true
      uni.showToast({
        title: '上传完成',
        icon: 'none'
      })
    }

  }

}
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: calc(100vh);
  background-color: #F6F6F6;
  box-sizing: border-box;
  // padding-top: 45px;
}

.dil {
  box-sizing: border-box;
  background-color: #F6F6F6;
  padding: 0px 12px;

}

.top-icon {
  margin-bottom: 45px;
}

.c-top {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding-top: 40px;
}

.c-title {
  font-size: 18px;
  font-weight: bold
}

.top {
  box-sizing: border-box;
  padding: 0px 15px;
  width: 100%;
  background-color: white;
}

.top-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 20px 0px;
}

.tb-left {
  height: 100%;
  width: 80%;
  display: flex;
  align-items: center;
}

.uicon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color: white;
  background: orangered;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  margin-right: 6px;

}

.tb-right {
  width: 20px;
  height: 26px;

  image {
    width: 100%;
    height: 100%;
  }
}

.text1 {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}

.hong1 {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;
  color: #FF5453;
}

.hong2 {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 400;

}

.tinput {
  width: 100%;
  display: flex;
  background: white;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 14px;
  margin-bottom: 14px;
}

.xinput {
  width: 100%;
  background: white;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 14px;
}

.you {
  text-align: right;

}

.xz {
  margin-top: 10px;
  display: flex;
  align-items: center;

}

.kuang {
  width: 80px;
  height: 23px;
  background: #ECECEC;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666666;
  font-size: 14px;
  margin-right: 15px;
}

.xlan {
  background: #CDE7FF !important;
  color: #1D62FF !important;
  border: 1px solid #2A96FE;
}

.anniu {
  width: 100%;
  background: linear-gradient(180deg, #327DFB 0%, #327DFB 100%);
  border-radius: 50px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #542F0E;
  margin-top: 20px;
  color: white;

}


button::after {
  border: none;
}
</style>