<template>
  <div>
    <title-bar title="定期检查" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div>
      <div class="deal-with-top">
        <div class="deal-with-top-left">
          <img src="../../../../assets/images/risk-warning-logo.png" alt="" />
          <div>六一科技有限公司</div>
          <div>客户编号：</div>
        </div>
        <div class="deal-with-top-right"><button>提交</button></div>
      </div>
      <div class="deal-with-bottom">
        <div class="label">
          <div :style="credit_status_style" @click="credit_status_click">借款人信用状况调查</div>
          <div :style="financial_status_style" @click="financial_status_click">借款人经营及财务情况调查</div>
          <div :style="guarantor_status_style" @click="guarantor_status_click">保证人情况调查</div>
          <div :style="mortgage_investigation_style" @click="mortgage_investigation_click">抵质押物调查</div>
          <div :style="others_style" @click="others_click" style="width: 10%; text-align: center">其他</div>
        </div>
        <div class="deal-with-bottom-content">
          <credit-status v-if="this.credit_status"></credit-status>
          <financial-status v-if="this.financial_status"></financial-status>
          <guarantor-status v-if="this.guarantor_status"></guarantor-status>
          <mortgage-investigation v-if="this.mortgage_investigation"></mortgage-investigation>
          <others v-if="this.others"></others>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import CreditStatus from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/upcoming-tasks-periodic-inspection/CreditStatus.vue";
import FinancialStatus from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/upcoming-tasks-periodic-inspection/FinancialStatus.vue";
import GuarantorStatus from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/upcoming-tasks-periodic-inspection/GuarantorStatus.vue";
import MortgageInvestigation from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/upcoming-tasks-periodic-inspection/MortgageInvestigation.vue";
import Others from "@/components/workbench/upcoming-tasks-content/company-business/upcoming/upcoming-tasks-periodic-inspection/Others.vue";
/**
 * @Description 定期检查
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:51
 */
@Component({
  name: "PeriodicInspectionHandle",
  components: { TitleBar, CreditStatus, FinancialStatus, GuarantorStatus, MortgageInvestigation, Others },
})
export default class PeriodicInspectionHandle extends Vue {
  pageTitle = ""; // 页面标题

  style = {
    border: "1px solid #fd5065",
    color: "#fd5065",
    borderBottom: "2px solid #ffffff",
  };

  credit_status_style: any = this.style;
  financial_status_style: any = {};
  guarantor_status_style: any = {};
  mortgage_investigation_style: any = {};
  others_style: any = {};

  credit_status = true;
  financial_status = false;
  guarantor_status = false;
  mortgage_investigation = false;
  others = false;

  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  credit_status_click() {
    this.credit_status_style = this.style;
    this.financial_status_style = {};
    this.guarantor_status_style = {};
    this.mortgage_investigation_style = {};
    this.others_style = {};

    this.credit_status = true;
    this.financial_status = false;
    this.guarantor_status = false;
    this.mortgage_investigation = false;
    this.others = false;
  }
  financial_status_click() {
    this.credit_status_style = {};
    this.financial_status_style = this.style;
    this.guarantor_status_style = {};
    this.mortgage_investigation_style = {};
    this.others_style = {};

    this.credit_status = false;
    this.financial_status = true;
    this.guarantor_status = false;
    this.mortgage_investigation = false;
    this.others = false;
  }
  guarantor_status_click() {
    this.credit_status_style = {};
    this.financial_status_style = {};
    this.guarantor_status_style = this.style;
    this.mortgage_investigation_style = {};
    this.others_style = {};

    this.credit_status = false;
    this.financial_status = false;
    this.guarantor_status = true;
    this.mortgage_investigation = false;
    this.others = false;
  }
  mortgage_investigation_click() {
    this.credit_status_style = {};
    this.financial_status_style = {};
    this.guarantor_status_style = {};
    this.mortgage_investigation_style = this.style;
    this.others_style = {};

    this.credit_status = false;
    this.financial_status = false;
    this.guarantor_status = false;
    this.mortgage_investigation = true;
    this.others = false;
  }
  others_click() {
    this.credit_status_style = {};
    this.financial_status_style = {};
    this.guarantor_status_style = {};
    this.mortgage_investigation_style = {};
    this.others_style = this.style;

    this.credit_status = false;
    this.financial_status = false;
    this.guarantor_status = false;
    this.mortgage_investigation = false;
    this.others = true;
  }
}
</script>

<style scoped>
.deal-with-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1% 1.5%;
  border-bottom: 1px solid #efefef;
  background-color: #fffafa;
}
.deal-with-top-left {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.deal-with-top-left > div:nth-child(2) {
  margin-left: 1%;
  margin-right: 2%;
  font-size: 129%;
  line-height: 120%;
}
.deal-with-top-left > div:nth-child(3) {
  line-height: 110%;
}
.deal-with-top-left img {
  width: 2.42%;
  padding-top: -1%;
}
.deal-with-top-right {
  width: 9.51%;
}

.deal-with-top-right button {
  width: 100%;
  font-size: 115%;
  padding: 2.6% 0;
  background-color: white;
  border: 1px solid #fd5065;
  color: #fd5065;
  border-radius: 3px;
}
.label {
  width: 97%;
  margin: 0 auto;
  margin-top: 1%;
  padding-left: 2.5%;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #999999;
}
.label div {
  margin-right: 1%;
  background-color: white;
  border: 1px solid #999999;
  border-bottom: 0;
  font-size: 115%;
  padding: 0.58% 1.2%;
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;
}
.deal-with-bottom-content {
  width: 93%;
  height: calc(100vh - 162px);
  margin: 0 auto;
  margin-top: 1%;
  padding-top: 1%;
  padding-bottom: 5%;
  overflow-y: auto;
}
</style>