<template>
  <div class="main-content market">
    <el-container>
      <el-header style="padding:0">
        <DetailHead :result=" entName + '基本信息'" style="border-top:0;border-left:0;border-right:0" />
      </el-header>
      <el-container>
        <el-aside class="aside">
          <div class="nav">
            <ul>
              <li :class="tab == 1 ? 'active':''"><span @click="changeTab(1)">基本信息</span></li>
              <li :class="tab == 2 ? 'active':''"><span @click="changeTab(2)">信用信息</span></li>
              <li :class="tab == 3 ? 'active':''"><span @click="changeTab(3)">检查信息</span></li>
              <li :class="tab == 4 ? 'active':''"><span @click="changeTab(4)">锁定信息</span></li>
              <li :class="tab == 5 ? 'active':''"><span @click="changeTab(5)">行政处罚</span></li>
              <li :class="tab == 6 ? 'active':''"><span @click="changeTab(6)">年度报告</span></li>
              <li :class="tab == 7 ? 'active':''"><span @click="changeTab(7)">应诉检查</span></li>
              <li :class="tab == 8 ? 'active':''"><span @click="changeTab(8)">经营异常名录</span></li>
              <li :class="tab == 9 ? 'active':''"><span @click="changeTab(9)">严重违法失信企业</span></li>
              <li :class="tab == 10 ? 'active':''"><span @click="changeTab(10)">行政许可</span></li>
              <li :class="tab == 11 ? 'active':''"><span @click="changeTab(11)">双随机抽查</span></li>
            </ul>
          </div>
        </el-aside>
        <el-main class="main">
          <div v-if="tab==1" class="tab-pane">
            <div class="tab-title">基本信息</div>
            <div class="tab-body" style="width:80%">
              <table class="form" wdith="100%">
                <tr>
                  <th width="40%">企业名称：</th>
                  <td>{{ entInfo.entname }}</td>
                </tr>
                <tr>
                  <th>注册号/统一社会信用代码：</th>
                  <td>
                    {{ entInfo.uniscid && entInfo.uniscid.length > 0 ? entInfo.uniscid : entInfo.regno }}
                  </td>
                </tr>
                <tr>
                  <th>登记住所：</th>
                  <td>
                    {{ entInfo.dom }}
                  </td>
                </tr>
                <tr>
                  <th>法定代表人：</th>
                  <td>
                    {{ entInfo.name }}
                  </td>
                </tr>
                <tr>
                  <th>出资总额：</th>
                  <td>
                    {{ entInfo.regcap }}
                  </td>
                </tr>
                <tr>
                  <th>商事主体类型：</th>
                  <td>
                    {{ entInfo.enttypeCn }}
                  </td>
                </tr>
                <tr>
                  <th>经营范围：</th>
                  <td>
                    {{ entInfo.opscope }}
                  </td>
                </tr>
                <!-- <tr>
                  <th>实际经营项目：</th>
                  <td>
                    广州天河科技股份有限公司
                  </td>
                </tr> -->
                <tr>
                  <th>主营项目类别：</th>
                  <td>
                    {{ entInfo.opscotype }}
                  </td>
                </tr>
                <tr>
                  <th>经营期限：</th>
                  <td>
                    {{ entInfo.opfrom ? entInfo.opfrom + ' - ' + (entInfo.opto ? entInfo.opto : '长期') : '长期' }}
                  </td>
                </tr>
                <tr>
                  <th>成立日期：</th>
                  <td>
                    {{ entInfo.estdate }}
                  </td>
                </tr>
                <tr>
                  <th>登记机关：</th>
                  <td>
                    {{ entInfo.regorgCn }}
                  </td>
                </tr>
                <!-- <tr>
                  <th>管理类别：</th>
                  <td>
                    广州天河科技股份有限公司
                  </td>
                </tr> -->
                <tr>
                  <th>联系电话：</th>
                  <td>
                    {{ entInfo.phone }}
                  </td>
                </tr>
                <!-- <tr>
                  <th>手机号码：</th>
                  <td>
                    广州天河科技股份有限公司
                  </td>
                </tr> -->
                <!-- <tr>
                  <th>邮政编码：</th>
                  <td>
                    广州天河科技股份有限公司
                  </td>
                </tr> -->
                <tr>
                  <th>主管部门：</th>
                  <td>
                    广州天河科技股份有限公司
                  </td>
                </tr>
                <tr>
                  <th>最新年度报告时间：</th>
                  <td>
                    {{ entInfo.a }}
                  </td>
                </tr>
                <tr>
                  <th>企业状态：</th>
                  <td>
                    {{ entInfo.regstateCn }}
                  </td>
                </tr>
                <tr>
                  <th>检查间隔：</th>
                  <td>
                    {{ entInfo.a }}
                  </td>
                </tr>
                <tr>
                  <th>核准时间：</th>
                  <td>
                    {{ entInfo.apprdate }}
                  </td>
                </tr>
                <tr>
                  <th>最后检查时间：</th>
                  <td>
                    {{ entInfo.a }}
                  </td>
                </tr>
                <tr>
                  <th>最后检查结果：</th>
                  <td>
                    {{ entInfo.a }}
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div v-if="tab==2" class="tab-pane">
            <div class="tab-title">信用评定记录</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData2">
                  <el-table-column label="业户名称" />
                  <el-table-column label="统一社会信用代码/注册号" />
                  <el-table-column label="信用等级" />
                  <el-table-column label="风险等级" />
                  <el-table-column label="评定时间" />
                </el-table>
              </div>
            </div>
            <div class="tab-title" style="margin-top:20px;">外来信息</div>
            <div class="tab-body">
              <div class="btn-box">
                <el-button type="primary">股权冻结</el-button>
                <el-button type="primary">处罚信息</el-button>
                <el-button type="primary">资质信息</el-button>
              </div>
            </div>
          </div>
          <div v-if="tab==3" class="tab-pane">
            <div class="tab-title">检查记录</div>
            <div class="tab-body">
              <el-row>
                <el-col :span="3">信用等级</el-col>
                <el-col :span="4"><el-input placeholder="信用等级" /></el-col>
                <el-col :span="3">检查间隔</el-col>
                <el-col :span="4"><el-input placeholder="检查间隔" /></el-col>
              </el-row>
              <div class="table-box">
                <el-table v-model="tableData3">
                  <el-table-column label="检查时间" />
                  <el-table-column label="检查地址" />
                  <el-table-column label="检察人员" />
                  <el-table-column label="检查结果" />
                  <el-table-column label="操作" />
                  <el-table-column label="检查时间" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="tab==4" class="tab-pane">
            <div class="tab-title">锁定解锁</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData4">
                  <el-table-column label="锁定信息" />
                  <el-table-column label="处理人" />
                  <el-table-column label="处理单位" />
                  <el-table-column label="锁定时间" />
                  <el-table-column label="解锁时间" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="tab==5" class="tab-pane">
            <div class="tab-title">行政处罚</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData5">
                  <el-table-column label="决定书文号" />
                  <el-table-column label="违法行为类型" />
                  <el-table-column label="行政处罚内容" />
                  <el-table-column label="决定机关" />
                  <el-table-column label="处罚决定日期" />
                  <el-table-column label="公示日期" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="tab==6" class="tab-pane">
            <div class="tab-title">年度报告</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData6">
                  <el-table-column label="报送日期" />
                  <el-table-column label="年报年度" />
                  <el-table-column label="企业名称" />
                  <el-table-column label="操作" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="tab==7" class="tab-pane">
            <div class="tab-title">应诉检查</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData7">
                  <el-table-column label="锁定信息" />
                  <el-table-column label="处理人" />
                  <el-table-column label="处理单位" />
                  <el-table-column label="锁定时间" />
                  <el-table-column label="解锁时间" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="tab==8" class="tab-pane">
            <div class="tab-title">经营异常名录</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData8">
                  <el-table-column label="列入原因" prop="specauseCn" />
                  <el-table-column label="列入日期" prop="abntime" />
                  <el-table-column label="移出原因" prop="remexcpresCn" />
                  <el-table-column label="移出日期" prop="remdate" />
                  <el-table-column label="监管机关" prop="ReconsiderationOrg" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="tab==9" class="tab-pane">
            <div class="tab-title">严重违法失信企业</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData9">
                  <el-table-column label="列入原因" prop="specauseString" />
                  <el-table-column label="列入日期" prop="abntime" />
                  <el-table-column label="移出原因" prop="remexcpresString" />
                  <el-table-column label="移出日期" prop="remdate" />
                  <el-table-column label="监管机关" prop="reconsiderationOrg" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="tab==10" class="tab-pane">
            <div class="tab-title">行政许可</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData10">
                  <el-table-column label="许可编号" />
                  <el-table-column label="许可文件名称" />
                  <el-table-column label="有效期自" />
                  <el-table-column label="有效期至" />
                  <el-table-column label="监管机关" />
                  <el-table-column label="许可内容" />
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="tab==11" class="tab-pane">
            <div class="tab-title">双随机抽查</div>
            <div class="tab-body">
              <div class="table-box">
                <el-table v-model="tableData11">
                  <el-table-column label="抽查计划编号" />
                  <el-table-column label="抽查计划名称" />
                  <el-table-column label="抽查任务名称" />
                  <el-table-column label="抽查类型" />
                  <el-table-column label="抽取机关" />
                  <el-table-column label="计划完成时间" />
                  <el-table-column label="抽查结果" />
                </el-table>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import DetailHead from '@/components/DetailHead'
import { getEntBaseByPripid } from '@/api/entBase'
import { listAbnormalRecord } from '@/api/abnormal'
import { listIllegalRecord } from '@/api/illegal'
export default {
  components: {
    DetailHead
  },
  data() {
    return {
      entName: '',
      tab: 1,
      entInfo: {},
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      tableData7: [],
      tableData8: [],
      tableData9: [],
      tableData10: [],
      tableData11: [],
      pripid: '',
      loadTab: []
    }
  },
  mounted() {
    this.pripid = this.$route.query.pripid
    getEntBaseByPripid(this.pripid).then(res => {
      if (res.code === 0) {
        this.entInfo = res.data
        if (this.entInfo.regcap) parseFloat(this.entInfo.regcap)
      }
    })
  },
  methods: {
    changeTab(tabIndex) {
      tabIndex = parseInt(tabIndex)
      this.tab = tabIndex
      if (!this.loadTab[tabIndex]) {
        this.loadTab[tabIndex] = true
        switch (tabIndex) {
          case 1:break
          case 2:break
          case 3:break
          case 4:break
          case 5:break
          case 6:break
          case 7:break
          case 8:this.loadAbnormalRecord(); break
          case 9:this.loadIllegalRecord(); break
          case 10:break
          case 11:break
        }
      }
    },
    // 加载列异名录
    loadAbnormalRecord() {
      listAbnormalRecord(this.pripid).then(res => {
        if (res.code === 0) {
          this.tableData8 = res.data
        }
      })
    },
    // 加载列严名录
    loadIllegalRecord() {
      listIllegalRecord(this.pripid).then(res => {
        if (res.code === 0) {
          this.tableData9 = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$active-color:#387dff;
$not-active-color:#cad4e1;
.main-content{
    .aside{
        min-height:100vh;
        border-right: 1px dashed #70aeff;
        .nav{
            ul{
                list-style: none;
            }
            li{
                line-height:40px;
                color:#5E5E5E;
                font-size: 16PX;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: left;
                color: #5e5e5e;
                >span{
                    cursor: pointer;
                }
            }
            li.active{
                color:#70AEFF;
            }
            li:before{
                content:'';
                display:inline-block;
                width:12px;
                height:12px;
                background:$not-active-color;
                border-radius: 50%;
                position: relative;
                right:20.5px;
                z-index: 2;
            }
            li.active:before{
                background:$active-color;
            }
            li:after{
                content:'';
                border-left: 1px solid #dcdcdc;
                position: absolute;
                width:1px;
                height: 40px;
                left:60px;
                z-index:1;
            }
            li:first-child:after{
                height: 24px;
                margin-top: 16px;
            }
            li:last-child:after{
                height: 24px;
                margin-bottom: 16px;
            }
        }
    }
    .main{
        .tab-pane{
            padding: 0 20px;
            .tab-title{
                font-size: 20PX;
                color: $color-title-color;
                margin-bottom:20px;
            }
            .tab-body{
                .form{
                    border:1px solid $color-border;
                    line-height: 30px;
                    th{
                        font-weight: normal;
                        color: #838fae;
                        text-align: right;
                        background:$color-form-label;
                        border-right:1px solid$color-border;
                        font-size: 16PX;
                    }
                    td{
                        color: #838fae;
                        font-size: 16PX;
                        padding-left: 10px;
                    }
                }
            }
            .table-box{
                border: 1px solid #d9d9d9;
                padding:25px;
            }
        }
    }
}
</style>
