<template>
  <div class="app-container">
      <div class="filter-container" style="margin: 10px 0 10px 0">
        <span class="textSpan">客户名称:</span>
        <el-input v-model="body.customerName" style="width:200px;" placeholder="客户名称" size="small" clearable />
        <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
      </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>

          <!-- 字段信息：应用ID、app名称、客户名称、状态、重发次数、备注、通道组名称、操作、网关回调UPL -->
          <el-table-column label="应用ID" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.appId }}</span>
              </template>
          </el-table-column>
          <el-table-column label="应用Key" width="150" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.appKey }}</span>
              </template>
          </el-table-column>

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

          <el-table-column label="客户名称" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.customerName }}</span>
              </template>
          </el-table-column>

          <el-table-column label="状态" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <!--  0-无效 1-有效  -->
                <el-tag v-if="scope.row.status==1">有效</el-tag>
                <!-- <el-tag v-if="scope.row.status==2" type="info">暂停</el-tag> -->
                <el-tag v-if="scope.row.status==0" type="danger">无效</el-tag>
              </template>
          </el-table-column>

          <el-table-column label="维护范围" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <!--  0-无效 1-有效  -->
                <el-tag v-if="scope.row.rechargeType==1" type="success">快充</el-tag>
                <el-tag v-if="scope.row.rechargeType==2" type="warning">慢充</el-tag>
              </template>
          </el-table-column>

          <el-table-column label="重发次数" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.totalCount }}</span>
              </template>
          </el-table-column>

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

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

          <el-table-column label="网关回调URL" align="center" width="150" show-overflow-tooltip>
              <template slot-scope="scope">
                  <span>{{ scope.row.callbackUrl }}</span>
              </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" width="190" align="center">
            <template slot-scope="scope">
                <el-button v-if="scope.row.status === 1" size="small" icon="el-icon-close" plain type="danger" @click="ModifyStatus(scope.row,0)">无效</el-button>
                <el-button v-if="scope.row.status === 0" size="small" icon="el-icon-check" plain type="success" @click="ModifyStatus(scope.row,1)">有效</el-button>
                <el-button size="small" icon="el-icon-edit" type="warning" plain @click="ModifyEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>

      </el-table>

       <!-- 新增与修改 -->
    <el-dialog :title="operation?'新增App':'编辑App'" :visible.sync="dialogFormVisible" width="85%" center>
      <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="应用AD" prop="appId"  :label-width="formLabelWidth"  >
            <el-input v-model="dataForm.appId"  />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="应用Key" prop="appKey"  :label-width="formLabelWidth"  >
            <el-input v-model="dataForm.appKey"  />
            </el-form-item>
          </el-col>
          
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="是否二次回调" :label-width="formLabelWidth"  >
            <el-select size="small"  value-key="relationId" filterable v-model="dataForm.secondCallback" clearable placeholder="请选择" style="width: 100%" >
                    <el-option
                    v-for="item in secondCallback"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                </el-select>
            </el-form-item>
               <!-- <el-form-item label="状态" prop="status" :label-width="formLabelWidth"  >
                       <el-select size="small" style="width:100%" v-model="dataForm.status">
                        <el-option
                        v-for="item in status"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        />
                        </el-select>
                </el-form-item> -->
          </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="App名称" prop="appName" :label-width="formLabelWidth"  >
            <el-input v-model="dataForm.appName"  />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
               <el-form-item label="客户名称"  prop="customerName" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.customerName" disabled />
                </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
             <el-form-item label="重发次数" prop="totalCount" :label-width="formLabelWidth"  >
            <el-input v-model="dataForm.totalCount" />
            </el-form-item>
          </el-col>

        </el-row>
      
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="超时时间" :label-width="formLabelWidth"  >
            <el-input v-model="dataForm.time" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
           <el-form-item label="通道组名称" :label-width="formLabelWidth"  >
            <el-select size="small"  value-key="relationId" filterable v-model="channelGroupId" clearable placeholder="请选择供应商" style="width: 100%" >
                    <el-option
                    v-for="item in channelGroupData"
                    :key="item.channelGroupId"
                    :label="item.groupName"
                    :value="item.channelGroupId"
                    />
                </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="网关回调URL" prop="callbackUrl" :label-width="formLabelWidth"  >
            <el-input v-model="dataForm.callbackUrl" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
           
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
           <el-form-item
            label="维护范围"
            :label-width="formLabelWidth"
            prop="rechargeType"
          >
            <el-select
              size="small"
              v-model="dataForm.rechargeType"
              placeholder="请选择维护范围"
              @change="onRechargeType"
              style="width:90%"
            >
              <el-option
                v-for="item in rechargeStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="20" v-for="(element,index) in dataForm.ipWhiteListList" :key="element.id" > 
            <el-col :span="12">
                <el-form-item label="Ip地址" :label-width="formLabelWidth">
                    <el-input  v-model="element.ipAddr"></el-input>                     
                </el-form-item>
               
            </el-col>
         
             <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="Ip描述" :label-width="formLabelWidth"  >
                <el-input  type="textarea" :autosize="{ minRows: 2, maxRows: 5}" v-model="element.des" />
                </el-form-item>
            </el-col>  
            <el-col :span="2">
              <el-button type="danger" plain icon="el-icon-delete" circle  @click="priceDelete(element,index,$event)"></el-button>
            </el-col>  
            <el-col :span="1" class="icon-list__tips">
            <el-tooltip placement="top" effect="light" style="padding: 10px; 0 0 0">
            <div slot="content">
                <p>Ip地址与Ip描述：</p>
                <p>其中不能有为空的操作！！！</p>
                </div>
            <i class="el-icon-warning" />
            </el-tooltip>
            </el-col>
        </el-row>
        <el-row :gutter="20" > 
             <div style="width:100%" >
                   <el-button class="addGroupButton" type="primary" round plain @click="addGroup()">添加IP</el-button>
             </div>
        </el-row>
      </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 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>
  </div>
</template>

<script>
import api from '@/api/userList'
export default {
    data() {
        return {
            tableData:[],
            body:{
                size:10,
                current:1
            },
           operation: false, // true:新增, false:编辑
           dialogFormVisible: false,
           dataForm:{},
           total:0,
           rules2:{
                appId: [{ required: true, message: '请输入AppId', trigger: 'blur' }], 
                appName: [{ required: true, message: '请输入App名称', trigger: 'blur' }], 
                status: [{ required: true, message: '请选择状态', trigger: 'blur' }], 
                totalCount: [{ required: true, message: '请输入重发次数', trigger: 'blur' }], 
           },
           formLabelWidth:"120px",
           channelGroupData:[],
           status:[{
               id:1,
               name:"有效"
           },{
               id:0,
               name:"无效"
           }],
           channelGroupId:"",
           rechargeStatus: [{ id: 1, name: "快充" }, { id: 2, name: "慢充" }], //充值方式
           secondCallback:[
               {id:0,name:"不支持"},
               {id:1,name:"支持"}
           ]
        }
    },
    created() {
        this.loadData()
        this.channelData()
    },
    methods: {
        //关联通道组数据
        channelData(){
            api.access.channelGroup().then((res)=>{
                this.channelGroupData = res.data.data
            })
        },
        loadData(){
            this.loading = true
            api.access.Search(this.body).then((res) => {
                this.loading =false
                this.tableData = res.data.data.records
                this.total = res.data.data.total
            })
        },
        Search(){
            this.body.current = 1
            this.loadData()
        },
        //配置通道组
        onRechargeType(row){
             this.$confirm('您以修改维护范围,请前往通道组进行配置', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showClose:false,
                closeOnClickModal:false,
                type: 'warning'
              }).then(() => {
                 this.selectref = false
                 console.log("确定")
              }).catch(() => {
                this.selectref = true
              });
        },
        //添加ip
        addGroup(){
            let ipWhiteListList = {
                ipAddr:"",
                des:""
            }
            this.dataForm.ipWhiteListList.push(ipWhiteListList)
        },
        ModifyStatus(row,i){
            this.$confirm('是否修改 '+row.customerName+' 的状态', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                let code = JSON.parse(JSON.stringify(row))
                code.status = i 
                api.access.update(code).then(response => {
                if (response.status == 200) {
                this.$message({
                    type: 'success',
                    message: '操作成功'
                })
                this.dialogFormVisible = false
                this.loadData()
                } else {
                this.$message({
                    type: 'error',
                    message: response.data.msg
                })
                }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });
        },
              //删除分发组
          priceDelete(row,index,e){
            // row.splice(index,1)
            console.log(index)
              this.$confirm('是否删除该IP', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(()=>{       
                this.dataForm.ipWhiteListList.splice(index,1)
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                              })
                    }).catch(() => {
                    this.$message({
                      type: 'info',
                      message: '已取消'
                    });          
              }); 
              let target=e.target;
            if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
              target = e.target.parentNode;
            }
            target.blur(); 
          },
        ModifyEdit(row){
            console.log(row)
            this.channelGroupId = row.channelId
            this.dataForm = JSON.parse(JSON.stringify(row))
            this.dialogFormVisible = true
        },
        //修改api
        submitForm(){
            this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        if (!this.operation) {
                        this.dataForm.channelId = this.channelGroupId
                        // 编辑
                        api.access.update(this.dataForm).then(response => {
                            if (response.status === 200) {
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                            this.dialogFormVisible = false
                            this.loadData()
                            } else {
                            this.$message({
                                type: 'error',
                                message: response.data.msg
                            })
                            }
                        })
                        } else {
                        console.log(this.dataForm)
                        //   // 添加
                        // api.index.userAdd(this.dataForm).then(response => {
                        //     if (response.status === 200) {
                        //     this.$message({
                        //         type: 'success',
                        //         message: '操作成功'
                        //     })
                        //     this.dialogFormVisible = false
                        //     this.getTenantList()
                        //     } else {
                        //     this.$message({
                        //         type: 'error',
                        //         message: response.data.msg
                        //     })
                        //     }
                        // })
                        }
                         }
                    })
        },
        handleSizeChange(val) {
            this.body.size = val
            this.loadData()
        },
    //换页
        handleCurrentChange(val) {
            this.body.current = val
            this.loadData()
        }
    },

}
</script>

<style scoped>
    .addGroupButton{
         width: 80%;
      margin: 0px 10px 10px 90px;
      text-align: center;
    }
</style>