<template>
  <div class="detail-container">
    <head-form
      title="行政许可"
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      @handle-search="handleSearch"
    />

    <tables
      :indexFixed="true"
      :tableLoading="tableLoading"
      :tableData="tableData"
      :forData="forData"
      :tableDataTotal="tableDataTotal"
      :queryParams="queryParams"
      @handle-current-change="handleCurrentChange"
    >
      <template slot="porjectName" slot-scope="scope">
        <span :class="[isOverHiddenFlag(scope.data.width, showList, scope.index, 0, scope.row.porjectName)?'cell-span':'']" :style="{'-webkit-line-clamp': 5}">
          {{ scope.row.porjectName }}
          <span v-if="isOverHiddenFlag(scope.data.width, showList, scope.index, 0, scope.row.porjectName)" @click="changeShowAll(scope.index, 0)">...<span style="color: #0081FF;">展开</span></span>
        </span>
      </template>
    </tables>

  </div>
</template>

<script>
import mixin from '../mixins/mixin'
import { getList } from '@/api/detail/party-a/opport'
export default {
  name: 'Administrative',
  props: ['companyId'],
  mixins: [mixin],
  components: {
  },
  data() {
    return {
      queryParams: {
        companyId: this.companyId,
        pageNum: 1,
        pageSize: 10
      },
      forData: [
        {label: '许可决定日期', prop: 'use', width: '100'},
        {label: '决定文书号', prop: 'type', width: '200'},
        {label: '许可编号', prop: 'type', width: '80'},
        {label: '决定文书名称', prop: 'type', width: '190'},
        {label: '许可内容', prop: 'porjectName', width: '300', slot: true},
        {label: '有效期自', prop: 'type', width: '100'},
        {label: '有效期至', prop: 'type', width: '100'},
        {label: '行政许可类别', prop: 'type', width: '100'},
        {label: '许可机关', prop: 'type', width: '180'},
        {label: '行政许可机关统一社会信用代码', prop: 'type', width: '200'},
        {label: '数据来源单位', prop: 'type', width: '110'},
        {label: '数据来源单位统一社会信用代码', prop: 'type', width: '200'},
        {label: '来源', prop: 'type', width: '80'}
      ],
      formData: [
        { type: 3, fieldName: 'keys', value: '', placeholder: '输入关键词查询', options: []},
      ],
      //列表
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      showList:[]
    }
  },
  computed: {
  },
  created() {
    this.handleQuery()
  },
  methods: {
    handleQuery(params) {
      this.tableLoading = true
      let param = params?params:this.queryParams
      getList(param).then((res) => {
        this.tableLoading = false
        this.tableData = [
          {
            projectId: '1',
            porjectName:'滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装滨州医学院口腔医学大楼铝合金门窗供货及安装2',
            use:'城镇住宅用地',
            type:'房地产业',
            way:'挂牌出让',
            state:'重庆',
            money:'11234万元',
            scale:'222平米',
            unit:'江苏省住房和城乡建设厅',
            date:'2015-08-06',
          }
        ]
        this.tableDataTotal = 100
      })
    },
    changeShowAll(row, column) {
      this.showList.push({
        row: row,
        column: column
      })
    },
    isOverHiddenFlag(data, showList, row, column, value) {
      if(value && String(value).length > this.getLenth(data)) {
        return !showList.some(item => item.row==row&&item.column==column)
      }else {
        return false
      }
    },
    getLenth(data) {
      return Math.floor(data / 12) * 5
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-container{
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  .cell-span {
    display: inline-block;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    cursor: pointer;

    >span {
      display: inline-block;
      width: 37px;
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: #fff;
      z-index: 1;
    }
  }
}
</style>
