<!-- 发起订单 -->
<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" v-if="type == 'add'">新增设备</view>-->
    <!--      <view class="c-title" v-if="type == 'edit'">编辑设备</view>-->
    <!--      <view class=""></view>-->
    <!--    </view>-->
    <headersVue :titles="pageName" style="position: static !important;">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="dil">
      <view class="tinput">

        <view class="text1">
          <text class="hong1">*</text>
          设备名称
        </view>
        <view class="you">
          <input type="text" placeholder="请输入设备名称" v-model="box.equName">
        </view>
      </view>
      <view class="tinput">

        <view class="text1">
          <text class="hong1">*</text>
          设备型号
        </view>
        <view class="you">
          <input type="text" placeholder="请输入设备型号" v-model="box.equModel">
        </view>
      </view>
      <view class="tinput">

        <view class="text1">
          <text class="hong1">*</text>
          设备编号
        </view>
        <view class="you">
          <input type="text" placeholder="请输入设备编号" v-model="box.equNumber">
        </view>
      </view>
      <view class="tinput" @click="typeShow = true">
        <view class="text1">
          设备类别
        </view>
        <view class="you">
          <input type="text" disabled placeholder="请选择设备类别" v-model="typeName">
        </view>
      </view>
      <view class="tinput">

        <view class="text1">
          <text class="hong1">*</text>
          设备检定周期
        </view>
        <view class="you">
          <input type="text" placeholder="请输入设备检定周期" v-model="box.equZq">
        </view>
      </view>
      <view class="tinput">

        <view class="text1">
          <text class="hong1">*</text>
          上次检定单位
        </view>
        <view class="you">
          <input type="text" placeholder="请输入上次检定单位" v-model="box.lastUnit">
        </view>
      </view>


      <view class="tinput">
        <view class="text1">
          <text class="hong1">*</text>
          有效期
        </view>
        <!-- validTime -->
        <view class="you" @click="show = true ">
          <text>{{ time || '' }}</text>
        </view>
      </view>
      <view class="tinput">
        <view class="text1">
          <text class="hong1">*</text>
          下次检定时间
        </view>
        <!-- nextCheckTime -->
        <view class="you" @click="show1 = true ">
          <text>{{ time1 || '' }}</text>
        </view>
      </view>

      <view class="tinput">
        <view class="text1">
          <text class="hong1">*</text>
          设备附件
        </view>
        <view class="lan_" @click="goFile">查看附件
          <image src="/static/imgs/add.png" mode=""></image>
        </view>
      </view>
      <u-datetime-picker
          :show="show"
          v-model="box.validTime"
          @cancel="cancels"
          @confirm="confirms"
          mode="date"
          return-type='string'
      ></u-datetime-picker>
      <u-datetime-picker
          :show="show1"
          v-model="box.nextCheckTime"
          @cancel="cancels1"
          @confirm="confirms1"
          mode="date"
          return-type='string'
      ></u-datetime-picker>

      <u-picker :show="typeShow" :columns="columns" @confirm="confirmsType" @cancel="typeShow = false"
                keyName="label"></u-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 {getDictDataByType} from "../../utils/utils";
import headersVue from "@/components/header/headers.vue";

var wvCurrent;
export default {
  components: {headersVue},
  data() {
    return {

      time: '请选择有效期',
      time1: '请选择下次检定时间',
      value1: '2023-10-10',
      baseUrl: this.$baseUrl,
      show: false,
      show1: false,
      fileId: null,
      id: '',
      type: 'add',
      box: {},
      typeShow: false,
      columns: [],
      typeName: null,
      //附件列表
      fileList3: [],
      pageName: '新增设备',
      baseImageUrl: config.baseImageUrl,
    }
  },
  onLoad(option) {
    this.type = option.type
    if (option.type == 'edit') {
      this.box.id = option.id
      this.pageName = '编辑设备'
    }
    this.getInsType()
  },

  onShow() {
    if (this.type == 'edit') this.getDetail();
  },
  methods: {
    confirmsType(e) {
      console.log(e)
      this.box.type = e.value[0].value
      this.typeName = e.value[0].label
      this.typeShow = false
    },
    async getInsType() {
      if (!this.columns || this.columns.length === 0) {
        this.columns = [await getDictDataByType("ins_equ_type")]
      }
      console.log(this.columns)
    },
    async getDetail() {
      let res = await request({
        url: '/system/equInfo/' + this.box.id,
        method: 'get'
      })
      if (res.code == 200) {
        this.box = res.data
        if (this.box.fileList) {
          this.fileList3 = this.box.fileList
          // 在回显时给 URL 加上域名
          this.fileList3 = this.fileList3.map(file => {
            // 如果是相对路径，添加域名
            file.url = this.baseImageUrl + '/' + file.url;
            return file;
          });
        }
        // this.maneizhi = this.box.type
        this.time = this.box.validTime
        this.time1 = this.box.nextCheckTime
      }
      if (this.box.type) {
        const data = this.columns[0]
        const index = data.findIndex(item => item.value === this.box.type)
        if (index !== -1) {
          this.typeName = data[index].label
        }
      }
    },
    cancels() {
      this.show = false
    },
    cancels1() {
      this.show1 = 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.validTime = formattedDate
      this.time = formattedDate
      this.show = false

    },
    confirms1(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.nextCheckTime = formattedDate
      this.time1 = formattedDate
      this.show1 = false

    },
    //发布按钮
    async getnewsadd() {

      // if(this.box.filePath==''||this.box.fileName==''||this.box.warnTime==''){
      // uni.showToast({
      // 	title:'必填项不能有空！',
      // 	icon:'none'
      // })

      this.box.fileList = this.fileList3.map(file => {
        // 去掉域名，返回相对路径
        if (file.url && file.url.startsWith(this.baseImageUrl)) {
          file.url = file.url.replace(this.baseImageUrl, '');
        }
        return file;
      });
      if (this.type == 'add') {
        let res = await request({
          url: '/system/equInfo/add',
          method: 'post',
          data: this.box
        })
        if (res.code == 200) {
          uni.showToast({
            title: '发布成功'
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 1000);
        }
      }
      if (this.type == 'edit') {
        let res = await request({
          url: '/system/equInfo/edit',
          method: 'post',
          data: this.box
        })
        if (res.code == 200) {
          uni.showToast({
            title: '发布成功'
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 1000);

        }
      }

    },

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

    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
            fileListLen,
            1,
            Object.assign(item, {
              status: "success",
              message: "",
              url: result,
            })
        );
        fileListLen++;
      }
      console.log('现在文件集合', this[`fileList${event.name}`])
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        upload({
          url: '/common/upload',
          filePath: url,
        }).then((res) => {
          resolve(res.data.url);
        })
      });
    },

    goFile() {
      if (!this.box.id) {
        uni.showToast({
          title: '请先新建设备',
          icon: 'none'
        })
        return
      }
      if (!this.box.folderId) {
        console.log('当前员工没有文件加')
        //给当前员工创建一个文件夹
        request({
          url: '/system/equInfo/addFolder',
          method: 'post',
          data: JSON.stringify(this.box.id), // 手动转换为 JSON
        }).then(res => {
          this.box.folderId = res.data
          uni.navigateTo({
            url: '/pages/manage/deviceManage?type=staff&folderId=' + this.box.folderId
          })
        })
      } else {
        uni.navigateTo({
          url: '/pages/manage/deviceManage?type=staff&folderId=' + this.box.folderId
        })
      }

    },
  }

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

}

.lan_ {
  font-size: 28rpx;
  color: #327DFB;
  display: flex;
  align-items: center;

  image {
    width: 36rpx;
    height: 36rpx;
    margin-left: 15rpx;
  }
}

.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, #3F61C0 0%, #0D2E8D 100%);
  background: #327dfb;
  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>