<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="reLoad">搜索</el-button>
      <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="NewUser">新增</el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <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">
          <span>{{ scope.row.shorterName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" size="small">有效</el-tag>
          <el-tag v-if="scope.row.status === 2" size="small">无效</el-tag>
          <el-tag v-if="scope.row.status === 3" size="small">暂停</el-tag>
        </template>
      </el-table-column>


      <el-table-column label="帐号余额" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="Logo图片组ID" width="200" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.logoGroupId }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="授信额度" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.creditAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="当前费用" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.currentAmount }}</span>
        </template>
      </el-table-column>

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


      <el-table-column label="操作" fixed="right" min-width="200" align="center">
        <template slot-scope="scope">
          <el-button size="small" icon="el-icon-edit" type="warning" @click="ModifyEdit(scope.row)">编辑</el-button>
          <el-button size="small" icon="el-icon-delete" type="danger" @click="ModifyDelete(scope.row,$event)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

<!-- 添加或修改对话框 -->
        <el-dialog :title="operation?'新增客户':'编辑客户'" width="85%" :visible.sync="dialogFormVisible" center>
          <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
               <!-- 客户基本信息 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">客户基本信息</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <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" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="客户ID" :label-width="formLabelWidth"  >
                          <el-input v-model="dataForm.customerId"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="客户简称" prop="shorterName" :label-width="formLabelWidth">
                          <el-input v-model="dataForm.shorterName"  />
                        </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-card>  
              <!-- 客户服务联系人信息 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">客户服务联系人信息</span>
                </div>
                <div>
                    <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.linkmanName" />
                      </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-input v-model="dataForm.linkmanMobile"  />
                        </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-input v-model="dataForm.linkmanEmail"  />
                        </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.address" />
                      </el-form-item>
                    </el-col> 
                  </el-row>
                </div>
              </el-card>  
              <!-- 其他 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">其他</span>
                </div>
                <div>
                    <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.partnerCommission" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="合作伙伴ID" :label-width="formLabelWidth"  >
                          <el-input v-model="dataForm.partnerId"  />
                        </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-input v-model="dataForm.priceCheck"  />
                        </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-select size="small"  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>
      
                </div>
              </el-card>  
          </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 {
      body: {
        customerName:"",
        size: 10,
        current: 1
      },
      status:[{
        id:1,
        name:"有效"
      },{
        id:2,
        name:"无效"
      },{
        id:3,
        name:"暂停"
      }],
      operation: false, // true:新增, false:编辑
      dialogFormVisible: false, // 控制弹出框
      formLabelWidth: '120px',   //新增宽度
      dataForm:{
          userId:4,
      },
      rules2:{
        shorterName: [{ required: true, message: '请输入客户简称', trigger: 'blur' }],
        customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
      },
      loading:false,
      total: 1,
      tableData: [
 
      ]
    }
  },
  created() {
    this.getTenantList()
  },
  methods: {
    //新增弹框
    NewUser() {
      this.operation = true
      this.dialogFormVisible = true
      this.dataForm = {
          userId:4,
      }
    },
    //编辑弹框
    ModifyEdit(row) {
      this.operation = false
      this.dialogFormVisible = true
      this.dataForm = row
    },
    ModifyDelete(row,e) {
       let target=e.target;
      if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
            target = e.target.parentNode;
      }
     target.blur();
      console.log('ModifyDelete')
    },
    //数据
    getTenantList(){
      this.loading = true
      api.Search(this.body).then((res) => {
        this.loading =false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    //新增或修改API
    submitForm(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (!this.operation) {
              console.log(this.dataForm)
              // 编辑
              // api.channelEdit(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
              //     })
              //   }
              // })
            } else {
              console.log(this.dataForm)
            //   // 添加
              api.userAdd(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
                  })
                }
              })
            }
          }
        })
    },
    //搜索
    reLoad() {
      this.body.current = 1
      this.getTenantList()
    },
    //页码
    handleSizeChange(val) {
      this.body.size = val
      this.getTenantList()
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val
      this.getTenantList()
    }
  }
}
</script>

<style scoped>
    .el-card {
      border: 0px solid #fff;
    }
</style>
