<template>
  <div class="outermost">
    <div @click="marketingMap" class="marketing-map">营销地图</div>

    <div class="marketing">
      <div class="title">
        <div class="marketing-name">营销认领</div>
        <van-form label-width="25%" @submit="onSubmit">
          <mobile-input label-width="10px" input-align="left" name="value" v-model="value" placeholder="请输入关键字" size="small" />
        </van-form>

        <div style="width: 100px"></div>
        <button @click="addMarketing" class="add-marketing">新增营销</button>
      </div>

      <div class="marketing-data">
        <div class="marketing-list" v-for="(item, index) in list" :key="index">
          <div>
            <svg style="width: 30px;height: 35px" class="icon" aria-hidden="true">
              <use xlink:href="#icon-gongsimingcheng"></use>
            </svg>
          </div>
          <div>{{ item.customerName }}</div>
          <div>
            <svg style="width: 15px;height: 17px;color: #999999" class="icon" aria-hidden="true">
              <use xlink:href="#icon-a-dingwei12x16ziyuan65"></use>
            </svg>
          </div>
          <div>{{ item.cusAddr }}</div>
          <div>
            <button @click="popup(item)" class="claim">认领</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BasePopup from "@/components/general/BasePopup.vue";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import applicationApi from '@/constants/api/ms-application/application.api';
import { Popup } from 'vant';
/**
 * @Description 营销管理
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:29
 */
@Component({
  name: "MarketingMgtView",
  components: { BasePopup },
})
export default class MarketingMgtView extends Vue {
  //判断全选
  flag = false;
  //搜索内容
  value = ""; //关键字搜索
  item:any = "";
  list = [];

  mounted() {
    this.$store.commit('setEmpty');
    this.selectCustInfo();
  }
  //认领
  popup(item: any) {
    this.item = item;
    this.Claim().then(() => {
      this.selectCustInfo();
    });
  }
  /**
   * @Description 营销认领
   * @Author JiangTao
   * @Date 2022-01-05 下午 07:48
   */
  Claim() {
    const param = {
      exeUsernam: sessionStorage.getItem('userName'),
      taskNum: this.item.taskNum,
      tc: 'MCEP'
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(applicationApi.MarketingClaim, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.code != '1') {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 营销任务查询列表
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:36
   */
  selectCustInfo(pageNo = 1) {
    const param = {
      customerName: this.value,
      pageNum: pageNo,
      pageSize: '10',
      tc: 'MCEP'
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(applicationApi.MarketingPool, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.code == '1') {
        if (res.data.records && res.data.records.length > 0) {
          if (pageNo == 1) {
            this.list = res.data.records;
            if (res.data.records.length <= 0) {
              this.list = [];
            }
          } else {
            this.list = this.list.concat(res.data.records);
          }
          this.$store.commit('setCusInfo', this.list);
        } else {
          if (pageNo == 1) {
            this.list = [];
          }
        }
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
  /**
   * @Description 搜索
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:25
   */
  onSubmit() {}
  /**
   * @Description 新增营销
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:25
   */
  addMarketing() {
    this.$router.push({
      path: "/AddMarketPlan",
    });
  }
  /**
   * @Description 营销地图
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:25
   */
  marketingMap() {
    this.$router.push({
      path: "/MarketingMap",
    });
  }
  detailedAnalysis() {
    this.$router.push({
      path: "/marketing-mgt/add-marketing-plan",
    });
  }
  /**
   * @Description 客户拜访
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:25
   */
  customer_visit() {
    this.$router.push({
      path: "/marketing-mgt/add-marketing-plan",
      // path: "/marketing-mgt/add-marketing",
    });
  }
  /**
   * @Description 精准营销专项
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:26
   */
  marketing_special() {
    this.$router.push({
      path: "/marketing-mgt/add-marketing",
    });
  }
  /**
   * @Description 公司精准信息摸排
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:26
   */
  information_pattern() {
    this.$router.push({
      path: "/marketing-mgt/add-marketing",
    });
  }
  /**
   * @Description 招商引资企业营销
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:26
   */
  business_marketing() {
    this.$router.push({
      path: "/marketing-mgt/add-marketing",
    });
  }
  // choose() {
  //   if (this.flag == true) {
  //     this.flag = false;
  //   } else {
  //     this.flag = true;
  //   }
  // }
  // claim() {
  //   if (this.flag == true) {
  //     this.$message({
  //       message: "面签认领成功!",
  //       position: "top",
  //     });
  //   } else {
  //     this.$message({
  //       message: "未选择!",
  //       position: "top",
  //     });
  //   }
  // }
}
</script>

<style scoped>
.outermost {
  height: calc(100vh - 60px);
  padding-left: 2%;
}
.label > div {
  width: 23%;
  height: 100%;
  padding-bottom: 1%;
  border: 1px solid rgba(233, 233, 233, 1);
  float: left;
  margin-right: 1.3%;
}
.marketing-map {
  width: 125px;
  height: 40px;
  margin-top: 2%;
  font-size: 16px;
  line-height: 250%;
  color: white;
  text-align: center;
  background: linear-gradient(90deg, rgba(245, 154, 35, 1) 2%, rgba(255, 87, 108, 1) 99%);
  border-top-left-radius: 70px;
  border-bottom-left-radius: 70px;
  float: right;
  box-shadow: 5px 5px 5px rgb(245 154 35);
}
.marketing {
  width: 100%;
  height: 100%;
  margin-top: 2%;
}
.marketing-name {
  font-size: 130%;
  font-weight: bold;
  display: inline-block;
}
.search {
  width: 40%;
  display: inline-block;
  margin-right: 3%;
  background-image: url("../../../assets/svg/search-freak.svg");
  background-repeat: no-repeat;
}
.search img {
  width: 5%;
  display: inline-block;
}
.add-marketing {
  width: 110px;
  padding: 0.4% 0;
  border: 1px solid #dadada;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  background-color: white;
  color: #999999;
}
.title {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 3%;
}
.marketing-list {
  width: 96%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 7px;
  background-color: #f6fcff;
  padding: 1.8% 1.5%;
  margin: 2% 0;
  margin-left: 1%;
  box-shadow: 0 0 5px rgba(129, 211, 248, 0.75);
}
.marketing-list > div:nth-child(2) {
  width: 30%;
  color: #333333;
  font-size: 18px;
  font-family: "Arial Normal", "Arial";
  font-weight: bold;
  margin-left: 1%;
}
.marketing-list > div:nth-child(3) {
  width: 25px;
}
.marketing-list > div:nth-child(4) {
  width: 60%;
  color: #999999;
  font-size: 100%;
  margin-right: 1%;
}
.marketing-list > div:nth-child(5) {
  width: 100px;
  height: 40px;
  color: #999999;
  font-size: 100%;
  margin-right: 1%;
}
.claim {
  width: 90%;
  height: 100%;
  margin: 0 auto;
  border: 1px solid rgba(215, 215, 215, 1);
  padding-top: 6%;
  padding-bottom: 3%;
  text-align: center;
  color: #999999;
  font-size: 13px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0);
}
::v-deep .van-search {
  padding: 0;
}
.select_all,
.operate {
  margin: 0 3%;
  color: #fd5065;
}
.unselect_all {
  margin: 0 3%;
  color: #02a7f0;
}
.claim_selected {
  width: 80.3%;
  border: 1px solid #02a7f0;
  padding-top: 6%;
  padding-bottom: 3%;
  text-align: center;
  color: white;
  font-size: 13px;
  border-radius: 20px;
  background-color: #02a7f0;
}
.popup-content {
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.popup-content > div {
  width: 45%;
}
.customer-visit > div:nth-child(1),
.marketing-special > div:nth-child(1),
.information-pattern > div:nth-child(1),
.business-marketing > div:nth-child(1) {
  width: 85%;
  margin: 8% auto;
  padding-top: 100%;
  border: 1px solid rgba(215, 215, 215, 1);
  border-radius: 10px;
}
.customer-visit > div:nth-child(2),
.marketing-special > div:nth-child(2),
.information-pattern > div:nth-child(2),
.business-marketing > div:nth-child(2) {
  width: 100%;
  text-align: center;
  color: #333333;
  font-family: "Arial Normal", "Arial";
  margin-top: 15%;
}
::v-deep .d-form-field {
  padding: 0;
}
.marketing-data {
  height: 100%;
}
</style>