<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>
    <!-- 添加机票订单 -->
    <div v-if="dialogTicketOrderVisible">
      <ticketOrder :name="dialogTicketOrderVisibleName" :ID="TicketOrderID" :GuestId="GuestId" :obj="obj" type="1" />
    </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";
  import ticketOrder from "../components/guestManagement/ticketOrder";
  export default {
    components: {
      HomeNavLeft,
      HomeNavTop,
      addBusinessBox,
      customerDialogBox,
      customerInfoBox,
      clueBox,
      clueDialogBox,
      ElImageViewer,
      domesticTravelcontract,
      onedayTripContract,
      singleContract,
      TravelContractView,
      contractInfoBox,
      businessInfoBox,
      sceneBox,
      sceneEditBox,
      ticketOrder,
    },
    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,
        dialogTicketOrderVisibleName: "新建机票订单",
        dialogTicketOrderVisible: 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,
        TicketOrderID: 0,
        GuestId: 0,
        obj: {}
      };
    },
    watch: {
      ID: {
        handler(val, oldVal) {
          this.TicketOrderID = val
        },
        deep: true
      }
    },
    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("addTicketOrderBoxOpen", function (GuestId) {
        $this.dialogTicketOrderVisibleName = "新建机票订单";
        $this.GuestId = GuestId;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("editTicketOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "编辑订单金额";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("editOrderTicketOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "编辑机票订单";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("lossOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "订单收损";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("reviseTicketOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "修改出票状态";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("AmendVisaOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "修改出签状态";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("logTicketOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "操作日志";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("convertOrderTicketOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "订单转交";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("CredentialsOrderTicketOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "凭证图";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("CheckOutDetailsOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "出签凭证图";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("BillMakingOrderBoxOpen", function (GuestId, obj) {
        $this.dialogTicketOrderVisibleName = "制单";
        $this.GuestId = GuestId;
        $this.obj = obj;
        $this.dialogTicketOrderVisible = true;
      });
      this.MsgBus.$on("closeTicketOrderDialogBox", function () {
        $this.dialogTicketOrderVisible = false;
        this.$emit("getList");
      });
      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() {
        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>