<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="productTable"
        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="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.serverNo }}
          </template>
        </el-table-column>

        <el-table-column
          label="服务人员名称"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.serverName }}
          </template>
        </el-table-column>

        <el-table-column
          label="服务人员手机号"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.serverPhone }}
          </template>
        </el-table-column>

        <el-table-column
          label="入职时间"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.joinTime }}
          </template>
        </el-table-column>

        <el-table-column
          label="门店名"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.shopName }}
          </template>
        </el-table-column>

        <el-table-column
          label="创建人"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.createName }}
          </template>
        </el-table-column>

        <el-table-column
          label="创建时间"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </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">
            已选择的条目：{{productList.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 productList"
            :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: {},
        productList: []
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      getSelection(e) {
        this.productList = e
      },
      chooseDone() {
        if (this.productList.length == 0) {
          error('还没有选择订单')
          return false
        }
        this.$emit('ok', this.productList)

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

        this.$refs.productTable.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>
  .tag-view /deep/ .el-tag {
    margin: 10px;
  }
</style>
