              <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="addCalendar" :model="addcalendar" label-position="left" label-width="80px"
                        style='width: 1200px;margin-left:20px'>
                        <el-row :gutter="20">
                      <el-col :span="6">
                        <el-form-item  :label="$t('adminstock.status')" prop="stock_status" style="width: 300px;" >
                          <el-select v-model="addcalendar.stock_status" filterable placeholder="请选择" >
                          <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value">
                        </el-option>
                          </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item  :label="$t('adminstock.startdate')" prop="start_date" style="width: 300px;" >
                        <el-date-picker v-model="addcalendar.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('adminstock.enddate')" prop="end_date" style="width: 300px;">
                        <el-date-picker v-model="addcalendar.end_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-button class="filter-item" type="primary" v-waves icon="el-icon-edit" @click="addmmCalendar">
                      {{$t('table.add')}}
                    </el-button>
                    </el-col>
                    </el-row>
                  <el-row><el-tag>服务中</el-tag>&nbsp;&nbsp;<el-tag type='warning'>暂停接单</el-tag>&nbsp;&nbsp;<el-tag type='danger'>封存</el-tag>&nbsp;&nbsp;</el-row>
                  </el-form>
                  <fullcalendar :events="fcEvents" lang='zh' :key="total"></fullcalendar>
                  <!--deletefrom-->
                 <el-table :data="list" v-loading="listLoading" element-loading-text="加载中......" border fit
                          highlight-current-row
                          style="width: 72%;margin-left:14%;">
                  <el-table-column type="index" align="center" :label="$t('table.seq')" width="60">
                  </el-table-column>
                  <el-table-column align="center" :label="$t('adminstock.status')" width="100">
                    <template slot-scope="scope">
                      <span>
                        <el-tag v-if="scope.row.stock_status == '2' " >{{$t('table.status2')}}</el-tag>
                        <el-tag v-else-if="scope.row.stock_status == '3' " type="warning">{{$t('table.status3')}}</el-tag>
                        <el-tag v-else-if="scope.row.stock_status == '4' " type="danger">{{$t('table.status4')}}</el-tag>
                      </span>
                    </template>
                  </el-table-column>
                  <!--edit line-->
                  <el-table-column align="center" :label="$t('adminstock.startdate')" width="155" value-format="yyyy/MM/dd" >
                    <template slot-scope="scope">
                    <span >{{scope.row.start_date}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column min-width="300px" align="center" :label="$t('adminstock.enddate')"  width="250"  >
                  <template slot-scope="scope">
                    <span >{{scope.row.end_date}}</span>
                  </template>
                  </el-table-column>
                  <el-table-column align="center" :label="$t('table.actions')" width="224">
                  <template slot-scope="scope">
                    <el-button size="small" type="primary"  icon="el-icon-delete" @click="deletemmTrains(scope.row)">{{$t('table.delete')}}</el-button>
                  </template>
                </el-table-column>
                </el-table>
                <div class="pagination-container" style="margin-left:54%;">
                  <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>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                </div>
              </template>
              <script>
                import { delMmStock, getdelMMStocklist, fetchPv, findMM, getMmStock, createArticle, addMMCalendar, refMMStock } from '@/api/article'
                import waves from '@/directive/waves' // 水波纹指令
                import { parseTime } from '@/utils'
                import Fullcalendar from 'vue-fullcalendar'
                var demoEvents = []
                export default {
                  components: { Fullcalendar },
                  name: 'mmadminstock',
                  directives: {
                    waves
                  },
                  data() {
                    return {
                      fcEvents: demoEvents,
                      list: null,
                      total: 1,
                      listLoading: true,
                      listQuery: {
                        page: 1,
                        limit: 10,
                        servant_code: 1
                      },
                      addcalendar: {
                        servant_code: undefined,
                        stock_status: undefined,
                        start_date: undefined,
                        end_date: undefined
                      },
                      calendarlist: {
                        title: undefined,
                        start: undefined,
                        end: undefined,
                        cssClass: undefined
                      },
                      queryMMstock: {
                        servant_code: undefined
                      },
                      delMMStocklist: {
                        servant_code: undefined,
                        id: undefined
                      },
                      mminfo: {
                        id: null,
                        name: null,
                        servant_code: null
                      },
                      listMMinfo: {
                        id: null
                      },
                      options: [{
                        value: '2',
                        label: '服务中'
                      }, {
                        value: '3',
                        label: '停止接单'
                      }, {
                        value: '4',
                        label: '封存'
                      }],
                      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: {
                        stock_status: [{ required: true, message: '请选月嫂状态', trigger: 'blur' }],
                        start_date: [{ required: true, message: '请录入开始日期', trigger: 'blur' }],
                        end_date: [{ required: true, message: '请录入结束日期', trigger: 'blur' }]
                      },
                      showReviewer: false,
                      trainoptions: '',
                      modifyresult: '',
                      train_name: '',
                      visible2: false,
                      delstockinfo: {
                        id: 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.fcEvents = []
                    this.listQuery.id = this.$route.params.userId
                    this.listMMinfo.id = this.$route.params.userId
                    this.queryMMstock.servant_code = this.$route.params.userId
                    findMM(this.listMMinfo).then(response2 => {
                      this.mminfo.id = '月嫂工号:' + response2.data.salt
                      this.mminfo.name = '月嫂姓名:' + response2.data.truename
                      this.mminfo.servant_code = response2.data.id
                    })
                    this.getList()
                    getMmStock(this.queryMMstock).then(response => {
                      // const arrLike = Array.from(response.data)
                      // let strresult = ''
                      const mmstockdata = response.data
                      let cellIndex = ''
                      let colorcalendar = ''
                      for (var value of mmstockdata) {
                        switch (value.stock_status) {
                          case 2:
                            this.calendarlist.title = '服务中'
                            cellIndex = 1
                            colorcalendar = 'service'
                            break
                          case 3:
                            this.calendarlist.title = '暂停接单'
                            cellIndex = 1
                            colorcalendar = 'stop'
                            break
                          case 4:
                            this.calendarlist.title = '封存'
                            colorcalendar = 'freeze'
                            cellIndex = 1
                            break
                          default:
                            this.calendarlist.title = ''
                        }
                        const jsonstr = {
                          'cellIndex': cellIndex,
                          'cssClass': colorcalendar,
                          'end': value.end_date,
                          'isShow': 'true',
                          'start': value.start_date,
                          'title': this.calendarlist.title,
                          length: 6 // 值得注意的是，key值必须是数字，并且最后还要有这个length
                        }
                        demoEvents.push(jsonstr)
                      }
                      this.fcEvents = demoEvents
                    })
                  },
                  destroyed: function() { // 离开事件
                    this.fcEvents = []
                    demoEvents = []
                    this.fcEvents = demoEvents
                  },
                  methods: {
                    getList() {
                      this.listLoading = true
                      this.listQuery.servant_code = this.$route.params.userId
                      refMMStock(this.listQuery).then(response => {
                        this.list = response.data.items
                        this.total = response.data.total
                        this.listLoading = false
                      })
                    },
                    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
                    },
                    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()
                      })
                    },
                    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
                      })
                    },
                    addmmCalendar() {
                      this.addcalendar.servant_code = this.mminfo.servant_code
                      const date1 = Date.parse(this.addcalendar.start_date)
                      const date2 = Date.parse(this.addcalendar.end_date)
                      const diffDays = date2 - date1
                      if (diffDays < 0) {
                        this.$message.error('请正确输入开始和结束日期')
                      } else {
                        this.$refs['addCalendar'].validate((valid) => {
                          if (valid) {
                            addMMCalendar(this.addcalendar).then(response => {
                              if (response.data < 1) {
                                this.$message({
                                  message: '日期重复！',
                                  type: 'warning'
                                })
                              } else {
                                this.fcEvents = []
                                this.listLoading = true
                                this.total = response.data.total
                                this.listLoading = false
                                let reftitile = ''
                                let cellIndex = ''
                                let colorcalendar = ''
                                if (Number(this.addcalendar.stock_status) === 2) {
                                  reftitile = '服务中'
                                  cellIndex = 1
                                  colorcalendar = 'service'
                                } else if (Number(this.addcalendar.stock_status) === 3) {
                                  reftitile = '暂停接单'
                                  cellIndex = 1
                                  colorcalendar = 'stop'
                                } else if (Number(this.addcalendar.stock_status) === 4) {
                                  reftitile = '封存'
                                  colorcalendar = 'freeze'
                                  cellIndex = 1
                                } else {
                                  reftitile = null
                                  colorcalendar = null
                                  cellIndex = null
                                }
                                const jsonstr = {
                                  'cellIndex': cellIndex,
                                  'cssClass': colorcalendar,
                                  'end': this.addcalendar.end_date,
                                  'isShow': 'true',
                                  'start': this.addcalendar.start_date,
                                  'title': reftitile,
                                  length: 6 // 值得注意的是，key值必须是数字，并且最后还要有这个length
                                }
                                demoEvents.push(jsonstr)
                                this.fcEvents = demoEvents
                                this.$refs['addCalendar'].resetFields()
                                this.getList()
                                createArticle(this.temp).then(() => {
                                  this.$notify({
                                    title: '成功',
                                    message: '创建成功',
                                    type: 'success',
                                    duration: 2000
                                  })
                                })
                              }
                            })
                          }
                        })
                      }
                    },
                    deletemmTrains(row) {
                      this.delstockinfo.id = row.id
                      delMmStock(this.delstockinfo).then(response => {
                        this.list = response.data.items
                        this.total = response.data.total
                        this.listLoading = false
                      })
                      this.fcEvents = []
                      demoEvents = []
                      this.fcEvents = demoEvents
                      this.delMMStocklist.servant_code = this.$route.params.userId
                      this.delMMStocklist.id = row.id
                      getdelMMStocklist(this.delMMStocklist).then(response => {
                        const mmstockdata = response.data
                        let cellIndex = ''
                        let colorcalendar = ''
                        for (var value of mmstockdata) {
                          switch (value.stock_status) {
                            case 2:
                              this.calendarlist.title = '服务中'
                              cellIndex = 1
                              colorcalendar = 'service'
                              break
                            case 3:
                              this.calendarlist.title = '暂停接单'
                              cellIndex = 1
                              colorcalendar = 'stop'
                              break
                            case 4:
                              this.calendarlist.title = '封存'
                              colorcalendar = 'freeze'
                              cellIndex = 1
                              break
                            default:
                              this.calendarlist.title = ''
                          }
                          const jsonstr = {
                            'cellIndex': cellIndex,
                            'cssClass': colorcalendar,
                            'end': value.end_date,
                            'isShow': 'true',
                            'start': value.start_date,
                            'title': this.calendarlist.title,
                            length: 6 // 值得注意的是，key值必须是数字，并且最后还要有这个length
                          }
                          demoEvents.push(jsonstr)
                        }
                        this.fcEvents = demoEvents
                        this.listLoading = true
                        this.listQuery.servant_code = this.$route.params.userId
                        refMMStock(this.listQuery).then(response => {
                          this.list = response.data.items
                          this.total = response.data.total
                          this.listLoading = false
                        })
                      })
                      createArticle(this.temp).then(() => {
                        // this.list.unshift(this.temp)
                        // this.dialogFormVisible = false
                        this.$notify({
                          title: '成功',
                          message: '删除成功',
                          type: 'success',
                          duration: 2000
                        })
                      })
                    },
                    formatJson(filterVal, jsonData) {
                      return jsonData.map(v => filterVal.map(j => {
                        if (j === 'timestamp') {
                          return parseTime(v[j])
                        } else {
                          return v[j]
                        }
                      }))
                    },
                    cancelEdit() {
                      this.getList()
                    }
                  }
                }
              </script>
              <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;
            }
            </style>
            