            <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="addCertificate" :model="addcertificateinfo" label-position="left" label-width="80px"
                      style='width: 1300px;'>
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item  :label="$t('certificate.name')" prop="certificate_code" style="width: 300px;" >
                        <el-select v-model="addcertificateinfo.certificate_code" filterable placeholder="请选择" >
                        <el-option v-for="item in trainoptions" :key="item.id" :label="item.certificate_name" :value="item.certificate_code">
                       </el-option>
                        </el-select>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item  :label="$t('certificate.organization')" prop="organization" style="width: 250px;" >
                        <el-input v-model="addcertificateinfo.organization" size = medium :maxlength = 20 ></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item  :label="$t('certificate.fromdate')" prop="start_date" style="width: 300px;" >
                      <el-date-picker v-model="addcertificateinfo.start_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('certificate.enddate')" prop="end_date" style="width: 300px;">
                      <el-date-picker v-model="addcertificateinfo.end_date" value-format="yyyy/MM/dd" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1" >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  </el-row>
                  <el-row :gutter="20" >
                    <el-col :span="9">&nbsp;
                    </el-col>
                    <el-col :span="5">
                      <el-button class="filter-item" type="primary" v-waves icon="el-icon-edit" @click="addmmTrains">
                    {{$t('table.add')}} </el-button>
                    <el-button class="filter-item" type="primary" v-waves icon="el-icon-delete" @click="clearaddTrains()">
                    清除</el-button>
                  </el-col>
                  </el-row>
                  <el-row>
                    <el-col>&nbsp;</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('certificate.name')" width="150">
                    <template slot-scope="scope">
                      <span>{{scope.row.certificate_name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('certificate.organization')" width="181">
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                        <el-input v-model="scope.row.organization" size = medium  :maxlength = 20 ></el-input>
                      </template>
                      <span v-else>{{scope.row.organization}}</span>
                    </template>
                  </el-table-column>
                <!--edit line-->
                  <el-table-column align="center" :label="$t('certificate.fromdate')" width="285" value-format="yyyy/MM/dd" >
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                      <el-date-picker v-model="scope.row.start_date" value-format="yyyy/MM/dd" align="right" type="date" :picker-options="pickerOptions1" >
                      </el-date-picker>
                    </template>
                    <span v-else>{{scope.row.start_date}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="300px" align="center" :label="$t('certificate.enddate')"  width="387"  >
                  <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                        <el-date-picker v-model="scope.row.end_date" value-format="yyyy/MM/dd" align="right" type="date" :picker-options="pickerOptions1" >
                        </el-date-picker>
                        <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.end_date}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('table.actions')" width="222">
                  <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="deletemmCertificates(scope.row.id)">{{$t('table.delete')}}</el-button>
                  </template>
                </el-table-column>
                </el-table>
                <!--pop-->
                <el-popover ref="popover5" placement="top" width="160" v-model="visible2">
                    <p>这是一段内容这是一段内容确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
                <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
                </div>
                </el-popover>

                <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 { findcertificates, fetchPv, updateArticle, createArticle, addMMcertificates, findMM, getAllcertificates, deletecertificates, updatecertificates } from '@/api/article'
              import waves from '@/directive/waves' // 水波纹指令
              import { parseTime } from '@/utils'
              // arr to obj ,such as { CN : "China", US : "USA" }
              export default {
                name: 'certificate-form',
                directives: {
                  waves
                },
                data() {
                  return {
                    tableKey: 0,
                    visible2: false,
                    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: {
                      start_date: [{ required: true, message: '请选择领证日期', trigger: 'blur' }],
                      end_date: [{ required: true, message: '请选择到期日期', trigger: 'blur' }],
                      certificate_code: [{ required: true, message: '请选证书内容', trigger: 'blur' }],
                      organization: [{ max: 20, message: '请正确录入发证机构', trigger: 'blur' }]
                    },
                    showReviewer: false,
                    trainoptions: '',
                    train_name: '',
                    deltraininfo: {
                      id: undefined
                    },
                    addcertificateinfo: {
                      servant_code: undefined,
                      certificate_code: undefined,
                      organization: undefined,
                      start_date: undefined,
                      end_date: undefined
                    },
                    updatecertificateinfo: {
                      id: undefined,
                      servant_code: undefined,
                      start_date: undefined,
                      organization: undefined,
                      end_date: undefined,
                      certificate_code: 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
                    findcertificates(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
                    })
                    getAllcertificates().then(response3 => {
                      this.trainoptions = response3.data
                    })
                  },
                  clearaddTrains() {
                    this.addcertificateinfo.certificate_code = null
                    this.addcertificateinfo.organization = null
                    this.addcertificateinfo.start_date = null
                    this.addcertificateinfo.end_date = null
                  },
                  addmmTrains() {
                    var check = 1
                    var check2 = 1
                    for (var value of this.list) {
                      if (value.certificate_code === this.addcertificateinfo.certificate_code) {
                        check = 0
                      }
                    }
                    const date1 = Date.parse(this.addcertificateinfo.start_date)
                    const date2 = Date.parse(this.addcertificateinfo.end_date)
                    const diffDays = date2 - date1
                    if (diffDays < 0) {
                      check2 = 0
                    }
                    if (check === 0) {
                      this.$message.error('证书重复！')
                    } else if (check2 === 0) {
                      this.$message.error('请正确录入日期!')
                    } else {
                      this.addcertificateinfo.servant_code = this.mminfo.servant_code
                      this.$refs['addCertificate'].validate((valid) => {
                        if (valid) {
                          this.listLoading = true
                          addMMcertificates(this.addcertificateinfo).then(response => {
                            this.list = response.data.items
                            this.total = response.data.total
                            this.listLoading = false
                            this.$refs['addCertificate'].resetFields()
                            this.getList()
                          })
                          this.$refs['addCertificate'].validate((valid) => {
                            if (valid) {
                              createArticle(this.temp).then(() => {
                                // this.list.unshift(this.temp)
                                // this.dialogFormVisible = false
                                this.$notify({
                                  title: '成功',
                                  message: '创建成功',
                                  type: 'success',
                                  duration: 2000
                                })
                              })
                            }
                          })
                        }
                      })
                    }
                  },
                  deletemmCertificates(id) {
                    this.deltraininfo.id = id
                    deletecertificates(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
                    })
                  },
                  cancelEdit() {
                    this.getList()
                  },
                  confirmEdit(row) {
                    const date1 = Date.parse(row.start_date)
                    const date2 = Date.parse(row.end_date)
                    const diffDays = date2 - date1
                    if (row.start_date === null || row.end_date === null) {
                      this.$message({
                        message: '请正确输入日期！',
                        type: 'warning'
                      })
                    } else if (diffDays < 0) {
                      this.$message({
                        message: '请正确输入日期！',
                        type: 'warning'
                      })
                    } else {
                      this.updatecertificateinfo.id = row.id
                      this.updatecertificateinfo.start_date = row.start_date
                      this.updatecertificateinfo.end_date = row.end_date
                      this.updatecertificateinfo.organization = row.organization
                      updatecertificates(this.updatecertificateinfo).then(response => {
                        this.list = response.data.items
                        this.total = response.data.total
                        this.listLoading = false
                        this.getList()
                      })
                      this.$message({
                        message: '保存成功！',
                        type: 'success'
                      })
                      this.getList()
                    }
                  },
                  formatJson(filterVal, jsonData) {
                    return jsonData.map(v => filterVal.map(j => {
                      if (j === 'timestamp') {
                        return parseTime(v[j])
                      } else {
                        return v[j]
                      }
                    }))
                  }
                }
              }
            </script>
            