<template>
  <el-dialog
    :title="$t('pages.familyList.memberDialog.title')"
    :visible="true"
    :modal-append-to-body="true"
    :append-to-body="true"
    :before-close="handleClose"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="80%"
  >
    <div class="app-container">
      <div class="filter-container">
        <div class="filter-item">
          <account-input v-model="listQuery.userId" :placeholder="$t('pages.familyList.filter.userId')" />
        </div>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          :disabled="searchDisabled"
          @click="handleSearch"
        >
          {{ $t('pages.familyList.action.search') }}
        </el-button>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        :before-close="handleClose"
        :element-loading-text="$t('pages.familyList.loading')"
        fit
        highlight-current-row
        max-height="350px"
      >
        <el-table-column :label="$t('pages.familyList.memberDialog.table.avatar')" align="center" width="150">
          <template slot-scope="scope">
            <avatar :url="scope.row.userBaseInfo.userAvatar" :gender="scope.row.userSex" />
            <div
              style="width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
            >
              <gender :gender="scope.row.userBaseInfo.userSex" :gender-name="scope.row.userBaseInfo.userSexName" :desc="scope.row.userBaseInfo.account" />
              ({{ scope.row.userBaseInfo.accountStatusName }})
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('pages.familyList.memberDialog.table.nickname')" align="center">
          <template slot-scope="scope">
            <div
              style="width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
            >
              <el-link v-if="scope.row.userBaseInfo.id" @click="queryUserDetails(scope.row.userBaseInfo.id)"><a :title="scope.row.userBaseInfo.userNickname"> {{ scope.row.userBaseInfo.userNickname }} </a></el-link>
              <a v-else :title="scope.row.userBaseInfo.userNickname"> {{ scope.row.userBaseInfo.userNickname }} </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('pages.familyList.memberDialog.table.role')" align="center">
          <template slot-scope="scope">
            <span v-for="(item, index) in familyRoleOptions" :key="index">
              <span v-if="item.value == scope.row.memberRole">{{ item.name }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('pages.familyList.memberDialog.table.joinedAt')" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('pages.familyList.table.actions')" align="center" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click.native="removeMember(scope.row)">{{ $t('pages.familyList.action.remove') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.cursor"
        :limit.sync="listQuery.limit"
        @pagination="renderData"
      />

      <user-deatils-drawer
        v-if="userDeatilsDrawerVisible"
        :user-id="thatSelectedUserId"
        @close="userDeatilsDrawerVisible=false"
      />
    </div>
  </el-dialog>
</template>

<script>
import { pageFamilyMember, removeFamilyMember } from '@/api/family'
import Pagination from '@/components/Pagination'
import { familyRoles } from '@/constant/family'
export default {
  name: 'FamilyMember',
  components: { Pagination },
  props: {
    familyId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        cursor: 1,
        limit: 20,
        userId: '',
        familyId: ''
      },
      listLoading: false,
      searchDisabled: false,
      userDeatilsDrawerVisible: false,
      thatSelectedUserId: ''
    }
  },
  computed: {
    familyRoleOptions() {
      return familyRoles.map(item => ({
        ...item,
        name: this.$t(`pages.familyList.role.${item.value}`)
      }))
    }
  },
  watch: {
    familyId: {
      handler(newVal) {
        this.listQuery.familyId = newVal
        this.renderData()
      },
      immediate: true
    }
  },
  methods: {
    renderData() {
      const that = this
      if (!that.listQuery.familyId) {
        return
      }
      that.listLoading = true
      pageFamilyMember(that.listQuery).then(res => {
        const { body } = res
        that.total = body.total || 0
        that.list = body.records
        that.listLoading = false
      })
    },
    handleClose() {
      this.$emit('close')
    },
    handleSearch() {
      this.renderData(true)
    },
    queryUserDetails(id) {
      this.userDeatilsDrawerVisible = true
      this.thatSelectedUserId = id
    },
    removeMember(item) {
      const that = this
      that.$confirm(this.$t('pages.familyList.confirm.removeMember'), this.$t('pages.familyList.confirm.title'), {
        type: 'warning',
        confirmButtonText: this.$t('pages.familyList.confirm.confirm'),
        cancelButtonText: this.$t('pages.familyList.confirm.cancel')
      }).then(() => {
        that.$message({
          message: this.$t('pages.familyList.message.processing'),
          type: 'warning'
        })
        that.listLoading = true
        removeFamilyMember(item.familyId, item.id).then((res) => {
          that.listLoading = false
          that.$message({
            message: this.$t('pages.familyList.message.removeSuccess'),
            type: 'success'
          })
          that.renderData()
        }).catch(er => {
          console.error(er)
          that.listLoading = false
        })
      }).catch(er => {
        console.error(er)
        that.listLoading = false
      })
    }
  }
}
</script>
