<template>
  <div>
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="基础信息" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="名称搜索" />
            <Button type="primary" @click="getList">查询</Button>
            <Button type="primary" style="margin-left: 10px;" @click="$refs['addTeam'].type='add',
            $refs['addTeam'].isShow=true">添加</Button>
            <!-- <Button icon="ios-add" type="primary" style="margin-left: 10px;"
              @click="$refs['imports'].show()">导入</Button> -->
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
      :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="260" header-align="center">
          <template slot-scope="scope">
            <div>
              <Button type="primary" size="small" @click="$refs['addTeam'].type='editor',
              $refs['addTeam'].id=scope.row.id,
              $refs['addTeam'].isShow=true">编辑</Button>
              <Poptip transfer confirm title="确认要删除吗？" @on-ok="delRow(scope.row.id)">
                <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
              </Poptip>
              <Button type="primary"  style="margin-left: 10px;" size="small" @click="
              $refs['showTeam'].id=scope.row.id,
              $refs['showTeam'].isShow=true">花名册</Button>
            </div>
          </template>
        </el-table-column>
      </template>

    </xy-table>
    <addTeam ref="addTeam" @refresh="getList"></addTeam>
    <showTeam ref="showTeam"></showTeam>
  </div>

</template>

<script>
  import {
    index,
    destroy
  } from "@/api/system/baseForm.js"
  import addTeam from './components/addTeam.vue'
  import showTeam from './components/showTeam.vue'
  export default {
    components: {
      addTeam,
      showTeam
    },
    data() {

      return {
        select: {
          page: 1,
          page_size: 10,
          keyword: '',
          table_name: 'teams'
        },
        total: 0,
        list: [],
        table: [{
          label: '序号',
          type: 'index',
          fixed: 'left',
          width: 80,
        }, {
          label: '队伍名称',
          prop: 'mingcheng',
          width: 240,
          align: 'left',
          fixed: 'left'
        }, {
          label: '公司',
          prop: 'gongsi',
          align: 'left',
          width: 240
        }, {
          label: '负责人',
          prop: 'fuzeren',
          width: 120,
        }, {
          label: '队长',
          prop: 'duizhang',
          width: 120,
        }, {
          label: '联系电话',
          prop: 'lianxidianhua',
          width: 120,
        }, {
          label: '人数',
          prop: 'renshu',
          width: 120,
        }, {
          label: '区域',
          prop: 'quyu',
          width: 120,
        }, {
          label: '地址',
          prop: 'dizhi',
          width: 120,
        }, {
          label: '创建日期',
          prop: 'created_at',
          width: 120,
          formatter: (cell, data, value) => {
            return value ? value.substring(0, 10) : ''
          }
        }],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      async getList() {
        const res = await index({
          ...this.select,
          filter: [{
            key:'mingcheng',
            op:'like',
            value:this.select.keyword
          }],
        })
        this.list = res.data
        this.total = res.total
      },
      pageChange(e) {
        this.select.page = e
        this.getList()
      },
      pageSizeChange(e){
        this.select.page_size = e
        this.getList()
      },
      delRow(id) {
        if (id) {
          destroy({
            id: id,
            table_name: this.select.table_name,
          }).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getList()
          })
        }
      },
    }
  }
</script>

<style>
</style>
