<template>
  <div class="corePersonnel">
    <head-form
      title="行政处罚"
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      :isExcel="true"
      @handle-search="handleSearch"
    />
    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
    <tables
      v-if="!isSkeleton"
      :indexFixed="true"
      :tableData="tableData"
      :forData="forData"
      :tableDataTotal="tableDataTotal"
      :queryParams="queryParams"
      @handle-current-change="handleCurrentChange"
    >
      <template slot="punishReason" slot-scope="scope">
        <span :class="[isOverHiddenFlag(scope.data.width, showList, scope.index, 0, scope.row.punishReason)?'cell-span':'']" :style="{'-webkit-line-clamp': 5}">
          <div v-html="scope.row.punishReason"></div>
          <span v-if="isOverHiddenFlag(scope.data.width, showList, scope.index, 0, scope.row.punishReason)" @click="changeShowAll(scope.index, 0)" class="more">...<span>更多</span></span>
        </span>
      </template>
    </tables>

  </div>
</template>

<script>
import mixin from '../mixins/mixin'
import {
  penalizePage,
  penalizeReasonType
} from '@/api/detail/party-a/riskInformation'
import skeleton from '../component/skeleton'
export default {
  name: 'Punish',
  mixins: [mixin],
  components: {
    skeleton
  },
  props: ['companyId'],
  data() {
    return {
      queryParams: {
        cid: this.companyId,
        pageNum: 1,
        pageSize: 20
      },
      forData: [
        {label: '处罚原因', prop: 'punishReason', slot: true, fixed: true},
        {label: '决定日期', prop: 'punishBegin', width: '105'},
        {label: '处罚结果', prop: 'punishResult', width: '264'},
        {label: '处罚文书号', prop: 'fileNum', width: '240'},
        {label: '处罚机关', prop: 'office', width: '264'},
        {label: '处罚结束日期', prop: 'punishEnd', width: '110'},
      ],
      formData: [
        { type: 1, fieldName: 'penalizeReasonType', value: '', placeholder: '处罚类别', options: []},
        { type: 3, fieldName: 'keys', value: '', placeholder: '请输入关键词', options: []},
      ],
      //列表
      tableLoading:false,
      tableData:[],
      tableDataTotal:0,
      showList:[],
      isSkeleton:true
    }
  },
  created() {
    this.handleQuery()
    this.penalizeReasonTypeData()
  },
  computed: {

  },
  methods: {
    handleQuery(params) {
      let data = params ? params : this.queryParams
      this.isSkeleton = true
      penalizePage(data).then((res) => {
        this.tableData = res.rows
        this.tableDataTotal = res.total
        this.isSkeleton = false
      })
    },
    penalizeReasonTypeData(){
      penalizeReasonType({cid:this.queryParams.cid}).then((res) => {
        let data = res.data
        if(data.length > 0){
          for (var i=0;i<data.length;i++){
            this.formData[0].options.push({
              name: data[i].punishType + '（' + data[i].count + '）',
              value: data[i].punishTypeId,
            })
          }
        }
      })
    },
    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>
.corePersonnel{
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  input{
    border: 1px solid #EFEFEF;
  }
  ::v-deep .el-form-item{
    margin-right: 8px !important;
  }

  .query-box{
    margin: 10px 0 20px;
  }
  .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>
