            <template>
              <div class="app-container calendar-list-container">
                <el-row :gutter="20">
                    <el-col :span="6">
                      <el-tag type="success" >{{mminfo.id}}</el-tag> <el-tag type="success" >{{mminfo.name}}</el-tag>
                    </el-col>   
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="6">&nbsp;</el-col>
                </el-row>
                <el-form :rules="rules" ref="addTrains" :model="addtraininfo" label-position="left" label-width="80px"
                      style='width: 1300px;margin-left:20px'>
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item  :label="$t('trains.code')" prop="train_code" style="width: 300px;" >
                        <el-select v-model="addtraininfo.train_code" filterable placeholder="请选择" >
                        <el-option v-for="item in trainoptions" :key="item.train_code" :label="item.train_name" :value="item.train_code">
                       </el-option>
                        </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item  :label="$t('trains.date')" prop="train_date" style="width: 300px;" >
                      <el-date-picker v-model="addtraininfo.train_date" value-format="yyyy/MM/dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item  :label="$t('trains.result')" prop="train_result" style="width: 300px;">
                      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" prop="train_result" v-model="addtraininfo.train_result">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-button class="filter-item" type="primary" v-waves icon="el-icon-edit" @click="addmmTrains">
                    {{$t('table.add')}}
                  </el-button>
                  </el-col>
                  </el-row>
                </el-form>
                <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="70">
                  </el-table-column>
                  <el-table-column align="center" :label="$t('trains.code')" width="300">
                    <template slot-scope="scope">
                      <span>{{scope.row.train_name}}</span>
                    </template>
                  </el-table-column>
                  <!--edit line-->
                  <el-table-column align="center" :label="$t('trains.date')" width="355" value-format="yyyy/MM/dd" >
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                      <el-date-picker v-model="scope.row.train_date" value-format="yyyy/MM/dd" align="right" type="date" :picker-options="pickerOptions1" >
                      </el-date-picker>
                    </template>
                    <span v-else>{{scope.row.train_date}}</span>
                    </template>
                  </el-table-column>
    
                  <el-table-column min-width="300px" align="center" :label="$t('trains.result')"  width="270"  >
                  <template slot-scope="scope">
                    <template v-if="scope.row.edit">
                      <el-input class="edit-input" size="small" v-model="scope.row.train_result" ></el-input>
                      <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">取消</el-button>
                    </template>
                    <span v-else>{{scope.row.train_result}}</span>
                  </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('table.actions')" width="320">
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">提交</el-button>
                    <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
                    <el-button size="small" type="primary"  icon="el-icon-delete" @click="deletemmTrains(scope.row.id)">{{$t('table.delete')}}</el-button>
                  </template>
                </el-table-column>
                </el-table>
                <div class="pagination-container">
                  <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
                                layout="total, sizes, prev, pager, next, jumper" :total="total">
                  </el-pagination>
                </div>
                <el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
                  <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
                    <el-table-column prop="key" label="Channel"></el-table-column>
                    <el-table-column prop="pv" label="Pv"></el-table-column>
                  </el-table>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
                  </span>
                </el-dialog>
              </div>
            </template>
            <script>
              import { findtrains, fetchPv, updateArticle, createArticle, addMMTrains, findMM, getAllTrains, deletetrains, updatetrains } from '@/api/article'
              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: 'train-form',
                directives: {
                  waves
                },
                data() {
                  return {
                    tableKey: 0,
                    list: null,
                    total: null,
                    listLoading: true,
                    listQuery: {
                      page: 1,
                      limit: 10,
                      id: 1
                    },
                    mminfo: {
                      id: null,
                      name: null,
                      servant_code: null
                    },
                    listMMinfo: {
                      id: null
                    },
                    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: {
                      train_date: [{ required: true, message: '请选择培训日期', trigger: 'blur' }],
                      train_result: [{ required: true, min: 1, max: 5, message: '请录入培训成绩', trigger: 'blur' },
                        { pattern: regex.UNDER100, message: '请正确录入培训成绩', trigger: 'blur' }],
                      train_code: [{ required: true, message: '请选择培训内容', trigger: 'blur' }]
                    },
                    showReviewer: false,
                    trainoptions: '',
                    modifyresult: '',
                    train_name: '',
                    visible2: false,
                    deltraininfo: {
                      id: undefined
                    },
                    addtraininfo: {
                      servant_code: undefined,
                      train_code: undefined,
                      train_date: undefined,
                      train_result: undefined
                    },
                    updatetraininfo: {
                      id: undefined,
                      servant_code: undefined,
                      train_code: undefined,
                      train_date: undefined,
                      train_result: undefined
                    },
                    dialogFormVisible: false,
                    dialogStatus: '',
                    textMap: {
                      update: 'Edit',
                      create: '添加月嫂'
                    },
                    dialogPvVisible: false,
                    pvData: [],
                    downloadLoading: false
                  }
                },
                filters: {
                  statusFilter(status) {
                    const statusMap = {
                      published: 'success',
                      draft: 'info',
                      deleted: 'danger'
                    }
                    return statusMap[status]
                  },
                  typeFilter(type) {
                    // return calendarTypeKeyValue[type]
                  }
                },
                created() {
                  if (this.$route.params.userId == null) {
                    this.$route.params.userId = global.LastUpdate
                  } else {
                    global.LastUpdate = this.$route.params.userId
                  }
                  this.getList()
                  findMM(this.listMMinfo).then(response2 => {
                    this.mminfo.id = '月嫂工号:' + response2.data.salt
                    this.mminfo.name = '月嫂姓名:' + response2.data.truename
                    this.mminfo.servant_code = response2.data.id
                  })
                },
                methods: {
                  getList() {
                    this.listLoading = true
                    this.listQuery.id = this.$route.params.userId
                    this.listMMinfo.id = this.$route.params.userId
                    findtrains(this.listQuery).then(response => {
                      this.list = response.data.items
                      this.total = response.data.total
                      const items = response.data.items
                      this.list = items.map(v => {
                        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
                        v.originalTitle = v.title //  will be used when user click the cancel botton
                        return v
                      })
                      this.listLoading = false
                    })
                    getAllTrains().then(response3 => {
                      this.trainoptions = response3.data
                    })
                  },
                  addmmTrains() {
                    this.addtraininfo.servant_code = this.mminfo.servant_code
                    var check = 1
                    for (var value of this.list) {
                      if (value.train_code === this.addtraininfo.train_code) {
                        check = 0
                      }
                    }
                    if (check === 0) {
                      this.$message.error('培训项目重复！')
                    } else {
                      this.$refs['addTrains'].validate((valid) => {
                        if (valid) {
                          this.listLoading = true
                          addMMTrains(this.addtraininfo).then(response => {
                            this.total = response.data.total
                            this.listLoading = false
                            this.$refs['addTrains'].resetFields()
                            this.getList()
                          })
                          this.$refs['addTrains'].validate((valid) => {
                            if (valid) {
                              createArticle(this.temp).then(() => {
                                // this.list.unshift(this.temp)
                                // this.dialogFormVisible = false
                                this.$notify({
                                  title: '成功',
                                  message: '创建成功',
                                  type: 'success',
                                  duration: 2000
                                })
                              })
                            }
                          })
                        }
                      })
                    }
                  },
                  deletemmTrains(id) {
                    this.deltraininfo.id = id
                    this.listLoading = true
                    deletetrains(this.deltraininfo).then(response => {
                      this.list = response.data.items
                      this.total = response.data.total
                      this.listLoading = false
                      this.getList()
                    })
                    createArticle(this.temp).then(() => {
                      // this.list.unshift(this.temp)
                      // this.dialogFormVisible = false
                      this.$notify({
                        title: '成功',
                        message: '删除成功',
                        type: 'success',
                        duration: 2000
                      })
                    })
                  },
                  handleSizeChange(val) {
                    this.listQuery.limit = val
                    this.getList()
                  },
                  handleCurrentChange(val) {
                    this.listQuery.page = val
                    this.getList()
                  },
                  handleModifyStatus(row, status) {
                    this.$message({
                      message: '操作成功',
                      type: 'success'
                    })
                    row.status = status
                  },
                  resetmminfo() {
                    this.addmminfo = {
                      truename: undefined,
                      idcard: undefined,
                      mobile_phone: undefined,
                      seniority: undefined,
                      babynumber: undefined,
                      gender: undefined,
                      np: undefined,
                      cityname: undefined,
                      constellation: undefined,
                      zodiac: undefined
                    }
                  },
                  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()
                  },
                  confirmEdit(row) {
                    if (row.train_result < 0 || row.train_result > 100 || isNaN(row.train_result)) {
                      this.$message({
                        message: '请正确输入成绩！',
                        type: 'warning'
                      })
                    } else if (row.train_date === null) {
                      this.$message({
                        message: '请正确输入日期！',
                        type: 'warning'
                      })
                    } else {
                      this.updatetraininfo.id = row.id
                      this.updatetraininfo.train_date = row.train_date
                      this.updatetraininfo.train_result = row.train_result
                      updatetrains(this.updatetraininfo).then(response => {
                        this.list = response.data.items
                        this.total = response.data.total
                        this.listLoading = false
                        this.getList()
                      })
                      this.$message({
                        message: '保存成功！',
                        type: 'success'
                      })
                    }
                  }
                }
              }
            </script>
            <style scoped>
          .edit-input {
            padding-right: 100px;
          }
          .cancel-btn {
            position: absolute;
            right: 15px;
            top: 10px;
          }
          </style>