<template>
  <div>
    <van-form>
      <sub-title>营销信息</sub-title>
      <table style="width: 90%; margin: 2% auto">
        <tr>
          <td>
            <mobile-input label="分支机构" size="small"></mobile-input>
          </td>
          <td>
            <mobile-input label="客户名称" placeholder="全程，可为精准营销/招" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="customer-type">
              <div>客户类型</div>
              <div class="customer-type-label">
                <div @click="customer_type_1" :style="ct1">新客户-拟报精准入围</div>
                <div @click="customer_type_2" :style="ct2">新客户-总行精准名单内</div>
                <div @click="customer_type_3" :style="ct3">存量精准客户-新增授信</div>
                <div @click="customer_type_4" :style="ct4">存量精准客户-还后续贷</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="控股类型" border="true" :columns="holdingType" size="small"></d-select>
          </td>
          <td>
            <d-select label="客户行业分类" border="true" :columns="category" size="small"></d-select>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="资本市场客户" border="true" :columns="capitalMarket" size="small"></d-select>
          </td>
        </tr>
        <tr>
          <td colspan="2"><mobile-input rows="3" label="资质等级" placeholder="医院等级/学校阶层/上市板块/军工三级证别/其他行业资质等" type="textarea" size="small" /></td>
        </tr>
        <tr>
          <td colspan="2"><mobile-input rows="3" label="企业主营业务及业务模式" placeholder="详细描述企业主营业务、业务模式、行业地位、上下游客户情况等" type="textarea" size="small" /></td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="marketing-goal">
              <div>营销目标</div>
              <div class="marketing-goal-label">
                <div @click="marketing_goal_1" :style="mg1">负债业务</div>
                <div @click="marketing_goal_2" :style="mg2">资产业务</div>
                <div @click="marketing_goal_3" :style="mg3">信息摸排</div>
                <div @click="marketing_goal_4" :style="mg4">其他</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input label="融资模式及企业需求" placeholder="请输入" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td colspan="2"><mobile-input rows="3" label="主要财务指标" placeholder="主营业务收入、利润、总资产、负债等主要财务指标" type="textarea" size="small" /></td>
        </tr>
        <tr>
          <td>
            <mobile-input label="融资利率(%)" placeholder="不填写%，如：4.9" size="small"></mobile-input>
          </td>
          <td>
            <mobile-input label="拟融资金额(亿元)" placeholder="请输入" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="marketing-progress">
              <div>营销进展</div>
              <div class="marketing-progress-label">
                <div @click="marketing_progress_1" :style="mp1">1-前期营销</div>
                <div @click="marketing_progress_2" :style="mp2">2-初步达成合作意向</div>
                <div @click="marketing_progress_3" :style="mp3">3-资料收集中</div>
                <div @click="marketing_progress_4" :style="mp4">4-分支行权限内已审批</div>
                <div @click="marketing_progress_5" :style="mp5">5-已报总行授信审批</div>
                <div @click="marketing_progress_6" :style="mp6">6-完成授信审批</div>
                <div @click="marketing_progress_7" :style="mp7">7-已提用</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input label="融资期限(年)" placeholder="请输入" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td colspan="2"><mobile-input rows="3" label="营销进展详述" placeholder="包括但不限于营销切入点、关键人、营销关键点，资产业务进展等" type="textarea" size="small" /></td>
        </tr>
        <tr>
          <td>
            <d-select label="是否已开户" border="true" :columns="openAnAccount" size="small"></d-select>
          </td>
          <td>
            <mobile-input label="预计存款归集(万元)" placeholder="存款年日均" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td colspan="2"><mobile-input rows="3" label="拟营销归集资金类型" placeholder="如：募集资金、医院/学校收入等" type="textarea" size="small" /></td>
        </tr>
        <tr>
          <td>
            <mobile-input label="其他" placeholder="请输入" size="small"></mobile-input>
          </td>
          <td>
            <mobile-input label="主管客户经理及联系方式" placeholder="请输入" size="small"></mobile-input>
          </td>
        </tr>
      </table>
      <sub-title>提交信息</sub-title>
      <table>
        <tr>
          <td>
            <d-select label="汇报给" border="true" :columns="report" size="small"></d-select>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="发送到" border="true" :columns="send" size="small"></d-select>
          </td>
        </tr>
      </table>

      <div class="operate">
        <button>取消</button>
        <button>提交</button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
/**
 * @Description 招商引资企业营销
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:56
 */
@Component({
  name: "MarketingSpecial",
})
export default class MarketingSpecial extends Vue {
  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",
  };
  //客户类型
  ct1: any = {};
  ct2: any = {};
  ct3: any = {};
  ct4: any = {};

  customer_type_1() {
    if (this.ct1 === this.s) {
      this.ct1 = {};
    } else {
      this.ct1 = this.s;
    }
  }
  customer_type_2() {
    if (this.ct2 === this.s) {
      this.ct2 = {};
    } else {
      this.ct2 = this.s;
    }
  }
  customer_type_3() {
    if (this.ct3 === this.s) {
      this.ct3 = {};
    } else {
      this.ct3 = this.s;
    }
  }
  customer_type_4() {
    if (this.ct4 === this.s) {
      this.ct4 = {};
    } else {
      this.ct4 = this.s;
    }
  }
  //控股类型
  holdingType = [
    { value: 1, text: "央企" },
    { value: 2, text: "省属国有单位" },
    { value: 3, text: "市属国有企业" },
    { value: 4, text: "非国有控股" },
  ];
  //客户行业分类
  category: any = [
    { value: 1, text: "医院" },
    { value: 2, text: "医药" },
    { value: 3, text: "教育" },
    { value: 4, text: "军工" },
    { value: 5, text: "城市服务(水、电、气等)" },
    { value: 6, text: "饮品饮料(含酒类)" },
    { value: 7, text: "电子信息" },
    { value: 8, text: "新基建" },
    { value: 9, text: "光伏" },
    { value: 10, text: "其他" },
  ];
  //资本市场客户
  capitalMarket: any = [
    { value: 1, text: "上市公司" },
    { value: 2, text: "拟上市公司" },
    { value: 3, text: "上市企业母/子公司" },
    { value: 4, text: "非上市企业" },
  ];
  //营销目标
  mg1: any = {};
  mg2: any = {};
  mg3: any = {};
  mg4: any = {};
  marketing_goal_1() {
    if (this.mg1 === this.s) {
      this.mg1 = {};
    } else {
      this.mg1 = this.s;
    }
  }
  marketing_goal_2() {
    if (this.mg2 === this.s) {
      this.mg2 = {};
    } else {
      this.mg2 = this.s;
    }
  }
  marketing_goal_3() {
    if (this.mg3 === this.s) {
      this.mg3 = {};
    } else {
      this.mg3 = this.s;
    }
  }
  marketing_goal_4() {
    if (this.mg4 === this.s) {
      this.mg4 = {};
    } else {
      this.mg4 = this.s;
    }
  }
  //营销进展
  mp1: any = {};
  mp2: any = {};
  mp3: any = {};
  mp4: any = {};
  mp5: any = {};
  mp6: any = {};
  mp7: any = {};
  marketing_progress_1() {
    if (this.mp1 === this.s) {
      this.mp1 = {};
    } else {
      this.mp1 = this.s;
    }
  }
  marketing_progress_2() {
    if (this.mp2 === this.s) {
      this.mp2 = {};
    } else {
      this.mp2 = this.s;
    }
  }
  marketing_progress_3() {
    if (this.mp3 === this.s) {
      this.mp3 = {};
    } else {
      this.mp3 = this.s;
    }
  }
  marketing_progress_4() {
    if (this.mp4 === this.s) {
      this.mp4 = {};
    } else {
      this.mp4 = this.s;
    }
  }
  marketing_progress_5() {
    if (this.mp5 === this.s) {
      this.mp5 = {};
    } else {
      this.mp5 = this.s;
    }
  }
  marketing_progress_6() {
    if (this.mp6 === this.s) {
      this.mp6 = {};
    } else {
      this.mp6 = this.s;
    }
  }
  marketing_progress_7() {
    if (this.mp7 === this.s) {
      this.mp7 = {};
    } else {
      this.mp7 = this.s;
    }
  }
  //是否已开户
  openAnAccount = [
    { value: 1, text: "基本户" },
    { value: 2, text: "专户" },
    { value: 2, text: "一般户" },
    { value: 3, text: "其他类型账户" },
    { value: 4, text: "尚未开户" },
  ];
  //汇报
  report: any = [{ value: 1, text: "请选择" }];
  //发送
  send: any = [{ value: 1, text: "请选择" }];
}
</script>

<style scoped>
.customer-type,
.marketing-goal,
.marketing-progress {
  display: flex;
  align-items: center;
}
.customer-type > div:nth-child(1),
.marketing-progress > div:nth-child(1),
.marketing-goal > div:nth-child(1) {
  width: 13%;
  text-align: right;
  color: #999999;
  padding-right: 1%;
}
.customer-type-label,
.marketing-progress-label,
.marketing-goal-label {
  width: 85%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.customer-type-label > *,
.marketing-progress-label > *,
.marketing-goal-label > * {
  width: 23%;
  font-size: 13px;
  padding-top: 1.1%;
  padding-bottom: 0.7%;
  border-radius: 5px;
  text-align: center;
  background-color: #f2f2f2;
  border: 1px solid rgba(215, 215, 215, 1);
  margin: 0.7% 1%;
}
::v-deep .d-form-field,
::v-deep .van-field__label {
  text-align: right;
  font-size: 16px;
}
::v-deep table tr td .d-form-field,
::v-deep table tr td .van-field {
  align-items: center;
}
.video-material-left > div:nth-child(1) {
  width: 6%;
}
.video-material-left > div:nth-child(2) {
  font-size: 16px;
  color: #000000;
  font-family: "Arial Normal", "Arial";
}
.video-material-left > div:nth-child(3) {
  font-size: 14px;
  color: #999999;
  font-family: "Arial Normal", "Arial";
}
::v-deep .van-cell::after {
  border: 0;
}
.operate {
  width: 100%;
  display: flex;
  justify-content: center;
}
.operate button {
  width: 20.5%;
  border-radius: 30px;
  font-size: 18px;
  padding: 1% 0;
  margin: 1%;
}
.operate > button:nth-child(1) {
  color: #999999;
  background-color: white;
  border: 1px solid rgba(215, 215, 215, 1);
}
.operate > button:nth-child(2) {
  color: white;
  background-color: #fd5065;
  border: 1px solid #fd5065;
}
</style>