<template>
  <div v-loading="loading" class="email email-container">
    <div class="email-aside">
      <div class="email-account">
        <div class="email-account__left">
          <div v-if="hasAccount == '0'" class="emial-setting">
            <div class="tips">暂未配置邮箱账号，请先进行邮箱配置</div>
            <div class="setting" @click="showMailSetting">
              <i class="icon-youxiangpeizhi mail-icon" />
              邮箱配置
            </div>
          </div>
          <el-select v-else v-model="emailAccount" @change="accountChange">
            <el-option
              v-for="item in accountList"
              :key="item.id"
              :label="item.mail"
              :value="item.mail"
            ></el-option>
          </el-select>
        </div>
        <i
          v-if="hasAccount == '1'"
          class="el-icon-setting"
          @click="showMailSetting"
        ></i>
      </div>

      <div v-if="hasAccount == '1'" class="aside-bottom">
        <div class="btn-group">
          <el-button
            v-for="btn in btnList"
            :key="btn.value"
            :icon="btn.icon"
            :class="{ active: activeTab == btn.value }"
            size="small"
            @click="getCurrentTab(btn.value)"
          >
            {{ btn.label }}
          </el-button>
        </div>

        <div class="aside-content">
          <div v-show="activeTab == 'mail-edit'"></div>
          <div v-show="activeTab == 'mail-content'">
            <div
              :class="['all-email', { 'item-active': itemActive == 'all' }]"
              @click="handleClickAll"
            >
              <div>
                <i class="iconfont icon-quanbuyoujian"></i>
                <span>全部邮件</span>
              </div>

              <el-button size="mini" @click.stop="setSyncMail">
                同步邮件
              </el-button>
            </div>

            <div class="email-container">
              <div
                v-for="mail in mailReceiver"
                :key="mail.id"
                :class="['item', { 'item-active': itemActive == mail.id }]"
                @click="handleClick(mail)"
              >
                <i :class="mail.classIcon"></i>
                <span>{{ mail.nickName }}</span>
              </div>
            </div>
          </div>

          <div v-show="activeTab == 'mail-contacts'"></div>
        </div>
      </div>
    </div>

    <div class="email-content">
      <template v-if="hasAccount == '1'">
        <component
          :is="activeComponent"
          :mail-item="mailItem"
          :current-mail="currentMail"
          :account-list="accountList"
          :reply-mail-detail="replyMailDetail"
          @reply-mail="replyMail"
          @update-mail="updateMail"
        />
      </template>

      <template v-if="hasAccount == '0'">
        <div class="email-empty">
          <img src="@/assets/personal_images/email-empty.png" />
          <div class="tips">暂无邮件哦</div>
        </div>
      </template>
    </div>
    <mail-setting-list :mail-list-visible.sync="mailListVisible" />
  </div>
</template>

<script>
  import { getMailTreeList, getSysncById } from '@/api/personal'
  import MailEdit from './components/MailEdit'
  import MailContent from './components/MailContent'
  import MailContacts from './components/MailContacts'
  import MailSettingList from './components/MailSettingList'
  export default {
    name: 'EmailCenter',
    components: {
      MailEdit,
      MailContent,
      MailContacts,
      MailSettingList,
    },
    data() {
      return {
        mailItem: null,
        currentMail: null,
        itemActive: 'all',
        itemActiveName: '',
        searchKey: '',
        activeTab: 'mail-content',
        hasAccount: '',
        mailListVisible: false,
        emailAccount: '',
        emailAccountId: '',
        replyMailDetail: null,

        activeComponent: 'mail-content',

        allAcountData: [],
        accountList: [],
        mailReceiver: [],

        btnList: [
          { label: '写信', value: 'mail-edit', icon: 'el-icon-edit' },
          { label: '收信箱', value: 'mail-content', icon: 'el-icon-receiving' },
          { label: '通讯录', value: 'mail-contacts', icon: 'el-icon-user' },
        ],
      }
    },
    watch: {
      mailListVisible: {
        handler(val) {
          if (!val) {
            this._getMailTreeList()
          }
        },
        immediate: true,
      },
    },
    methods: {
      showMailSetting() {
        this.mailListVisible = true
      },
      handleClick(mailItem) {
        this.mailItem = mailItem
        this.itemActive = mailItem.id
        this.itemActiveName = mailItem.nickName.substring(0, 3)
      },
      handleClickAll() {
        this.mailItem = null
        this.itemActive = 'all'
      },
      getCurrentTab(value) {
        this.activeTab = value
        this.activeComponent = value
      },
      replyMail(mailDetail) {
        this.replyMailDetail = mailDetail
        this.activeTab = 'mail-edit'
        this.activeComponent = 'mail-edit'
      },
      updateMail(payload) {
        this._getMailTreeList()
        if (payload == 'mailEdit') {
          this.activeTab = 'mail-content'
          this.activeComponent = 'mail-content'
        }
      },
      // 同步邮件
      setSyncMail() {
        const { id } = this.currentMail
        if (!id) {
          return
        }
        this.$message.warning('收信中，请稍候...')
        getSysncById(id).then((data) => {
          if (data.state) {
            this._getMailTreeList()
            this.$message.success(data.message)
          } else {
            this.$message.error(data.message)
          }
        })
      },
      accountChange(val) {
        this.mailItem = null
        this.itemActive = 'all'
        this.itemActiveName = ''
        const tempA = this.allAcountData.filter(
          (item) => item.mailAddress == val
        )
        if (tempA && tempA.length) {
          this.currentMail = tempA[0]
          this.mailReceiver = this.setCurrentMail(tempA[0].children)
        }
      },
      _getMailTreeList() {
        this.loading = true
        getMailTreeList().then((data) => {
          if (data && data.length) {
            this.hasAccount = '1'
            this.accountList = []
            this.allAcountData = data
            let hasDefaultMail = false
            data.forEach((item) => {
              this.accountList.push({
                id: item.id,
                mail: item.mailAddress,
              })
              if (item.mailAddress === this.emailAccount) {
                this.setMailInfo(item)
              }
              if (item.isDefault) {
                hasDefaultMail = true
                this.setMailInfo(item)
              }
            })

            if (!hasDefaultMail && !this.emailAccount) {
              this.setMailInfo(data[0])
            }
          } else {
            this.hasAccount = '0'
          }
        })
        this.loading = false
      },
      setMailInfo(item) {
        this.currentMail = item
        this.mailReceiver = this.setCurrentMail(item.children)
        this.emailAccountId = item.id
        this.emailAccount = item.mailAddress
      },
      setCurrentMail(list) {
        list.forEach((item) => {
          const nickName = item.nickName.substring(0, 3)
          if (nickName == '收件箱') {
            item.classIcon = 'iconfont icon-shoujianxiang'
          }
          if (nickName == '发件箱') {
            item.classIcon = 'iconfont icon-yifasong'
          }
          if (nickName == '草稿箱') {
            item.classIcon = 'iconfont icon-caogao'
          }
          if (nickName == '垃圾箱') {
            item.classIcon = 'iconfont icon-lajiyoujian'
          }
          if (this.itemActiveName == nickName) {
            this.itemActive = item.id
          }
        })
        return list
      },
    },
  }
</script>

<style lang="scss" scoped>
  .email {
    width: 100%;
    height: 100%;
    display: flex;
    background: var(--background) !important;
    .mail-icon {
      padding-right: 4px;
    }

    .email-aside {
      width: 300px;
      height: 100%;
      border-right: 1px solid #e6e6e6;
      background: #fff;
      .email-account {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 10px;
        .email-account__left {
          width: 100%;
          .emial-setting {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            .tips {
              color: #333;
              font-size: $base-font-size-big;
            }
            .setting {
              width: 160px;
              color: #fff;
              font-size: $base-font-size-default;
              text-align: center;
              padding: 10px 0;
              margin-top: 24px;
              border-radius: 2px;
              background: var(--themeColor);
              cursor: pointer;
            }
          }
        }
        i {
          font-size: $base-font-size-big;
          cursor: pointer;
        }
      }
      .aside-bottom {
        padding: 0 10px;
        .btn-group {
          width: 100% !important;
          display: flex;
          .el-button {
            flex: 1;
          }
          .el-button--small {
            padding: 9px 10px;
          }
          .active {
            color: var(--themeColor);
            border: 1px solid var(--themeColor);
          }
        }
        .aside-content {
          margin: 20px 0;
          color: $base-font-color;
          i {
            display: inline-block;
            width: 20px;
            text-align: center;
            font-size: $base-font-size-default;
            margin-right: 3px;
          }
          .item-active {
            color: #2e5ee2;
            background: rgba(47, 97, 235, 0.26);
          }
          .all-email {
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 2px 5px;
            cursor: pointer;
            border-radius: 4px;
            .el-icon-box {
              color: #f2b140;
            }
            span {
              font-weight: bold;
            }
          }
          .email-container {
            padding: 5px 0;
            .item {
              height: 38px;
              line-height: 38px;
              padding: 0 27px;
              cursor: pointer;
              border-radius: 4px;
            }
          }
        }
      }
    }

    .email-content {
      width: calc(100% - 340px);
      height: calc(
        100vh - #{$base-top-bar-height} - #{$base-tabs-bar-height} - #{$base-content-margin} *
          2 - 40px
      );
      overflow-y: auto;
      padding: 20px;
      background: linear-gradient(180deg, #fff 0%, #fff 100%);

      .email-empty {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        .tips {
          color: #333;
          font-size: $base-font-size-big;
        }
      }
    }
  }
</style>