<template>
  <div class="div_page_bg">
    <div class="div_device_detail">
      <span class="span_dark">{{deviceName}}</span>
      <span class="span_dark" style="margin-top: 5px">{{deviceCode}}</span>
    </div>
    <div class="div_page_detail_bottom">
      <!--<d-p-cell show-bottom-line title="借入时间" :placeholder="selectTips" :value="controller.borrowDate" is-link @on-cell-click="showStartDatePicker"></d-p-cell>-->
      <d-p-cell show-bottom-line title="预计归还时间" :placeholder="selectTips" :value="controller.backDate" is-link @on-cell-click="showEndDatePicker"></d-p-cell>
      <div class="div_remark">
        <span class="span_dark">备注</span>
        <textarea :rows="inputColumn" v-model="currValue" maxlength="100"  class="textarea_value" :placeholder="inputTips"/>
      </div>
    </div>
    <div class="div_button">
      <span class="btn_operate" @click="onClickSubmit">提交</span>
    </div>
  </div>
</template>

<script>
  import DPCell from "../../components/itemPassport/DPCell";
  import {mapMutations, mapState} from "vuex";
  import {lendDevice, lendDeviceToOther, returnDevice} from "../../service/getData";
  import util from "../../util/util";
  export default {
    name: "BorrowDevice",
    components: {DPCell},
    data(){
      return{
        selectTips: '请选择',
        inputTips: '请输入',
        inputColumn:3,
        currValue:'',
        deviceName:'',
        deviceCode:'',
        deviceNumber:'',
        type:'',
        userId:localStorage.getItem('memberId'),

      }
    },
    computed: {
      ...mapState({
        controller: state => state.borrowDeviceStore.borrowDeviceLogic
      }),
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("借入登记");
      }
      catch (e) {

      }
      this.deviceName = this.$route.query.deviceName;
      this.deviceCode = this.$route.query.deviceCode;
      this.deviceNumber = this.$route.query.deviceNumber;
      this.type = this.$route.query.type;
    },
    methods:{
      ...mapMutations('borrowDeviceStore',[
        'setBorrowDeviceLogic'
        ]
      ),
      showStartDatePicker () {
        let currDate = this.controller.borrowDate
        let that = this
        this.$datePickerUtil.showDatePicker(this, 'YYYY-MM-DD HH:mm', '', currDate, (dateStr) => {
          that.controller.borrowDate = dateStr
        })
      },

      showEndDatePicker () {
        // if (this.controller.borrowDate.length === 0) {
        //   this.$vux.toast.show({
        //     type: 'text',
        //     text: '请选择借入时间',
        //     position:'bottom',
        //   })
        //   return
        // }

        let startDate = this.controller.borrowDate
        let currDate = this.controller.backDate
        let that = this
        this.$datePickerUtil.showDatePicker(this, 'YYYY/MM/DD HH:mm', '', currDate, (dateStr) => {
          that.controller.backDate = dateStr
        })
      },
      onClickSubmit(){
        switch (this.type) {
          case 1:
            this.onBorrowDevice();
            break;
          case 2:
            this.onTranslateDevice();
            break;
        }
      },
      onBorrowDevice(){
        if (!util.isNotEmpty(this.controller.backDate)) {
          this.$vux.toast.show({
            text: "请选择预计归还时间",
          })
          return
        }
        let that = this;
        let params = {
          deviceNumber:this.deviceNumber,
          userId:this.userId,
          planReturnTime:that.controller.backDate+":00",
          remark:this.currValue,
        }
        this.$vux.loading.show({
          text: '加载中...'
        })
        lendDevice(params).then(res => {
          that.$vux.loading.hide();
          if (res.resultCode === 200){
            that.inspectForm(res.resultData);
            that.$router.go(-2);
            that.controller.clearBorrowDeviceLogic();

          }
          // 显示
          that.$vux.toast.show({
            text: res.resultDesc,
          })

        }).catch(error => {
          that.$vux.loading.hide();
          console.log(error)
        })
      },
      onTranslateDevice(){
        if (!util.isNotEmpty(this.controller.backDate)) {
          this.$vux.toast.show({
            text: "请选择预计归还时间",
          })
          return
        }
        let that = this;
        let params = {
          deviceNumber:this.deviceNumber,
          userId:this.userId,
          planReturnTime:that.controller.backDate+":00",
          remark:this.currValue,
        }
        this.$vux.loading.show({
          text: '加载中...'
        })
        lendDeviceToOther(params).then(res => {
          console.log(res)
          that.$vux.loading.hide();
          if (res.resultCode === 200){
            that.inspectForm(res.resultData);
            that.$router.go(-2);
            that.controller.clearBorrowDeviceLogic();

          }
          // 显示
          that.$vux.toast.show({
            text: res.resultDesc,
          })

        }).catch(error => {
          that.$vux.loading.hide();
          console.log(error)
        })
      },
      inspectForm(resultData){
        try {
          EbeiPlugins.openNativePage("inspectForm", {
            deviceNumber:this.deviceNumber,
            taskId:resultData.taskId,
            deviceId:resultData.deviceId,
            patrolRuleId:resultData.patrolRuleId,
            deviceIds:resultData.deviceIds,
          });
        }
        catch (e) {
          alert(e)
        }
      }
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
  }
  .div_device_detail{
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: #ffffff;

  }
  .span_dark{
    color: #333333;
    font-size: 14px
  }
  .div_page_detail_bottom{
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    margin-top: 10px;
  }
  .div_remark{
    padding: 10px 10px 10px 10px;
    display: flex; flex-direction: column;
    background-color: white;
  }
  .textarea_value{
    margin-top: 5px;
    font-size: 14px;
    color: #333333;
    resize:none
  }
  .div_button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;

  }

  .btn_operate{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-width: 1px;
    border-color: #269FD5;
    border-style: solid;
    border-radius: 2px;
    height: 40px;
    width: 150px;
    color: #269FD5;
    font-size: 14px;
    margin: 10px;
  }

</style>
