<template>
    <div class="app-container">

        <div class="filter-container"  style="margin-bottom: 10px;">
            <el-input
                    v-model="listQuery.keyword"
                    size="small"
                    placeholder="请输入关键词"
                    clearable
                    class="filter-item"
                    style="width: 200px;margin-left: 10px;"
            />
            <el-button-group style="margin-left: 10px;">
                <el-button
                        size="small"
                        class="filter-item"
                        type="primary"
                        icon="el-icon-search"
                        @click="search"
                >
                    搜索
                </el-button>
                <el-button
                        size="small"
                        class="filter-item"
                        type="primary"
                        icon="el-icon-refresh"
                        @click="refresh"
                >
                    重置
                </el-button>
            </el-button-group>
        </div>

      <el-row :gutter="24" class="row-container">

      <el-table
                ref="chooseTable"
                v-loading="listLoading"
                :data="list"
                element-loading-text="Loading"
                border
                fit
                height="80%"
                class="table-container"
                highlight-current-row
                @row-click="handleRowClick"
                @selection-change="getSelection"
        >

        <el-table-column
          align="center"
          type="selection"
          width="55">
        </el-table-column>

            <el-table-column
                    label="序号"
                    width="150"
                    align="center"
            >
                <template slot-scope="scope">
                    {{ scope.$index+1 }}
                </template>
            </el-table-column>

        </el-table>

        <pagination
                :total="total"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
                @pagination="fetchData"
        />

      <div class="div-border" style="height: 29%;margin-top:15px;">
        <el-alert
          type="warning"
          :closable="false">
          <template slot="title">
            已选择的条目：{{chooseList.length}}个
            <el-button style="margin-left: 15px;"
                       @click="chooseDone"
                       icon="el-icon-check"
                       type="danger">选好了</el-button>
          </template>
        </el-alert>

        <div class="tag-view">
          <el-tag
            v-for="(tag,index) in chooseList"
            :key="tag.serverId"
            closable
            effect="dark"
            @close="handleClose(tag,index)"
          >
            {{tag.serverName}}
          </el-tag>
        </div>
      </div>
  </el-row>
    </div>
</template>

<script>
import {getServerPage,deleteServer} from "@/api/business/server/server";
import {deepClone, error, success} from "@/utils";

import confirm from "@/utils/confirm";
import Pagination from '@/components/Pagination'
import addForm from "@/views/business/server/addServer";
import editForm from "@/views/business/server/editServer";

export default {
    name: 'serverList',
    components: {addForm,editForm,Pagination},
    data() {
        return {
            total: 0,
            list: [],
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 50,
                keyword: ''
            },
            temp: {},
            chooseList:[]
        }
    },
    created() {
        this.fetchData()
    },
    methods: {
        getSelection(e){
          this.chooseList = e
        },
      chooseDone(){
        if(this.chooseList.length==0){
          error('还没有选择订单')
          return false
        }
        this.$emit('ok', this.chooseList[0])

        const table = this.$refs.chooseTable;
        const rows = table.store.states.data; // 获取表格所有行的数据（不同组件获取方式可能不同）
        rows.forEach(row => {
          table.toggleRowSelection(row, false); // 调用toggleRowSelection方法，第二个参数传false表示取消选中
        });
      },
        handleRowClick(row) {
          //先删除所选中的 只选当前行
          const table = this.$refs.chooseTable;
          const rows = table.store.states.data; // 获取表格所有行的数据（不同组件获取方式可能不同）
          rows.forEach(row => {
            table.toggleRowSelection(row, false); // 调用toggleRowSelection方法，第二个参数传false表示取消选中
          });

          this.$refs.chooseTable.toggleRowSelection(row)
        },
        search() {
            this.fetchData()
        },
        refresh() {
            this.listQuery = this.$options.data().listQuery
            this.fetchData()
        },
        fetchData() {
            this.listLoading = true
            getServerPage(this.listQuery).then(response => {
                const { records, total } = response.data
                this.list = records
                this.total = total
                this.listLoading = false
            })
        },
        add(){
            this.$refs.addForm.open()
        },
        addOk(){
            this.fetchData()
        },
        edit(scope) {
            const temp = deepClone(scope.row)
            this.$refs.editForm.open(temp)
        },
        editOk(){
            this.fetchData()
        },
        del(scope) {
            confirm("确定要删除吗？").then(res=>{
                if(res){
                    deleteServer(scope.row.serverId).then(response => {
                        console.log(response)
                        success('删除成功')
                        this.fetchData()
                    })
                }
            })
        },
    }
}
</script>

<style scoped>

</style>
