<template>
  <div class="divBackground">
    <title-bar :title="title" @click-right="onClickRight">
      <van-icon slot="left" name="cross" size="24" />
      <template v-if="smd || grsmyx" #right>
        <slot name="right">提交</slot>
      </template>
    </title-bar>
    <div class="marketing-processing-content">
      <div class="customer-information">
        <div class="customer-information-top" @click="selectDetail">
          <div class="avatar">
            <svg style="width: 100%" class="icon" aria-hidden="true">
              <use xlink:href="#icon-gongsimingcheng"></use>
            </svg>
          </div>
          <div class="customer-name">
            <div>{{ cusName }}</div>
          </div>
        </div>
        <div class="itemcusTypeStyle">
          <div v-if="CUSTOMERTYPE != '' && !smd">{{ CUSTOMERTYPE }}</div>
          <div v-if="smd && CUSTOMERTYPE && CUSTOMERTYPE.length > 0" v-for="(itemcusType, index) in CUSTOMERTYPE" :key="index + 'a'">{{ itemcusType }}</div>
        </div>
        <div class="customer-information-central">
          <table-single-view v-if="dataBasic.cusAddr != ''" :keyValue="keyValueSingle" :data="dataBasic"></table-single-view>
          <div v-if="!smd" @click="time_axis"><img src="@/assets/svg/time-axis-logo.svg" alt="" />&nbsp;&nbsp;时光轴</div>
        </div>
        <div class="sign-in">
          <!-- 百度地图-->
          <baidu-map class="bm-view" ak="FP7zWR4e8lhxZ6v0IicoG1R5" :center="{ lng: this.upoint.lng, lat: this.upoint.lat }" :zoom="15" @ready="mapReady"> </baidu-map>
        </div>
        <div class="operate">
<!--          <button><img src="../../../../assets/svg/blue-navigation-logo.svg" alt="" />导航</button>-->
          <button>添加日程</button>
        </div>
      </div>
      <div class="details v-scroller">
<!--        拜访信息-->
        <customer-visit v-if="cv"></customer-visit>
<!--        招商引资企业营销-->
        <marketing-special v-if="ms"></marketing-special>
<!--        公司精准信息摸排-->
        <information-pattern v-if="ip"></information-pattern>
<!--        精准营销专项-->
        <business-marketing v-if="bm"></business-marketing>
<!--        小微条线投放储备清单-->
        <put-in-reserve v-if="ph"></put-in-reserve>
<!--        营销计划-->
        <market-plan v-if="mp"></market-plan>
<!--        电话营销-->
        <doing-market-by-phone v-if="dmbp"></doing-market-by-phone>
        <!--中小营销-->
        <SMEMarketingDetail :submitClick.sync="saveSubmit" v-if="smd"></SMEMarketingDetail>
        <!--个人上门营销-->
        <JhdbxqView :grsmyxSubmitClick.sync="saveSubmit" v-if="grsmyx"></JhdbxqView>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import TableSingleView from '@/public/TableSingleView.vue';
import { BaiduMap, BmScale, BmNavigation, BmInfoWindow } from "vue-baidu-map";
import CustomerVisit from "@/components/workbench/upcoming-tasks-content/upcoming/marketing-task/CustomerVisit.vue";
import BusinessMarketing from "@/components/workbench/upcoming-tasks-content/upcoming/marketing-task/BusinessMarketing.vue";
import InformationPattern from "@/components/workbench/upcoming-tasks-content/upcoming/marketing-task/InformationPattern.vue";
import MarketingSpecial from "@/components/workbench/upcoming-tasks-content/upcoming/marketing-task/MarketingSpecial.vue";
import SMEMarketingDetail from "@/components/workbench/SME-common-functions/SMEMarketingDetail.vue";
import DoingMarketByPhone from "@/views/marketing-mgt/DoingMarketByPhone.vue";
import MarketPlan from "@/views/marketing-mgt/MarketPlan.vue";
import AccurateVisitors from "@/views/marketing-mgt/AccurateVisitors.vue";
import AccurateCustomer from "@/views/marketing-mgt/AccurateCustomer.vue";
import PutInReserve from "@/views/marketing-mgt/PutInReserve.vue";
import JhdbxqView from "@/views/marketing-mgt/personal/JhdbxqView.vue";
/**
 * @Description 营销处理
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:53
 */
@Component({
  name: "MarketingTask",
  components: { TitleBar, BaiduMap, BmScale, BmNavigation, BmInfoWindow, CustomerVisit, BusinessMarketing, InformationPattern, MarketingSpecial, DoingMarketByPhone, MarketPlan, AccurateVisitors, AccurateCustomer, PutInReserve, SMEMarketingDetail, TableSingleView, JhdbxqView },
})
export default class MarketingTask extends Vue {
  title: any = {};
  avatar = "";
  saveSubmit = () => {}; // 保存并提交函数
  cusName = "";
  CUSTOMERTYPE = this.$store.getters.getCusInfo.CUSTOMERTYPE || "";

  keyValueSingle = {
    cusAddr: '客户地址',
  }
  dataBasic = {
    cusAddr: this.$store.getters.getCusInfo.cusAddr || ""
  }
  BMapGL: any = {};
  map: any = {};

  //自己当前定位
  pointA: any = {};
  //客户定位
  pointB: any = {};

  cv = false;
  ms = false;
  ip = false;
  bm = false;
  ph = false;
  mp = false;
  dmbp = false;
  smd = false;
  grsmyx = false;

  mounted() {
    this.CUSTOMERTYPE = this.$store.getters.getCusInfo.CUSTOMERTYPE || "";
    this.cusName = this.$store.getters.getCusInfo.cusName || this.$store.getters.getCusInfo.CUSTOMERNAME || this.$store.getters.getCusInfo.customerName;
    this.title = this.$route.query.type;
    this.cv = false;
    this.ms = false;
    this.ip = false;
    this.bm = false;
    this.ph = false;
    this.mp = false;
    this.dmbp = false;
    this.smd = false;
    this.grsmyx = false;
    if (this.title == "客户拜访") {
      this.cv = true;
    } else if (this.title == "精准营销专项") {
      this.ms = true;
    } else if (this.title == "公司精准信息摸排") {
      this.ip = true;
    } else if (this.title == "招商引资企业营销") {
      this.bm = true;
    } else if (this.title == "任务处理") {
      this.ph = true;
    } else if (this.title == "待办详情") {
      this.dmbp = true;
    } else if (this.title === "营销计划") {
      this.title = "任务处理";
      this.mp = true;
    } else if (this.title === "续贷客户营销") {
      this.smd = true;
      console.log("~~~~~~~~~~~~~~", this.$store.getters.getCusInfo);
      this.CUSTOMERTYPE = this.$store.getters.getCusInfo.cusType;
    } else if (this.title === "上门营销") {
      this.grsmyx = true;
    }
  }

  //客户位置坐标
  upoint: any = { lng: 104.080998, lat: 30.595452 };
  plugins = ["Scale"];
  mapReady(bmap: any) {
    this.BMapGL = bmap.BMap;
    this.map = bmap.map;
  }
  //判断方式(加载页面及执行)
  activated() {
  }
  onClickRight() {
    this.saveSubmit();
  }
  /**
   * @Description 查询详情
   * @Author JiangTao
   * @Date 2022-02-15 上午 11:34
   */
  selectDetail() {
    if (this.$store.getters.getCusInfo.CUSTOMERID != "") {
      this.$store.commit('setCtfInstNo', this.$store.getters.getCusInfo);
      this.$router.push({
        path: '/PersonalDetails',
        // query: {
        //   active: 0
        // }
      });
    }
  }
  /**
   * @Description 时光轴
   * @Author JiangTao
   * @Date 2022-02-14 下午 02:19
   */
  time_axis() {
    if (this.dmbp) {
      this.$router.push({
        path: "/perTelMarkTimeAxis",
      });
    }
  }
}
</script>

<style scoped>
.marketing-processing-content {
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
}
.customer-information {
  width: 25%;
  height: 100%;
  padding: 2%;
  border-right: 2px solid rgba(242, 242, 242, 1);
}
.customer-information-top {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
}
.avatar {
  width: 20%;
}
.customer-name > div:nth-child(1) {
  font-weight: bold;
  font-size: 18px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.itemcusTypeStyle {
  display: flex;
  flex-wrap: wrap;
}
.itemcusTypeStyle > div {
  width: auto;
  padding: 1% 10px 0 10px;
  margin: 5px;
  text-align: center;
  border: 1px solid rgba(215, 215, 215, 1);
  border-radius: 3px;
  font-size: 12px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.customer-information-central {
  width: 100%;
  margin-top: 7%;
}
.customer-information-central table {
  width: 100%;
}
.customer-information-central table tr > td:nth-child(1) {
  font-size: 14px;
  color: #999999;
  line-height: 30px;
}
.customer-information-central table tr > td:nth-child(2) {
  font-size: 14px;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}
.customer-information-central table tr:nth-child(4) > td {
  padding-top: 4%;
  color: #02a7f0;
}
.sign-in {
  width: 100%;
  height: 35%;
  margin-top: 10%;
}
.operate {
  width: 100%;
  margin-top: 3%;
}
.operate > button:nth-child(1) {
  width: 50%;
  height: 36px;
  margin: 7% auto 7% auto;
  display: block;
  background-color: white;
  border: 1px solid #02a7f0;
  color: #02a7f0;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Arial Normal", "Arial";
  outline: none;
}
.operate > button:nth-child(2) {
  width: 50%;
  height: 36px;
  margin: 0 auto;
  display: block;
  background-color: white;
  border: 1px solid rgba(215, 215, 215, 1);
  color: #999999;
  border-radius: 20px;
  font-size: 14px;
  font-family: "Arial Normal", "Arial";
}
.bm-view {
  width: 100%;
  height: 100%;
}
.details {
  width: 75%;
  height: 91%;
  margin: 2% 2% 5% 3%;
}
.divBackground {
  background-color: white;
}
::v-deep .van-nav-bar__right {
  padding-top: 16px;
}
</style>
