<template>
  <div>
    <title-bar title="风险预警处理" @clickLeft="onClick">
      <van-icon slot="left" name="cross" size="24" />
    </title-bar>
    <div>
      <div class="deal-with-top">
        <img src="../../../../assets/images/risk-warning-logo.png" alt="" />
        <div>六一科技有限公司</div>
        <div>客户编号：</div>
      </div>
      <div class="deal-with-bottom">
        <table>
          <tr>
            <td>客户名称：</td>
            <td>六一科技有限公司</td>
            <td>主管客户经理：</td>
            <td>李一科</td>
          </tr>
          <tr>
            <td style="width: 100%; display: flex; align-items: flex-start">情况说明：</td>
            <td colspan="3" style="padding-right: 3.3%">
              <van-field style="border: 1px solid #999999" v-model="text1" rows="2" autosize type="textarea" />
            </td>
          </tr>
          <tr>
            <td>是否存在违约风险：</td>
            <td>
              <div class="judge">
                <div @click="default_risk_yes" :style="default_risk_xyes" class="yes">是</div>
                <div @click="default_risk_no" :style="default_risk_xno" class="no">否</div>
              </div>
            </td>
            <td>是否拟报送重大事项</td>
            <td>
              <div class="judge">
                <div @click="major_issues_yes" :style="major_issues_xyes" class="yes">是</div>
                <div @click="major_issues_no" :style="major_issues_xno" class="no">否</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>处置方案：</td>
            <td colspan="3">
              <div class="disposal_plan">
                <div @click="t1" :style="st1">停止提用未使用额度</div>
                <div @click="t2" :style="st2">对客户账户实施封闭式管理</div>
                <div @click="t3" :style="st3">对客户或保证人实施催收</div>
                <div @click="t4" :style="st4">对客户或保证人实施催收</div>
                <div @click="t5" :style="st5">采取资产保全或提起诉讼</div>
                <div @click="t6" :style="st6">提供再融资或宽限</div>
                <div @click="t7" :style="st7">拟订分期还款安排</div>
                <div @click="t8" :style="st8">追加或变更担保</div>
                <div @click="t9" :style="st9">其他</div>
              </div>
            </td>
          </tr>
          <tr>
            <td style="width: 100%; display: flex; align-items: flex-start">处置方案说明:</td>
            <td colspan="3" style="padding-right: 3.3%">
              <van-field style="border: 1px solid #999999" v-model="text2" rows="2" autosize type="textarea" />
            </td>
          </tr>
        </table>
        <div class="submit">提交</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TitleBar from "@/components/general/TitleBar.vue";
import { Field } from "vant";
import { Picker } from "vant";

Vue.use(Picker);

Vue.use(Field);
/**
 * @Description 风险预警处理
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:50
 */
@Component({
  name: "TaskListOperate",
  components: { TitleBar },
})
export default class TaskListOperate extends Vue {
  pageTitle = ""; // 页面标题

  text1 = "";
  text2 = "";
  checked = true;

  value = "";
  showPicker = false;
  columns = ["1", "2", "3", "4", "5"];

  onConfirm(value: any) {
    this.value = value;
    this.showPicker = false;
  }
  onClick() {
    console.log(111111);
  }
  mounted() {
    this.pageTitle = this.$route.meta?.name;
  }
  default_risk_xyes: any = {
    backgroundColor: " #fd5065",
    color: "white",
    border: "0",
  };
  default_risk_xno: any = {};
  default_risk_yes() {
    this.default_risk_xyes = {
      backgroundColor: " #fd5065",
      color: "white",
      border: "0",
    };
    this.default_risk_xno = {};
  }
  default_risk_no() {
    this.default_risk_xyes = {};
    this.default_risk_xno = {
      backgroundColor: " #fd5065",
      color: "white",
      border: "0",
    };
  }
  major_issues_xyes: any = {
    backgroundColor: " #fd5065",
    color: "white",
    border: "0",
  };
  major_issues_xno: any = {};
  major_issues_yes() {
    this.major_issues_xyes = {
      backgroundColor: " #fd5065",
      color: "white",
      border: "0",
    };
    this.major_issues_xno = {};
  }
  major_issues_no() {
    this.major_issues_xyes = {};
    this.major_issues_xno = {
      backgroundColor: " #fd5065",
      color: "white",
      border: "0",
    };
  }

  src = require("../../../../assets/svg/red-subscript.svg");
  s = {
    backgroundColor: "#fff4f6",
    border: "1px solid #fd5065",
    color: "#fd5065",
    backgroundImage: `url("${this.src}")`,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "right bottom",
  };

  st1: any = {};
  st2: any = {};
  st3: any = {};
  st4: any = {};
  st5: any = {};
  st6: any = {};
  st7: any = {};
  st8: any = {};
  st9: any = {};

  t1() {
    if (this.st1 === this.s) {
      this.st1 = {};
    } else {
      this.st1 = this.s;
    }
  }
  t2() {
    if (this.st2 === this.s) {
      this.st2 = {};
    } else {
      this.st2 = this.s;
    }
  }
  t3() {
    if (this.st3 === this.s) {
      this.st3 = {};
    } else {
      this.st3 = this.s;
    }
  }
  t4() {
    if (this.st4 === this.s) {
      this.st4 = {};
    } else {
      this.st4 = this.s;
    }
  }
  t5() {
    if (this.st5 === this.s) {
      this.st5 = {};
    } else {
      this.st5 = this.s;
    }
  }
  t6() {
    if (this.st6 === this.s) {
      this.st6 = {};
    } else {
      this.st6 = this.s;
    }
  }
  t7() {
    if (this.st7 === this.s) {
      this.st7 = {};
    } else {
      this.st7 = this.s;
    }
  }
  t8() {
    if (this.st8 === this.s) {
      this.st8 = {};
    } else {
      this.st8 = this.s;
    }
  }
  t9() {
    if (this.st9 === this.s) {
      this.st9 = {};
    } else {
      this.st9 = this.s;
    }
  }
}
</script>

<style scoped>
.deal-with-top {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 1%;
  padding-bottom: 1%;
  padding-left: 1.5%;
  border-bottom: 1px solid #efefef;
  background-color: #fffafa;
}
.deal-with-top > div:nth-child(2) {
  margin-left: 1%;
  margin-right: 2%;
  font-size: 129%;
  line-height: 120%;
}
.deal-with-top > div:nth-child(3) {
  line-height: 110%;
}
.deal-with-top img {
  width: 1.88%;
  padding-top: -1%;
}
.deal-with-bottom {
  width: 70%;
  margin-left: 10%;
}
table {
  width: 100%;
  margin-top: 5%;
}
td {
  font-size: 115%;
  padding-bottom: 1%;
}
tr > td:nth-child(1) {
  line-height: 255%;
  color: #999999;
  width: 17%;
}
table > tr:nth-child(1) > td:nth-child(3),
table > tr:nth-child(3) > td:nth-child(3) {
  color: #999999;
  width: 20%;
}
table > tr:nth-child(1) > td:nth-child(2) {
  width: 30%;
}
.judge {
  display: flex;
  justify-content: flex-start;
}
.judge > * {
  width: 23.2%;
  line-height: 205%;
  font-size: 93%;
  padding-top: 0.5%;
  text-align: center;
  color: #999999;
  border: 1px solid #d5d5d5;
}
.judge > div:nth-child(1) {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
.judge > div:nth-child(2) {
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
select {
  width: 90%;
}
.disposal_plan {
  width: 96%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.disposal_plan > * {
  width: 30%;
  font-size: 114.3%;
  padding-top: 0.5%;
  padding-bottom: 0.4%;
  border-radius: 5px;
  text-align: center;
  background-color: #f2f2f2;
  border: 1px solid rgba(215, 215, 215, 1);
  margin: 0.7% 1%;
}
.submit {
  width: 50%;
  margin: 0 auto;
  margin-top: 8%;
  font-size: 143%;
  background-color: #fd5065;
  color: white;
  padding: 1% 0;
  text-align: center;
  border-radius: 50px;
}
.drop-down {
  width: 30%;
}
</style>
