<template>
  <div>
    <van-form>
      <sub-title>营销信息</sub-title>
      <table style="width: 90%; margin: 2% auto">
        <tr>
          <td>
            <mobile-input label="分支机构" placeholder="请输入" size="small"></mobile-input>
          </td>
          <td>
            <mobile-input label="招商引资企业/项目名称" placeholder="请输入" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="招引企业类型" border="true" :columns="typeOfEnterprise" size="small"></d-select>
          </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>
            <d-select label="客户行业" border="true" :columns="category" size="small"></d-select>
          </td>
          <td>
            <d-select label="资本市场" border="true" :columns="capitalMarket" size="small"></d-select>
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input label="落地区域" placeholder="XX市XX区(县)" size="small"></mobile-input>
          </td>
          <td>
            <mobile-input label="项目总投(亿元)" placeholder="请输入" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input label="拟融资金额(亿元)" placeholder="请输入" size="small"></mobile-input>
          </td>
          <td>
            <mobile-input label="融资期限(年)" placeholder="请输入" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input label="利率" placeholder="请输入" size="small"></mobile-input>
          </td>
          <td>
            <mobile-input label="融资模式及企业需求" placeholder="请输入" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="是否国有企业参股" border="true" :columns="corporateParticipation" size="small"></d-select>
          </td>
          <td>
            <d-select label="招引项目当前进展" border="true" :columns="projectProgress" 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">
            <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 colspan="2"><mobile-input rows="3" label="营销进展详述" placeholder="包括但不限于营销切入点、关键人、营销关键点，资产业务进展等" type="textarea" size="small" /></td>
        </tr>
        <tr>
          <td>
            <div class="open-an-account">
              <div>是否已开户</div>
              <div @click="open_an_account_yes" :style="open_an_account_xyes" class="yes">是</div>
              <div @click="open_an_account_no" :style="open_an_account_xno" class="no">否</div>
            </div>
          </td>
          <td>
            <mobile-input label="账户及资本归集类型" placeholder="如：基本户-注册资本金额" size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <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:55
 */
@Component({
  name: "BusinessMarketing",
})
export default class BusinessMarketing 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",
  };
  //招引企业类型
  typeOfEnterprise = [
    { value: 1, text: "总行名单内客户" },
    { value: 2, text: "已上报总行纳入招引名单管理客户" },
    { value: 3, 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;
    }
  }
  //客户行业分类
  category = [
    { 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 = [
    { value: 1, text: "上市公司" },
    { value: 2, text: "拟上市公司" },
    { value: 3, text: "上市企业母/子公司" },
    { value: 4, text: "非上市企业" },
  ];
  //是否国有企业参股
  corporateParticipation = [
    { value: 1, text: "是" },
    { value: 2, text: "否" },
  ];
  //招引项目当前进展
  projectProgress = [
    { value: 1, text: "1-项目洽谈阶段" },
    { value: 2, text: "2-初步达成投资意向" },
    { value: 3, text: "3-签订投资意向书" },
    { value: 4, text: "4-项目规划" },
    { value: 5, text: "5-项目签约" },
    { value: 6, text: "6-项目公司登记" },
    { value: 7, text: "7-项目建设" },
    { value: 8, text: "8-项目运营" },
  ];
  open_an_account_xyes: any = {
    backgroundColor: " #fd5065",
    color: "white",
    border: "0",
  };
  open_an_account_xno: any = {};
  open_an_account_yes() {
    this.open_an_account_xyes = {
      backgroundColor: " #fd5065",
      color: "white",
      border: "0",
    };
    this.open_an_account_xno = {};
  }
  open_an_account_no() {
    this.open_an_account_xyes = {};
    this.open_an_account_xno = {
      backgroundColor: " #fd5065",
      color: "white",
      border: "0",
    };
  }
  //营销进展
  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;
    }
  }
}
</script>

<style scoped>
.marketing-goal,
.marketing-progress {
  display: flex;
  align-items: center;
}
.marketing-goal > div:nth-child(1),
.marketing-progress > div:nth-child(1) {
  width: 13%;
  text-align: right;
  color: #999999;
  padding-right: 1%;
}
.marketing-goal-label,
.marketing-progress-label {
  width: 85%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.marketing-goal-label > *,
.marketing-progress-label > * {
  width: 23%;
  font-size: 13px;
  padding-top: 1%;
  padding-bottom: 0.5%;
  border-radius: 5px;
  text-align: center;
  background-color: #f2f2f2;
  border: 1px solid rgba(215, 215, 215, 1);
  margin: 0.7% 1%;
}
.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;
}
::v-deep table tr td .d-form-field,
::v-deep table tr td .van-field {
  align-items: center;
}
.open-an-account {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 21px;
}
.open-an-account > * {
  width: 15%;
  line-height: 205%;
  font-size: 93%;
  padding-top: 0.5%;
  text-align: center;
  color: #999999;
  border: 1px solid #d5d5d5;
}
.open-an-account > div:nth-child(2) {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}
.open-an-account > div:nth-child(3) {
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.open-an-account > div:nth-child(1) {
  width: 30%;
  border: 0;
}
</style>
