      <template>
        <div class="app-container calendar-list-container">
          <div class="filter-container">
            <el-form :rules="rules" ref="emaddForm" :model="addeequipmenthire" label-position="left" label-width="120px"
                    style='margin-left:20px'>
              <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 style="width: 100%;" :disabled="true" class="filter-item" v-model="addeequipmenthire.eh_code" :maxlength = 20>
                      </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 style="width: 100%;" :disabled="true" class="filter-item" v-model="addeequipmenthire.eh_date" :maxlength = 20>
                      </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')" >
                     <div class="block">
                      <el-input style="width: 100%;" :disabled="true" class="filter-item" v-model="addeequipmenthire.eh_usercode" :maxlength = 20>
                      </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_cmphone')" prop="eh_cmphone">
                    <div class="block">
                      <el-input style="width: 100%;" class="filter-item" v-model="addeequipmenthire.eh_cmphone" :maxlength = 20>
                      </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_cmidcard')" prop="eh_cmidcard">
                    <div class="block">
                      <el-input style="width: 100%;" class="filter-item" v-model="addeequipmenthire.eh_cmidcard" :maxlength = 20>
                      </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_cmaddress')" prop="eh_cmaddress" >
                    <div class="block">
                      <el-input style="width: 100%;" class="filter-item" v-model="addeequipmenthire.eh_cmaddress" :maxlength = 80>
                      </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.eh_cmname')" prop="eh_cmname">
                    <div class="block">
                      <el-input style="width: 100%;" class="filter-item" v-model="addeequipmenthire.eh_cmname" :maxlength = 20>
                      </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_mortagage')" prop="eh_mortagage">
                    <div class="block">
                      <span style="color:#ff4949; font-size: 30px;">￥{{addeequipmenthire.eh_mortagage}}</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_rental')" prop="eh_rental">
                    <div class="block">
                      <span style="color:#ff4949; font-size: 30px;">￥{{addeequipmenthire.eh_rental}}</span>
                    </div>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
              <div align="left">
              <el-button class="filter-item"  @click="tableadd" type="primary" icon="el-icon-plus">{{'增加设备'}}
              </el-button>
              </div>
              </el-col>
            </el-row>
            </el-form>
          </div>
          <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="50">
          </el-table-column>
            <el-table-column align="center" :label="$t('equipment.type')" width="260" prop="et_code" >
              <template slot-scope="scope">
                <el-select class="filter-item" :value="list.et_type" v-model="scope.row.et_typeid" filterable 
                style="width: 240px;" @change="selectMortagage(scope.$index, scope.row)">
                    <el-option v-for="item in equipmentTypesOptions" :key="item.et_code" :label="item.et_name" :value="item.et_code">
                    </el-option>
                    </el-select>
              </template>
            </el-table-column> 
            <el-table-column align="center" :label="$t('equipment.id')">
              <template slot-scope="scope">
                <el-input v-model="scope.row.ed_emcode" :value="list.ed_emcode" @blur="checkEquipmentHire(scope.$index, scope.row)">
                    </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" :label="$t('equipment.rent')" width="160" >
              <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.days')">
            <template slot-scope="scope">
                  <el-input-number :value="list.ed_days" v-model="scope.row.ed_days" controls-position="right"  @blur="selectRent(scope.$index, scope.row)"></el-input-number>
            </template>
          </el-table-column>
            <el-table-column align="center" :label="$t('table.actions')" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <a href="#" @click="equipmentdelete(scope.$index, scope.row)"><el-tag>{{$t('table.delete')}}</el-tag></a> 
            </template>
          </el-table-column>
          </el-table>
          <br/>
          <div slot="footer" class="dialog-footer" align="center" style="width: 100%">
              <el-button type="primary" @click="updateEquipmentHirea">{{$t('table.save')}}</el-button>
              <el-button @click="resetForm()">{{$t('navbar.reset')}}</el-button>
            </div>
        </div>
      </template>
      <script>
        import { fetchPv } from '@/api/article'
        import { getEquipmentTypes, getEquipmentAmount, updateEquipmenteHireHead, checkEquipmentHire, queryEquipmenteHireDetail, getEquipmenteHireHead } from '@/api/equipmentapi'
        import waves from '@/directive/waves' // 水波纹指令
        import { parseTime } from '@/utils'
        import regex from '@/utils/regex'
        // arr to obj ,such as { CN : "China", US : "USA" }
        export default {
          name: 'equipmenthireedit',
          directives: {
            waves
          },
          data() {
            return {
              tableKey: 0,
              list: [{
                et_typeid: null,
                ed_emcode: null,
                ed_days: 0,
                ei_rent: 0,
                ei_mortagage: 0
              }],
              page: 1,
              limit: 10,
              queryType: 'list',
              listLoading: true,
              listQuery: {
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
              },
              checkdate: {
                ei_code: undefined
              },
              seachQuery: {
                eh_code: null,
                page: 1,
                limit: 10
              },
              idcardquery: {
                idcard: null
              },
              equipmentdel: {
                id: undefined
              },
              checksalt: {
                salt: undefined
              },
              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)
                  }
                }]
              },
              rules: {
                eh_cmphone: [{ required: true, message: '请输入用户手机号！', trigger: 'blur' },
                  { pattern: regex.REPHONE, message: '手机号格式错误', trigger: 'blur' }],
                eh_cmidcard: [{ required: true, message: '请输入用户身份证号！', trigger: 'blur' },
                  { pattern: regex.IDCARD, message: '身份证格式不正确！', trigger: 'blur' }],
                eh_cmaddress: [{ required: true, message: '请输入用户地址！', trigger: 'blur' }],
                eh_cmname: [{ required: true, message: '请输入用户姓名！', trigger: 'blur' }],
                et_code: [{ required: true, trigger: 'blur' }]
              },
              sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
              statusOptions: [{ label: '可租赁', key: 1 }, { label: '租赁中', key: 2 }, { label: '不可租赁', key: 3 }],
              branchesOptions: [],
              citysOptions: [],
              equipmentTypesOptions: [],
              packageoptions: [],
              mmsoptions: [],
              showReviewer: false,
              addeequipmenthire: {
                eh_code: undefined,
                eh_date: undefined,
                eh_status: undefined,
                eh_mortagage: 0,
                eh_rental: 0,
                eh_cmname: null,
                eh_cmphone: null,
                eh_cmidcard: null,
                eh_cmaddress: null,
                eh_usercode: null,
                eh_detail: []
              },
              eh_detail: {
                ed_type: null,
                ed_emcode: null,
                ed_days: 0
              },
              queryAmount: {
                et_type: null
              },
              equipmentHirecheck: {
                ei_code: null
              },
              ethnicgroupptions: '',
              provinceoptions: '',
              dialogFormVisible: false,
              dialogFormVisiblemore: false,
              checkidcard: {
                idcard: undefined
              },
              dialogStatus: '',
              textMap: {
                update: 'Edit',
                create: '添加月嫂'
              },
              dialogPvVisible: false,
              pvData: [],
              updateStatus: {
                id: undefined,
                status: undefined
              },
              downloadLoading: false
            }
          },
          created() {
            this.getList()
            getEquipmentTypes().then(response => {
              this.equipmentTypesOptions = response.data
            })
          },
          methods: {
            getList() {
              this.seachQuery.eh_code = this.$route.params.eh_code
              getEquipmenteHireHead(this.seachQuery).then(response => {
                this.addeequipmenthire.eh_cmaddress = response.data.eh_cmaddress
                this.addeequipmenthire.eh_cmidcard = response.data.eh_cmidcard
                this.addeequipmenthire.eh_cmname = response.data.eh_cmname
                this.addeequipmenthire.eh_cmphone = response.data.eh_cmphone
                this.addeequipmenthire.eh_code = response.data.eh_code
                this.addeequipmenthire.eh_date = response.data.eh_date
                this.addeequipmenthire.eh_mortagage = response.data.eh_mortagage
                this.addeequipmenthire.eh_rental = response.data.eh_rental
                this.addeequipmenthire.eh_status = response.data.eh_status
                this.addeequipmenthire.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
              })
            },
            tableadd() {
              if (this.list.length > 0) {
                if (this.list[this.list.length - 1].ed_emcode !== null && this.list[this.list.length - 1].ed_days !== 0 && this.list[this.list.length - 1].et_typeid !== null) {
                  this.list.push({ et_typeid: null, ed_emcode: null, ed_days: 0, ei_rent: 0, ei_mortagage: 0 })
                } else {
                  this.$message({
                    message: '请正确填写设备信息！',
                    type: 'warning'
                  })
                }
              } else {
                this.list.push({ et_typeid: null, ed_emcode: null, ed_days: 0, ei_rent: 0, ei_mortagage: 0 })
              }
            },
            equipmentdelete(index, row) {
              this.list.splice(index, 1)
              this.recalculationmortagage(0)
              this.recalculationrent()
            },
            checkEquipmentHire(index, row) {
              var err = 0
              if (this.list[index].ed_emcode !== null) {
                for (var i = 0, l = this.list.length; i < l; i++) {
                  if (this.list[index].ed_emcode === this.list[i].ed_emcode && index !== i) {
                    err = 1
                  }
                }
                if (err === 1) {
                  this.$message({ message: '设备编号重复！', type: 'warning' })
                  this.list[index].ed_emcode = null
                } else {
                  this.equipmentHirecheck.ei_code = this.list[index].ed_emcode
                  checkEquipmentHire(this.equipmentHirecheck).then(response => {
                    if (response.data !== 1) {
                      this.$message({ message: '设备不能租赁！', type: 'warning' })
                      this.list[index].ed_emcode = null
                    } else {
                      if (this.list[index].ed_emcode !== null && this.list[index].ed_days !== 0 && this.list[index].et_typeid !== null && this.list[index].ei_rent !== 0 && this.list[index].ei_mortagage !== 0) {
                        this.selectRent(index, row)
                        this.recalculationmortagage(this.list[index].ei_mortagage)
                      }
                    }
                  })
                }
              }
            },
            selectMortagage(index, row) {
              if (this.list[index].et_typeid !== null) {
                this.queryAmount.et_type = this.list[index].et_typeid
                getEquipmentAmount(this.queryAmount).then(response => {
                  this.list[index].ei_rent = response.data.et_rent
                  this.list[index].ei_mortagage = response.data.et_mortagage
                  if (this.list[index].ed_emcode !== null && this.list[index].ed_days !== 0 && this.list[index].et_typeid !== null && this.list[index].ei_rent !== 0 && this.list[index].ei_mortagage !== 0) {
                    this.selectRent(index, row)
                    this.recalculationmortagage(response.data.et_mortagage)
                  }
                })
              }
            },
            selectRent(index, row) {
              if (this.list[index].ed_emcode !== null && this.list[index].ed_days !== 0 && this.list[index].et_typeid !== null && this.list[index].ei_rent !== 0 && this.list[index].ei_mortagage !== 0) {
                this.recalculationrent(index, row)
                this.recalculationmortagage(this.list[index].ei_mortagage)
              }
            },
            recalculationrent(index, et_rent) {
              var rent = 0
              for (var i = 0, l = this.list.length; i < l; i++) {
                rent = rent + this.list[i].ed_days * this.list[i].ei_rent
              }
              this.addeequipmenthire.eh_rental = rent
            },
            recalculationmortagage(et_mortagage) {
              var mortagage = 0
              for (var i = 0, l = this.list.length; i < l; i++) {
                mortagage = mortagage + this.list[i].ei_mortagage
              }
              this.addeequipmenthire.eh_mortagage = mortagage
            },
            handleModifyStatus(row, status) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              row.status = status
            },
            handleClose(done) {
              this.$confirm('确认关闭？').then(_ => {
                done()
              }).catch(_ => {})
            },
            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()
              })
            },
            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
              })
            },
            updateEquipmentHirea() {
              this.addeequipmenthire.eh_detail = JSON.stringify(this.list)
              this.addeequipmenthire.eh_usercode = this.$store.state.user.introduction
              this.$refs['emaddForm'].validate((valid) => {
                if (valid) {
                  if (this.addeequipmenthire.eh_mortagage === 0 && this.addeequipmenthire.eh_rental === 0) {
                    this.$message({ message: '请正确填写设备信息！', type: 'warning' })
                  } else {
                    updateEquipmenteHireHead(this.addeequipmenthire).then(response => {
                      if (response.data === 0) {
                        this.dialogFormVisible = false
                        this.$notify({
                          title: '失败',
                          message: '保存失败！',
                          type: 'error',
                          duration: 2000
                        })
                      } else if (response.data === 2) {
                        this.dialogFormVisible = false
                        this.$notify({
                          title: '失败',
                          message: '设备列表中有已租赁！',
                          type: 'error',
                          duration: 2000
                        })
                      } else {
                        this.getList()
                        this.$notify({
                          title: '成功',
                          message: '编辑成功！',
                          type: 'success',
                          duration: 2000
                        })
                      }
                    })
                  }
                }
              })
            },
            resetForm(formName) {
              this.getList()
            },
            formatJson(filterVal, jsonData) {
              return jsonData.map(v => filterVal.map(j => {
                if (j === 'timestamp') {
                  return parseTime(v[j])
                } else {
                  return v[j]
                }
              }))
            }
          }
        }
      </script>
      <style>
      .el-form--label-left .el-form-item__label{
        text-align:right
      }
      .el-rate{
        line-height: 0;
        margin-top:8px;
      }
      .el-checkbox.el-checkbox {
          margin-left: 30px;
      }
      </style>
      