<template>
    <div class="app-container">
        <!-- 搜索向 -->
      <div class="flex">
          <div class="w_input">
            <span  class="textSpan">通道组名称:</span>
            <el-input v-model="body.groupName" style="width:200px" placeholder="通道名称" size="small" clearable />
            <el-button class="filter-item"  icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
            <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="dataFormAdd">新增</el-button>
          </div>
      </div>


        <!-- 表格数据 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
          <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>

          <el-table-column label="通道组名称" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.groupName }}</span>
              </template>
          </el-table-column>

          <el-table-column label="创建者" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span type="text" >{{ scope.row.creator }}</span>
              </template>
          </el-table-column>

          <el-table-column label="创建时间" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
              </template>
          </el-table-column>


          <el-table-column label="操作" fixed="right" width="200" align="center">
              <template slot-scope="scope">

                <!-- <el-button v-if="scope.row.isValid==0" size="small" icon="el-icon-circle-check" type="success"  @click="ModifyState(scope.row)">有效</el-button>
                <el-button v-if="scope.row.isValid==1" size="small" icon="el-icon-circle-close" type="info"  @click="ModifyState(scope.row)">无效</el-button> -->
                <el-button size="small" icon="el-icon-edit" type="warning" plain  @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" icon="el-icon-delete" type="danger" plain @click="ModifyDelete(scope.row,$event)">删除</el-button>
              </template>
          </el-table-column>
        
      </el-table>
        <!-- 分页 -->
      <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

     <!-- 新增与修改 -->
    <el-dialog :title="operation?'通道组新增':'通道组编辑'" :visible.sync="dialogFormVisible" width="85%" center>
      <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
 
            <el-form-item label="通道组名称" prop="groupName" :label-width="formLabelWidth"  style="width:420px;margin:15px auto">
              <el-input v-model="dataForm.groupName" placeholder="请输入通道组名称" />
            </el-form-item>

 
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    
    </div>
</template>

<script>
import api from '@/api/channelGroup.js'
export default {
    data(){
        return{  
            loading:false,   //表格数据加载
            tableData:[],       //表格数据
            body:{
                size:10,
                current:1,
                groupName:""   //名称搜索
            },
            total:0,
            dataForm:{},
            rules2:{},
            operation:false,
            dialogFormVisible:false,
            formLabelWidth:"120px"
        }
    },
    created(){
        this.reLoad()
    },
    methods:{
         // 重载数据
        reLoad(){
            this.loading = true
            api.channelGroupList(this.body).then((res) => {
                this.loading = false
                let list = res.data.data.records
                // console.log(data)
                this.tableData = list
                this.total = res.data.data.total
            })
        },
        //搜索数据
        Search(){
            this.body.current = 1
            this.reLoad()
        },
        //新增和修改API
        submitForm(){
         
          this.$refs['dataForm'].validate((valid) => {
                  if (valid) {
                    if (!this.operation) {
                        let dataForm = this.dataForm
                      // 编辑
                      api.channelGroupUpdate(dataForm).then(response => {
                        if (response.status === 200) {
                          this.$message({
                            type: 'success',
                            message: '操作成功'
                          })
                          this.dialogFormVisible = false
                          this.reLoad()
                        } else {
                          this.$message({
                            type: 'error',
                            message: response.data.msg
                          })
                        }
                      })
                    } else {
                      console.log(this.dataForm)
                    //   // 添加
                      api.channelGroupAdd(this.dataForm).then(response => {
                        if (response.status === 200) {
                          this.$message({
                            type: 'success',
                            message: '操作成功'
                          })
                          this.dialogFormVisible = false
                          this.reLoad()
                        } else {
                          this.$message({
                            type: 'error',
                            message: response.data.msg
                          })
                        }
                      })
                    }
                  }
                })
        },
        //新增弹框
        dataFormAdd(){
            this.operation = true // true:新增, false:编辑
            this.dialogFormVisible = true // 控制弹出框
            this.dataForm = {}
            if(this.$refs['dataForm']){
                 this.$refs['dataForm'].resetFields();
            }
           
        },
        //编辑弹框
        handleEdit(row){
           this.operation = false // true:新增, false:编辑
           this.dialogFormVisible = true // 控制弹出框 
           this.dataForm = JSON.parse(JSON.stringify(row)) 
           if(this.$refs['dataForm']){
               this.$refs['dataForm'].resetFields();
           }
        },
          //删除API
        ModifyDelete(row,e){
            const that = this
            let target=e.target;
            if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
                  target = e.target.parentNode;
            }
            target.blur();
            that.$confirm('此操作将删除通道：' + row.groupName, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                api.channelGroupIdDelete(row.channelGroupId).then((res)=>{
                     if (res.status === 200) {
                        that.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        that.reLoad()
                     } else {
                        that.$message({
                            type: 'error',
                            message: res.msg
                        })
                     }
                })
            })    
        },
        ///分页
        handleSizeChange: function(val) {
            this.body.size = val
            this.reLoad()
        },
        handleCurrentChange: function(val) {
            this.body.current = val
            console.log(val)
            this.reLoad()
        }
    }
}
</script>

<style scoped>
    .flex{
     width: 90%;
     display: flex;
     flex-direction: row;
     margin-bottom: 10px;
     /* flex-wrap: wrap; */
     justify-content: flex-start;
    }
    .flexend{
    display: flex;
    justify-content: flex-end;
    /* padding-right: 2rem; */
    width: 100%;
    /* margin: 0 auto; */
    padding-bottom: 20px;
    }

</style>