<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <!-- 时间范围筛选 -->
      <span class="textSpan">客户名称:</span>
      <el-select v-model="body.customerName" filterable placeholder="请选择">
        <el-option
          v-for="item in userList"
          :key="item.customerId"
          :label="item.customerName"
          :value="item.customerName"
        >
        </el-option>
      </el-select>
      <el-button
        class="filter-item"
        icon="el-icon-search"
        type="primary"
        plain
        @click="getData()"
        >搜索</el-button
      >
      <el-button
        class="filter-item"
        icon="el-icon-plus"
        type="primary"
        plain
        @click="addUser"
        >新增</el-button
      >
    </div>
    <!-- 新增 、编辑-->
    <el-dialog
      :title="operation ? '新增客户' : '修改客户'"
      :visible.sync="dialogFormVisible"
      width="85%"
      center
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">客户基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item
                label="客户名称"
                :label-width="formLabelWidth"
                prop="customerName"
              >
                <el-input v-model="form.customerName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="!operation" :span="6" :xs="24" :sm="12" :md="12" :lg="8" 
            >
              <el-form-item
                label="客户ID"
                :label-width="formLabelWidth"
                prop="shorterName"
              >
                <el-input v-model="form.shorterName" disabled> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item
                label="客户简称"
                :label-width="formLabelWidth"
                prop="shorterName"
              >
                <el-input v-model="form.shorterName"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">客户服务联系人信息</span>
          </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="form.name" autocomplete="off"> </el-input>
              </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="form.phone" autocomplete="off"> </el-input>
              </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="form.email" autocomplete="off"> </el-input>
              </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="form.adress" autocomplete="off"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">其他</span>
          </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="form.bili" autocomplete="off"> </el-input>
              </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="form.id" autocomplete="off"> </el-input>
              </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 v-model="form.region" placeholder="请选择">
                  <el-option label="关闭" value="close"></el-option>
                  <el-option label="开启" value="open"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </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>

<!-- 查看客户-->
    <el-dialog
      title="查看客户"
      :visible.sync="dialogFormLook"
      width="85%"
      center
    >
      <el-form :model="form">
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">客户基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item
                label="客户名称"
                :label-width="formLabelWidth"
                prop="customerName"
              >
                <el-input v-model="form.customerName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="!operation" :span="6" :xs="24" :sm="12" :md="12" :lg="8" 
            >
              <el-form-item
                label="客户ID"
                :label-width="formLabelWidth"
                prop="shorterName"
              >
                <el-input v-model="form.shorterName" disabled> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item
                label="客户简称"
                :label-width="formLabelWidth"
                prop="shorterName"
              >
                <el-input v-model="form.shorterName"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">客户服务联系人信息</span>
          </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="form.linkmanName" autocomplete="off"> </el-input>
              </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="form.linkmanMobile" autocomplete="off"> </el-input>
              </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="form.linkmanEmail" autocomplete="off"> </el-input>
              </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="form.adress" autocomplete="off"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">其他</span>
          </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="form.balance" autocomplete="off"> </el-input>
              </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="form.flowAppId" autocomplete="off"> </el-input>
              </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 v-model="form.region" placeholder="请选择">
                  <el-option label="关闭" value="close"></el-option>
                  <el-option label="开启" value="open"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </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>

<!-- 查看产品 -->
<el-dialog
      :title="'customerName'+产品"
      :visible.sync="dialogLookproduct"
      width="85%"
      center
    >
      <el-table
      :data="form"
      >
      <el-table-column
        property="date"
        label="产品ID"
        width="180">
      </el-table-column>
      <el-table-column
        property="name"
        label="客户产品名称"
        width="180">
      </el-table-column>
      <el-table-column
        property="address"
        label="面额">
      </el-table-column>
      <el-table-column
        property="address"
        label="结算价格">
      </el-table-column>
      <el-table-column
        property="address"
        label="折扣">
      </el-table-column>
      <el-table-column
        property="address"
        label="是否有效">
      </el-table-column>
    </el-table>


      <!-- <el-form :model="form">
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">客户基本信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item
                label="客户名称"
                :label-width="formLabelWidth"
                prop="customerName"
              >
                <el-input v-model="form.customerName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="!operation" :span="6" :xs="24" :sm="12" :md="12" :lg="8" 
            >
              <el-form-item
                label="客户ID"
                :label-width="formLabelWidth"
                prop="shorterName"
              >
                <el-input v-model="form.shorterName" disabled> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
              <el-form-item
                label="客户简称"
                :label-width="formLabelWidth"
                prop="shorterName"
              >
                <el-input v-model="form.shorterName"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">客户服务联系人信息</span>
          </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="form.linkmanName" autocomplete="off"> </el-input>
              </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="form.linkmanMobile" autocomplete="off"> </el-input>
              </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="form.linkmanEmail" autocomplete="off"> </el-input>
              </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="form.adress" autocomplete="off"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card" shadow="nerver">
          <div slot="header" class="clearfix">
            <span class="topClass">其他</span>
          </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="form.balance" autocomplete="off"> </el-input>
              </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="form.flowAppId" autocomplete="off"> </el-input>
              </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 v-model="form.region" placeholder="请选择">
                  <el-option label="关闭" value="close"></el-option>
                  <el-option label="开启" value="open"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogLookproduct = false">取 消</el-button>
        <el-button type="primary" @click="dialogLookproduct=false">确 定</el-button>
      </div> 
    </el-dialog>
    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column
        label="序号"
        width="60"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="客户名称"
        width="150"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button type="text" @click="look(scope.row)">{{ scope.row.customerName }}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="客户简称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text" @click="lookProduct(scope.row)">{{ scope.row.shorterName }}</el-button>
        </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="授信额度" 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="150"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="small"
            @click="ModifyEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="warning"
            plain
            size="small"
            @click="ModifyDelete(scope.row)"
            icon="el-icon-delete"
          ></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>
  </div>
</template>

<script>
import api from "@/api/userList";
export default {
  data() {
    return {
      callbackTimeEnd: "",
      loading: false,
      tableData: [],
      total: 1,
      body: {
        customerName: "",
        current: 1,
        size: 10
      },
      operation: false, // true:新增, false:编辑
      dialogFormVisible: false, //打开新增/修改客户面板
      dialogFormLook:false,//打开查看客户面板
      dialogLookproduct:false,//打开查看产品面板
      formLabelWidth: "120px", //表单宽度
      form: {
        userId: 4
      }, //表单里的属性值
      rules: {
        customerName: [
          { required: true, message: "请输入客户名称", trigger: "blur" }
        ],
        shorterName: [
          { required: true, message: "请输入客户简称", trigger: "blur" }
        ]
      },
      userList: [] //搜索框下的客户列表
    };
  },
  created() {
    this.getData();
    this.user();
  },
  methods: {
    //获取数据
    getData() {
      this.loading = true;
      api.index.Search(this.body).then(res => {
        // console.log(res,"res");
        this.tableData = res.data.data.records;
        // console.log(this.tableData, "tableData");
        this.total = res.data.data.total;
        this.loading = false;
      });
    },
    // 获取搜索框下客户数据列表
    user() {
      // console.log(this.body.current,"body")
      let user = "{customerName}";
      // let user=this.body.customerName;
      api.account.userList(user).then(res => {
        this.userList = res.data.data;
        // console.log(this.userList, "userlist");
      });
    },
    //查看客户弹框
    look(row){
      this.dialogFormLook=true;
      this.form=JSON.parse(JSON.stringify(row));
    },
  // 查看产品弹框
  lookProduct(row){
    console.log(row,"row")
    this.dialogLookproduct=true;
    this.getProduct();
  },
  //产品详情
  getProduct(row){
    let user="{customerName}"
    api.index.paroductDetails(user).then(res=>{
      console.log(res,"res22")
    })
  },
    //页码
    handleSizeChange(val) {
      this.body.size = val;
      this.getData();
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val;
      this.getData();
    },
    // 新增客户
    addUser() {
      this.operation = true;
      this.dialogFormVisible = true;
      this.form = { userId: 4 };
    },
    // 新增客户API
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          console.log(this.form, "this.form");
          api.index.userAdd(this.form).then(res => {
            console.log(res, "res");
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.dialogFormVisible = false;
              this.getData();
            } else {
              this.$message({
                type: "error",
                message: "res.data.msg"
              });
            }
          });
        }
      });
    },
    //删除客户
    ModifyDelete(row) {
      this.$confirm("此操作将删除客户：" + row.customerName, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          row.isDeleted = 1;
          api.index.customerDelect(row.customerId).then(resp => {
            if (resp.status === 200) {
              this.$message({
                type: "success",
                message: "操作成功"
              });
              this.getData();
            } else {
              this.$message({
                type: "error",
                message: resp.data.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //编辑客户
    ModifyEdit(row) {
      console.log(row);
      this.operation = false;
      this.dialogFormVisible = true;
      if (this.bankCards == undefined) {
        row.bankCards = [];
      }
      let newObj = JSON.parse(JSON.stringify(row));
      this.form = newObj;
      if (this.$refs["form"]) {
        this.$refs["form"].resetFields();
      }
    },
    oncheckTimeStart() {}
  }
};
</script>

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

.edit_dev >>> .el-transfer-panel {
  width: 250px;
}
</style>
