<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="content" slot-scope="scope">
        <span :class="[isOverHiddenFlag(scope.data.width, showList, scope.index, 0, scope.row.content)?'cell-span':'']" :style="{'-webkit-line-clamp': 2}">
          {{ scope.row.content }}
          <span v-if="isOverHiddenFlag(scope.data.width, showList, scope.index, 0, scope.row.content)" @click="changeShowAll(scope.index, 0)">...<span style="color: #0081FF;">展开</span></span>
        </span>
      </template>
    </tables>

  </div>
</template>

<script>
import mixin from '../mixins/mixin'
import {creditXzxkPage} from '@/api/detail/party-a/opport'
export default {
  name: 'Administrative',
  props: ['companyId'],
  mixins: [mixin],
  components: {
  },
  data() {
    return {
      queryParams: {
        cid: this.companyId,
        pageNum: 1,
        pageSize: 20
      },
      forData: [
        {label: '许可决定日期', prop: 'xxx', width: '100'},
        {label: '决定文书号', prop: 'deciWritNo', width: '200'},
        {label: '许可编号', prop: 'xxx', width: '100'},
        {label: '决定文书名称', prop: 'deciWritName', width: '190'},
        {label: '许可内容', prop: 'content', width: '300', slot: true},
        {label: '有效期自', prop: 'valiBegin', width: '100'},
        {label: '有效期至', prop: 'valiEnd', width: '100'},
        {label: '行政许可类别', prop: 'xxx', width: '100'},
        {label: '许可机关', prop: 'office', width: '180'},
        {label: '行政许可机关统一社会信用代码', prop: 'xxx', width: '200'},
        {label: '数据来源单位', prop: 'xxx', width: '110'},
        {label: '数据来源单位统一社会信用代码', prop: 'xxx', width: '200'},
        {label: '来源', prop: 'dataSource', width: '80'}
      ],
      formData: [
        { type: 3, fieldName: 'keys', value: '', placeholder: '输入关键词查询', options: []},
      ],
      //列表
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      showList:[]
    }
  },
  computed: {
  },
  created() {
    this.handleQuery()
  },
  methods: {
    async handleQuery(params) {
      this.tableLoading = true
      let param = params?params:this.queryParams
      let res = await creditXzxkPage(param)
      this.tableLoading = false
      if(res.code==200){
        this.tableData = res.rows
      }
      this.tableDataTotal = res.total
    },
    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>
