<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="data.type"
        placeholder="孵化器类型"
        clearable
        class="filter-item"
        style="width: 190px; margin-left: 10px"
        value="1"
      >
        <el-option label="虚拟孵化器" value="0" />
        <el-option label="实体孵化器" value="1" />
      </el-select>
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >
        搜索
      </el-button>
      <!-- 企业列表 -->
      <el-table
        v-loading="listLoading"
        :data="enterpriselist"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column label="ID" prop="ID" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业名称" prop="name" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="孵化器类型" prop="incubator" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.incubator }}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系人" prop="contacts" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.contacts }}</span>
          </template>
        </el-table-column>

        <el-table-column label="联系电话" prop="contactPhone" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.contactPhone }}</span>
          </template>
        </el-table-column>

        <el-table-column label="税务号" prop="theTaxNo" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.theTaxNo }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="注册地" prop="theTaxNo" align="center">
          <template slot-scope="{row}">
            <span>{{ row.cities[0] }}-{{ row.cities[1] }}-{{ row.cities[2] }}-{{ row.registrationPlace }}</span>
          </template>
        </el-table-column> -->

        <el-table-column label="联系人" prop="name" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="类型" prop="incubator" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.incubator }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="360"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="scoreDetail(row.id)"
              >企业测评详情</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="enterpriseDetail(row.id)"
              >企业详细信息</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="enterpriseCategoryQueryAll(row.id)"
            >企业标签</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 企业标签弹框 -->
      <el-dialog title="企业标签" :visible.sync="dialogFormVisible3">
        <el-table
          v-loading="listLoading"
          :data="categoryList"
          border
          fit
          highlight-current-row
        >
          <!-- <el-table-column label="标签ID" prop="ID" align="center">
            <template slot-scope="{row}">
              <span>{{ row.id }}</span>
            </template>
          </el-table-column> -->

          <!-- <el-table-column label="企业名称" prop="name" align="center">
            <template slot-scope="{row}">
              <span>{{ row.name }}</span>
            </template>
          </el-table-column> -->

          <!-- <el-table-column label="创建时间" prop="createdAt" align="center">
            <template slot-scope="{row}">
              <span>{{ row.createdAt }}</span>
            </template>
          </el-table-column> -->

          <el-table-column label="企业类型标签" prop="category" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.category }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible3 = false">
            确定
          </el-button>
        </div>
      </el-dialog>
      <!-- 企业详细信息弹框 -->
      <el-dialog title="企业详细信息展示" :visible.sync="dialogFormVisible">
        <el-form
          ref="dataForm"
          :model="detaillist"
          label-position="left"
          label-width="70px"
          style="
            width: auto;
            margin-left: 50px;
            height: 550px;
            overflow-y: auto;
            overflow-x: hidden;
          "
        >
          <el-form-item label="企业ID" prop="id" label-width="auto">
            <br /><span style="margin-left: 100px">{{ detaillist.id }}</span>
          </el-form-item>

          <el-form-item
            label="企业名称"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{ detaillist.name }}</span>
          </el-form-item>

          <el-form-item
            label="企业是否被列入经营异常名录和严重违法失信企业名单"
            style="width: 180%; margin-top: -20px"
            prop="id"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.dishonestEnterprise
            }}</span>
          </el-form-item>

          <el-form-item
            label="产品和服务是否属于国家规定的禁止、限制和淘汰类"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.forbidProduct
            }}</span>
          </el-form-item>

          <el-form-item
            label="今年销售收入总额，单位：万"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.grossSalesOne
            }}</span>
          </el-form-item>

          <el-form-item
            label="前年销售收入总额，单位：万"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.grossSalesThree
            }}</span>
          </el-form-item>

          <el-form-item
            label="去年销售收入总额，单位：万"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.grossSalesTwo
            }}</span>
          </el-form-item>

          <el-form-item
            label="是否拥有有效期内高新技术企业资格证书"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.highNewTechnologyEnterprise
            }}</span>
          </el-form-item>

          <el-form-item
            label="高新技术产品（服务）费用，单位：万"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.highNewTechnologyFee
            }}</span>
          </el-form-item>

          <el-form-item
            label="前一年及当年内有无发生重大安全、重大质量事故和严重环境违法、科研严重失信行为"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.illegalAct
            }}</span>
          </el-form-item>

          <el-form-item
            label="Ⅰ类知识产权数"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.intellectualPropertyRightI
            }}</span>
          </el-form-item>

          <el-form-item
            label="Ⅱ类知识产权"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.intellectualPropertyRightII
            }}</span>
          </el-form-item>

          <el-form-item
            label="对企业主要产品（服务）发挥核心支持作用的技术"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.mainProductTechnology
            }}</span>
          </el-form-item>

          <el-form-item
            label="企业是否拥有经认定的省部级以上研发机构"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.organization
            }}</span>
          </el-form-item>

          <el-form-item
            label="今年研发费用总额"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.rdexpensesOne
            }}</span>
          </el-form-item>
          <el-form-item
            label="前年研发费用总额"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.rdexpensesThree
            }}</span>
          </el-form-item>
          <el-form-item
            label="去年研发费用总额"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.rdexpensesTwo
            }}</span>
          </el-form-item>

          <el-form-item
            label="企业近五年内是否主导制定过国际标准、国家标准或行业标准"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.standard
            }}</span>
          </el-form-item>

          <el-form-item
            label="科技人员总数"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.technicians
            }}</span>
          </el-form-item>

          <el-form-item
            label="企业近五年内是否获得过国家级科技奖励，并在获奖单位中排在前三名"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.technologyAwards
            }}</span>
          </el-form-item>

          <el-form-item
            label="资产总额，单位：万"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.totalAssets
            }}</span>
          </el-form-item>

          <el-form-item
            label="今年成本费用支出总额，单位：万"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.totalCostExpensesOne
            }}</span>
          </el-form-item>

          <el-form-item
            label="前年成本费用支出总额，单位：万"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.totalCostExpensesThree
            }}</span>
          </el-form-item>

          <el-form-item
            label="去年成本费用支出总额，单位：万"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.totalCostExpensesTwo
            }}</span>
          </el-form-item>

          <el-form-item
            label="职工总数"
            prop="id"
            style="width: 180%; margin-top: -20px"
            label-width="auto"
          >
            <br /><span style="margin-left: 100px">{{
              detaillist.workforce
            }}</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false">
            确定
          </el-button>
        </div>
      </el-dialog>
      <!-- 测评详细信息弹框 -->
      <el-dialog title="测评详细信息" :visible.sync="dialogFormVisible1">
        <el-form
          ref="dataForm"
          :model="enterpriseScore"
          label-position="left"
          label-width="70px"
          style="width: 50%; margin-left: 50px"
        >
          <el-form-item label="企业ID" prop="id" style="width: 180%">
            <span style="margin-left: 200px">{{ enterpriseScore.id }}</span>
          </el-form-item>

          <el-form-item label="测评时间" prop="createdAt" style="width: 180%">
            <span style="margin-left: 200px">{{
              enterpriseScore.createdAt
            }}</span>
          </el-form-item>

          <el-form-item label="测评结果" prop="result" style="width: 180%">
            <span v-if="enterpriseScore.result === 1" style="margin-left: 200px"
              >通过</span
            >
            <span v-if="enterpriseScore.result === 0" style="margin-left: 200px"
              >未通过</span
            >
          </el-form-item>

          <el-form-item label="理由" prop="reason" style="width: 180%">
            <span style="margin-left: 200px">{{ enterpriseScore.reason }}</span>
          </el-form-item>

          <el-form-item label="测评类型" prop="type" style="width: 180%">
            <span v-if="enterpriseScore.type === 0" style="margin-left: 200px"
              >科小</span
            >
            <span v-if="enterpriseScore.type === 1" style="margin-left: 200px"
              >高企</span
            >
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible1 = false">
            确定
          </el-button>
        </div>
      </el-dialog>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="data.pageNum"
        :limit.sync="data.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import * as api from '@/api/enterprise'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Enterprise',
  components: { Pagination },
  data() {
    return {
      enterpriselist: [],
      detaillist: {
        dishonestEnterprise: '',
        forbidProduct: '',
        grossSalesOne: '',
        grossSalesThree: '',
        grossSalesTwo: '',
        highNewTechnologyEnterprise: '',
        highNewTechnologyFee: '',
        id: '',
        illegalAct: '',
        intellectualPropertyRightI: '',
        intellectualPropertyRightII: '',
        mainProductTechnology: '',
        name: '',
        organization: '',
        rdexpensesOne: '',
        rdexpensesThree: '',
        rdexpensesTwo: '',
        standard: '',
        technicians: '',
        technologyAwards: '',
        totalAssets: '',
        totalCostExpensesOne: '',
        totalCostExpensesThree: '',
        totalCostExpensesTwo: '',
        workforce: ''
      },
      enterpriseScore: {},
      categoryList: [],
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible3: false,
      data: {
        type: '',
        incubatorType: '',
        pageNum: 1,
        pageSize: 20
      },
      temp: {
        name: '1',
        type: '1'
      },
      total: 0,
      listLoading: false
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    this.getList()
  },
  methods: {
    async handleDelete(id) {
      await api.EnterpriseDelete(id).then(res => {
        this.getList()
      })
    },
    async getList() {
      const that = this
      that.listLoading = true
      await api.enterpriseQueryAll(that.data).then(res => {
        that.enterpriselist = res.list
        that.total = res.total - 0
        setTimeout(() => {
          that.listLoading = false
        }, 1000)
      })
    },
    search() {
      const that = this
      if (that.data.type === '') {
        that.data.incubatorType = ''
      } else {
        if (that.data.type - 0 === 0 || that.data.type - 0 === 1) {
          that.data.incubatorType = that.data.type - 0
        } else {
          that.data.incubatorType = ''
        }
      }
      this.getList()
    },
    async enterpriseDetail(id) {
      const that = this
      for (const key in that.detaillist) {
        that.detaillist[key] = ''
      }
      that.listLoading = true
      await api.enterpriseAdditionalQueryById(id).then(res => {
        if (res) {
          that.detaillist = res
        }
        setTimeout(() => {
          that.listLoading = false
        }, 1000)
        that.dialogFormVisible = true
      })
    },

    async enterpriseCategoryQueryAll(id) {
      const that = this
      that.listLoading = true

      await api.enterpriseCategoryQueryAll(id).then(res => {
        that.categoryList = res.list
        that.dialogFormVisible3 = true
        that.listLoading = false
      })
    },
    async scoreDetail(id) {
      const that = this
      that.listLoading = true
      await api.enterpriseScoreQueryById(id).then(res => {
        that.enterpriseScore = res
        setTimeout(() => {
          that.listLoading = false
        }, 1000)
      })
      that.dialogFormVisible1 = true
    }
  }
}
</script>

<style scoped>
</style>
