<template>
  <div class="cloud">
    <header>
      <!-- <span>云上公司注册方案</span>
      <i class="el-icon-close" ></i>-->
    </header>
    <div class="content">
      <div class="title">
        <div></div>
        <div>方案信息</div>
      </div>

      <div class="cell-group">
        <span>
          <span>*</span>
          注册园区：
        </span>
        <div class="select">
          <el-select v-model="gardenValue" placeholder="请选择">
            <el-option
              v-for="(item,index) in garden"
              :key="item.value"
              @click.native="getAreaIndex(index)"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="cell-group">
        <span>
          <span>*</span>
          注册类型：
        </span>
        <div class="select">
          <el-select v-model="natureValue" placeholder="请选择">
            <el-option
              v-for="item in nature"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="cell-group">
        <span>
          <span>*</span>
          产品类型：
        </span>
        <div class="select">
          <el-select v-model="tissueValue" placeholder="请选择">
            <el-option
              v-for="item in tissue"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>

      <div class="cell-group">
        <span>
          <!-- <span>*</span> -->
          方案备注：
        </span>
        <el-input type="textarea" :rows="3" placeholder="请输入该方案其他备注" v-model="notes"></el-input>
      </div>

      <div class="cell-group submitwrap">
        <el-button @click="submitAdd">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import req from "axios";
export default {
  data() {
    return {
      passCloudAddDialog: false,
      name: "",
      region: "",
      gardenValue: "",
      natureValue: "",
      industryValue: "文化传媒类",
      tissueValue: "",
      nature: [], // 注册类型数据
      tissue: [], // 产品类型数据
      garden: [
        {
          value: "贵州园区",
          label: "贵州园区"
        },
        {
          value: "开封园区",
          label: "开封园区"
        }
      ],
      nature: [],
      alltissue: [],
      notes: ""
    };
  },
  methods: {
    getAreaIndex(index) {
      this.natureValue = "";
      this.tissueValue = ""; //清空紧接着的后两项的选择
      if (index == 0) {
        this.nature = [
          {
            value: "个体商户",
            label: "个体商户"
          },
          {
            value: "个人独资企业",
            label: "个人独资企业"
          },
          {
            value: "有限合伙企业",
            label: "有限合伙企业"
          }
        ];
        this.tissue = [
          {
            label: "个体商户注册刻章服务",
            value: "个体商户注册刻章服务"
          },
          {
            label: "个人独资企业注册刻章服务",
            value: "个人独资企业注册刻章服务"
          },
          {
            label: "有限合伙企业注册刻章服务",
            value: "有限合伙企业注册刻章服务"
          }
        ];
      }
      if (index == 1) {
        this.nature = [
          {
            value: "个体商户",
            label: "个体商户"
          },
          {
            value: "个人独资企业",
            label: "个人独资企业"
          }
        ];
        this.tissue = [
          {
            label: "个体商户注册刻章服务",
            value: "个体商户注册刻章服务"
          },
          {
            label: "个人独资企业注册刻章服务",
            value: "个人独资企业注册刻章服务"
          }
        ];
      }
    }, // 获取地区索引
    submitAdd() {
      // 非空判断
      if (this.gardenValue == "") {
        this.$message("云公司注册园区不能为空");
        return;
      }
      if (this.natureValue == "") {
        this.$message("云公司注册类型不能为空");
        return;
      }
      if (this.tissueValue == "") {
        this.$message("云公司产品类型不能为空");
        return;
      }

      console.log(
        this.passCloudAddDialog,
        "按提交按钮的提交前的参数：",
        "注册园区：",
        this.gardenValue,
        "注册类型：",
        this.natureValue,
        "产品类型：",
        this.tissueValue,
        "方案备注：",
        this.notes
      );
      // this.$emit("cloudAddDone", this.passCloudAddDialog);
      req
        .post(
          "/api/web/action/icapi/springBoard",
          {
            actionType: "submitProgramme",
            actionBody: {
              // needNo: "N202002141324bupnr8L",
              needNo: this.$route.query.needNo,
              solutionContent: {
                bizType: "companyreg_cloud", // 注册类型：
                solution: {
                  // 公司注册方案
                  companyName: "", //公司名称
                  city: "", // 注册地区：省
                  area: "", // 注册地区：市
                  companyCategory: "", // 纳税人类型
                  companyType: "", // 公司性质
                  orgType: "", // 组织类型
                  industryType: "", // 从事行业
                  scope: "", //  经营范围
                  // 云上公司注册方案
                  remark: this.notes, // 方案备注
                  park: this.gardenValue, // 注册园区
                  registerType:
                    this.natureValue == "个体商户"
                      ? "person"
                      : this.natureValue == "个人独资企业"
                      ? "enterprise"
                      : this.natureValue == "有限合伙企业"
                      ? "enterprise"
                      : "", // 注册类型
                  productType: this.tissueValue // 产品类型
                }
              }
            }
          },
          {
            headers: {
              // token: "3260d5a2452441dd93ecc7ecb35f6dc0",
              token: this.$route.query.token,
              userpin: "39fcf7bc5f6c4e55a1f85d750e37316b"
            }
          }
        )
        .then(res => {
          console.log("提交公司注册方案", res);
          if (res.data.status == 0) {
            this.$message("公司注册方案提交成功");
            // 清空 字段
            this.gardenValue = "";
            this.natureValue = "";
            this.tissueValue = "";
            this.notes = "";
            this.$emit("cloudAddDone", this.passCloudAddDialog);
          } else {
            this.$message("公司注册方案提交失败");
          }
        });
    }
  }
};
</script>
<style lang="scss">
.cloud {
  header {
    /* height: 43px;
    padding: 0 20px; */
    border-bottom: 1px solid #e8e8e8;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    > i {
      cursor: pointer;
    }
  }
  .content {
    box-sizing: border-box;
    .title {
      display: flex;
      height: 38px;
      align-items: flex-end;
      font-size: 14px;
      font-family: PingFang-SC-Bold, PingFang-SC;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      box-sizing: border-box;
      /* padding-left: 70px; */
      padding-left: 50px;
      > div:nth-child(1) {
        width: 2px;
        margin-right: 6px;
        height: 12px;
        background: rgba(223, 183, 106, 1);
      }
    }
    .cell-group {
      margin-top: 20px;
      box-sizing: border-box;
      /* padding-left: 55px; */
      padding-left: 75px;
      > span {
        display: inline-block;
        width: 94px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        text-align: right;
        > span {
          color: #dfb76a;
          font-size: 12px;
        }
      }
      .el-input {
        width: 430px;
        .el-input__inner {
          height: 34px;
          line-height: 0;
        }
      }
      .el-textarea {
        width: 430px;
        display: inline-block;
        .el-textarea__inner {
          resize: none;
        }
      }
      > .region {
        display: inline-block;
        .el-select {
          .el-input--suffix {
            width: 210px;
          }
          .el-input--suffix:nth-child(1) {
            margin-right: 10px;
          }
        }
      }
      > .select {
        display: inline-block;
        .el-select {
          .el-input--suffix {
            width: 430px;
          }
        }
      }

      > .el-button {
        width: 106px;
        height: 30px;
        background: rgba(223, 183, 106, 1);
        border-radius: 3px;
        padding: 0;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-left: 94px;
      }
    }
    .cell-group:nth-child(5),
    .cell-group:nth-child(8) {
      display: flex;
      > span {
        margin-top: 15px;
      }
    }
    .cell-group:nth-of-type(10) {
      margin-top: 25px;
    }
    .submitwrap {
      padding-left: 30%;
    }
  }
}
</style>