<style>
.main {
  height: 100%;
  position: relative;
}
.left-nav {
  width: 184px;
  float: left;
  box-sizing: border-box;
  background: #3d3b4f;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
}
.right-content {
  position: absolute;
  top: 0;
  left: 184px;
  background: #f4f5f9;
  box-sizing: border-box;
  right: 0;
  bottom: 0;
}
.home-nv-top {
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
}
.template-div {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 0 30px;
}
*::-webkit-scrollbar {
  width: 4px;
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #555;
}
*::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  background: #555;
}
.main .el-tag.el-tag--info {
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-image-viewer__wrapper {
  z-index: 10086 !important;
}
.add-scene .el-dialog__body {
  padding-top: 20px;
}
.add-scene2 .el-dialog__body {
  padding-bottom: 20px;
}
</style>
<template>
    <div class="main">
        <div class="left-nav">
            <HomeNavLeft/>
        </div>
        <div class="right-content">
            <div class="home-nv-top">
                <HomeNavTop/>
            </div>
            <div class="template-div">
                <router-view/>
            </div>
        </div>
        <!-- 添加商机弹窗 -->
        <div v-if="dialogBusinessVisible">
            <addBusinessBox :name="dialogBusinessVisibleName" :ID="BusinessId" :CustomerId="CustomerId" :ContactId="ContactId" type="1" :isGuest="isGuest"/>
        </div>
        <!-- 客户信息抽屉 -->
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="drawer" 
            direction="rtl"
            :before-close="handleClose">
            <customerInfoBox :CustomerId="CustomerId"  @transferS="transfer" @watersS="waters" @editCustS="editCust"/>
        </el-drawer>
        <!-- 转交联系人 -->
        <el-dialog :visible.sync="transferVisible" :close-on-click-modal="false" width="450px" custom-class="transfer-box add-box add-box2">
            <div class="add-tit" slot="title">
                <p><span></span>移交联系人</p>
                <span icon="el-icon-close"></span>
            </div>
            <el-form :model="transferMsg" ref="form" class="MyEditForm" >
                <div class="MyEditForm-item">
                    <el-form-item label="变更负责人为" class="label-pad-left">
                        <el-select
                            filterable
                            v-model="transferMsg.EmpId" placeholder="请选择">
                            <el-option
                                v-for="item in EmployeeList"
                                :label='item.EmName'
                                :value='item.EmployeeId'
                                :key='item.EmployeeId'>
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" class="add-box-btn" @click="transfer(2)">确 定</el-button>
                <el-button class="add-box-btn add-box-cancel" @click="transferVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 编辑客户 -->
        <div v-if="dialogCustomerVisible">
            <customerDialogBox :name="dialogTableVisibleName" :CustomerId="CustomerId"/>
        </div>
        <!-- 线索抽屉 -->
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="dialogClueWinVisible"
            direction="rtl"
            :before-close="handleClose">
            <clueBox :CustomerId="ClueCustomerId" @transferS="transfer2" @deleteClue="deleteClue2" @watersS="waters2" @editCustS="editCust2"/>
        </el-drawer>
        <!-- 修改线索 -->
        <div v-if="dialogClue">
            <customerDialogBox :name="dialogClueName" :CustomerId="ClueCustomerId" type="2"/>
        </div>
        <!-- 图片预览 -->
        <el-image-viewer 
        v-if="showViewer" 
        :on-close="closeViewer" 
        :url-list="[url]" />
        <!-- 境内合同弹窗 -->
        <domesticTravelcontract v-if="domesticTravelcontractShow" :ID="contractID"/>
        <!-- 一日合同弹窗 -->
        <onedayTripContract v-if="onedayTripContractShow" :ID="contractID"/>
        <!-- 委托合同弹窗 -->
        <singleContract v-if="singleContractShow" :ID="contractID"/>
        <!-- 合同查看 -->
        <TravelContractView v-if="TravelContractViewShow" :ID="contractID"/>
        <!-- 合同抽屉 -->
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="contractDrawer" 
            direction="rtl"
            :before-close="handleClose">
            <contractInfoBox :ID="contractID"/>
        </el-drawer>
        <!-- 商机抽屉 -->
        <el-drawer
            :with-header="false"
            size='70%'
            :visible.sync="busnessDrawer"
            direction="rtl"
            :before-close="handleClose">
            <businessInfoBox :BusinessId="BusinessId" :CustomerType="CustomerType" :BusinessIdCustomerId="BusinessIdCustomerId" @transferS="busTransfer" @watersS="busWaters" @editCustbusiness="editCustbusiness"/>
        </el-drawer>
        <!-- 高级筛选 -->
        <el-dialog :visible.sync="sceneShow" :close-on-click-modal="false" width="800px" custom-class="transfer-box add-box add-box2 add-scene">
            <div class="add-tit" slot="title">
                <p><span></span>新建场景</p>
                <span icon="el-icon-close"></span>
            </div>
            <sceneBox :LableType="LableType" :sceneType="sceneType" :sceneDataList="sceneDataList"/>
        </el-dialog>
        <!-- 高级筛选修改 -->
        <el-dialog :visible.sync="sceneEditBoxShow" :close-on-click-modal="false" width="800px" custom-class="transfer-box add-box add-box2 add-scene add-scene2">
            <div class="add-tit" slot="title">
                <p><span></span>场景管理</p>
                <span icon="el-icon-close"></span>
            </div>
            <sceneEditBox :LableType="LableType" :sceneData="sceneData" />
        </el-dialog>
    </div>
</template>
<script>
import HomeNavLeft from "../components/HomeNav/HomeNavLeft";
import HomeNavTop from "../components/HomeNav/HomeNavTop";
import addBusinessBox from "../components/businessManagement/addBusinessBox";
import customerDialogBox from "../components/dialogModel/customerDialogBox";
import customerInfoBox from "../components/assembly/customerInfoBox";
import clueBox from "../components/clueManagement/customerInfoBox";
import clueDialogBox from "../components/clueManagement/customerInfoBox";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import domesticTravelcontract from "../components/contractManagement/domesticTravelcontract";
import onedayTripContract from "../components/contractManagement/onedayTripContract";
import singleContract from "../components/contractManagement/singleContract";
import TravelContractView from "../components/contractManagement/TravelContractView";
import contractInfoBox from "../components/contractManagement/contractInfoBox";
import businessInfoBox from "../components/businessManagement/businessInfoBox";
import sceneBox from "../components/dialogModel/sceneBox";
import sceneEditBox from "../components/dialogModel/sceneEditBox";
export default {
  components: {
    HomeNavLeft,
    HomeNavTop,
    addBusinessBox,
    customerDialogBox,
    customerInfoBox,
    clueBox,
    clueDialogBox,
    ElImageViewer,
    domesticTravelcontract,
    onedayTripContract,
    singleContract,
    TravelContractView,
    contractInfoBox,
    businessInfoBox,
    sceneBox,
    sceneEditBox,
  },
  data() {
    return {
      sceneType: 0,
      LableType: 1,
      sceneShow: false,
      dialogBusinessVisibleName: "新建商机",
      BusinessId: 0,
      BusinessIdCustomerId: 0,
      busnessDrawer: false,
      contractDrawer: false,
      CustomerType: 0,
      contractID: 0,
      url: "",
      showViewer: false,
      dialogBusinessVisible: false,
      CustomerId: 0,
      ContactId: 0,
      drawer: false,
      CustomerId: 0,
      CustomerName: "",
      ClueCustomerId: 0,
      ClueCustomerName: "",
      transferVisible: false,
      EmployeeList: [],
      dialogCustomerVisible: false,
      dialogClue: false,
      dialogTableVisibleName: "新建客户",
      dialogClueName: "新建线索",
      transferMsg: {
        ContactIds: [],
        EmpId: "",
      },
      businessIdsArr: [],
      multipleSelection: [],
      multipleSelection2: [],
      dialogClueWinVisible: false,
      domesticTravelcontractShow: false,
      singleContractShow: false,
      onedayTripContractShow: false,
      TravelContractViewShow: false,
      isGuest: false,
      sceneData: [],
      sceneEditBoxShow: false,
      sceneDataList: [],
      SceneName: "",
      SceneID: 0,
    };
  },
  mounted() {
    this.userInfo = this.getLocalStorage();
    this.Employee();
    let $this = this;
    this.MsgBus.$on("openCustomerWin", function(row) {
      $this.CustomerId = row.CustomerId;
      $this.CustomerName = row.CustomerName;
      $this.drawer = true;
    });
    this.MsgBus.$on("addBusinessBoxOpen", function(
      CustomerId,
      ContactId,
      isGuest
    ) {
      $this.CustomerId = CustomerId;
      $this.ContactId = ContactId;
      $this.dialogBusinessVisible = true;
      $this.isGuest = isGuest;
      this.dialogBusinessVisibleName = "新建商机";
    });
    this.MsgBus.$on("closeBusinessDialogBox", function() {
      $this.dialogBusinessVisible = false;
    });
    this.MsgBus.$on("closeCustomerDialogBox", function() {
      $this.dialogCustomerVisible = false;
    });
    this.MsgBus.$on("openClueWin", function(row) {
      $this.ClueCustomerId = row.CustomerId;
      $this.ClueCustomerName = row.CustomerName;
      $this.dialogClueWinVisible = true;
    });
    this.MsgBus.$on("closeCustomerDialogBox", function() {
      $this.dialogClue = false;
    });
    this.MsgBus.$on("showImg", function(url) {
      $this.url = url;
      $this.onPreview();
    });
    this.MsgBus.$on("contractOpen", function(type, ID) {
      $this.contractID = 0;
      if (ID) {
        $this.contractID = ID;
      }
      if (type === "1") {
        $this.onedayTripContractShow = true;
      } else if (type === "2") {
        $this.domesticTravelcontractShow = true;
      } else if (type === "3") {
        $this.singleContractShow = true;
      }
    });
    this.MsgBus.$on("contractClose", function(type) {
      if (type === "1") {
        $this.onedayTripContractShow = false;
      } else if (type === "2") {
        $this.domesticTravelcontractShow = false;
      } else if (type === "3") {
        $this.singleContractShow = false;
      }
    });
    this.MsgBus.$on("ViewContractShow", function(ID) {
      $this.contractID = ID;
      $this.TravelContractViewShow = true;
    });
    this.MsgBus.$on("ViewContractClose", function() {
      $this.TravelContractViewShow = false;
    });
    this.MsgBus.$on("contractDrawerShow", function(ID) {
      $this.contractID = ID;
      $this.contractDrawer = true;
    });
    this.MsgBus.$on("busnessDrawerShow", function(ID, CustomerType) {
      $this.busnessDrawer = true;
      $this.BusinessId = ID;
      $this.CustomerType = CustomerType;
    });
    this.MsgBus.$on("sceneBoxShow", function(type, sceneType, sceneDataList) {
      $this.LableType = type;
      $this.sceneType = sceneType;
      $this.sceneDataList = sceneDataList;
      $this.sceneShow = true;
    });
    this.MsgBus.$on("sceneBoxClose", function() {
      $this.sceneShow = false;
    });
    this.MsgBus.$on("sceneEditBoxShow", function(type, data) {
      $this.LableType = type;
      $this.sceneData = data;
      $this.sceneEditBoxShow = true;
    });
    this.MsgBus.$on("ssceneEditBoxClose", function() {
      $this.sceneEditBoxShow = false;
    });
  },
  methods: {
    sceneAdd() {},
    editCustbusiness() {
      this.dialogBusinessVisibleName = "修改商机";
      this.dialogBusinessVisible = true;
    },
    // 放入公海
    busWaters(type) {
      let tips = "是否放入公海？";
      if (type === 1) {
        tips = "是否把客户“" + this.CustomerName + "”放入公海？";
        this.multipleSelection.push(this.CustomerId);
      }
      this.$confirm(tips, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let str = "";
          this.multipleSelection.map((x, i) => {
            str = str + x + ",";
          });
          this.apipost(
            "/api/Customer/RemoveMyCustomer",
            { CustomerIds: str.substring(0, str.length - 1) },
            (res) => {
              if (res.data.resultCode == 1) {
                if (type === 1) {
                }
                {
                  this.drawer = false;
                }
                this.multipleSelection = [];
                this.$message.success(res.data.message);
                this.getList();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 转移
    busTransfer(type) {
      if (type !== 2) {
        if (type === 3) {
          this.multipleSelection.push(this.CustomerId);
        }
        this.transferVisible = true;
      } else {
        if (this.transferMsg.EmpId === "") {
          return this.$message.error("请选择变更负责人！");
        }
        let str = "";
        this.multipleSelection.map((x, i) => {
          str = str + x + ",";
        });
        let str2 = "";
        this.transferMsg.TransferOther.map((x, i) => {
          str2 = str2 + x + ",";
        });
        this.transferMsg.CustomerIds = str.substring(0, str.length - 1);
        this.transferMsg.TransferOther = str2.substring(0, str.length - 1);
        this.apipost(
          "/api/Customer/TransferCustomerBusiness",
          this.transferMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.multipleSelection = [];
              this.transferVisible = false;
              if (type === 3) {
              }
              {
                this.drawer = false;
              }
              this.$message.success(res.data.message);
              this.getList();
              this.transferMsg = {
                CustomerIds: [],
                TransferType: 1,
                IsRead: 0,
                EmpId: "",
              };
            }
          }
        );
      }
    },
    onPreview() {
      this.showViewer = true;
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false;
    },
    editCust2() {
      this.dialogClueName = "修改线索";
      this.dialogClue = true;
    },
    editCust() {
      console.log("1111");
      this.dialogTableVisibleName = "修改客户";
      this.dialogCustomerVisible = true;
    },
    Employee() {
      let msg = {
        RB_Group_id: this.userInfo.RB_Group_id,
        BranchId: -1,
        DepartmentId: 0,
        PostId: 0,
        IsLeave: 0,
      };
      this.apipost2(
        "admin_get_EmployeeGetList",
        this.msg,
        (res) => {
          if (res.data.resultCode == 1) {
            this.EmployeeList = res.data.data;
          } else {
          }
        },
        (err) => {}
      );
    },
    handleClose(done) {
      done();
    },
    // 放入公海
    waters(type) {
      let tips = "是否放入公海？";
      if (type === 1) {
        tips = "是否把客户“" + this.CustomerName + "”放入公海？";
        this.multipleSelection.push(this.CustomerId);
      }
      this.$confirm(tips, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let str = "";
          this.multipleSelection.map((x, i) => {
            str = str + x + ",";
          });
          this.apipost(
            "/api/Customer/RemoveMyCustomer",
            { CustomerIds: str.substring(0, str.length - 1) },
            (res) => {
              if (res.data.resultCode == 1) {
                if (type === 1) {
                }
                {
                  this.drawer = false;
                }
                this.multipleSelection = [];
                this.$message.success(res.data.message);
                this.getList();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 转换为客户
    waters2(type) {
      let tips = "确定将这些线索转换为客户吗?";
      if (type === 1) {
        tips = "是否把线索“" + this.ClueCustomerName + "”转换为客户吗？";
        this.multipleSelection2.push(this.CustomerId);
      }
      this.$confirm(tips, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let str = "";
          this.multipleSelection2.map((x, i) => {
            str = str + x + ",";
          });
          this.apipost(
            "/api/Customer/UpdateCustomerClue",
            { CustomerIds: str.substring(0, str.length - 1) },
            (res) => {
              if (res.data.resultCode == 1) {
                if (type === 1) {
                }
                {
                  this.drawer = false;
                }
                this.multipleSelection2 = [];
                this.$message.success(res.data.message);
                this.getList();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //删除线索
    deleteClue2(type) {
      let tips = "确定将这些线索删除?";
      if (type === 1) {
        tips = "是否把线索“" + this.ClueCustomerName + "”删除？";
        this.multipleSelection2.push(this.CustomerId);
      }
      this.$confirm(tips, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let str = "";
          this.multipleSelection2.map((x, i) => {
            str = str + x + ",";
          });
          this.apipost(
            "/api/Customer/DelCustomerClue",
            { CustomerIds: str.substring(0, str.length - 1) },
            (res) => {
              if (res.data.resultCode == 1) {
                if (type === 1) {
                }
                {
                  this.drawer = false;
                }
                this.multipleSelection2 = [];
                this.$message.success(res.data.message);
                this.getList();
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    // 线索转移
    transfer2(type) {
      if (type !== 2) {
        if (type === 3) {
          this.multipleSelection2.push(this.CustomerId);
        }
        this.transferVisible = true;
      } else {
        if (this.transferMsg.EmpId === "") {
          return this.$message.error("请选择变更负责人！");
        }
        let str = "";
        this.multipleSelection2.map((x, i) => {
          str = str + x + ",";
        });
        this.transferMsg.CustomerIds = str.substring(0, str.length - 1);
        this.apipost(
          "/api/Customer/TransferCustomerClue",
          this.transferMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.multipleSelection2 = [];
              this.transferVisible = false;
              if (type === 3) {
              }
              {
                this.drawer = false;
              }
              this.$message.success(res.data.message);
              this.getList();
              this.transferMsg = {
                CustomerIds: [],
                EmpId: "",
              };
            }
          }
        );
      }
    },
    // 转移
    transfer(type) {
      if (type !== 2) {
        if (type === 3) {
          this.businessIdsArr.push(this.CustomerId);
        }
        this.transferVisible = true;
      } else {
        if (this.transferMsg.EmpId === "") {
          return this.$message.error("请选择变更负责人！");
        }
        let str = "";
        this.businessIdsArr.map((x, i) => {
          str = str + x + ",";
        });
        this.transferMsg.ContactIds = str.substring(0, str.length - 1);
        this.apipost(
          "/api/Customer/TransferCustomerContact",
          this.transferMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.businessIdsArr = [];
              this.transferVisible = false;
              if (type === 3) {
              }
              {
                this.drawer = false;
              }
              this.$message.success(res.data.message);
              this.getList();
              this.transferMsg = {
                ContactIds: [],
                EmpId: "",
              };
            }
          }
        );
      }
    },
  },
};
</script>
