<template>
  <div class="outermost">

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

      <div class="marketing-data">
        <scroller-view class="d-list-df" v-calculate-height :pulldown="pulldown" :pullup="pullup" :refresh-data="onrefreshdata" :load-data="onloaddata">
          <div class="marketing-list" v-for="(item, index) in itemDataList" :key="index">
            <div>
              <div>
                <svg style="width: 30px;height: 35px" class="icon" aria-hidden="true">
                  <use xlink:href="#icon-gongsimingcheng"></use>
                </svg>
                <div>{{ item.customerName }}</div>
              </div>
              <div>{{ item.marketType }}</div>
              <div>营销时间：{{ item.createTime }}</div>
            </div>
            <div>
              <button @click="markClaim(item)" class="claim">认领</button>
            </div>
          </div>
        </scroller-view>
      </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';
import { getText } from "@/stores";
/**
 * @Description 对公营销管理
 * @Author JiangTao
 * @Date 2022-02-11 下午 07:43
 */
@Component({
  name: "ComMarketingPool",
  components: { BasePopup },
})
export default class ComMarketingPool extends Vue {
  resetvalue = false;
  value = "";
  CUSTOMERNAME = "";
  itemDataList = [];
  pageNo = 1;
  flagPopup = false;
  pullup = true;
  pulldown = true;
  activated() {
    console.log("1");
    this.flagPopup = false;
    this.selectRelStatusTask(1);
  }
  mounted() {
    this.flagPopup = false;
    this.value = "";
    this.selectRelStatusTask(1);
    console.log("2");
  }
  /**
   * @Description 下拉刷新
   * @Author JiangTao
   * @Date 2022-01-17 下午 05:14
   */
  onrefreshdata() {
    return this.selectRelStatusTask();
  }
  /**
   * @Description 上拉加载
   * @Author JiangTao
   * @Date 2022-01-18 下午 04:04
   */
  onloaddata() {
    this.pageNo = Math.ceil(this.itemDataList.length / 10) + 1;
    return this.selectRelStatusTask(this.pageNo);
  }
  /**
   * @Description 对公客营销池任务
   * @Author JiangTao
   * @Date 2022-01-18 下午 03:46
   */
  selectRelStatusTask(pageNo = 1) {
    this.pullup = true;
    this.pulldown = true;
    const param = {
      pageNum: pageNo,
      pageSize: "10",
      customerName: this.value,
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(applicationApi.selectRelStatusTask, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.code == '1') {
        if (res.data.records && res.data.records.length > 0) {
          if (pageNo == 1) {
            this.itemDataList = res.data.records;
          } else {
            this.itemDataList = this.itemDataList.concat(res.data.records);
          }
          for (let i = 0; i < this.itemDataList.length; i++) {
            (this.itemDataList[i] as any).marketType = getText((this.itemDataList[i] as any).marketType, 'marketType');
          }
        } else {
          if (pageNo == 1) {
            this.itemDataList = [];
          }
        }
      } else {
        NativeUI.toast(res.msg);
      }
      if (res.data.records && res.data.records.length < 10) {
        this.pullup = false;
      }
      if (this.itemDataList.length == 0) {
        this.pulldown = false;
      }
    });
  }
  /**
   * @Description 新增营销
   * @Author JiangTao
   * @Date 2022-01-27 下午 03:25
   */
  addMarketing() {
    this.flagPopup = true;
  }
  /**
   * @Description 营销认领
   * @Author JiangTao
   * @Date 2022-02-17 上午 11:12
   */
  markClaim(item: any) {
    const param = {
      tasknum: item.tasknum,
      sendOrgId: sessionStorage.getItem("branchNo"),
      exeUser: sessionStorage.getItem("workcode"),
      updUser: sessionStorage.getItem("workcode"),
      tc: 'MCEP'
    };
    NativeUI.showWaiting('正在查询...');
    return IF.transferDataInter(applicationApi.updateTodoTaskManager, param).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      if (res.code == '1') {
        NativeUI.toast("认领成功!");
        setTimeout(() => {
          this.selectRelStatusTask(1);
        }, 2500);
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }
}
</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 {
  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;
}
.marketing-list {
  width: 96%;
  display: flex;
  justify-content: space-between;
  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(1) {
  width: 72%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marketing-list > div:nth-child(1) > div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.marketing-list > div:nth-child(1) > div:nth-child(1) > div {
  font-size: 16px;
  font-weight: bold;
}
.marketing-list > div:nth-child(1) > div:nth-child(2) {
  font-size: 12px;
  padding: 2px 5px;
  background-color: #E2F6FF;
  color: #0297D7;
  border-radius: 2px;
}
.marketing-list > div:nth-child(2) {
  width: 100px;
}
.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);
  outline: none;
}
::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;
}
.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%;
}
.d-list-df {
  height: calc(100vh - 180px);
}
</style>