<template>
  <div class="team-remark-drawer">
    <el-drawer
      :title="$t('pages.teamList.remark.title')"
      :visible="true"
      :before-close="handleClose"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      custom-class="drawer-auto-layout"
    >
      <div class="team-remark">
        <div class="drawer-form">
          <p v-if="!remarks || remarks.length === 0">{{ $t('pages.teamList.remark.emptyTip') }}</p>
          <el-timeline v-else :reverse="true">
            <el-timeline-item
              v-for="(item, index) in remarks"
              :key="index"
              :timestamp="item.createTime | dateFormat"
              placement="top"
            >
              <div class="remark">
                <span v-if="item.createBackUserName" class="nickname">{{ item.createBackUserName }}:</span> &nbsp;{{ item.remark }}
                <i class="el-icon-delete font-danger cursor-pointer" @click="clickDelRemark(item, index)" />
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>

        <div class="drawer-footer">
          <el-button @click="handleClose()">{{ $t('pages.teamList.action.close') }}</el-button>
          <el-button type="primary" @click="clickAddRemarks">{{ $t('pages.teamList.action.add') }}</el-button>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      :title="$t('pages.teamList.remark.title')"
      :visible.sync="remarkVisible"
      :modal-append-to-body="true"
      :append-to-body="true"
      width="30%"
      :before-close="handleCloseRemarkFrom"
    >
      <el-form ref="formRemarks" :model="form" :rules="formRules" label-width="0">
        <el-form-item prop="remarks">
          <el-input
            v-model="form.remarks"
            type="textarea"
            :placeholder="$t('pages.teamList.remark.placeholder')"
            maxlength="100"
            show-word-limit
            resize="none"
            rows="5"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :disabled="submitLoading" @click="remarkVisible = false">{{ $t('pages.teamList.action.cancel') }}</el-button>
        <el-button type="primary" :disabled="submitLoading" :loading="submitLoading" @click="submitAddRemarks">{{ $t('pages.teamList.action.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addTeamRemarks, delTeamRemarks } from '@/api/team'
import { deepClone } from '@/utils'
export default {
  name: 'TeamRemarks',
  props: {
    profile: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      remarkVisible: false,
      submitLoading: false,
      remarks: [],
      form: {
        teamId: '',
        remarks: ''
      },
      formRules: {
        remarks: [
          { required: true, message: this.$t('pages.teamList.validation.requiredField'), trigger: 'blur' }
        ]
      },
      delForm: {
        teamId: '',
        remarkId: ''
      }
    }
  },
  computed: {
  },
  watch: {
    profile: {
      handler(newVal) {
        if (newVal.remarks) {
          this.form.teamId = newVal.id
          this.delForm.teamId = newVal.id
          this.remarks = deepClone(newVal.remarks)
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClose() {
      if (this.submitLoading) {
        this.$opsMessage.warn(this.$t('pages.teamList.message.submitting'))
        return
      }
      this.$emit('close')
    },
    submitAddRemarks() {
      const that = this
      that.$refs.formRemarks.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.submitLoading = true
        addTeamRemarks(that.form).then(res => {
          that.submitLoading = false
          that.remarkVisible = false
          that.form.remarks = ''
          if (res.body) {
            that.remarks.push(res.body)
            this.$emit('addRemarks', res.body)
          }
        }).catch(er => {
          that.submitLoading = false
        })
      })
    },
    handleCloseRemarkFrom() {
      if (this.submitLoading) {
        return
      }
      this.remarkVisible = false
    },
    clickDelRemark(row, index) {
      this.remarks.splice(index, 1)
      this.$emit('revemoRemarks', index)
      this.delForm.remarkId = row.remarkId
      delTeamRemarks(this.delForm)
    },
    clickAddRemarks() {
      if (this.remarks && this.remarks.length >= 20) {
        this.$opsMessage.warn(this.$t('pages.teamList.message.maxRemarks'))
        return
      }
      this.remarkVisible = true
    }
  }
}
</script>
<style scoped lang="scss">
.team-remark {
  .remark {
    width: 100%;
    overflow: auto;
    word-wrap: break-word;
    .nickname {
      font-weight: bold;
    }
  }
}
</style>

