    <template>
      <div class="app-container calendar-list-container">
        <el-row :gutter="20">
          <el-col :span="6">
              <label id="discount">&nbsp;&nbsp;租赁单单头&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            </el-col> 
        </el-row>
        <br/><br/>
        <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">
                    <el-input :disabled="true" v-model="equipmentinfo.eh_code" style="width: 100%;"> </el-input>
                  </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">
                    <el-input :disabled="true" v-model="equipmentinfo.eh_date" style="width: 100%;"> </el-input>
                  </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.orderstatus')" prop="np">
                  <div class="block">
                    <el-input v-if="equipmentinfo.eh_status == '1'" :disabled="true" value="已保存" style="width: 100%;"></el-input>
                    <el-input v-else-if="equipmentinfo.eh_status == '2'" :disabled="true" value="已支付" style="width: 100%;"></el-input>
                    <el-input v-else-if="equipmentinfo.eh_status == '3'" :disabled="true" value="已完成" style="width: 100%;"></el-input>
                  </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_cmname')" prop="ethnicgroup">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfo.eh_cmname" style="width: 100%;"> </el-input>
                  </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_cmphone')">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfo.eh_cmphone" style="width: 100%;"></el-input>
                  </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_cmidcard')">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfo.eh_cmidcard" style="width: 100%;"></el-input>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :xs="23" :sm="23" :md="23" :lg="11" :xl="11">
              <div class="grid-content bg-purple" >
                <el-form-item  :label="$t('equipment.eh_cmaddress')" prop="ethnicgroup">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfo.eh_cmaddress" style="width: 100%;"> </el-input>
                  </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_rental')">
                <div class="block">
                  <el-input :disabled="true" v-model="equipmentinfo.eh_rental" style="width: 100%;"></el-input>
                </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_mortagage')">
                  <el-input :disabled="true" v-model="equipmentinfo.eh_mortagage" style="width: 100%;"></el-input>
                </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.orderuser')" prop="ethnicgroup">
                  <el-input :disabled="true" v-model="equipmentinfo.eh_usercode" style="width: 100%;"> </el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
      </el-form>
        <label id="discount">租赁单明细</label>
        <br/>
          <br/>
        <center>
        <el-table :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 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.ed_enddate')">
          <template slot-scope="scope">
            <span >{{scope.row.ed_enddate}}</span>
          </template>
          </el-table-column>
        </el-table>
        </center>
        <div class="pagination-container" align="left">
        <!-- <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="page" :page-sizes="[10,20,30, 50]" :page-size="limit"
                      layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination> -->
        <el-pagination
                  small
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="limit"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="page">
                </el-pagination>
      </div>
      <br/>
      <el-row :gutter="24">
          <el-col :span="6">
              <label id="discount">&nbsp;&nbsp;支付明细&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            </el-col> 
        </el-row>
        <el-row :gutter="14">
          <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.cp_paytype')">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfopay.cp_paytype" style="width: 100%;"> </el-input>
                  </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">
                    <el-input :disabled="true" v-model="equipmentinfopay.cp_payamount" style="width: 100%;"> </el-input>
                  </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_discount')" prop="np">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfopay.cp_discount"> </el-input>
                  </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.cp_paydate')">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfopay.cp_date" style="width: 100%;"> </el-input>
                  </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.orderuser')" prop="np">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfopay.cp_usercode" style="width: 100%;"> </el-input>
                  </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_comments')" >
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinfopay.cp_comments" style="width: 100%;"> </el-input>
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
      </el-form>
      <el-row :gutter="24">
          <el-col :span="6">
              <label id="discount">&nbsp;&nbsp;返还信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            </el-col> 
        </el-row>
        <el-row :gutter="24">
          <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.return_mortagage')">
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinforeturn.er_return_mortagage" style="width: 100%;"> </el-input>
                  </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_date')" >
                  <div class="block">
                    <el-input :disabled="true" v-model="equipmentinforeturn.er_date" style="width: 100%;"> </el-input>
                  </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.orderuser')" prop="np">
                <el-input :disabled="true" v-model="equipmentinforeturn.er_usercode" style="width: 100%;"> </el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          </el-form>
          <el-row :gutter="24">
          <el-col :span="6">
              <label id="discount">&nbsp;&nbsp;支付凭证&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            </el-col> 
        </el-row>
        <br/>
        <el-form ref="addForm" :model="equipmentinfo" label-position="left" label-width="120px"
            style='width: 100%'>
        <el-row :gutter="24">
            <el-col :span="1">&nbsp;</el-col>
          <el-col :span="8">
            <div class="block" style="width: 1010px;">
            <el-upload
              action=""
              :show-file-list="true"
              :disabled="true"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :file-list="fileListvoucher" style="">
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            </div>
            </el-col> 
        </el-row>
        </el-form>
        
      </div>
    </template>
    <script>
      import { fetchPv, updatejlServiceUser, updateArticle, queryPayPhoto } from '@/api/article'
      import waves from '@/directive/waves' // 水波纹指令
      import { parseTime } from '@/utils'
      import { getEquipmentTypes, queryEquipmenteHireDetail, getEquipmenteHireHead, selectCustomerPay, selectEquipmentReturn } from '@/api/equipmentapi'
      import Fullcalendar from 'vue-fullcalendar'
      var demoEvents = []
      // arr to obj ,such as { CN : "China", US : "USA" }
      export default {
        components: { Fullcalendar },
        name: 'equipmenthireshow',
        directives: {
          waves
        },
        data() {
          return {
            fcEvents: demoEvents,
            calendarlist: {
              title: undefined,
              start: undefined,
              end: undefined,
              cssClass: undefined
            },
            dialogImageUrl: undefined,
            dialogVisible: false,
            certificateKey: 0,
            trainkey: 0,
            list: null,
            total: null,
            listLoading: true,
            page: 1,
            limit: 10,
            listQuery: {
              page: 1,
              limit: 10,
              id: 1
            },
            fileListvoucher: [],
            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
            },
            seachQuery: {
              eh_code: null,
              page: 1,
              limit: 10
            },
            equipmentinfopay: {
              cp_paytype: null,
              cp_payamount: null,
              cp_discount: null,
              cp_comments: null,
              cp_usercode: null,
              cp_date: null
            },
            queryequipmentpay: {
              cp_orderno: null
            },
            equipmentinforeturn: {
              er_return_mortagage: null,
              er_usercode: null,
              er_date: null
            },
            queryequipmentreturn: {
              eh_code: null
            },
            queryMMstock: {
              servant_code: undefined
            },
            listEquipmentLog: {
              ei_code: null,
              page: 1,
              limit: 10
            },
            queryvoucher: {
              eh_code: null
            },
            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
            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.queryequipmentpay.cp_orderno = this.$route.params.eh_code
            selectCustomerPay(this.queryequipmentpay).then(response9 => {
              if (response9.data.length !== 0) {
                this.equipmentinfopay.cp_paytype = response9.data[0].cp_paytype
                this.equipmentinfopay.cp_payamount = response9.data[0].cp_payamount
                this.equipmentinfopay.cp_discount = response9.data[0].cp_discount
                this.equipmentinfopay.cp_comments = response9.data[0].cp_comments
                this.equipmentinfopay.cp_usercode = response9.data[0].cp_usercode
                this.equipmentinfopay.cp_date = response9.data[0].cp_date
              }
            })
            this.queryequipmentreturn.eh_code = this.$route.params.eh_code
            selectEquipmentReturn(this.queryequipmentreturn).then(response1 => {
              if (response1.data.length !== 0) {
                this.equipmentinforeturn.er_return_mortagage = response1.data[0].er_return_mortagage
                this.equipmentinforeturn.er_usercode = response1.data[0].er_usercode
                this.equipmentinforeturn.er_date = response1.data[0].er_date
              }
            })
            this.queryvoucher.eh_code = this.$route.params.eh_code
            queryPayPhoto(this.queryvoucher).then(response7 => {
              this.fileListvoucher = response7.data
            })
          },
          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]
              }
            }))
          },
          cancelEdit() {
            this.getList()
          },
          resetForm() {
            this.addmminfo.truename = this.addmminfocancel.truename
            this.addmminfo.idcard = this.addmminfocancel.idcard
            this.addmminfo.seniority = this.addmminfocancel.seniority
            this.addmminfo.babynumber = this.addmminfocancel.babynumber
            this.addmminfo.constellation = this.addmminfocancel.constellation
            this.addmminfo.zodiac = this.addmminfocancel.zodiac
            this.addmminfo.ethnicgroup = this.addmminfocancel.ethnicgroup
            this.addmminfo.education = this.addmminfocancel.education
            this.addmminfo.height = this.addmminfocancel.height
            this.addmminfo.marriage = this.addmminfocancel.marriage
            this.addmminfo.highlight = this.addmminfocancel.highlight
            this.addmminfo.weight = this.addmminfocancel.weight
            this.addmminfo.citycode = this.addmminfocancel.citycode
            this.addmminfo.gender = this.addmminfocancel.gender
            this.addmminfo.np = this.addmminfocancel.np
            this.addmminfo.status = this.addmminfocancel.status
            this.addmminfocancel.status = this.addmminfocancel.status
            this.addmminfo.cityname = this.addmminfocancel.cityname
          },
          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()
            }
          },
          handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
          },
          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;
    }
    #discount{
    font-size: 0.6rem;
    color: #606266;
    font-weight: 700;
  }
  @media only screen and (min-width:768px){
    #discount{
      font-size: 0.8rem;
      color: #606266;
      font-weight: 700;
    }
  }
  @media only screen and (min-width:992px){
    #discount{
      font-size:0.8rem;
      color: #606266;
      font-weight: 700;
    }
  }
  @media only screen and (min-width:2000px){
    #discount{
      font-size:0.9rem;
      color: #606266;
      font-weight: 700;
    }
  }

    </style>