<template>
  <!-- 基本信息及流程 -->
  <div class="basicMessage">
    <div style="margin-bottom: 40px;">
      <span>项目基本信息</span>
      <el-divider></el-divider>
      <el-descriptions class="margin-top" title="" :column="column" size="" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i> 项目名称
          </template>
          <span v-html="getColumnData(row, 'name')"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i> 项目产出
          </template>
          <span v-html="getColumnData(row, 'output')"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i> 技术方向
          </template>
          <span v-html="getColumnData(row, 'technicalDirection')"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i> 产品阶段
          </template>
          <span v-html="getColumnData(row, 'productPhase')"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 是否检索
          </template>
          <span>{{ getArrJoin(row.ifSearch, { true: '是', false: '否' }) }}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 负责人
          </template>
          <span v-html="getColumnData(row, 'headName')"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 相关竞争对手
          </template>
          <span v-html="getColumnData(row, 'relatedCompetitors')"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 技术关键词
          </template>
          <span v-html="getColumnData(row, 'technicalKeyword')"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 审核状态
          </template>
          <el-tag size="small">{{ row.stateName }}</el-tag>
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 审核进度
          </template>
          <span v-html="getColumnData(row, 'process')"></span>
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 创建人
          </template>
          <span v-html="getColumnData(row, 'createName')"></span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 参与人
          </template>
          <span>{{ getArrJoin(row.involvedPersons, 'personName') }}</span>
          <!-- <span v-html="$commonJS.getColumnData(row.involvedPersons, {name:'参与人',value:'personName'})"></span> -->
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i> 附件
          </template>
          <span>{{ getArrJoin(row.systemFileList, 'name') }}</span>
          <!-- <span v-html="$commonJS.getColumnData(row.systemFileList, {name:'附件',value:'name'})"></span> -->
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import { column } from '../../mixins/index2'
export default {
  mixins: [column],
  components: {
  },
  props: ['id'],
  data() {
    return {
      column: 4,
      queryParams: {},
      row: {}
    }
  },
  mounted() {
    window.addEventListener('resize', (e) => {
      let width = window.innerWidth
      if (width > 2200) {
        this.column = 6;
      } else if (width < 1000) {
        this.column = 3;
      } else if (width < 1400) {
        this.column = 4;
      } else if (width < 1800) {
        this.column = 5;
      }
    })
    this.getList()
  },
  methods: {
    // 获取数据
    getList() {
      let params = {
        size: 10,
        current: 1,
        searchQuery: `id=${this.id}`,
      }
      this.$api.queryPatentDigProject(params).then(response => {
        if (response.code == 200) {
          this.row = response.data.data[0]
        }
      }).catch(error => {
        this.row = {}
      })
    },
    // 处理数据
    getColumnData(data, key) {
      if (data && data[key]) {
        return data[key]
      } else {
        return '--'
      }
    },

  },
  deactivated() {
    window.removeEventListener('resize', () => { })
  }
}
</script>

<style lang="scss">
.basicMessage {
  .el-divider--horizontal {
    margin: 10px 0;
  }
}
</style>
<style lang="scss" scoped>
.basicMessage {
  width: 100%;
  height: 100%;
}
</style>