<template>
  <el-dialog
    top="10vh"
    width="1000px"
    title="分配人员"
    :visible.sync="dialogVisible"
  >
    <header-search
      search-tips="通过名称、账号来搜索"
      :deldisabled="!(selectedRows && selectedRows.length)"
      @search-by-key="searchByKey"
      @handle-add="addUser"
      @handle-del="delMultiple"
    />

    <div class="content-table">
      <el-table
        v-loading="dataLoading"
        border
        :data="rows"
        max-height="500"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection"></el-table-column>

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

        <el-table-column
          prop="fullname"
          label="名称"
          width="180"
        ></el-table-column>

        <el-table-column
          prop="account"
          label="账号"
          width="180"
        ></el-table-column>

        <el-table-column prop="email" label="邮箱"></el-table-column>

        <el-table-column
          prop="mobile"
          label="手机号码"
          width="130"
        ></el-table-column>

        <el-table-column label="操作" width="150">
          <template #default="{ row, $index }">
            <el-button
              type="text"
              class="operate-text-btn"
              :disabled="$index === 0"
              @click="swap('up', $index)"
            >
              上移
            </el-button>
            <el-button
              type="text"
              class="operate-text-btn"
              :disabled="$index === rows.length - 1"
              @click="swap('down', $index)"
            >
              下移
            </el-button>
            <el-button type="text" @click="delSingle(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-row type="flex" justify="end" class="row-mr">
      <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>

    <ht-user-dialog
      ref="htDialog"
      :data="dialogData"
      :append-to-body="true"
      :pagination="dialogPageBean"
      search-placeholder="输入账号或姓名"
      quick-search-props="ACCOUNT_,FULLNAME_"
      title="选择用户"
      select-label="fullname"
      @on-confirm="dialogConfirm"
    ></ht-user-dialog>
  </el-dialog>
</template>

<script>
  import {
    getUcGroupUser,
    removeUcGroupUser,
    saveUserGroup,
    swapGroupUser,
  } from '@/api/personal'
  import { getUserSelectorList } from '@/api/uc'
  import personalSetting from '@/mixins/personalSetting'
  import HeaderSearch from '@/views/personal/components/HeaderSearch'

  export default {
    components: {
      HeaderSearch,
    },
    mixins: [personalSetting],
    data() {
      return {
        rows: [],
        groupId: '',
        dialogData: [],
        dataLoading: false,
        dialogVisible: false,
        dialogPageBean: {},
        tableColumns: [
          { prop: 'fullname', label: '姓名' },
          { prop: 'account', label: '账号' },
          { prop: 'email', label: '邮箱' },
          { prop: 'phone', label: '手机' },
        ],
      }
    },
    methods: {
      addUser() {
        this.$refs.htDialog.showDialog()
      },
      showDialog(groupId) {
        this.groupId = groupId
        this.search()
        this.dialogVisible = true
      },
      searchByKey(searchKey) {
        this.search('', searchKey)
      },
      search(isPageChange, searchKey) {
        this.dataLoading = true
        if (!isPageChange) {
          this.pagination.page = 1
        }
        const queryFilter = {
          pageBean: this.pagination,
        }
        if (searchKey != null && searchKey !== '') {
          queryFilter.querys = [
            {
              property: 'u.ACCOUNT_',
              value: searchKey,
              operation: 'LIKE',
              relation: 'OR',
              group: 'searchWord',
            },
            {
              property: 'u.FULLNAME_',
              value: searchKey,
              operation: 'LIKE',
              relation: 'OR',
              group: 'searchWord',
            },
          ]
        }
        getUcGroupUser(this.groupId, queryFilter).then((data) => {
          if (data) {
            this.pagination = {
              page: data.page,
              pageSize: data.pageSize,
              total: data.total,
            }
            this.rows = data.rows ? data.rows : []
          }
          setTimeout(() => {
            this.dataLoading = false
          }, 300)
        })
      },
      remove() {
        let { selection } = this.$refs.table
        if (selection.length == 0) {
          this.$message.warning('请选择要删除的数据')
          return
        }
        let ids = selection.map((item) => item.groupUserId)
        removeUcGroupUser(ids).then((resp) => {
          if (resp.state) {
            this.$message.success(resp.message)
            this.search(true)
          }
        })
      },
      delSingle({ groupUserId }) {
        this.handleDelete(groupUserId, '确定删除该用户吗？')
      },
      delMultiple() {
        if (!this.selectedRows.length) {
          this.$message.warning('请选择要删除的用户')
          return
        }
        const delIds = this.selectedRows.map((item) => item.groupUserId)
        this.handleDelete(delIds, '确定删除所选中的用户吗？')
      },
      handleDelete(ids, tips) {
        this.$confirm(tips, '提示', {
          type: 'warning',
        })
          .then(() => {
            removeUcGroupUser(ids).then((res) => {
              if (res.state) {
                this.$message.success(res.message)
                this.search()
              }
            })
          })
          .catch(() => {})
      },
      loadUser(param, cb) {
        getUserSelectorList(param).then((resp) => {
          this.$set(this, 'dialogData', resp.rows)
          this.dialogPageBean.total = resp.total
          cb.call()
        })
      },
      dialogConfirm(selection) {
        if (!selection || selection.length == 0) {
          return
        }
        let ids = selection.map((item) => item.id)
        let param = {
          groupId: this.groupId,
          ids,
        }
        saveUserGroup(param).then((resp) => {
          if (resp.state) {
            this.$message.success(resp.message)
          }
          this.search(true)
        })
      },
      swap(action, index) {
        let swapItem = this.rows[action === 'up' ? index - 1 : index + 1]
        if (swapItem) {
          let ids = [this.rows[index], swapItem].map((item) => item.groupUserId)
          swapGroupUser(ids).then((resp) => {
            this.search(false)
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 20px;
    .operate-text-btn {
      border: none;
    }
  }
  ::v-deep .el-button.is-disabled {
    span {
      color: #d9d9d9;
    }
  }
  .row-mr {
    margin-top: 20px;
  }
</style>