<template>
  <div class="userGroup">
    <el-form size="small" inline>
      <el-form-item label="分群名称">
        <el-input v-model="form.name" placeholder="输入分群名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.state" clearable>
          <el-option label="生效" :value="1"></el-option>
          <el-option label="失效" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button plain icon="el-icon-refresh" @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-search" @click="getDatas">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table border v-loading="loading" :data="datas" :header-cell-style="{ 'background-color': '#E4E7ED', color: '#000','text-align':'center' }">
      <el-table-column prop="name" label="分群名称" align="center"></el-table-column>
      <el-table-column prop="num" label="数量" align="center"></el-table-column>
      <el-table-column prop="content" label="描述信息" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
      <el-table-column prop="state" label="状态" align="center">
        <template slot-scope="scope">
          <span style="color: #67C23A;" v-if="scope.row.state == 1">生效</span>
          <span style="color: #F56C6C;" v-else-if="scope.row.state == 0">失效</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="small" type="danger" plain v-if="scope.row.state == 1" @click="editClick(scope.row)">失效</el-button>
          <el-button size="small" type="success" plain v-if="scope.row.state == 0" @click="editClick(scope.row)">恢复</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float: right" background layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="form.pageNum" :page-size="form.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
import { post, get } from "@/api/common";
export default {
  data () {
    return {
      loading: true,
      form: {
        name: "",
        state: "",
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      datas: []
    }
  },
  mounted () {
    this.getDatas()
  },
  methods: {
    editClick (item) {

      this.$confirm("是否修改此数据状态？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        item.state = item.state == 0 ? 1 : 0
        post('/userid_group/update/', item).then(res => {
          if (res.code == 10000) {
            this.$message.success('修改成功')
            this.getDatas()
          }
        })
      })

    },
    getDatas () {
      get('/userid_group/list', this.form).then(res => {
        this.loading = false
        this.datas = res.data.list
        this.total = res.data.total
      })
    },
    reset () {
      this.form.name = ""
      this.form.state = ""
      this.form.pageNum = 1
      this.form.pageSize = 10
      this.getDatas()
    },
    // 每页数量
    handleSizeChange (val) {
      this.form.pageNum = 1;
      this.form.pageSize = val;
      this.getDatas()
    },
    // 当前页
    handleCurrentChange (val) {
      this.form.pageNum = val;
      this.getDatas()
    },
  }

}
</script>

<style lang="scss" scoped>
.userGroup {
  padding: 20px !important;
}
</style>