<style>
.customerManage2 .tools {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(226, 228, 235, 1);
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
}
.customerManage2 .tools h1 {
  font-weight: bold;
  font-size: 18px;
  font-family: perfectFont !important;
}
.customerManage2 .tools .rightmenu {
  display: flex;
  align-items: center;
}
.customerManage2 .tools .rightmenu .el-button {
  border-radius: 0;
  padding: 9px 30px;
  margin-right: 20px;
}
.customerManage2 .tools .gaoji {
  font-size: 12px;
  font-weight: 400;
  color: #409efe;
  margin-right: 35px;
  cursor: pointer;
}
.customerManage2 .tools .gaoji:hover {
  color: #409efecc;
}
.customerManage2 .tools .gaoji .iconfont {
  font-size: 12px;
  padding-left: 5px;
}
.customerManage2 .query-box {
  padding: 25px 0;
  display: none;
}
.customerManage2 .table-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  margin-right: 10px;
}
.customerManage2 .table-btn.blue {
  color: #409efe;
  background-color: rgba(13, 36, 129, 0.3);
}
.customerManage2 .table-btn.org {
  color: #ffa475;
  background-color: rgba(255, 164, 117, 0.3);
}
.customerManage2 .table-btn.green {
  color: rgba(148, 184, 119, 1);
  background-color: rgba(148, 184, 119, 0.3);
}
.customerManage2 .table-btn.blue:hover {
  background-color: rgba(13, 36, 129, 0.5);
}
.customerManage2 .table-btn.org:hover {
  background-color: rgba(255, 164, 117, 0.5);
}
.customerManage2 .table-btn.green:hover {
  background-color: rgba(148, 184, 119, 0.5);
}
.customerManage2 .add-box .add-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
}
.customerManage2 .add-box .add-tit p {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: rgba(17, 17, 17, 1);
  font-size: 14px;
}
.customerManage2 .add-box .add-tit p span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #409efe;
  border-radius: 50%;
  margin-right: 10px;
}
.customerManage2 .add-box .el-dialog__header {
  padding: 15px 20px;
  background: rgba(255, 255, 255, 1);
}
.customerManage2 .add-box .dialog-footer {
  text-align: center;
  background-color: rgba(248, 250, 251, 1);
  padding-bottom: 20px;
}
.customerManage2 .add-box .el-dialog__footer {
  padding: 0;
}
.customerManage2 .add-box .el-dialog__body {
  background-color: rgba(248, 250, 251, 1);
  padding-top: 20px;
}
.customerManage2 .add-box-btn.el-button {
  border-radius: 0;
  background-color: #409efecc;
  border-color: #409efecc;
  color: white;
  padding: 12px 43px;
}
.customerManage2 .add-box-btn.el-button:hover {
  background-color: #409efe;
  border-color: #409efe;
  color: white;
}
.customerManage2 .add-box-btn.el-button.add-box-cancel {
  color: #409efecc;
  background-color: white;
}
.customerManage2 .add-box-btn.el-button.add-box-cancel:hover {
  color: #409efe;
  background-color: white;
}
.customerManage2 .form-box .form-box-tit {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.customerManage2 .form-box .radius {
  display: flex;
  width: 4px;
  height: 4px;
  background: rgba(255, 164, 117, 1);
  border-radius: 50%;
  margin-right: 10px;
}
.customerManage2 .page-content {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  top: 50px;
}
</style>
<template>
  <div class="customerManage2">
    <div class="tools">
        <h1>客户管理</h1>
        <div class="rightmenu">
            <div class="gaoji">高级查询 <i class="iconfont iconjiantou_xia"></i></div>
            <el-button class="crm-btn query-btn" @click="getList">查询</el-button>
            <el-button icon="el-icon-plus" class="crm-btn easy-btn" @click="dialogTableVisible=true">新建</el-button>
            <el-button class="crm-btn easy-btn">导入</el-button>
            <el-button class="crm-btn org-btn">导出</el-button>
        </div>
    </div>
    <div class="query-box">
        <el-row :gutter="20">
            <el-col :span="4">
                <el-select v-model="value" placeholder="请选择客户来源">
                    <el-option
                    v-for="item in SourceEnum"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="value" placeholder="请选择客户来源">
                    <el-option
                    v-for="item in SourceEnum"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="value" placeholder="请选择客户来源">
                    <el-option
                    v-for="item in SourceEnum"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="value" placeholder="请选择客户来源">
                    <el-option
                    v-for="item in SourceEnum"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="value" placeholder="请选择客户来源">
                    <el-option
                    v-for="item in SourceEnum"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select v-model="value" placeholder="请选择客户来源">
                    <el-option
                    v-for="item in SourceEnum"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
    </div>
    <div class="page-content">
        <el-table
            v-loading="loading"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            height="100%"
            stripe="true"
            border
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" fixed width="40"></el-table-column>
            <el-table-column 
                prop="NowSellName"
                label="负责人"
                width="120"
                fixed
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column 
                prop="CustomerName"
                label="客户名称"
                width="120"
                fixed
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="Contact"
                label="联系人"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="ContactNumber"
                label="联系电话"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="UpdateTime"
                label="更新时间"
                width="120"
                sortable
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerLevelStr"
                label="客户级别"
                sortable
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="MainSourceStr"
                label="客户来源"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数距进入公海天数"
                width="120"
                sortable
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                width="120"
                label="距进入公海天数"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                prop="CustomerPublic"
                label="距进入公海天数"
                width="120"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" content="提醒" placement="top">
                        <i class="table-btn blue iconfont icontishi"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="联系客户" placement="top">
                        <i class="table-btn org iconfont icondianhua"></i>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="客户详情" placement="top">
                        <i class="table-btn green iconfont iconsuosou"></i>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog :visible.sync="dialogTableVisible" custom-class="add-box">
        <div class="add-tit" slot="title">
            <p><span></span>新建客户</p>
            <span icon="el-icon-close"></span>
        </div>
        <div class="form-box">
            <el-form :model="form" class="MyEditForm" :rules="rules">
                <p class="form-box-tit"><span class="radius"></span> 基本信息</p>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="客户名称" prop="CustomerName">
                                <el-input placeholder="请输入客户姓名" v-model="form.CustomerName"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="客户级别" prop="CustomerLevel">
                                <!-- placeholder="请选择客户级别" -->
                                <el-select v-model="form.CustomerLevel" placeholder="请选择客户级别">
                                    <el-option
                                        v-for="item in SourceEnum"
                                        :key="item.ID"
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="客户来源" prop="CustomerSourceType">
                                <el-select v-model="form.CustomerSourceType" placeholder="请选择客户来源">
                                    <el-option
                                        v-for="item in SourceEnum"
                                        :key="item.ID"
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="30">
                    <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="联系人" prop="Contact">
                                <el-input placeholder="请输入联系人" v-model="form.Contact"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="电话" prop="ContactNumber">
                                <el-input placeholder="请输入联系电话" v-model="form.ContactNumber"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="MyEditForm-item">
                            <el-form-item label="客户来源" prop="CustomerSourceType">
                                <el-select v-model="form.CustomerSourceType" placeholder="请选择客户来源">
                                    <el-option
                                        v-for="item in SourceEnum"
                                        :key="item.ID"
                                        :label="item.Name"
                                        :value="item.ID">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="add-box-btn" @click="dialogFormVisible = false">确 定</el-button>
            <el-button class="add-box-btn add-box-cancel" @click="dialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rules: {
        CustomerName: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        CustomerLevel: [
          { required: true, message: "请选择客户级别", trigger: "change" },
        ],
        CustomerSourceType: [
          { required: true, message: "请选择客户来源", trigger: "change" },
        ],
        Contact: [{ required: true, message: "请输入联系人", trigger: "blur" }],
        ContactNumber: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
      },
      loading: true,
      dialogTableVisible: true,
      tableData: [],
      multipleSelection: [],
      value: "",
      SourceEnum: [],
      msg: {
        CustomerName: "",
        Contact: "",
        pageIndex: 1,
        pageSize: 30,
        ContactNumber: "",
        WhereType: -1,
        OrderBy: "",
      },
      form: {
        CustomerId: 0,
        CustomerName: "",
        CustomerLevel: "",
        Contact: "",
        ContactNumber: "",
        Address: "",
        Remark: "",
        Premises: "",
        CustomerStatus: "",
        CustomerSourceType: "",
        CustomerSource: "",
        Country: "",
        Province: "",
        City: "",
        District: "",
        BrandIds: "",
        Images: "",
        BusinessCardPhotos: "",
        HousePhotos: "",
      },
      WhereTypeList: [
        {
          id: -1,
          name: "全部",
        },
        {
          id: 1,
          name: "我负责的",
        },
        {
          id: 2,
          name: "下属的",
        },
        {
          id: 3,
          name: "我参与的",
        },
        {
          id: 4,
          name: "我关注的",
        },
      ],
    };
  },
  mounted() {
    this.getList();
    this.GetCustomerSourceEnum();
  },
  methods: {
    getList: function() {
      this.loading = true;
      this.apipost("/api/Customer/GetCustomerPage", this.msg, (res) => {
        if (res.data.resultCode == 1) {
          this.tableData = res.data.data.pageData;
          this.loading = false;
        }
      });
    },
    GetCustomerSourceEnum() {
      this.apipost("/api/Customer/GetCustomerSourceEnum", {}, (res) => {
        if (res.data.resultCode == 1) {
          this.SourceEnum = res.data.data;
        }
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
