<template>
  <div class="top-contacts">
    <header-search
      search-tips="群组名称关键词"
      :deldisabled="!(selectedRows && selectedRows.length)"
      @search-by-key="searchByKey"
      @handle-add="add"
      @handle-del="delMultiple"
    />

    <div class="content-table">
      <el-table
        ref="table"
        v-loading="loading"
        border
        :data="rows"
        :height="tableHeight + 'px'"
        @selection-change="selectionChange"
      >
        <el-table-column
          align="center"
          type="selection"
          width="50"
        ></el-table-column>

        <el-table-column
          type="index"
          label="序号"
          width="100"
        ></el-table-column>

        <el-table-column
          label="群组名称"
          prop="groupName"
          :sortable="true"
        ></el-table-column>

        <el-table-column
          label="群组编码"
          prop="code"
          :sortable="true"
        ></el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button type="text" @click="addUserToGroup(row.id)">
              分配人员
            </el-button>
            <el-button type="text" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" @click="delSingle(row)">删除</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
          <el-image :src="tableNoDataImg"></el-image>
          <p class="no-data-text">暂无数据</p>
        </template>
      </el-table>

      <el-row type="flex" justify="end" class="my-pagination">
        <el-pagination
          background
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.page"
          :page-sizes="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-row>
    </div>

    <top-contacts-dialog
      ref="topContactsDialog"
      :dialog-title="dialogTitle"
      @confirm="confirm"
    ></top-contacts-dialog>

    <top-contacts-user-dialog
      ref="topContactsUserDialog"
    ></top-contacts-user-dialog>
  </div>
</template>

<script>
  import {
    getTopContacts,
    saveTopContacts,
    removeTopContactsBatch,
  } from '@/api/personal'
  import personalSetting from '@/mixins/personalSetting'
  import TopContactsDialog from './components/TopContactsDialog'
  import HeaderSearch from '@/views/personal/components/HeaderSearch'
  import TopContactsUserDialog from './components/TopContactsUserDialog'
  export default {
    name: 'TopContacts',
    components: {
      HeaderSearch,
      TopContactsDialog,
      TopContactsUserDialog,
    },
    mixins: [personalSetting],
    data() {
      return {
        rows: [],
        loading: false,
        dialogTitle: '',
      }
    },
    created() {
      this.search()
    },
    methods: {
      searchByKey(searchKey) {
        this.search('', searchKey)
      },
      search(isPageChange, searchKey) {
        this.loading = true
        if (!isPageChange) {
          this.pagination.page = 1
        }
        const queryFilter = {
          pageBean: this.pagination,
          sorter: [{ property: 'create_time_', direction: 'DESC' }],
        }
        if (searchKey != null && searchKey !== '') {
          queryFilter.querys = [
            {
              operation: 'LIKE',
              property: 'GROUP_NAME',
              relation: 'AND',
              value: searchKey,
            },
          ]
        }
        getTopContacts(queryFilter).then((data) => {
          if (data) {
            this.pagination = {
              page: data.page,
              pageSize: data.pageSize,
              total: data.total,
            }
            this.rows = data.rows ? data.rows : []
          }
          setTimeout(() => {
            this.loading = false
          }, 300)
        })
      },
      add() {
        this.dialogTitle = '添加群组信息'
        this.$refs.topContactsDialog.showDialog()
      },
      addUserToGroup(id) {
        this.$refs.topContactsUserDialog.showDialog(id)
      },
      handleEdit(row) {
        this.dialogTitle = '编辑群组信息'
        this.$refs.topContactsDialog.showDialog(row)
      },
      confirm(model) {
        saveTopContacts(model).then((result) => {
          if (result.state) {
            this.$message.success(result.message)
          }
          this.$nextTick(() => {
            this.search()
          })
        })
      },
      delSingle({ id }) {
        this.handleDelete(id, '确定删除该群组吗？')
      },
      delMultiple() {
        if (!this.selectedRows.length) {
          this.$message.warning('请选择要删除的群组')
          return
        }
        const delIds = this.selectedRows.map((item) => item.id)
        this.handleDelete(delIds, '确定删除所选中的群组吗？')
      },
      handleDelete(ids, tips) {
        this.$confirm(tips, '提示', {
          type: 'warning',
        })
          .then(() => {
            removeTopContactsBatch(ids).then((resp) => {
              if (resp.state) {
                this.$message.success(resp.message)
                this.search()
              }
            })
          })
          .catch(() => {})
      },
    },
  }
</script>

<style lang="scss" scoped></style>