/**
* @Author think
* @Date 2019-04-30 09:46
*/

<template>
  <h-view :title="companyName" class="public-style risk-detail">
    <h-content>
      <div class="info-board">
        <div class="board-line">
          <div>\{{ riskList.businessInfor && riskList.businessInfor['登记状态'] }}</div>
          <div>\{{ riskList.businessInfor &&riskList.businessInfor['类型'] }}</div>
        </div>
        <div class="board-line3">
          <div class="board-block">
            <div>\{{ riskList.businessInfor && riskList.businessInfor['法定代表人'] }}</div>
            <div>法定代表人</div>
          </div>
          <div class="board-block-divider"/>
          <div class="board-block">
            <div>\{{ riskList.businessInfor && riskList.businessInfor['注册资本'] }}</div>
            <div>注册资本</div>
          </div>
          <div class="board-block-divider"/>
          <div class="board-block">
            <div>\{{ riskList.businessInfor && riskList.businessInfor['成立日期'] }}</div>
            <div>成立日期</div>
          </div>
        </div>
      </div>
      <div class="area-title">
        <div>基本信息</div>
      </div>
      <div class="info-area">
        <div class="info-item" @click="goDetailTab(0)">
          <img src="@/assets/image/risk/11.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">工商资料</div>
              <div class="info-count">1</div>
            </div>
            <div class="info-content">\{{ riskList.businessInfor && riskList.businessInfor['地址'] }}</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(1)">
          <img src="@/assets/image/risk/12.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">股东成员</div>
              <div class="info-count">\{{ riskList.companyNumber && riskList.companyNumber.total }}</div>
            </div>
            <div v-if="riskList.companyNumber && riskList.companyNumber.total" class="info-content">
              \{{ riskList.companyNumber.hits && riskList.companyNumber.hits[0]['成员'] }},\{{ riskList.companyNumber.hits && riskList.companyNumber.hits[1]['成员'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>

        <div class="info-item" @click="goDetailTab(2)">
          <img src="@/assets/image/risk/13.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">对外投资</div>
              <div class="info-count">\{{ riskList.investmentInfor && riskList.investmentInfor.total }}</div>
            </div>
            <div v-if="riskList.investmentInfor && riskList.investmentInfor.total" class="info-content">
              \{{ riskList.investmentInfor.hits && riskList.investmentInfor.hits[0]['名称'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>

        <div class="info-item" @click="goDetailTab(3)">
          <img src="@/assets/image/risk/14.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">工商变更</div>
              <div class="info-count">\{{ riskList.gsbgInfor && riskList.gsbgInfor.total }}</div>
            </div>
            <div v-if="riskList.gsbgInfor && riskList.gsbgInfor.total" class="info-content">\{{ riskList.gsbgInfor.hits && riskList.gsbgInfor.hits[0]['变更日期'] }}
              \{{ riskList.gsbgInfor.hits && riskList.gsbgInfor.hits[0]['变更事项'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>

        <div class="info-item" @click="goDetailTab(4)">
          <img src="@/assets/image/risk/15.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">企业年报</div>
              <div class="info-count">\{{ riskList.nianbaoInfor && riskList.nianbaoInfor.total }}</div>
            </div>
            <div class="info-content">\{{ years }}</div>
          </div>
        </div>

        <div class="info-item" @click="goDetailTab(5)">
          <img src="@/assets/image/risk/16.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">关联情报</div>
              <div class="info-count">0</div>
            </div>
            <div class="info-content">无</div>
          </div>
        </div>
      </div>
      <div class="area-title">
        <div>涉诉</div>
      </div>
      <div class="info-area">
        <div class="info-item" @click="goDetailTab(6)">
          <img src="@/assets/image/risk/21.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">开庭公告</div>
              <div class="info-count">\{{ riskList.ktggInfor && riskList.ktggInfor.total }}</div>
            </div>
            <div v-if=" riskList.ktggInfor && riskList.ktggInfor.total" class="info-content">
              \{{ riskList.ktggInfor.hits && riskList.ktggInfor.hits[0]['开庭时间'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(7)">
          <img src="@/assets/image/risk/22.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">裁判文书</div>
              <div class="info-count">\{{ riskList.cpwsInfor && riskList.cpwsInfor.total }}</div>
            </div>
            <div v-if="riskList.cpwsInfor &&riskList.cpwsInfor.total" class="info-content">
              \{{ riskList.cpwsInfor.hits && riskList.cpwsInfor.hits[0]['判决时间'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(8)">
          <img src="@/assets/image/risk/23.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">执行记录</div>
              <div class="info-count">\{{ riskList.zhixingInfor && riskList.zhixingInfor.total }}</div>
            </div>
            <div v-if="riskList.zhixingInfor && riskList.zhixingInfor.total" class="info-content">
              \{{ riskList.zhixingInfor && riskList.zhixingInfor.hits[0]['立案时间'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(9)">
          <img src="@/assets/image/risk/24.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">失信记录</div>
              <div class="info-count">\{{ riskList.shixinInfor && riskList.shixinInfor.total }}</div>
            </div>
            <div v-if=" riskList.shixinInfor &&riskList.shixinInfor.total" class="info-content">
              \{{ riskList.shixinInfor.hits && riskList.shixinInfor.hits[0]['被执行人姓名/名称 '] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(10)">
          <img src="@/assets/image/risk/25.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">涉诉公告</div>
              <div class="info-count">\{{ riskList.ssggInfo && riskList.ssggInfo.total }}</div>
            </div>
            <div v-if="riskList.ssggInfo && riskList.ssggInfo.total" class="info-content">\{{ riskList.ssggInfo.hits && riskList.ssggInfo.hits[0]['公告人'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(11)">
          <img src="@/assets/image/risk/26.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">司法协助</div>
              <div class="info-count">\{{ riskList.sfxzInfor && riskList.sfxzInfor.total }}</div>
            </div>
            <div v-if=" riskList.sfxzInfor && riskList.sfxzInfor.total" class="info-content">
              \{{ riskList.sfxzInfor.hits && riskList.sfxzInfor.hits[0]['执行事项'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
      </div>

      <div class="area-title">
        <div>经营</div>
      </div>
      <div class="info-area">
        <div class="info-item" @click="goDetailTab(12)">
          <img src="@/assets/image/risk/31.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">动产融资</div>
              <div class="info-count">\{{ riskList.dcdyInfor && riskList.dcdyInfor.total }}</div>
            </div>
            <div v-if=" riskList.dcdyInfor && riskList.dcdyInfor.total" class="info-content">
              \{{ riskList.dcdyInfor.hits && riskList.dcdyInfor.hits[0]['登记日期'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(13)">
          <img src="@/assets/image/risk/32.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">股权出质</div>
              <div class="info-count">\{{ riskList.gqczInfor && riskList.gqczInfor.total }}</div>
            </div>
            <div v-if=" riskList.gqczInfor && riskList.gqczInfor.total" class="info-content">\{{ riskList.gqczInfor && riskList.gqczInfor.hits[0]['登记日期'] }}
              \{{ riskList.gqczInfor.hits && riskList.gqczInfor.hits[0]['出质股权数额'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(14)">
          <img src="@/assets/image/risk/33.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">行政处罚</div>
              <div class="info-count">\{{ riskList.xzcfInfor && riskList.xzcfInfor.total }}</div>
            </div>
            <div v-if="riskList.xzcfInfor && riskList.xzcfInfor.total" class="info-content">
              \{{ riskList.xzcfInfor.hits && riskList.xzcfInfor.hits[0]['处罚部门'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(15)">
          <img src="@/assets/image/risk/34.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">信息披露</div>
              <div class="info-count">0</div>
            </div>
            <div class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(16)">
          <img src="@/assets/image/risk/35.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">经营异常</div>
              <div class="info-count">\{{ riskList.jyycInfor && riskList.jyycInfor.total }}</div>
            </div>
            <div v-if="riskList.jyycInfor && riskList.jyycInfor.total" class="info-content">
              \{{ riskList.jyycInfor.hits && riskList.jyycInfor.hits[0]['异常原因'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(17)">
          <img src="@/assets/image/risk/36.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">担保</div>
              <div class="info-count">0</div>
            </div>
            <div class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(18)">
          <img src="@/assets/image/risk/37.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">欠税记录</div>
              <div class="info-count">\{{ riskList.qsjlInfor && riskList.qsjlInfor.total }}</div>
            </div>
            <div v-if="riskList.qsjlInfor && riskList.qsjlInfor.total" class="info-content">
              \{{ riskList.qsjlInfor.hits && riskList.qsjlInfor.hits[0]['发布时间'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(19)">
          <img src="@/assets/image/risk/38.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">税务异常</div>
              <div class="info-count">\{{ riskList.swfzchInfor && riskList.swfzchInfor.total }}</div>
            </div>
            <div v-if=" riskList.swfzchInfor && riskList.swfzchInfor.total" class="info-content">
              \{{ riskList.swfzchInfor.hits && riskList.swfzchInfor.hits[0]['认定时间'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
      </div>
      <div class="area-title">
        <div>资产交易</div>
      </div>
      <div class="info-area">
        <div class="info-item" @click="goDetailTab(20)">
          <img src="@/assets/image/risk/41.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">招投标</div>
              <div class="info-count">\{{ riskList.ztbInfor && riskList.ztbInfor.total }}</div>
            </div>
            <div v-if=" riskList.ztbInfor && riskList.ztbInfor.total" class="info-content">\{{ riskList.ztbInfor.hits && riskList.ztbInfor.hits[0]['发布时间'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(21)">
          <img src="@/assets/image/risk/42.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">土地信息</div>
              <div class="info-count">\{{ riskList.tudiInfor && riskList.tudiInfor.total }}</div>
            </div>
            <div v-if="riskList.tudiInfor && riskList.tudiInfor.total" class="info-content">\{{ riskList.tudiInfor.hits && riskList.tudiInfor.hits[0]['公示期'] }}
              \{{ riskList.tudiInfor.hits && riskList.tudiInfor.hits[0]['公告类别'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(22)">
          <img src="@/assets/image/risk/43.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">专利</div>
              <div class="info-count">\{{ riskList.patentInfor && riskList.patentInfor.total }}</div>
            </div>
            <div v-if=" riskList.patentInfor && riskList.patentInfor.total" class="info-content">
              \{{ riskList.patentInfor.hits && riskList.patentInfor.hits[0]['申请公布日'] }} \{{ riskList.patentInfor.hits && riskList.patentInfor.hits[0]['专利类型'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(23)">
          <img src="@/assets/image/risk/44.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">著作权</div>
              <div class="info-count">\{{ riskList.zzqInfor && riskList.zzqInfor.total }}</div>
            </div>
            <div v-if="riskList.zzqInfor && riskList.zzqInfor.total" class="info-content">\{{ riskList.zzqInfor.hits && riskList.zzqInfor.hits[0]['公告日期'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item" @click="goDetailTab(24)">
          <img src="@/assets/image/risk/45.png">
          <div class="info-item-div">
            <div class="flex-between">
              <div class="info-title">ICP备案</div>
              <div class="info-count">\{{ riskList.icpInfor && riskList.icpInfor.total }}</div>
            </div>
            <div v-if="riskList.icpInfor && riskList.icpInfor.total" class="info-count">\{{ riskList.icpInfor.hits && riskList.icpInfor.hits[0]['审核通过时间'] }}
            </div>
            <div v-else class="info-content">无</div>
          </div>
        </div>
        <div class="info-item"/>
      </div>
    </h-content>
  </h-view>
</template>
<script>
import riskDetailService from './riskDetailService'
export default {
  name: 'RiskSearchDetail',
  data () {
    return {
      companyName: '',
      organizationCode: '',
      riskList: {},
      years: '',
    }
  },
  watch: {

  },
  created () {
    this.init()
    this.riskInfo()
    this.companyName = riskDetailService.getCompanyName()
    this.organizationCode = riskDetailService.getOrganizationCode()
  },
  methods: {
    init () {
      let vm = this
      let url = $config.basePath + 'risk_his_insert'
      let param = {
        'company_name': vm.companyName,
        'organization_code': vm.organizationCode,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
      })
    },

    goHome () {
      let vm = this
      vm.$router.push({
        name: 'Home',
      })
    },

    riskInfo () {
      let vm = this
      // if ($config.debug) {
      vm.riskList = riskDetailService.getRiskList()
      if (vm.riskList.nianbaoInfor && vm.riskList.nianbaoInfor.hits) {
        vm.years = this.sreachYear(vm.riskList.nianbaoInfor.hits)
      }

      /* } else {
        vm.hlsPopup.showLoading('请稍等!')
        let p1 = riskDetailService.businessInfor(vm.organizationCode)
        let p2 = riskDetailService.companyNumber(vm.organizationCode)
        let p3 = riskDetailService.investorInfor(vm.organizationCode)
        let p4 = riskDetailService.investmentInfor(vm.organizationCode)
        let p5 = riskDetailService.nianbaoInfor(vm.organizationCode)
        let p6 = riskDetailService.gsbgInfor(vm.organizationCode)
        let p7 = riskDetailService.dcdyInfor(vm.organizationCode)
        let p8 = riskDetailService.gqczInfor(vm.organizationCode)
        let p9 = riskDetailService.xzcfInfor(vm.organizationCode)
        let p10 = riskDetailService.qsjlInfor(vm.organizationCode)
        let p11 = riskDetailService.swfzchInfor(vm.organizationCode)
        let p12 = riskDetailService.jyycInfor(vm.organizationCode)
        let p13 = riskDetailService.ktggInfor(vm.organizationCode)
        let p14 = riskDetailService.cpwsInfor(vm.organizationCode)
        let p15 = riskDetailService.sfxzInfor(vm.organizationCode)
        let p16 = riskDetailService.zhixingInfor(vm.organizationCode)
        let p17 = riskDetailService.shixinInfor(vm.organizationCode)
        let p18 = riskDetailService.ssggInfo(vm.organizationCode)
        let p19 = riskDetailService.patentInfor(vm.organizationCode)
        let p20 = riskDetailService.zzqInfor(vm.organizationCode)
        let p21 = riskDetailService.icpInfor(vm.organizationCode)
        let p22 = riskDetailService.ztbInfor(vm.organizationCode)
        let p23 = riskDetailService.tudiInfor(vm.organizationCode)

        Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17, p18, p19, p20, p21, p22, p23]).then(function (values) {
          vm.hlsPopup.hideLoading()
          debugger
          vm.riskList = riskDetailService.getRiskList()
          if (vm.riskList.nianbaoInfor && vm.riskList.nianbaoInfor.hits) {
            vm.years = this.sreachYear(vm.riskList.nianbaoInfor.hits)
          }
        })
      } */
    },

    /**
     *
     * @param list 数组
     * @returns {*} number
     * @constructor
     */
    arrayMax (list) {
      // 将数组第一个元素的值赋给max
      let max = list[0]
      // 使用for 循环从数组第一个值开始做遍历
      for (var i = 1; i < list.length; i++) {
        // 如果元素当前值大于max,就把这个当前值赋值给max
        if (list[i] > max) {
          max = list[i]
        }
      }
      // 返回最大的值
      return max
    },

    /**
    * 取数组最小值
    * @returns {*} number
    */
    arrayMin (list) {
      let min = list[0]
      list.forEach(function (ele, index, list) {
        if (ele < min) {
          min = ele
        }
      })
      return min
    },

    sreachYear (list) {
      let vm = this
      let array = []
      for (let i = 0; i < list.length; i++) {
        let years = list[i]
        array.push(years['报送年度'])
      }
      return vm.arrayMin(array) + '~' + vm.arrayMax(array)
    },

    goDetailTab (index) {
      let vm = this
      let riskList = riskDetailService.getRiskList()
      if (riskList.businessInfor) {
        vm.$router.push({
          name: 'RiskDetailTab',
          params: {
            companyName: this.$route.params.name,
            organizationCode: this.$route.params.id,
            index: index,
          },
        })
      } else {
        vm.hlsPopup.showLongBottom('暂无详情')
      }
    },
  },
}
</script>

<style lang="less">
  .risk-detail {
    background-color: #ffffff;
    .info-board {
      width: 100%;
      padding: 10px 0px 15px;
      background-color: @headerColor;
      color: white;
      .board-line {
        font-size: 16px;
        margin-bottom: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        div {
          margin: 2px 5px;
          color: @headerColor;
          background-color: white;
          border-radius: 1px;
          font-size: 12px;
          line-height: 12px;
          padding: 2px 5px;
        }
      }
      .board-line3 {
        height: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .board-block {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 12px;
          div {
            height: 50%;
            text-align: center;
          }
          div:first-child {
            line-height: 15px;
          }
          div:last-child {
            line-height: 20px;
          }
        }
        .board-block:first-child {
          padding-left: 0
        }
        .board-block-divider {
          width: 3px;
          height: 100%;
          background-color: white;
        }
      }
    }
    .area-title {
      width: 100%;
      height: 30px;
      font-size: 14px;
      background-color: @background-color-gray;
      color: @mainColor;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
    }
    .risk-scan {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      overflow: hidden;
      padding-top: 1px;
      height: 40px;
      .labels {
        color: #ed6b4f;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        padding: 0 5px;
        .scroll-item {
          border: 1px solid #ed6b4f; /*no*/
          border-radius: 1px; /*no*/
        }
        div {
          margin-right: 1em;
          position: relative;
          display: inline-block;
          padding: 0 3px;
          white-space: nowrap;
          font-size: 12px;
        }
        .scroll::after {
          content: '';
          display: none;
        }
      }
    }
    .info-area {
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid @divider-color; /*no*/
      .info-item {
        width: 50%;
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 12px;
        border-top: 1px solid @divider-color; /*no*/
        border-right: 1px solid @divider-color; /*no*/
        padding: 0 5px;
        margin: 0;
        &.activated {
          opacity: 0.9;
          -webkit-transform: scale(0.95);
          transform: scale(0.95)
        }
        img {
          height: 30px;
          //width: 60px;
          margin: 0 8px;
        }
        .info-item-div{
          width:calc(100% - 20px);
        }
        div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .info-title {
          font-size:@font-size-small;
          line-height: @font-size-small;
        }
        .info-count {
          color: rgba(0, 0, 0, 0.2);
        }
        .info-content {
          color: rgba(0, 0, 0, 0.4);
          font-size:@font-size-small;
          line-height: @font-size-small;
          margin-top:5px;
        }
      }
      .flex-between {
        font-size:@font-size-small;
        line-height: @font-size-small;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
      }
    }
  }
</style>
