<template>
  <div :class="$style.container">
    <el-form
      ref="teamUpdate"
      :class="$style.form"
      :model="teamUpdate"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item :label="$t('module.teamManager.Handover.TeamName')" prop="teamName">
        <span :class="$style.label">{{ team.teamName || '-' }}</span>
      </el-form-item>
      <el-form-item :label="$t('module.teamManager.Handover.TeamLeader')" prop="teamLeader">
        <span :class="$style.label">{{ team.teamLeader || '-' }}</span>
      </el-form-item>
      <el-form-item :label="$t('module.teamManager.Handover.WorkingHours')" prop="onlineTime">
        <el-date-picker
          v-model="teamUpdate.onlineTime"
          style="width:210px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
        />
      </el-form-item>
      <el-form-item :label="$t('module.teamManager.Handover.OffWorkTime')" prop="offlineTime">
        <el-date-picker
          v-model="teamUpdate.offlineTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width:210px"
          type="datetime"
        />
      </el-form-item>
      <el-form-item label="" prop="">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-success"
          @click="handleSubmit()"
        >
          {{ 'btn.save' | i18nFilter }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
import { offlineUpdate } from '@/api/team-manage/team.js'

export default {
  name: 'OfflineEdit',
  components: {},
  props: {
    team: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      teamUpdate: {
        offlineTime: moment(this.team.offlineTime).format('YYYY-MM-DD HH:mm:ss'),
        onlineTime: moment(this.team.onlineTime).format('YYYY-MM-DD HH:mm:ss')
      },
      rules: {
        onlineTime: [
          { required: true, message: '上班时间不能为空', trigger: 'blur' }
        ],
        offlineTime: [
          { required: true, message: '下班时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs['teamUpdate'].validate((valid) => {
        if (!valid) {
          return false
        }
        const param = {
          id: this.team.id,
          teamId: this.team.teamId,
          offlineTime: moment.utc(this.teamUpdate.offlineTime),
          onlineTime: moment.utc(this.teamUpdate.onlineTime)
        }
        console.log(param)
        offlineUpdate(param).then(res => {
          console.log(res)
          this.$message.success('保存成功！')
          this.$bus.emit('on-offline-edit-success')
        })
      })
    }
  }
}
</script>
<style lang="scss" module>
.container {
  margin-bottom: 30px;
  .form {
    display: flex;
    .label {
    display: inline-block;
    min-width: 100px;
    background-color: #eee;
  }
  }
}
</style>
