<template>
    <view class="dmodel-table">
      <view class="search">
        <u-form :model="tableParams" labelAlign="right" class="tableForm">
          <u-form-item :label="$t('不合格原因')" label-width="100px" name="abnormalReason">
            <uni-easyinput type="text" v-model="tableParams.abnormalReason" />
          </u-form-item>
          <u-form-item>
            <u-button class="btn" @click="handleClick" type="primary" size="medium">{{$t('搜索')}}</u-button>
          </u-form-item>
        </u-form>
      </view>
      <view>
        <zb-table ref="zbTable" rowKey="abnormalId" :columns="tableColumn" :data="tableData" :stripe="true" @toggleRowSelection="toggleRowSelection"></zb-table>
      </view>
      <view class="uni-pagination-box"><uni-pagination show-icon :page-size="params.pageSize" :current="params.pageNum" :total="total" @change="change" /></view>
    </view>
  </template>
  
  <script>
  import i18n from '../../../../lang/index'
  
  export default {
    props: {
    },
    data() {
      return {
        params: {
          pageNum: 1,
          pageSize: 10,
          abnormalType: "UNQUALIFIED_REASON"
        },
        total: 0,
        tableParams: {
          abnormalReason: null
        },
        tableData: [],
        tableSelectData: [],
        tableColumn: [
          {
            type: 'radio',
            width: 40
          },
          {
            name: 'abnormalReason',
            label: i18n.t('不合格原因'),
            width: 160
          },
          {
            name: 'remark',
            label: i18n.t('备注'),
            width: 160
          }
        ]
      };
    },
    // computed: {
    // 	tableData() {
    // 		return this.data || []
    // 	}
    // },
    mounted() {
      this.getList();
      // this.data.workstationName
    },
    methods: {
      handleClick() {
        if (this.tableParams.abnormalReason) {
          this.params.abnormalReason = this.tableParams.abnormalReason;
        } else {
          delete this.params.abnormalReason
        }
        this.params.pageNum = 1;
        this.getList();
      },
      async getList() {
        const res = await this.$u.api.abnormal.detail(this.params);
        if (res.code == 200) {
          this.tableData = res.rows
          this.total = res.total;
        }
      },
      // 分页触发
      change(e) {
        this.params.pageNum = e.current;
        this.getList();
      },
      toggleRowSelection(checked, arr) {
        this.tableSelectData = arr;
        
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  .dmodel-table {
    height: 1200rpx;
    margin-top: 20rpx;
    padding: 0 20rpx;
    position: relative;
  }
  .tableForm {
    display: flex;
    margin-bottom: 20rpx;
  }
  .btn {
    margin-left: 10px;
  }
  .uni-pagination-box {
    position: absolute;
    right: 20rpx;
    bottom: 40rpx;
  }
  </style>
  