<template>
  <div class="details">
    <header>
      <!-- <span>公司注册方案</span>
      <i class="el-icon-close"></i>-->
    </header>
    <div class="content" v-if="0">
      <div class="title">
        <div></div>
        <div>方案信息</div>
      </div>
      <div class="cell-group">
        <span>
          <span>*</span>
          公司名称：
        </span>
        <el-input v-model="name" placeholder="请输入客户的商号或公司全称（城市+商号+行业+组织形式）"></el-input>
      </div>
      <div class="cell-group">
        <span>
          <span>*</span>
          注册地区：
        </span>
        <div class="region">
          <el-select v-model="region" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :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="taxpayerValue" placeholder="请选择">
            <el-option
              v-for="item in taxpayer"
              :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="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>
        <div class="industry">
          <el-radio-group v-model="industryValue">
            <el-radio-button :label="item" v-for="(item, index) in industry" :key="index"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="cell-group">
        <span>
          <span>*</span>
          经营范围：
        </span>
        <el-input type="textarea" :rows="3" placeholder="请自定义输入公司经营范围，每个经营项以“ ；”隔开" v-model="scope"></el-input>
      </div>
      <div class="cell-group">
        <span>
          <span>*</span>
          方案备注：
        </span>
        <el-input v-model="notes" placeholder="请输入该方案其他备注"></el-input>
      </div>
      <div class="cell-group">
        <el-button>提交</el-button>
      </div>
    </div>
    <div class="modify-company">
      <div class="title">
        <div></div>
        <div>方案信息</div>
      </div>
      <div class="cross">
        <div>公司名称：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>注册地区：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>纳税人类型：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>公司性质：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>组织类型：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>从事行业：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>经营范围：</div>
        <div>1231321321321</div>
      </div>
      <div class="line"></div>
      <div class="title">
        <div></div>
        <div>方案信息</div>
      </div>
      <div class="cross">
        <div>方案编号：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>当前状态：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>方案金额：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>方案备注：</div>
        <div>1231321321321</div>
      </div>
      <div class="cross">
        <div>用户反馈：</div>
        <div>1231321321321</div>
      </div>
      <div class="btm-btn">
        <!-- <el-button @click="modifyOrder">提交</el-button> -->
        <!-- <el-button @click="modifyOrder">修改</el-button> -->
        <!-- <el-button>作废</el-button> -->
      </div>
    </div>
  </div>
</template>
<script>
import req from "axios";
export default {
  data() {
    return {
      name: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        }
      ],
      region: "",
      taxpayerValue: "",
      natureValue: "",
      value: "",
      industryValue: "文化传媒类",
      tissueValue: "",
      notes: "",
      scope: "",
      taxpayer: [
        {
          value: "内资小规模",
          label: "内资小规模"
        },
        {
          value: "内资一般人",
          label: "内资一般人"
        },
        {
          value: "合资小规模",
          label: "合资小规模"
        },
        {
          value: "合资一般人",
          label: "合资一般人"
        },
        {
          value: "外资小规模",
          label: "外资小规模"
        },
        {
          value: "外资一般人",
          label: "外资一般人"
        }
      ],
      nature: [
        {
          value: "有限公司",
          label: "有限公司"
        },
        {
          value: "股份有限公司",
          label: "股份有限公司"
        },
        {
          value: "集团有限公司",
          label: "集团有限公司"
        }
      ],
      tissue: [
        {
          label: "个人独资",
          value: "个人独资"
        },
        {
          label: "合伙企业",
          value: "合伙企业"
        }
      ],
      industry: [
        "文化传媒类",
        "科技类",
        "影业类",
        "贸易类",
        "咨询类",
        "广告类",
        "管理类",
        "租赁类",
        "代理类",
        "培训类",
        "设计类",
        "服务类",
        "工程类"
      ]
    };
  },
  methods: {
    modifyOrder() {
      this.modifyShow = !this.modifyShow;
    }
  },
  created() {
    req
      .post(
        "/api/web/action/icapi/springBoard",
        {
          actionType: "getProgrammeInfoByNeedNo",
          actionBody: {
            needNo: "N202002141324bupnr8L"
          }
        },
        {
          headers: {
            token: "3260d5a2452441dd93ecc7ecb35f6dc0",
            userpin: "39fcf7bc5f6c4e55a1f85d750e37316b"
          }
        }
      )
      .then(res => {
        console.log("获取详情", res);
      });
  }
};
</script>
<style lang="scss">
.details {
  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;
      > 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;
      > 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;
          }
        }
      }
      > .industry {
        display: inline-block;
        width: 430px;
        .el-radio-button__inner {
          width: 100px;
          height: 34px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(223, 224, 225, 1);
          margin-right: 10px;
          margin-top: 10px;
        }
        .el-radio-button {
          position: relative;
        }
        // 小图标
        .el-radio-button__orig-radio:checked + .el-radio-button__inner::after {
          content: "";
          background: url("../../assets/imgs/fqembed/right.png") no-repeat;
          background-size: 103% 103%;
          width: 21.6px;
          height: 22.6px;
          position: absolute;
          right: -1px;
          bottom: 0;
        }
        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          color: #333333;
          border-color: #dfb76a;
          box-shadow: none;
        }

        .el-radio-button__inner:hover {
          color: #333;
        }
        .el-radio-button:nth-child(4n) {
          .el-radio-button__inner {
            margin-right: 0;
          }
        }
      }
      > .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(7),
    .cell-group:nth-child(8) {
      display: flex;
      > span {
        margin-top: 15px;
      }
    }
    .cell-group:nth-of-type(10) {
      margin-top: 25px;
    }
  }
  .modify-company {
    .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: 50px;
      > div:nth-child(1) {
        width: 2px;
        margin-right: 6px;
        height: 12px;
        background: rgba(223, 183, 106, 1);
      }
    }
    .line {
      width: 517px;
      border-bottom: 1px dashed #dcdcdc;
      margin-left: 65px;
      margin-top: 26px;
    }
    .cross {
      display: flex;
      margin-top: 24px;
      > div:nth-child(1) {
        width: 143px;
        text-align: right;
        margin-right: 14px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(81, 81, 81, 1);
      }
      > div:nth-child(2) {
        max-width: 424px;
        width: 164px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
      }
    }
    .btm-btn {
      margin-top: 22px;
      margin-left: 72px;
      display: flex;
      justify-content: center;
      align-items: center;
      > .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);
      }
      > .el-button:nth-child(2) {
        width: 106px;
        height: 30px;
        background: rgba(240, 240, 240, 1);
        border-radius: 3px;
        border: none;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
}
</style>