<template>
    <div class="credit-container">
      <div class="title_wrap">
        <div class="enterprise_title">
          信用中国
        </div>
      </div>
      <div class="label-item">
        <span @click="item.number ? labelClick(item.name) : ''" :class="{'color' : nameColor == item.name,'disabled': !item.number}" v-for="item in labelList">{{item.name}} {{item.number}}</span>
      </div>
      <div class="detail-cont">
        <info-table class="info-tab" v-if="nameColor === '行政许可'" :list="defaultList" :obj="forInfo" :labelWidth="labelWidth"></info-table>
        <info-table class="info-tab" v-if="nameColor === '行政处罚'" :list="defaultList1" :obj="forInfo" :labelWidth="labelWidth"></info-table>
        <info-table class="info-tab" v-if="nameColor === '诚实守信'" :list="defaultList2" :obj="forInfo" :labelWidth="labelWidth"></info-table>
        <info-table class="info-tab" v-if="nameColor === '严重失信主体名单'" :list="defaultList3" :obj="forInfo" :labelWidth="labelWidth"></info-table>
        <info-table class="info-tab" v-if="nameColor === '经营异常'" :list="defaultList4" :obj="forInfo" :labelWidth="labelWidth"></info-table>
      </div>
    </div>
</template>

<script>
  import skeleton from '../component/skeleton';
  import InfoTable from '../component/infoTable1';
  export default {
    name: "credit",
    components: {
      skeleton,InfoTable
    },
    data() {
      return {
        isSkeleton:false,
        nameColor:'行政许可',
        labelList:[
          {
            number:10,
            name:'行政许可',
          },
          {
            number:0,
            name:'行政处罚',
          },
          {
            number:3,
            name:'诚实守信',
          },
          {
            number:2,
            name:'严重失信主体名单',
          },
          {
            number:2,
            name:'经营异常',
          },
        ],
        labelWidth: 250,
        forInfo: {
          projectName:''
        },
        defaultList: [
          // { name: '工程名称', prop: 'name', slot: true  },
          { name: '行政许可决定文书号', prop: 'projectName'},
          { name: '行政许可决定文书名称', prop: 'areaName' },
          { name: '许可证书名称', prop: 'projectAddress' },
          { name: '许可类别', prop: 'status' },
          { name: '许可编号', prop: 'projectType1' },
          { name: '许可决定日期', prop: 'registCapi' },
          { name: '有效期自', prop: 'actualCapi'},
          { name: '有效期至', prop: 'checkDate' },
          { name: '许可内容', prop: 'orgNo' },
          { name: '许可机关', prop: 'designOrgName' },
          { name: '许可机关统一社会信用代码', prop: 'creditNo' },
          { name: '数据来源单位', prop: 'supervisorOrgName' },
          { name: '数据来源单位统一社会信用代码', prop: 'scope', style: true},
        ],
        defaultList1: [
          // { name: '工程名称', prop: 'name', slot: true  },
          { name: '行政处罚决定书文号', prop: 'projectName'},
          { name: '处罚类别', prop: 'areaName' },
          { name: '处罚决定日期', prop: 'projectAddress' },
          { name: '处罚内容', prop: 'status' },
          { name: '罚款金额（万元）', prop: 'projectType1' },
          { name: '没收违法所得、没收非法财物的金额（万元）', prop: 'registCapi' },
          { name: '暂扣或吊销证照名称及编号', prop: 'actualCapi'},
          { name: '违法行为类型', prop: 'checkDate' },
          { name: '违法事实', prop: 'orgNo' },
          { name: '处罚依据', prop: 'designOrgName' },
          { name: '处罚机关', prop: 'creditNo' },
          { name: '处罚机关统一社会信用代码', prop: 'supervisorOrgName' },
          { name: '数据来源单位', prop: 'supervisorOrgName' },
          { name: '数据来源统一社会信用代码', prop: 'supervisorOrgName' },
        ],
        defaultList2: [
          { name: '纳税信用级别', prop: 'projectName'},
          { name: '评价来源', prop: 'areaName' },
          { name: '评价年度', prop: 'scope', style: true},
        ],
        defaultList3: [
          { name: '失信被执行人姓名/名称', prop: 'projectName'},
          { name: '身份证号码/组织机构代码', prop: 'areaName' },
          { name: '执行法院', prop: 'projectAddress' },
          { name: '立案时间', prop: 'status' },
          { name: '案号', prop: 'projectType1' },
          { name: '做出执行依据单位', prop: 'registCapi' },
          { name: '生效法律文书确定的义务', prop: 'actualCapi'},
          { name: '被执行人的履行情况', prop: 'checkDate' },
          { name: '失信被执行人行为具体情形', prop: 'orgNo' },
          { name: '发布时间', prop: 'designOrgName' },
          { name: '已履行部分', prop: 'creditNo' },
          { name: '未履行部分', prop: 'supervisorOrgName' },
          { name: '数据来源', prop: 'scope', style: true},
        ],
        defaultList4: [
          { name: '案号', prop: 'projectName'},
          { name: '经营异常类型', prop: 'areaName' },
          { name: '列入经营异常名录原因类型名称', prop: 'projectAddress' },
          { name: '拖欠天数', prop: 'status' },
          { name: '涉及金额（元）', prop: 'projectType1' },
          { name: '列入日期', prop: 'registCapi' },
          { name: '列入机关', prop: 'actualCapi'},
          { name: '数据来源', prop: 'checkDate' },
        ],
      }
    },
    created() {

    },
    //计算集
    computed: {

    },
    //方法集
    methods: {
      labelClick(value){
        this.nameColor=value
      },
    }
  }
</script>

<style lang="scss" scoped>
  .credit-container{
    .title_wrap{
      border-bottom: 0;
    }
    .label-item{
      padding: 0 16px;
      span{
        display: inline-block;
        height: 38px;
        border-radius: 4px;
        line-height: 38px;
        border: 1px solid #DCDFE6;
        color: #232323;
        font-size: 14px;
        margin-right: 8px;
        padding: 0 12px;
        cursor: pointer;
      }
      .color{
        background: rgba(0, 129, 255, 0.1);
        border: 1px solid rgba(0, 129, 255, 0.1);
        color: #0081FF;
      }
      .disabled{
        color: #eee;
        border: 1px solid #eee;
        cursor: not-allowed;
      }
    }
    .detail-cont{
      padding: 16px;
    }
  }
</style>
