<template>
  <div class="team-contact-drawer">
    <el-drawer
      :title="$t('pages.teamList.contact.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-contact">
        <div class="drawer-form">
          <p v-if="!contacts || contacts.length === 0">{{ $t('pages.teamList.contact.emptyTip') }}</p>
          <el-timeline v-else :reverse="true">
            <el-timeline-item
              v-for="(item, index) in contacts"
              :key="index"
              :timestamp="item.createTime"
              placement="top"
            >
              <div class="contact">
                <p> {{ item.createBackUserName }} <i class="el-icon-delete font-danger cursor-pointer" @click="clickDelContact(item, index)" /></p>
                <div>
                  <p>{{ $t('pages.teamList.contact.type') }}: {{ contactTypeMap[item.type].name }}</p>
                  <p>{{ $t('pages.teamList.contact.contact') }}: {{ item.contact }}</p>
                  <p v-if="item.remarks">{{ $t('pages.teamList.contact.remark') }}: {{ item.remarks }}</p>
                </div>
              </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="(contactVisible=true)">{{ $t('pages.teamList.action.add') }}</el-button>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      :title="$t('pages.teamList.contact.dialogTitle')"
      :visible.sync="contactVisible"
      :modal-append-to-body="true"
      :append-to-body="true"
      width="30%"
      :before-close="handleCloseContactFrom"
    >
      <el-form ref="formContact" :model="form" :rules="formRules" label-width="80px" style="margin-right: 15px;">
        <el-form-item prop="type" :label="$t('pages.teamList.contact.type')">
          <el-select v-model="form.type" :placeholder="$t('pages.teamList.contact.selectType')" style="width: 100%;">
            <el-option v-for="(item, index) in contactTypes" :key="index" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item prop="contact" :label="$t('pages.teamList.contact.contact')">
          <el-input v-model="form.contact" :placeholder="$t('pages.teamList.contact.contactPlaceholder')" maxlength="100" show-word-limit />
        </el-form-item>
        <el-form-item prop="remarks" :label="$t('pages.teamList.contact.remark')">
          <el-input
            v-model="form.remarks"
            type="textarea"
            :placeholder="$t('pages.teamList.contact.remarkPlaceholder')"
            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="contactVisible = false">{{ $t('pages.teamList.action.cancel') }}</el-button>
        <el-button type="primary" :disabled="submitLoading" :loading="submitLoading" @click="submitAddContact">{{ $t('pages.teamList.action.confirm') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addTeamContact, delTeamContact } from '@/api/team'
import { deepClone } from '@/utils'
import { contactTypes, contactTypeToMap } from '@/constant/team-type'

export default {
  name: 'CreateTeam',
  props: {
    profile: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  data() {
    return {
      contactTypes,
      contactTypeMap: contactTypeToMap(),
      contactVisible: false,
      submitLoading: false,
      contacts: [],
      form: {
        teamId: '',
        type: '',
        contact: '',
        remarks: ''
      },
      formRules: {
        type: [
          { required: true, message: this.$t('pages.teamList.validation.requiredField'), trigger: 'blur' }
        ],
        contact: [
          { required: true, message: this.$t('pages.teamList.validation.requiredField'), trigger: 'blur' }
        ]
      },
      delForm: {
        teamId: '',
        remarkId: ''
      }
    }
  },
  computed: {
  },
  watch: {
    profile: {
      handler(newVal) {
        if (newVal.contacts) {
          this.form.teamId = newVal.id
          this.delForm.teamId = newVal.id
          this.contacts = deepClone(newVal.contacts)
        }
      },
      immediate: true
    }
  },
  methods: {
    handleClose() {
      if (this.submitLoading) {
        this.$opsMessage.warn(this.$t('pages.teamList.message.submitting'))
        return
      }
      this.$emit('close')
    },
    submitAddContact() {
      const that = this
      that.$refs.formContact.validate(valid => {
        if (!valid) {
          console.error('error submit!!')
          return false
        }
        that.submitLoading = true
        addTeamContact(that.form).then(res => {
          that.submitLoading = false
          that.contactVisible = false
          that.form.type = ''
          that.form.contact = ''
          that.form.remarks = ''
          if (res.body) {
            that.contacts.push(res.body)
            this.$emit('addContact', res.body)
          }
        }).catch(er => {
          that.submitLoading = false
        })
      })
    },
    handleCloseContactFrom() {
      if (this.submitLoading) {
        return
      }
      this.contactVisible = false
    },
    clickDelContact(row, index) {
      this.contacts.splice(index, 1)
      this.$emit('revemoContact', index)
      this.delForm.contactId = row.contactId
      delTeamContact(this.delForm)
    }
  }
}
</script>
<style scoped lang="scss">
.team-contact {
  .contact {
    width: 100%;
    overflow: auto;
    word-wrap: break-word;
    .nickname {
      font-weight: bold;
    }
  }
}
</style>

