<!--
  @description: 采购消息中心
  @author: gmy
  @routerPath:/procurement/procurementUserMessageList
  @date： 2020-8-28 17:13:01
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />消息中心
    </div>
    <section class="p0-16">
      <!--查询条件-->
      <div class="crud_menu_title clearfix">
        <span class="icon-line fl">查询条件</span>
        <span class="fr pointer" @click="handleToggleSearch">
          <el-link
            :underline="false"
            :class="toggleSearchStatus ? 'arrow-is-active' : ''"
            type="primary"
            class="toggleSearchStatus icon el-icon-arrow-down"
          />
          {{ toggleSearchStatus ? "收起高级查询" : "展开高级查询" }}
        </span>
      </div>
      <section :class="{ SearchContent_show: toggleSearchStatus }" class="clearfix SearchContent">
        <div class="SearchContent_leftInput fl">
          <el-form
            ref="searchForm"
            :model="searchForm"
            label-width="98px"
            label-position="left"
            inline
          >
            <!--标题-->
            <el-form-item
              ref="title"
              label="标题"
              prop="title"
              class="el-form-item--two"
            >
              <el-input
                v-model.trim="searchForm.title"
                placeholder="标题"
                style="width:310px"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!--发送人-->
            <el-form-item
              ref="mailSourceType"
              label="发送人"
              class="el-form-item--two"
              prop="mailSourceType"
            >
              <el-select
                v-model="searchForm.mailSourceType"
                placeholder="请选择"
                style="width:20vw"
              >
                <el-option
                  v-for="item in mailSourceTypeList"
                  :key="item.typename"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </el-form-item>
            <!--发送时间-->
            <el-form-item ref="date" label="发送时间 " prop="date">
              <el-date-picker
                v-model="searchForm.createTimeBegin"
                :value-format="elValueFormatDate"
                :clearable="false"
                type="date"
                align="right"
                placeholder="选择日期时间"
                style="width:149px"
              />~
              <el-date-picker
                v-model="searchForm.createTimeEnd"
                :value-format="elValueFormatDate"
                :clearable="false"
                type="date"
                align="right"
                placeholder="选择日期时间"
                style="width:149px"
              />
            </el-form-item>
            <!-- 状态 -->
            <el-form-item
              ref="purchaseOrganization"
              label="状态"
              class="el-form-item--two"
              prop="purchaseOrganization"
            >
              <el-select
                v-model="searchForm.purchaseOrganization"
                placeholder="请选择"
                style="width:20vw"
              >
                <el-option
                  v-for="item in messageListStatus"
                  :key="item.typename"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" @click="onSearch">
            搜 索
          </el-button>
          <el-button plain type="info" @click="resetForm('searchForm')">
            重 置
          </el-button>
        </div>
      </section>
      <!--查询结果-->
      <div class="crud_menu_title">
        <span class="icon-line">查询结果</span>
      </div>
      <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="" name="00">
            <span slot="label">未查看<span>({{ didNoSeeTotal }})</span></span>
          </el-tab-pane>
          <el-tab-pane label="全部" name="" />
        </el-tabs>
      </div>
      <div class="mb10">
        <!-- 寻源下可有执行采购计划和关闭采购计划 -->
        <template v-if="activeName==='00'">
          <el-button type="primary" @click="allMageRead">
            全部标记为已读
          </el-button>
        </template>
      </div>
      <section>
        <el-table
          ref="smallTable"
          :data="userMessageData"
        >
          <el-table-column type="index" label="序号" align="center" width="60" />
          <el-table-column
            prop="title"
            label="标题"
            header-align="center"
            align="left"
            min-width="230"
          />
          <el-table-column label="类型" header-align="center" align="center" min-width="80">
            <template
              slot-scope="scope"
            >
              {{ filterDictText(messageTypStatus, scope.row.mailType) }}
            </template>
          </el-table-column>
          <el-table-column label="发送人" header-align="center" align="center" min-width="80">
            <template
              slot-scope="scope"
            >
              {{ filterDictText(mailSourceTypeList, scope.row.mailSourceType) }}
            </template>
          </el-table-column>
          <el-table-column header-align="center" label="发送时间" align="center" width="180">
            <template slot-scope="scope">
              <p
                v-if="scope.row.createTime"
              >
                {{ $Moment(scope.row.createTime).format(momentSaveFormat) }}
              </p>
            </template>
          </el-table-column>
          <el-table-column label="状态" header-align="center" align="center" min-width="80">
            <template
              slot-scope="scope"
            >
              {{ filterDictText(messageListStatus, scope.row.viewState) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80" fixed="right">
            <template slot-scope="scope">
              <el-link type="primary" @click.stop="messageDetail(scope.row)">
                [查看]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
    </section>
    <!-- 查看消息记录弹框 -->
    <userMessage-dialog :key="new Date()*1" :dialog-data="messageContentDialog" />
  </div>
</template>

<script>
/* api接口*/
import { getMailToastList, modifyAllViewState } from '@/api/procurement/commonDesk'
/* 公共参数方法*/
import { ListMixin } from '@/mixins/ListMixin'
import {
  filterObj,
  filterDictText
} from '@/assets/js/utils'
import { procurementUserMessageGrounpMixins } from './mixins/procurementUserMessageGrounpMixins' // 字典信息
/* 分页组件*/
import pagination from '@comp/common/pagination/pagination'
import userMessage from './procurementUserMessage-dialog' // 查看消息详情弹框
export default {
  name: 'BuildingProjectLedgerList',
  components: {
    'userMessage-dialog': userMessage, //  查看消息详情弹框
    pagination // 分页组件
  },
  mixins: [ListMixin, procurementUserMessageGrounpMixins],
  data() {
    return {
      // 查看消息记录弹框
      messageContentDialog: {
        dialog: false,
        messageId: '' // 消息id
      },
      loading: true,
      didNoSeeTotal: '', // 未查看总数
      searchForm: {
        title: '', // 标题
        createTimeBegin: '', // 发送开始时间
        createTimeEnd: '', // 发送结束时间
        mailSourceType: '', // 消息来源(发送人)01系统消息 02采购方
        viewState: '00' //  00未查看 '' 全部 01 已查看
      },
      activeName: '00', // 消息tab切换状态 00未查看 '' 全部
      userMessageData: [], // 数据
      // 选择消息集合
      mesageModeData: {
        implementPurchaseList: '', // 自行采购选中数据id字符串集合
        consignContractVisible: false
      }
    }
  },
  watch: {
    'messageContentDialog.dialog'(val) {
      if (!val) {
        // 查询数据方法
        this.loadData()
      }
    }
  },
  created() {
    // 查询数据方法
    this.loadData()
  },
  methods: {
    filterDictText,
    // 全部标记为已读
    allMageRead() {
      this.modifyAllViewStateData()
    },
    // 切换采购寻源状态
    handleClick(tab) {
      // 初始化订单状态
      this.searchForm.viewState = this.activeName
      // 获取数据
      this.loadData()
    },
    // 获取数据
    loadData() {
      // 获取请求参数
      const data = this.getQueryParams()
      getMailToastList(data).then(res => {
        // 获取消息数据
        this.userMessageData = res.data.records
        if (this.searchForm.viewState === '00') {
          this.didNoSeeTotal = res.data.total
          this.paginationData.total = res.data.total
          return
        }
        this.paginationData.total = res.data.total
      }).catch(() => {

      })
    },
    // 全部标记为已读请求
    modifyAllViewStateData() {
      modifyAllViewState().then(res => {
        // 查询数据请求
        this.loadData()
      }).catch(() => {

      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData() // 获取数据
    },
    // 重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.$refs[formName].resetFields()
      this.searchForm.createTimeBegin = ''
      this.searchForm.createTimeEnd = ''
      this.loadData() // 获取数据
    },
    // 选中采购计划行项目信息
    handleSelectionChange(val) {
      const data = []
      // 获取选中数据的planDetailId放道新数组中做参数
      val.forEach(ele => {
        data.push(ele.planDetailId)
      })
      // 获取选中的采购计划id集合转字符串
      this.mesageModeData.implementPurchaseList = data.toString()
    },
    // 查看
    messageDetail(row) {
      this.messageContentDialog.messageId = row.id
      this.messageContentDialog.dialog = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-table {
  .el-table__fixed {
    height: auto !important; // 此处的important表示优先于element.style
    bottom: 12px; //..度后，设置与父容器的底部距离，则高度会动态改变
  }
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  padding-top: 5px;
  height: 12px;
}
</style>
