<template>
  <div class="corePersonnel">
    <head-form
      title="行政处罚"
      :form-data="formData"
      :query-params="queryParams"
      :total="tableDataTotal"
      :isExcel="true"
      @handle-search="handleSearch"
    />

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

  </div>
</template>

<script>
import mixin from '../mixins/mixin'
import {
  penalizePage,
  penalizeReasonType
} from '@/api/riskInformation/punish'
export default {
  name: 'Punish',
  mixins: [mixin],
  components: {

  },
  data() {
    return {
      queryParams: {
        cid: 6034,
        pageNum: 1,
        pageSize: 10
      },
      forData: [
        {label: '处罚原因', prop: 'punishReason', width: '508', slot: true, fixed: true},
        {label: '决定日期', prop: 'punishBegin', width: '95'},
        {label: '处罚结果', prop: 'punishResult', width: '264'},
        {label: '处罚文书号', prop: 'fileNum', width: '200'},
        {label: '相关人员', prop: 'cgrdm', width: '88'},
        {label: '处罚机关', prop: 'office', width: '264'},
        {label: '处罚结束日期', prop: 'dataId', width: '100'},
      ],
      formData: [
        { type: 1, fieldName: 'penalizeReasonType', value: '', placeholder: '处罚类别',
          options: [
            { name: '处罚类别1', value: '1' },
            { name: '处罚类别2', value: '2' },
            { name: '处罚类别3', value: '3' },
            { name: '处罚类别4', value: '4' }
          ]
        },
        { type: 3, fieldName: 'keys', value: '', placeholder: '请输入关键词', options: []},
      ],
      //列表
      tableLoading:false,
      tableData:[
        {
          punishReason:'根据成都市住房和城乡建设局《关于持续开展建设工地扬尘治理专项攻坚行动的通知》（成住建发（2021]178号），对你单位参建的项目住宅、商业及配套设施（2020-510107-47-03-506368） （金茂府三期）（安监备案编号：WH-CJ-AJ-2021-001）监督检查中发现未湿法作业（现场存在露天切割石材，未采取降尘防尘措施）。）的违规行为，予以记录并扣分，预扣减施工企业现场信用信息得分0.05分，预扣减监理企业现场信用信息得分...预扣减施工企业现场信用信息得分0.05分，预扣减监理企业现场信用信息得分',
          punishBegin:'2015-08-06',
          punishResult:'列入全省3-6月份拖欠农民工工资预警项目,现予以限期整改通报。',
          fileNum:'铜城建罚决字【2021)】18-5号',
          cgrdm:'测试1',
          office:'江苏省住房和城乡建设厅',
          dataId:'2015-08-06',
        }
      ],
      tableDataTotal:200,
      showList:[],
    }
  },
  created() {
    this.dataRegion()
    this.penalizeReasonTypeData()
  },
  computed: {

  },
  methods: {
    async dataRegion() {
      penalizePage(this.queryParams).then((res) => {
        console.log(res)
      })
    },
    penalizeReasonTypeData(){
      penalizeReasonType({cid:6034}).then((res) => {
        console.log(res)
      })
    },
    handleQuery(params) {
      console.log(params)
    },
    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;
  }
  ::v-deep .el-table__body tr.current-row > td.el-table__cell{
    background-color: #ffffff;
  }
  .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>
