<template>
  <div class="company">
    <div class="title">注册方案</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="公司注册" name="1">
        <div class="company-find">
          <div class="box">
            <div>方案编号：</div>
            <div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>服务单号：</div>
            <div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>公司名称：</div>
            <div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>组织类型：</div>
            <div>
              <el-select v-model="tissue" placeholder="请选择">
                <el-option
                  v-for="item in tissueOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="company-find">
          <div class="box">
            <div>纳税人类型：</div>
            <div>
              <el-select v-model="taxpayer" placeholder="请选择">
                <el-option
                  v-for="item in taxpayerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box">
            <div>注册城市：</div>
            <div>
              <el-select v-model="city" placeholder="请选择">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box">
            <div>方案状态：</div>
            <div>
              <el-select v-model="scheme" placeholder="请选择">
                <el-option
                  v-for="item in schemeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box btn">
            <el-button>查询</el-button>
            <el-button>新增</el-button>
          </div>
        </div>
        <div class="companylist">
          <el-table :data="companyData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="date" label="方案编号" width></el-table-column>
            <el-table-column prop="name" label="服务单号" width></el-table-column>
            <el-table-column prop="province" label="公司名称" width></el-table-column>
            <el-table-column prop="city" label="组织类型" width></el-table-column>
            <el-table-column prop="address" label="公司性质" width></el-table-column>
            <el-table-column prop="zip" label="纳税人类型" width></el-table-column>
            <el-table-column prop="zip" label="注册城市" width></el-table-column>
            <el-table-column prop="zip" label="方案状态" width>
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >移除</el-button>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="云上公司注册" name="2">
        <div class="company-find">
          <div class="box">
            <div>方案编号：</div>
            <div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>服务单号：</div>
            <div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <div class="box">
            <div>公司名称：</div>
            <div>
              <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
          </div>
          <!-- <div class="box">
            <div>组织类型：</div>
            <div>
              <el-select v-model="tissue" placeholder="请选择">
                <el-option
                  v-for="item in tissueOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>-->
        </div>
        <div class="company-find">
          <div class="box">
            <div>注册园区：</div>
            <div>
              <el-select v-model="taxpayer" placeholder="请选择">
                <el-option
                  v-for="item in taxpayerOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box">
            <div>产品类型：</div>
            <div>
              <el-select v-model="city" placeholder="请选择">
                <el-option
                  v-for="item in cityOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box">
            <div>方案状态：</div>
            <div>
              <el-select v-model="scheme" placeholder="请选择">
                <el-option
                  v-for="item in schemeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="box btn">
            <el-button>查询</el-button>
            <el-button>新增</el-button>
          </div>
        </div>
        <div class="companylist">
          <el-table :data="companyData" style="width: 100%" max-height="250">
            <el-table-column fixed prop="date" label="方案编号" width=""></el-table-column>
            <el-table-column prop="name" label="服务单号" width=""></el-table-column>
            <el-table-column prop="province" label="注册园区" width=""></el-table-column>
            <el-table-column prop="city" label="产品类型" width=""></el-table-column>
            <el-table-column prop="address" label="注册类型" width=""></el-table-column>
            <el-table-column prop="zip" label="方案状态" width=""></el-table-column>
            <el-table-column fixed="right" label="操作" width="">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "1",
      input: "",
      tissue: "",
      taxpayer: "",
      city: "",
      scheme: "",
      tissueOptions: [
        {
          value: "个人独资",
          label: "个人独资"
        },
        {
          value: "合伙企业",
          label: "合伙企业"
        }
      ],
      taxpayerOptions: [
        {
          value: "内资小规模",
          label: "内资小规模"
        },
        {
          value: "内资一般人",
          label: "内资一般人"
        },
        {
          value: "外资小规模",
          label: "外资小规模"
        },
        {
          value: "外资一般人",
          label: "外资一般人"
        },
        {
          value: "合资小规模",
          label: "合资小规模"
        },
        {
          value: "合资一般人",
          label: "合资一般人"
        },
      ],
      cityOptions: [
        {
          value: "北京",
          label: "北京"
        },
        {
          value: "上海",
          label: "上海"
        },
        {
          value: "山西",
          label: "山西"
        },
        {
          value: "河北",
          label: "河北"
        },
      ],
      schemeOptions: [
        {
          value: "待确认",
          label: "待确认"
        },
        {
          value: "已完成",
          label: "已完成"
        },
        {
          value: "已作废",
          label: "已作废"
        },
      ],
      companyData: []
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    deleteRow(idx, row) {
      console.log(idx, row);
    }
  }
};
</script>
<style lang="scss" scoped>
.company {
  padding: 30px 22px;
  box-sizing: border-box;
  width: 100%;
  .el-tabs--card > .el-tabs__header {
    margin: 0;
  }
  > .title {
    height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 30px;
  }
  .company-find {
    box-sizing: border-box;
    width: 100%;
    margin-top: 30px;
    min-width: 1300px;
    padding: 0 0 0 2.24%;
    .box {
      display: flex;
      width: 284px;
      align-items: center;
      float: left;
      margin-right: 25px;
      > div:nth-child(1) {
        width: 84px;
        height: 36px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        text-align: right;
        line-height: 36px;
      }
      > div:nth-child(2) {
        flex: 1;
        .el-input__inner {
          height: 36px;
        }
      }
      > .el-button {
        width: 80px;
        height: 36px;
        background: rgba(223, 183, 107, 1);
        border-radius: 4px;
        color: white;
      }
      > .el-button:nth-child(2) {
        width: 80px;
        height: 36px;
        background: #4a90e2;
        border-radius: 4px;
        color: white;
      }
    }
    > .btn {
      margin-left: 14px;
    }
    .box:nth-child(4n) {
      margin-right: 0;
    }
  }
  .company-find::after {
    content: "";
    clear: both;
    display: block;
  }
  .companylist {
    margin-top: 30px;
  }
}
</style>