    <template>
      <div class="app-container calendar-list-container">
        <el-row :gutter="10">
          <el-col :span="6">&nbsp;</el-col>
        </el-row>
        <el-form ref="addForm" :model="equipmentinfo" label-position="left" label-width="120px"
            style='width: 100%'>
            <el-row :gutter="24">
            <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.orderno')">
                  <div class="block">
                    <span style="width:100%;">{{equipmentinfo.eh_code}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="23" :sm="23" :md="11" :lg="6" :xl="6">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.orderdate')">
                  <div class="block">
                    <span style="width:100%;">{{equipmentinfo.eh_date}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="23" :sm="23" :md="12" :lg="11" :xl="11">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.eh_cmaddress')" >
                  <div class="block">
                    <span style="width:100%;">{{equipmentinfo.eh_cmaddress}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.eh_cmname')" prop="ethnicgroup">
                  <div class="block">
                    <span style="width:100%;">{{equipmentinfo.eh_cmname}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>

            <el-col :xs="23" :sm="23" :md="11" :lg="6" :xl="6">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.eh_cmphone')">
                  <div class="block">
                    <span style="width:100%;">{{equipmentinfo.eh_cmphone}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.eh_cmidcard')">
                  <div class="block">
                    <span style="width:100%;">{{equipmentinfo.eh_cmidcard}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="23" :sm="23" :md="11" :lg="5" :xl="5">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.eh_returrental')">
                  <div class="block">
                    <span style="color:#ff4949; font-size: 30px;width:100%;">￥{{equipmentinfo.eh_rental}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            </el-row>
            <el-row :gutter="24">
            <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.eh_returnmortagage')">
                  <div class="block">
                    <span style="color:#ff4949; font-size: 30px;width:100%;">￥{{equipmentinfo.eh_mortagage}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            
            <el-col :xs="23" :sm="23" :md="11" :lg="6" :xl="6">
              <div class="grid-content bg-purple">
                <el-form-item  :label="$t('equipment.cp_payamount')">
                  <div class="block">
                    <span style="color:#ff4949; font-size: 30px;width:100%;">￥{{CustomerPay.cp_payamount}}</span>
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
      </el-form>
        <center>
        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中......" border fit
                  highlight-current-row
                  style="width: 100%" >
          <el-table-column type="index" align="center" :label="$t('table.seq')" width="64">
          </el-table-column>
          <el-table-column align="center" :label="$t('equipment.type')">
            <template slot-scope="scope">
              <span>{{scope.row.et_type}}</span>
            </template>
          </el-table-column>
          <!--edit line-->
          <el-table-column align="center" :label="$t('equipment.id')" value-format="yyyy/MM/dd" >
            <template slot-scope="scope">
                <span>{{scope.row.ed_emcode}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('equipment.rent')">
          <template slot-scope="scope">
            <span >{{scope.row.ei_rent}}</span>
          </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('equipment.ei_mortagage')">
          <template slot-scope="scope">
            <span >{{scope.row.ei_mortagage}}</span>
          </template>
          </el-table-column>
          <el-table-column :label="$t('equipment.days')">
              <template slot-scope="scope">
                <span >{{scope.row.ed_days}}</span>
                <el-input-number v-model="addequipmentreturn.er_days" :controls="false" size="small" disabled></el-input-number>
              </template>
            </el-table-column>
          <el-table-column align="center" :label="$t('equipment.ed_startdate')">
          <template slot-scope="scope">
            <span >{{scope.row.ed_startdate}}</span>
          </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('equipment.real_enddate')" width="215">
          <template slot-scope="scope">
            <el-date-picker v-model="addequipmentreturn.er_date" value-format="yyyy-MM-dd" @change="calculateReal(scope.$index)" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" style="width: 180px;">
            </el-date-picker>
          </template>
          </el-table-column>
        </el-table>
        </center>
        <br/>
        <el-form :rules="rules" ref="addFormReturn" :model="addequipmentreturn" label-position="left" label-width="100px"
                style='width:100%'>
              <el-row :gutter="24" >
                <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
                  <div class="grid-content bg-purple" >
                    <el-form-item  :label="$t('equipment.return_mortagage')"  prop="er_return_mortagage" >
                      <div class="block">
                        <el-input-number style="width:100%;" v-model="addequipmentreturn.er_return_mortagage" controls-position="right" :max="999999"></el-input-number>
                      </div>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :xs="23" :sm="23" :md="11" :lg="6" :xl="6">
                  <div class="grid-content bg-purple">
                    <el-form-item  :label="$t('equipment.return_rental')">
                      <div class="block">
                        <el-input-number style="width:100%;" v-model="addequipmentreturn.er_return_rental" controls-position="right" :max="999999" ></el-input-number>
                      </div>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :xs="23" :sm="23" :md="12" :lg="6" :xl="6">
                  <div class="grid-content bg-purple" >
                    <el-form-item  :label="$t('equipment.cp_comments')" >
                      <div class="block">
                        <el-input style="width: 100%;" class="filter-item"
                          v-model="addequipmentreturn.er_return_remarks" :maxlength = 20>
                      </el-input>
                      </div>
                    </el-form-item>
                  </div>
                </el-col>
              </el-row>
          </el-form>
        <div slot="footer" class="dialog-footer" align="center" >
          <el-button  type="primary" @click="equipmentreturnadd()">{{$t('table.confirm')}}</el-button>
          <el-button @click="resetForm()">{{$t('navbar.reset')}}</el-button>
        </div>
      </div>
    </template>
    <script>
      import { fetchPv, updatejlServiceUser, updateArticle, createArticle } from '@/api/article'
      import waves from '@/directive/waves' // 水波纹指令
      import { parseTime } from '@/utils'
      import { getEquipmentTypes, queryEquipmenteHireDetail, insertEquipmentReturn, getEquipmenteHireHead, selectCustomerPay } from '@/api/equipmentapi'
      import Fullcalendar from 'vue-fullcalendar'
      var demoEvents = []
      // arr to obj ,such as { CN : "China", US : "USA" }
      export default {
        components: { Fullcalendar },
        name: 'equipmentreturn',
        directives: {
          waves
        },
        data() {
          return {
            tableKey: 0,
            fcEvents: demoEvents,
            calendarlist: {
              title: undefined,
              start: undefined,
              end: undefined,
              cssClass: undefined
            },
            certificateKey: 0,
            trainkey: 0,
            list: null,
            total: null,
            listLoading: true,
            page: 1,
            limit: 10,
            listQuery: {
              page: 1,
              limit: 10,
              id: 1
            },
            rules: {
              er_return_mortagage: [{ required: true, message: '请输入返还押金!', trigger: 'blur' }]
            },
            pickerOptions1: {
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  picker.$emit('pick', new Date())
                }
              }, {
                text: '昨天',
                onClick(picker) {
                  const date = new Date()
                  date.setTime(date.getTime() - 3600 * 1000 * 24)
                  picker.$emit('pick', date)
                }
              }, {
                text: '一周前',
                onClick(picker) {
                  const date = new Date()
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                  picker.$emit('pick', date)
                }
              }]
            },
            equipmentinfo: {
              eh_cmaddress: undefined,
              eh_cmidcard: undefined,
              eh_cmname: undefined,
              eh_cmphone: undefined,
              eh_code: undefined,
              eh_date: undefined,
              eh_detail: undefined,
              eh_mortagage: undefined,
              eh_rental: undefined,
              eh_status: undefined,
              eh_usercode: undefined
            },
            addequipmentreturn: {
              er_return_mortagage: null,
              er_return_rental: null,
              er_return_remarks: null,
              eh_code: null,
              er_usercode: null,
              er_date: null,
              er_days: 0
            },
            seachQuery: {
              eh_code: null,
              page: 1,
              limit: 10
            },
            queryMMstock: {
              servant_code: undefined
            },
            queryCustomerPay: {
              cp_orderno: undefined
            },
            CustomerPay: {
              cp_payamount: null,
              cp_comments: null
            },
            listEquipmentLog: {
              ei_code: null,
              page: 1,
              limit: 10
            },
            showReviewer: false,
            trainoptions: '',
            modifyresult: '',
            train_name: '',
            visible2: false,
            deltraininfo: {
              id: undefined
            },
            dialogFormVisible: false,
            dialogStatus: '',
            textMap: {
              update: 'Edit',
              create: '添加月嫂'
            },
            dialogPvVisible: false,
            pvData: [],
            downloadLoading: false
          }
        },
        created() {
          this.getlist()
          getEquipmentTypes().then(response8 => {
            this.equipmentTypesOptions = response8.data
          })
          this.queryMMstock.servant_code = this.$route.params.userId
        },
        methods: {
          getlist() {
            this.seachQuery.eh_code = this.$route.params.eh_code
            this.queryCustomerPay.cp_orderno = this.$route.params.eh_code
            getEquipmenteHireHead(this.seachQuery).then(response => {
              this.equipmentinfo.eh_cmaddress = response.data.eh_cmaddress
              this.equipmentinfo.eh_cmidcard = response.data.eh_cmidcard
              this.equipmentinfo.eh_cmname = response.data.eh_cmname
              this.equipmentinfo.eh_cmphone = response.data.eh_cmphone
              this.equipmentinfo.eh_code = response.data.eh_code
              this.equipmentinfo.eh_date = response.data.eh_date
              this.equipmentinfo.eh_mortagage = response.data.eh_mortagage
              this.equipmentinfo.eh_rental = response.data.eh_rental
              this.equipmentinfo.eh_status = response.data.eh_status
              this.equipmentinfo.eh_usercode = response.data.eh_usercode
            })
            this.listLoading = true
            queryEquipmenteHireDetail(this.seachQuery).then(response => {
              this.list = response.data.items
              this.total = response.data.total
              this.listLoading = false
              this.recalculation(this.list)
            })
            selectCustomerPay(this.queryCustomerPay).then(response9 => {
              this.CustomerPay.cp_payamount = response9.data[0].cp_payamount
            })
          },
          recalculation(list) {
            var rent = 0
            var days = 0
            for (var i = 0, l = list.length; i < l; i++) {
              if (list[i].ed_enddate === undefined) {
                rent = 0
              } else {
                var day1 = new Date(list[i].ed_startdate)
                var day2 = new Date(list[i].ed_enddate)
                var mday1 = new Date(day1.getFullYear() + '/' + (day1.getMonth() + 1) + '/' + day1.getDate())
                var mday2 = new Date(day2.getFullYear() + '/' + (day2.getMonth() + 1) + '/' + day2.getDate())
                if (mday2.getTime() - mday1.getTime() === 1) {
                  rent = rent + 0
                } else {
                  days = (mday2.getTime() - mday1.getTime()) / (24 * 60 * 60 * 1000)
                  rent = rent + parseInt(days) * list[i].ei_rent
                }
              }
            }
            this.addequipmentreturn.er_return_rental = rent
            this.addequipmentreturn.er_return_mortagage = this.CustomerPay.cp_payamount - rent
          },
          handleModifyStatus(row, status) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            row.status = status
          },
          handleCreate() {
            this.resetmminfo()
            this.dialogStatus = 'create'
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['addTrains'].clearValidate()
            })
          },
          handleUpdate(row) {
            this.temp = Object.assign({}, row) // copy obj
            this.temp.timestamp = new Date(this.temp.timestamp)
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          },
          updateData() {
            this.$refs['dataForm'].validate((valid) => {
              if (valid) {
                const tempData = Object.assign({}, this.temp)
                tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
                updateArticle(tempData).then(() => {
                  for (const v of this.list) {
                    if (v.id === this.temp.id) {
                      const index = this.list.indexOf(v)
                      this.list.splice(index, 1, this.temp)
                      break
                    }
                  }
                  this.dialogFormVisible = false
                  this.$notify({
                    title: '成功',
                    message: '更新成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              }
            })
          },
          handleDelete(row) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          },
          handleFetchPv(pv) {
            fetchPv(pv).then(response => {
              this.pvData = response.data.pvData
              this.dialogPvVisible = true
            })
          },
          handleDownload() {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
              const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
              const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
              const data = this.formatJson(filterVal, this.list)
              excel.export_json_to_excel(tHeader, data, 'table-list')
              this.downloadLoading = false
            })
          },
          formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
              if (j === 'timestamp') {
                return parseTime(v[j])
              } else {
                return v[j]
              }
            }))
          },
          calculateReal(index) {
            var rent = 0
            var days = 0
            var day1 = new Date(this.list[index].ed_startdate)
            var day2 = new Date(this.addequipmentreturn.er_date)
            // -就有小数 /就没有?
            var mday1 = new Date(day1.getFullYear() + '/' + (day1.getMonth() + 1) + '/' + day1.getDate())
            var mday2 = new Date(day2.getFullYear() + '/' + (day2.getMonth() + 1) + '/' + day2.getDate())
            if (mday2.getTime() - mday1.getTime() === 1) {
              rent = rent + 0
            } else {
              days = (mday2.getTime() - mday1.getTime()) / (24 * 60 * 60 * 1000)
              rent = rent + parseInt(days) * this.list[index].ei_rent
            }
            this.addequipmentreturn.er_days = days
            this.addequipmentreturn.er_return_rental = rent
            this.addequipmentreturn.er_return_mortagage = this.CustomerPay.cp_payamount - rent
          },
          cancelEdit() {
            this.getList()
          },
          resetForm() {
            this.getlist()
          },
          handleSizeChange(val) {
            this.limit = val
            if (this.queryType === 'list') {
              this.listEquipmentLog.limit = val
              this.listEquipmentLog.page = this.page
              this.getList()
            } else {
              this.listEquipmentLog.limit = val
              this.listEquipmentLog.page = this.page
              this.handleFilter()
            }
          },
          handleCurrentChange(val) {
            this.page = val
            if (this.queryType === 'list') {
              this.listEquipmentLog.limit = this.limit
              this.listEquipmentLog.page = val
              this.getList()
            } else {
              this.listEquipmentLog.limit = this.limit
              this.listEquipmentLog.page = val
              this.handleFilter()
            }
          },
          equipmentreturnadd() {
            this.$refs['addFormReturn'].validate((valid) => {
              if (valid) {
                this.addequipmentreturn.eh_code = this.$route.params.eh_code
                this.addequipmentreturn.er_usercode = this.$store.state.user.introduction
                this.listLoading = true
                insertEquipmentReturn(this.addequipmentreturn).then(response => {
                  if (response.data === 1) {
                    this.getlist()
                    this.listLoading = false
                    createArticle(this.temp).then(() => {
                      // this.list.unshift(this.temp)
                      this.dialogFormVisible = false
                      this.$notify({
                        title: '成功',
                        message: '设备返还成功！',
                        type: 'success',
                        duration: 2000
                      })
                      this.$router.push({ name: 'equipmenthire' })
                    })
                  } else if (response.data === 2) {
                    this.listLoading = false
                    createArticle(this.temp).then(() => {
                      // this.list.unshift(this.temp)
                      this.dialogFormVisible = false
                      this.$notify({
                        title: '失败',
                        message: '设备已经返还！',
                        type: 'error',
                        duration: 2000
                      })
                    })
                  } else {
                    this.listLoading = false
                  }
                })
              }
            })
          },
          confirmEdit() {
            var newcityname = ''
            for (var value of this.addmminfo.cityname) {
              newcityname = newcityname + value + ','
            }
            if (newcityname != null) {
              this.addmminfo.cityname = newcityname.substring(0, newcityname.length - 1)
            }
            this.addmminfo.id = this.$route.params.userId
            updatejlServiceUser(this.addmminfo).then(response => {
              if (response.data < 1) {
                this.$notify({
                  title: '失败',
                  message: '更新失败',
                  type: 'warning',
                  duration: 2000
                })
              } else {
                this.getlist()
                this.$notify({
                  title: '成功',
                  message: '更新成功',
                  type: 'success',
                  duration: 2000
                })
              }
            })
          }
        }
      }
    </script>
    <style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
  </style>
  <style scoped>
    .edit-input {
      padding-right: 100px;
    }
    .cancel-btn {
      position: absolute;
      right: 15px;
      top: 10px;
    }
    .full-calendar-body .dates .dates-events .events-week .events-day .event-box .event-item{
      background-color:limegreen;
    }
    </style>
    <style cssClass>
    .family {
      background-color:darkgoldenrod
    }
    .success {
      background-color: #67c23a;
    }
    .service {
      background-color: #409eff;
    }
    .stop {
      background-color: #e6a23c;
    }
    .freeze {
      background-color: #f56c6c;
    }
    .center {
      width: 960px;
      margin-left: auto;
      margin-right: auto;
    }

    </style>