<template>
  <div>
    <van-form>
      <sub-title>拜访信息</sub-title>
      <table style="width: 90%; margin: 2% auto">
        <tr>
          <td>
            <mobile-input label="拜访客户名称" value="寻路科技有限公司" readonly size="small"></mobile-input>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="控股类型" border="true" :columns="holdingType" size="small"></d-select>
          </td>
          <td>
            <d-select label="客户分类" border="true" :columns="customerClassification" size="small"></d-select>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="客户行业分类" border="true" :columns="customerIndustryClassification" size="small"></d-select>
          </td>
          <td>
            <d-select label="资本市场" border="true" :columns="capitalMarket" size="small"></d-select>
          </td>
        </tr>
        <tr>
          <td>
            <d-select label="是否招商引资" border="true" :columns="investmentPromotion" size="small"></d-select>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="marketing-direction">
              <div>营销方向</div>
              <div class="marketing-direction-label">
                <div @click="marketing_direction_1" :style="md1">资产业务</div>
                <div @click="marketing_direction_2" :style="md2">负债业务</div>
                <div @click="marketing_direction_3" :style="md3">营销信息获取</div>
                <div @click="marketing_direction_4" :style="md4">其他</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="purpose-of-visit">
              <div>拜访目的</div>
              <div class="purpose-of-visit-label">
                <div @click="purpose_of_visit_1" :style="pov1">初次拜访</div>
                <div @click="purpose_of_visit_2" :style="pov2">达成合作意向</div>
                <div @click="purpose_of_visit_3" :style="pov3">确定授信方案</div>
                <div @click="purpose_of_visit_4" :style="pov4">存量客户维护</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <mobile-input label="拜访次数" placeholder="第几次拜访客户" size="small"></mobile-input>
          </td>
          <td>
            <d-datetime-picker border="true" label="拜访客户时间" size="small"></d-datetime-picker>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="visitor">
              <div>参与领导分类</div>
              <div class="visitor-label">
                <div @click="visitor_1" :style="v1">分支行行长</div>
                <div @click="visitor_2" :style="v2">分支行分管行长</div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2"><mobile-input rows="3" label="我行拜访人员" placeholder="职位+姓名" type="textarea" size="small" /></td>
        </tr>
        <tr>
          <td colspan="2"><mobile-input label="地址" placeholder="拜访地址" size="small" /></td>
        </tr>
        <tr>
          <td><mobile-input label="拜访对象姓名" placeholder="请输入" size="small" /></td>
          <td><mobile-input label="拜访对象职位" placeholder="请输入" size="small" /></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"><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"><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>
            <d-select label="拜访情况分类" border="true" :columns="visitSituation" 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>
      </table>
      <sub-title>影像资料</sub-title>
      <div class="video-material">
        <div class="video-material-list">
          <div class="video-material-left">
            <div><img src="../../../../../assets/images/yellow-folder.png" alt="" /></div>
            <div>拜访对象名片</div>
            <div>(图片：0/0 视频：0/0 音频：0/0)</div>
          </div>
          <div class="video-material-right"><img src="../../../../../assets/svg/grey-camera-logo.svg" alt="" /></div>
        </div>
        <div class="video-material-list">
          <div class="video-material-left">
            <div><img src="../../../../../assets/images/yellow-folder.png" alt="" /></div>
            <div>拜访影像资料</div>
            <div>(图片：0/0 视频：0/0 音频：0/0)</div>
          </div>
          <div class="video-material-right"><img src="../../../../../assets/svg/grey-camera-logo.svg" alt="" /></div>
        </div>
        <div class="video-material-list">
          <div class="video-material-left">
            <div><img src="../../../../../assets/images/yellow-folder.png" alt="" /></div>
            <div>重要资料-财务报表、资质证书等</div>
            <div>(图片：0/0 视频：0/0 音频：0/0)</div>
          </div>
          <div class="video-material-right"><img src="../../../../../assets/svg/grey-camera-logo.svg" alt="" /></div>
        </div>
      </div>
      <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: "CustomerVisit",
})
export default class CustomerVisit 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",
  };

  //营销方向
  md1: any = {};
  md2: any = {};
  md3: any = {};
  md4: any = {};

  marketing_direction_1() {
    if (this.md1 === this.s) {
      this.md1 = {};
    } else {
      this.md1 = this.s;
    }
  }
  marketing_direction_2() {
    if (this.md2 === this.s) {
      this.md2 = {};
    } else {
      this.md2 = this.s;
    }
  }
  marketing_direction_3() {
    if (this.md3 === this.s) {
      this.md3 = {};
    } else {
      this.md3 = this.s;
    }
  }
  marketing_direction_4() {
    if (this.md4 === this.s) {
      this.md4 = {};
    } else {
      this.md4 = this.s;
    }
  }

  //拜访目的
  pov1: any = {};
  pov2: any = {};
  pov3: any = {};
  pov4: any = {};
  purpose_of_visit_1() {
    if (this.pov1 === this.s) {
      this.pov1 = {};
    } else {
      this.pov1 = this.s;
    }
  }
  purpose_of_visit_2() {
    if (this.pov2 === this.s) {
      this.pov2 = {};
    } else {
      this.pov2 = this.s;
    }
  }
  purpose_of_visit_3() {
    if (this.pov3 === this.s) {
      this.pov3 = {};
    } else {
      this.pov3 = this.s;
    }
  }
  purpose_of_visit_4() {
    if (this.pov4 === this.s) {
      this.pov4 = {};
    } else {
      this.pov4 = this.s;
    }
  }

  //我行拜访人员
  v1: any = {};
  v2: any = {};
  visitor_1() {
    if (this.v1 === this.s) {
      this.v1 = {};
    } else {
      this.v1 = this.s;
    }
  }
  visitor_2() {
    if (this.v2 === this.s) {
      this.v2 = {};
    } else {
      this.v2 = this.s;
    }
  }
  //控股类型
  holdingType: any = [
    { value: 1, text: "央企" },
    { value: 2, text: "省属国有单位" },
    { value: 3, text: "市属国有企业" },
    { value: 4, text: "非国有控股" },
  ];
  //客户分类
  customerClassification: any = [
    { value: 1, text: "存量公司精准客户" },
    { value: 2, text: "新客户-公司精准名单内客户" },
    { value: 3, text: "新客户-拟申报公司精准客户" },
    { value: 4, text: "精准营销渠道建设" },
  ];
  //客户行业分类
  customerIndustryClassification: 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: "非上市企业" },
  ];
  //是否招商引资
  investmentPromotion: any = [
    { value: 1, text: "总行名单内招引客户" },
    { value: 2, text: "已上报总行纳入招引名单管理客户" },
    { value: 3, text: "拟报总行招引客户" },
    { value: 4, text: "招商引资渠道建设类拜访" },
    { value: 5, text: "非招商引资客户" },
  ];
  //拜访情况分类
  visitSituation: any = [
    { value: 1, text: "还需继续营销跟进" },
    { value: 2, text: "拟上报授信审批" },
    { value: 3, text: "已报授信审批" },
    { value: 4, text: "不准备继续跟" },
  ];

  //汇报
  report: any = [{ value: 1, text: "请选择" }];
  //发送
  send: any = [{ value: 1, text: "请选择" }];
}
</script>

<style scoped>
.marketing-direction,
.purpose-of-visit,
.visitor {
  display: flex;
  align-items: center;
}
.marketing-direction > div:nth-child(1),
.purpose-of-visit > div:nth-child(1),
.visitor > div:nth-child(1) {
  width: 13%;
  text-align: right;
  color: #999999;
  padding-right: 1%;
}
.marketing-direction-label,
.purpose-of-visit-label,
.visitor-label {
  width: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.marketing-direction-label > *,
.purpose-of-visit-label > *,
.visitor-label > * {
  width: 20%;
  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:nth-child(18) > td:nth-child(2) .d-form-field,
::v-deep table > tr:nth-child(18) > td:nth-child(2) .van-field {
  align-items: center;
}
.video-material {
  width: 100%;
  margin-bottom: 2%;
}
.video-material-list {
  width: 100%;
  padding: 2% 2% 2% 2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(242, 242, 242, 1);
  border-bottom: 1px solid rgba(242, 242, 242, 1);
}
.video-material-left {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.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>