<style>
  .drawer-box {
    height: 100%;
  }

  .drawer-header {
    height: 83px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
  }

  .drawer-header .left {
    display: flex;
    align-items: center;
  }

  .drawer-header .left img {
    display: inline-block;
    margin-right: 10px;
  }

  .drawer-body {
    height: calc(100% - 83px);
  }

  .drawer-body .top-info {
    height: 115px;
    padding: 30px;
    box-sizing: border-box;
    font-size: 12px;
    background-color: #f6f4fc;
  }

  .drawer-body .top-info .info-lable {
    display: inline-block;
    width: 80px;
    color: #999999;
  }

  .margin-bottom-25 {
    margin-bottom: 25px;
  }

  .drawer-box .el-tabs__nav-wrap::after {
    height: 0;
  }

  .drawer-body .el-tabs__header {
    padding: 0 25px;
    margin-bottom: 0;
  }

  .drawer-body>.content {
    height: calc(100% - 115px);
  }

  .drawer-body .el-tabs {
    height: 100%;
  }

  .drawer-body .el-tabs__content {
    background-color: #f6f4fc;
    height: calc(100% - 40px);
    box-sizing: border-box;
  }

  .drawer-body .el-tabs__content .el-tab-pane {
    height: 100%;
    position: absolute;
    width: calc(100%);
    padding: 17px 20px;
    box-sizing: border-box;
  }
</style>
<template>
  <div class="drawer-box" v-if="loading">
    <div class="drawer-header">
      <div class="left">
        <img src="../../assets/img/cust/kehu2.png" alt="">
        <p>{{detailsData.SurName + detailsData.Name}}</p>
      </div>
      <div class="right" v-if="!hiddenMenu">
        <el-button class="crm-btn query-btn" @click="editCust" v-if="detailsData.IsCreate==1||detailsData.IsRead==1">编辑
        </el-button>
        <el-dropdown @command="handleCommand" style="top: 1px;" v-if="detailsData.IsCreate==1">
          <el-button class="crm-btn crm-btn-more easy-btn margin-right0">
            <i class="iconfont icongengduo"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="z"><i class="iconfont iconplus-transfer"></i> 转移</el-dropdown-item>
            <el-dropdown-item command="d"><i class="iconfont icondelete"></i> 删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="drawer-body">
      <div class="top-info">
        <el-row class="margin-bottom-25">
          <el-col :span="12">
            <span
              class="info-lable">客户级别：</span><span>{{detailsData.CustomerIdLevelStr?detailsData.CustomerIdLevelStr:"--"}}</span>
          </el-col>
          <el-col :span="12">
            <span class="info-lable">创建时间：</span><span>{{detailsData.CreateDate ? detailsData.CreateDate : ''}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span class="info-lable">负责人：</span><span>{{detailsData.PersonChargeStr}}</span>
          </el-col>
          <el-col :span="12">
            <span class="info-lable">更新时间：</span><span>{{detailsData.UpdateDate ? detailsData.UpdateDate : ''}}</span>
          </el-col>
        </el-row>
      </div>
      <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="活动" name="1">
            <Activity v-if="activeName === '1'" :CustomerId="CustomerId" :showType="2" :detailsData="detailsData" />
          </el-tab-pane>
          <el-tab-pane label="详细资料" name="2">
            <Details v-if="activeName === '2'" :detailsData="detailsData" />
          </el-tab-pane>
          <el-tab-pane label="团队" name="10">
            <guestTeam v-if="activeName === '10'" :GuestId="CustomerId" :detailsData="detailsData" />
          </el-tab-pane>
          <el-tab-pane label="商机" name="5">
            <Business v-if="activeName === '5'" :ID="CustomerId" :detailsData="detailsData" />
          </el-tab-pane>
          <el-tab-pane label="订单" name="6">
            <Agreement v-if="activeName === '6'" :ID="CustomerId" :detailsData="detailsData" />
          </el-tab-pane>
          <el-tab-pane label="财务单据" name="11">
            <finance v-if="activeName === '11'" :ID="CustomerId" />
          </el-tab-pane>
          <el-tab-pane label="回款" name="7" v-if="false">
            <!-- <MoneyBack /> -->
          </el-tab-pane>
          <el-tab-pane label="附件" name="8">
            <Enclosure :ID='CustomerId' :type='1' :isGuest="true" v-if="activeName === '8'" />
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="9">
            <Record v-if="activeName === '9'" :CustomerId="CustomerId" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
  import Activity from "./Activity";
  import Details from "./Details";
  import Business from "./Business";
  import Agreement from "./Agreement";
  import finance from "./finance"
  import MoneyBack from "./MoneyBack";
  import guestTeam from "./guestTeam";
  import Enclosure from "../clueManagement/Enclosure";
  import Record from "./Record";
  export default {
    components: {
      Activity,
      Details,
      Business,
      Agreement,
      finance,
      MoneyBack,
      Enclosure,
      Record,
      guestTeam,
    },
    props: {
      CustomerId: {
        type: Number,
        default: 0,
      },
      hiddenMenu: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        activeName: "1",
        detailsData: {},
        loading: false,
      };
    },
    watch: {
      CustomerId: {
        handler(val, oldVal) {
          this.init();
          this.activeName = "1";
        },
        deep: true,
      },
    },
    created() {

    },
    mounted() {
      let $this = this;
      $this.init();
      // 监听修改更新界面
      this.MsgBus.$on("RefreshInfoBox", function () {
        $this.init();
      });
    },
    methods: {
      init() {
        this.apipost(
          "/api/Customer/GetAllGuesstCustomerModel", {
            ID: this.CustomerId
          },
          (res) => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              if (!data.HousePhotos) {
                data.HousePhotos = [];
              }
              if (!data.BusinessCardPhotos) {
                data.BusinessCardPhotos = [];
              }
              if (!data.Images) {
                data.Images = [];
              }
              if (!data.CustomerSourceType) {
                data.CustomerSourceType = "";
              }
              if (!data.CustomerSource) {
                data.CustomerSource = "";
              }
              if (!data.Province) {
                data.Province = "";
              }
              if (!data.Country) {
                data.Country = "";
              }
              if (!data.City) {
                data.City = "";
              }
              if (!data.District) {
                data.District = "";
              }
              this.detailsData = data;
              this.loading = true;
            }
          }
        );
      },
      handleCommand(command) {
        if (command === "z") {
          this.$emit("transferS", 3);
        } else if (command === "g") {}
      },
      handleClick(tab, event) {},
      editCust() {
        this.$emit("editCustS", 1);
      },
      handleClose(done) {
        done();
      },
    },
  };
</script>