<template>
  <div>
    <div style="height: 95%">
      <Row style="margin: 0px 0;" type="flex">
        <Col span="11" order="1">
          <!--高级检索-->
          <bc-senior ref="senior" keyValue2 clear :pageName="$options.name" :fieldList="fieldList"
                   :commonList="commonList" @seniorFind="reloadData" :item.sync="searchForm"></bc-senior>
        </Col>
        <Col span="13"  order="2" style="text-align: right">
          <!-- <div style="width: 55px;float: right;margin-top: 10px">
            <bc-custom-sort ref="customSort" :sortParams.sync="sortParams" :searchForm="searchForm"
                            @reload-data="reloadData"></bc-custom-sort>
          </div>
          <div style="width: 65px;float: right;margin-top: 10px">
            <bc-table-ex :dataColumns.sync='dataColumns' :columnsShow.sync="columnsShow" firstColumn="selection"
                         :pageKey="this.$options.name"
                         layout ex></bc-table-ex>
          </div>
          <div style="width: 60px;float: right;margin-top: 10px">
            <bc-export-excel :dataColumns="columnsShow" :selectedData="selectedData" :tableData="tableData"
                             :excelName="'noticeUserExcel'"
                             :searchForm="searchForm" @export-data="exportData"
                             :getData="this.getList"></bc-export-excel>
          </div> -->
          <!--<div style="width: 90px;float: right">
            <Button @click="showUpload" type="primary">批量导入</Button>
            <bc-import :show.sync="uploadNoticeUser" :import-url="importUrl" ></bc-import>
          </div>
          <div style="width: 90px;float: right">
            <Button @click="noticeUserAdd" type="primary">添加</Button>
          </div>-->
        </Col>
      </Row>
      <Table ref="tables" searchable search-place="top" :data="tableData" :columns="dataColumns" size="small"
             :loading="loading" @on-sort-change="sortChange" @on-selection-change="selectedChange"
             highlight-row @on-current-change="onCurrentChange" style="min-height: 480px;margin-top: 10px;" border>
        <template #actions slot-scope="{ row }">
          <Button type="primary" size="small" @click="noticeUserView(row,index)" ghost style="margin-right: 5px">查看</Button>
          <!--<Button type="primary" size="small" @click="noticeUserEdit($event,row)" ghost style="margin-right: 5px">修改
          </Button>-->
          <Poptip confirm transfer size="small"
                  placement="bottom"
                  width="180"
                  title="你确定要删除吗?"
                  @on-ok="noticeUserDelete(row)">
            <Button type="primary" size="small" ghost>删除</Button>
          </Poptip>
        </template>
      </Table>
      <bcPage ref="noticeUser-list-page" @reload-data="reloadData" :dataCount="dataCount" size="small" :pageSize.sync="pageSize" ></bcPage>
      <noticeUserEdit ref="noticeUserEdit"  :show.sync="showModal" :value="modalParams" @reload-data="reloadData"></noticeUserEdit>
    </div>
  </div>
</template>

<script>
import { getNoticeUserPage,getNoticeUserList,deleteNoticeUser } from './noticeUser-api'
import noticeUserEdit from './noticeUser-modal.vue'
import moment from 'moment';
let $this;
export default {
  name: 'noticeUserPage',
  components: {
    noticeUserEdit,
  },
  props:{
    queryParams: {//消息阅读类型  已读 未读
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      importUrl: '',
      uploadNoticeUser:false,
      searchForm:{},
      showModal: false,
      modalParams: {},
      nowNoticeUser:{},
      dataCount:0,
      pageSize:10,
      columnsShow: [],
      dataColumns: [
              { title: '通知标题', key: 'title', sortable: true, show: true, width: 200 },
              { title: '通知内容', key: 'content', sortable: true, show: true, width: 240 },
              /*{ title: '类型(枚举)', key: 'type', sortable: true, show: true },*/
              { title: '提醒时间', key: '',
                render: (h, params) => h('span',  moment(params.row.noticeTime).format("YYYY.MM.DD")),
                sortable: true, show: true },
              { title: '状态', key: '',
                render: (h, params) => h('span', params.row.readState === 0 ?'未读':params.row.readState === 1 ?'已读':'已忽略'), sortable: true, show: true },
              { title: '处理状态', key: '',
                render: (h, params) => h('span', params.row.handleState === 0 ?'未处理':'已处理'), sortable: true, show: true },
              { title: '备注说明', key: 'remark', sortable: true, show: true },
              { title: '操作', key: 'action', width: 140, align: 'center',slot:'actions', show: true }
      ],
      tableData: [],
      selectedData: [],
      loading: false,
      sortParams: [], //[{title: 姓名, orderStr: 降序, sortKey: name, order: -}]
      getList: getNoticeUserList,
      commonList: [
        /*{id: 1, label: '常用固化查询条件1', findItem: [{field: 'fieldName', judge: 'eq', value: 'fieldValue'}]},
        {id: 2, label: '常用固化查询条件2', findItem: [
                {field: 'fieldName1', judge: 'eq', value: 'fieldValue2'},
                {field: 'fieldName2', judge: 'eq', value: 'fieldValue2'},
                ]},*/

      ],//固化常用列表
      fieldList: [//用户可以自行选择查询的字段列表及配置
        /*{
          label: '姓名',
          field: 'name',
          flags: ['=', 'like', 'isNull', 'isNotNull'],
          fieldType: 'input'
        },
        {
          label: '身份证',
          field: 'idCard',
          flags: ['=', 'like', 'isNull', 'isNotNull'],
          fieldType: 'input'
        },*/
      ]
    }
  },
  methods: {
    showUpload(){
      this.uploadNoticeUser=true;
    },
    noticeUserView (row) {
      this.showModal = true;
      this.modalParams = {title:'查看',flag:'view',bean:row};
      row.readState = 1
      this.tableData.splice(index,1)
      this.$emit('delCount')
    },
    noticeUserAdd () {
      this.showModal = true;
      this.modalParams = {title: '添加', flag: 'add', bean: null};
    },
    noticeUserEdit (e, row) {
      e.stopPropagation();
      this.showModal = true;
      this.modalParams = {title:'修改',flag:'edit',bean:row};
    },
    noticeUserDelete (row) {
      deleteNoticeUser(row.id).then( data => {
        this.$Message.success( "操作成功！");
        this.tableData.splice(row._index, 1);
      }).catch(err =>{
        this.$Message.error( "操作失败！");
        console.log(err);
      })
    },
        selectedChange(selection) {
      this.selectedData = selection;
    },
    sortChange(column) {
      this.$refs.customSort.sortChange(column);
    },
    exportData(params) {
      this.$refs.tables.exportCsv(params);
    },
    reloadData (pageSize,pageNo) {
      //表格加载中效果
      this.loading = true;
      //处理表单查询参数及分页
      if (!pageNo) {
        this.dataCount = 0
      }
      if (!pageSize) {
        pageSize = this.pageSize;
      }
      let page_params = {'pageSize':pageSize,'pageNo':pageNo};
      let params = Object.assign({},this.queryParams,page_params,this.searchForm); // 这样不会改变原对象
      params.userId = this.$store.state.user.userId
      getNoticeUserPage(params).then(res => {
        if (res.data.result.totalSize) {
            this.dataCount = parseInt(res.data.result.totalSize)
        }
        if (res.data.result.datas && res.data.result.datas.length > 0) {
          this.tableData = res.data.result.datas;
          this.tableData[0]._highlight = true;
          this.nowNoticeUser = this.tableData[0];
        } else {
            this.tableData = [];
        }
        this.loading = false;
      }).catch(err => {
        this.tableData = [];
        this.$Message.error('查询失败！')
        console.log(err)
      })
    },
    onCurrentChange (currentRow,oldCurrentRow) {
      this.nowNoticeUser = currentRow;
    },
  },
  mounted () {
    this.reloadData();
    $this = this;
  }
}
</script>

<style>

</style>
