<template>
  <div class="placeorder">
    <div class="placeorder-main">
      <div class="placeorder-main-container">
        <div class="main-container-top">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>专家辅助商标注册</el-breadcrumb-item>
            <el-breadcrumb-item>下单</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="placeorder-main-title"><i></i> 购买服务</div>
        <div class="placeorder-table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="服务名称" align="center">
            </el-table-column>
            <el-table-column prop="count" label="购买数量" align="center">
            </el-table-column>
            <el-table-column prop="official" label="官费（元）" align="center">
            </el-table-column>
            <el-table-column prop="service" label="服务费（元）" align="center">
            </el-table-column>
            <el-table-column prop="total" label="总价（元）" align="center">
            </el-table-column>
          </el-table>
        </div>
        <div class="placeorder-main-title">
          <i></i> 订单联系人
          <span class="el-icon-warning-outline"
            >&nbsp;&nbsp;订单支付后，平台专业商标顾问会与您沟通商标注册需求，请保持电话畅通！</span
          >
        </div>
        <div class="placeorder-main-form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="80px"
            class="demo-ruleForm"
          >
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="请输入您的姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input
                v-model="ruleForm.phone"
                placeholder="请输入您的联系方式"
              ></el-input> </el-form-item
            ><el-form-item prop="email" label="邮箱">
              <el-input
                v-model="ruleForm.email"
                placeholder="请输入您的邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="placeorder-footer">
      <div class="placeorder-footer-main">
        <p class="orderMoney">
          订单金额：<span>¥{{ orderPrice }}</span>
        </p>
        <div class="payment-right">
          <p>
            <i @click="active = !active" :class="active ? 'xuanzhong' : ''"></i>
            我已阅读<span>《商标代理服务协议》</span>，且同意该合同内容
          </p>
          <el-button :class="active ? 'active' : ''" @click="submitForm"
            >去支付</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    //验证电话
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!this.ruleForm.phone) {
        return callback(new Error("手机号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+this.ruleForm.phone)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(this.ruleForm.phone)) {
            callback();
          } else {
            callback(new Error("手机号码格式不正确"));
          }
        }
      }, 100);
    };
    return {
      orderPrice: 0,
      active: false,
      tableData: [
        {
          name: "专家辅助商标注册",
          count: null,
          official: null,
          service: null,
          total: null
        }
      ],
      //
      ruleForm: {
        name: "",
        phone: "",
        email: "",
        desc: ""
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        email: [
          { message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      }
      //
    };
  },
  created() {
    console.log(this.$route.query);
    this.tableData[0].count = this.$route.query.count;
    if (this.$route.query.type == "zjfz") {
      this.tableData[0].name = "专家辅助商标注册";
      this.tableData[0].official = 300;
      this.tableData[0].service = 380;
    } else if (this.$route.query.type == "dbsb") {
      this.tableData[0].name = "担保商标注册";
      this.tableData[0].official = 300;
      this.tableData[0].service = 1080;
    }
    this.tableData[0].total =
      (this.tableData[0].official + this.tableData[0].service) *
      this.tableData[0].count;
  },
  methods: {
    submitForm() {
      if (this.active) {
        this.$router.push();
      }
    }
  }
};
</script>

<style lang="scss">
.placeorder {
  width: 100%;
}
.placeorder-main {
  width: 100%;
  padding: 30px 0;
  .placeorder-main-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px 27px;
    border: 1px solid #e4e4e4;
    .main-container-top {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #cecece;
    }
    .placeorder-main-title {
      width: 100%;
      line-height: 16px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 20px;
      margin: 30px 0 20px 0;
      display: flex;
      align-items: center;
      i {
        display: inline-block;
        width: 3px;
        height: 16px;
        margin-right: 6px;
        background: #3071fe;
        border-radius: 100px;
      }
      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(48, 113, 254, 1);
        line-height: 17px;
        margin-left: 20px;
      }
    }
    .placeorder-table {
      border: 1px solid #cecece;
      .el-table th.is-leaf {
        background: #f3f7fd;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 20px;
        .cell {
          color: rgba(51, 51, 51, 1);
        }
      }
      .el-table .cell {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 20px;
      }
    }
    .placeorder-main-form {
      width: 100%;
      background: #f3f7fd;
      padding: 30px 37px 30px 0;
      .el-form {
        input {
          width: 348px;
          height: 36px;
          border-radius: 0;
          border: 1px solid #c7c7c7;
        }
        textarea {
          height: 130px;
          border: 1px solid #c7c7c7;
          border-radius: 0;
        }
      }
    }
  }
}
.placeorder-footer {
  width: 100%;
  height: 60px;
  background: #e6f0ff;
  .placeorder-footer-main {
    margin: 0 auto;
    max-width: 1240px;
    height: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .orderMoney {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #161529;
      line-height: 20px;
      span {
        font-size: 18px;
        color: #ff5800;
      }
    }
    .payment-right {
      display: flex;
      align-items: center;
      p {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333;
        line-height: 20px;
        margin-right: 30px;
        display: flex;
        align-items: center;
        i {
          display: inline-block;
          width: 18px;
          height: 18px;
          margin-right: 5px;
          border-radius: 100px;
          background: #fff;
          border: 1px solid #ccc;
        }
        .xuanzhong {
          border: none;
          background: url("../../../assets/imgs/xuanzhong.png") no-repeat;
        }
        span {
          color: #3071fe;
          cursor: pointer;
        }
      }
      button {
        width: 120px;
        height: 40px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        background: #c0d9ff;
        letter-spacing: 2px;
        border-radius: 0;
      }
      .el-button:active {
        border: none;
      }
      .active {
        background: rgba(48, 113, 254, 1);
      }
    }
  }
}
</style>
