            <template>
              <div class="app-container calendar-list-container">
                <el-row :gutter="20">
                  <el-col :span="6">
                      <label>&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: 1200px;margin-left:20px'>
                    <el-row :gutter="24" style="margin-bottom: 15px;">
                    <el-col :span="8">
                      <div class="grid-content bg-purple" style="width: 300px;">
                        <el-form-item  :label="$t('equipment.id')" style="width: 300px;">
                          <div class="block">
                        <el-input :disabled="true" v-model="equipmentinfo.ei_code" style="width: 220px;"> </el-input>
                          </div>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item  :label="$t('equipment.type')" >
                          <el-select  :disabled="true" class="filter-item" v-model="equipmentinfo.et_code" filterable  style="width: 220px;">
                                <el-option v-for="item in equipmentTypesOptions" :key="item.et_code" :label="item.et_name" :value="item.et_code">
                                </el-option>
                                </el-select>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple" style="width: 300px;">
                        <el-form-item  :label="$t('equipment.date')" prop="np">
                         <el-input :disabled="true" v-model="equipmentinfo.ei_date" style="width: 220px;"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row :gutter="24" style="margin-bottom: 15px;">  
                    <el-col :span="8">
                      <div class="grid-content bg-purple" style="width: 300px;">
                        <el-form-item  :label="$t('equipment.status')" prop="ethnicgroup">
                          <el-input v-if="equipmentinfo.ei_status == '1'" :disabled="true" value = "可租赁" style="width: 220px;"></el-input>
                          <el-input v-if="equipmentinfo.ei_status == '2'" :disabled="true" value = "租赁中" style="width: 220px;"></el-input>
                          <el-input v-if="equipmentinfo.ei_status == '3'" :disabled="true" value = "不可租赁" style="width: 220px;"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple">
                        <el-form-item  :label="$t('equipment.rent')">
                          <el-input :disabled="true" v-model="equipmentinfo.ei_rent" style="width: 220px;"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
              </el-form>
              <br/>
                <label>操作日志</label>
                 <br/>
                  <br/>
                <center>
                <el-table :data="listlog" v-loading="listLoading" element-loading-text="加载中......" border fit
                          highlight-current-row
                          style="width: 77%">
                  <el-table-column type="index" align="center" :label="$t('table.seq')" width="70">
                  </el-table-column>
                  <el-table-column align="center" :label="$t('userlog.username')" width="190">
                    <template slot-scope="scope">
                      <span>{{scope.row.el_user}}</span>
                    </template>
                  </el-table-column>
                  <!--edit line-->
                  <el-table-column align="center" :label="$t('userlog.date')" width="247" value-format="yyyy/MM/dd" >
                    <template slot-scope="scope">
                        <span>{{scope.row.el_date}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="300px" align="center" :label="$t('userlog.type')"  width="190"  >
                  <template slot-scope="scope">
                    <span v-if="scope.row.el_status == '1' " >入库</span>
                    <span v-else-if="scope.row.el_status == '2' " >租赁</span>
                    <span v-else-if="scope.row.el_status == '3' " >返还</span>
                    <span v-else-if="scope.row.el_status == '4' " >修改</span>
                  </template>
                  </el-table-column>
                  <el-table-column min-width="300px" align="center" :label="$t('equipment.billno')"  width="314"  >
                  <template slot-scope="scope">
                    <span >{{scope.row.el_billno}}</span>
                  </template>
                  </el-table-column>
                </el-table>
                </center>
                <div class="pagination-container">
                <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>
              </div>
              </div>
            </template>
            <script>
              import { fetchPv, updatejlServiceUser, updateArticle } from '@/api/article'
              import waves from '@/directive/waves' // 水波纹指令
              import { parseTime } from '@/utils'
              import { getEquipmentTypes, getEquipmentInfoEicode, getEquipmentLogs } from '@/api/equipmentapi'
              import Fullcalendar from 'vue-fullcalendar'
              var demoEvents = []
              // arr to obj ,such as { CN : "China", US : "USA" }
              export default {
                components: { Fullcalendar },
                name: 'equipmentshow',
                directives: {
                  waves
                },
                data() {
                  return {
                    fcEvents: demoEvents,
                    calendarlist: {
                      title: undefined,
                      start: undefined,
                      end: undefined,
                      cssClass: undefined
                    },
                    marriageOptions: [{ value: 'y', label: '已婚' }, { value: 'n', label: '未婚' }],
                    educationOptions: [{ value: '1', label: '初中' }, { value: '2', label: '高中' }, { value: '3', label: '大专' }, { value: '4', label: '大本' }, { value: '5', label: '硕士' }, { value: '6', label: '博士' }],
                    sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
                    statusOptions: [{ label: '正常', value: '1' }, { label: '服务中', value: '2' }, { label: '暂停接单', value: '3' }, { label: '封存', value: '4' }],
                    genderOptions: [{ label: 1, value: 1 }, { label: 2, value: 2 }, { label: 3, value: 3 }, { label: 4, value: 4 }, { label: 5, value: 5 }],
                    ethnicgroupptions: '',
                    provinceoptions: [],
                    branchesOptions: [],
                    equipmentTypesOptions: [],
                    constellationoptions: [],
                    zodiacoptions: [],
                    certificateKey: 0,
                    trainkey: 0,
                    listlog: null,
                    total: null,
                    listLoading: true,
                    idcardquery: {
                      idcard: null
                    },
                    checkidcard: {
                      idcard: undefined
                    },
                    page: 1,
                    limit: 10,
                    listQuery: {
                      page: 1,
                      limit: 10,
                      id: 1
                    },
                    equipmentinfo: {
                      et_code: undefined,
                      ei_code: undefined,
                      ei_rent: undefined,
                      ei_status: undefined,
                      ei_date: undefined
                    },
                    seachQuery: {
                      ei_code: null,
                      page: 1,
                      limit: 10
                    },
                    mminfo: {
                      id: null,
                      name: null,
                      servant_code: null
                    },
                    queryMMstock: {
                      servant_code: undefined
                    },
                    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.ei_code = this.$route.params.ei_code
                    getEquipmentInfoEicode(this.seachQuery).then(response => {
                      this.equipmentinfo.et_code = Number(response.data.et_code)
                      this.equipmentinfo.ei_code = response.data.ei_code
                      this.equipmentinfo.ei_rent = response.data.ei_rent
                      this.equipmentinfo.ei_status = response.data.ei_status
                      this.equipmentinfo.ei_date = response.data.ei_date
                    })
                    this.listEquipmentLog.ei_code = this.$route.params.ei_code
                    this.listLoading = true
                    getEquipmentLogs(this.listEquipmentLog).then(response => {
                      this.listlog = response.data.items
                      this.total = response.data.total
                      this.listLoading = false
                    })
                  },
                  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.listEquipmentLog.limit = val
                    this.getlist()
                  },
                  handleCurrentChange(val) {
                    this.listEquipmentLog.page = val
                    this.getlist()
                  },
                  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>