<template>
  <div class="content">
    <div class="top">
      <div class="top-left">
        <div :style="tlw1" @click="top_left_1_warn">营销任务</div>
        <div :style="tlw2" @click="top_left_2_warn">合同面签</div>
        <div :style="tlw3" @click="top_left_3_warn">面前复核</div>
        <div :style="tlw3" @click="top_left_3_warn">贷款催收</div>
      </div>
      <div class="top-right">
        <div class="search-logo"><img src="../../../../assets/images/search-logo.png" alt="" /></div>
        <div class="search-bar">
          <van-form>
            <van-field class="name" label-width="20px" v-model="username" name="username" placeholder="请输入关键字搜索" />
          </van-form>
        </div>
        <div class="search">搜索</div>
      </div>
    </div>
    <div class="bottom">
      <upcoming-marketing-task v-if="this.topLeft1"></upcoming-marketing-task>
      <upcoming-periodic-inspection v-if="this.topLeft2"></upcoming-periodic-inspection>
      <upcoming-risk-warning v-if="this.topLeft3"></upcoming-risk-warning>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import UpcomingMarketingTask from "@/components/workbench/upcoming-tasks-content/personal-business/personal-upcoming/UpcomingMarketingTask.vue";
import UpcomingPeriodicInspection from "@/components/workbench/upcoming-tasks-content/personal-business/personal-upcoming/UpcomingPeriodicInspection.vue";
import UpcomingRiskWarning from "@/components/workbench/upcoming-tasks-content/personal-business/personal-upcoming/UpcomingRiskWarning.vue";
/**
 * @Description 代办任务
 * @Author JiangTao
 * @Date 2021-10-23 下午 06:52
 */
@Component({
  name: "PersonalUpcoming",
  components: { UpcomingMarketingTask, UpcomingPeriodicInspection, UpcomingRiskWarning },
})
export default class PersonalUpcoming extends Vue {
  username = "";
  //营销任务
  topLeft1 = true;
  //定期检查
  topLeft2 = false;
  //风险预警
  topLeft3 = false;

  src = require("../../../../assets/svg/red-message-box.svg");
  style = {
    width: "18.43%",
    height: "100%",
    lineHeight: "250%",
    border: "0",
    color: "#fd5065",
    marginRight: "3%",
    backgroundImage: `url("${this.src}")`,
    backgroundRepeat: "no-repeat",
    paddingBottom: "1%",
  };

  tlw1: any = this.style;
  tlw2: any = {};
  tlw3: any = {};

  top_left_1_warn() {
    this.tlw1 = this.style;
    this.tlw2 = {};
    this.tlw3 = {};
    this.topLeft1 = true;
    this.topLeft2 = false;
    this.topLeft3 = false;
  }
  top_left_2_warn() {
    this.tlw1 = {};
    this.tlw2 = this.style;
    this.tlw3 = {};
    this.topLeft1 = false;
    this.topLeft2 = true;
    this.topLeft3 = false;
  }
  top_left_3_warn() {
    this.tlw1 = {};
    this.tlw2 = {};
    this.tlw3 = this.style;
    this.topLeft1 = false;
    this.topLeft2 = false;
    this.topLeft3 = true;
  }
}
</script>

<style scoped>
.top {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white;
}
.top-left {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-left: 2%;
  margin-top: 1%;
}
.top-left > * {
  width: 18.32%;
  height: 85%;
  line-height: 240%;
  border: 1px solid rgba(178, 178, 178, 1);
  border-radius: 5px;
  font-size: 85%;
  color: #999999;
  margin-right: 3%;
  padding-top: 0.1%;
  text-align: center;
}
.top-right {
  width: 93%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.5%;
}
.search-bar {
  height: 34px;
}
.search-logo {
  margin-right: -6%;
}
.name {
  border: 1px solid rgba(228, 228, 228, 1);
  width: 75.5%;
  line-height: 235%;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  padding-left: 15%;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0);
}
.search {
  width: 15.73%;
  line-height: 34px;
  background-color: #fd5065;
  color: white;
  font-size: 115%;
  text-align: center;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}
.top-left div:hover {
}
.bottom {
  width: 100%;
  height: 100%;
  float: left;
  margin-top: 3%;
}
::v-deep .van-field {
  width: 100%;
}
</style>