<template>
  <div class="role">
    <div ref="leftContainer" class="left">
      <el-form :inline="true">
        <el-form-item label="通知级别: " prop="NoticeLevelEnum">
          <el-select v-model="searchData.NoticeLevelEnum" placeholder="通知级别" clearable size="small">
            <el-option
              v-for="item of dict.type.NoteLevel"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="通知类型: " prop="NoticeTypeEnum">
          <el-select v-model="searchData.NoticeTypeEnum" placeholder="通知类型" clearable size="small">
            <el-option
              v-for="item of dict.type.NoteType"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="适用项目: " prop="ApplicableProjectEnum">
          <el-select v-model="searchData.ApplicableProjectEnum" placeholder="适用项目" clearable size="small">
            <el-option
              v-for="item of dict.type.NoticeApplicableTrial"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="使用角色: " prop="NoticeUserTypeIdList">
          <el-select v-model="searchData.NoticeUserTypeIdList" multiple placeholder="使用角色" clearable size="small">
            <el-option
              v-for="item of roleList"
              :key="item.Id"
              :label="item.UserTypeShortName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="提醒方式: " prop="NoticeModeEnum">
          <el-select v-model="searchData.NoticeModeEnum" placeholder="提醒方式" clearable size="small">
            <el-option
              v-for="item of dict.type.NoticeMode"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" v-adaptive="{bottomOffset:45}" height="100" :data="list" class="table">
        <el-table-column type="index" width="50" />
        <el-table-column label="通知级别" prop="NoticeLevelEnum" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ dict.type.NoteLevel.find(v => {return v.raw.Code * 1 === scope.row.NoticeLevelEnum}) ? dict.type.NoteLevel.find(v => {return v.raw.Code * 1 === scope.row.NoticeLevelEnum}).label : '' }}
          </template>
        </el-table-column>
        <el-table-column label="通知类型" prop="NoticeTypeEnum" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ dict.type.NoteType.find(v => {return v.raw.Code * 1 === scope.row.NoticeTypeEnum}) ? dict.type.NoteType.find(v => {return v.raw.Code * 1 === scope.row.NoticeTypeEnum}).label : '' }}
          </template>
        </el-table-column>
        <el-table-column label="通知内容" prop="NoticeContent" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.NoticeContent }}
          </template>
        </el-table-column>
        <el-table-column label="通知状态" prop="NoticeStateEnum" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag :type="scope.row.ActualNoticeStateEnum === 0 ? 'info' : scope.row.ActualNoticeStateEnum === 1 ? 'success' : 'danger'">
              {{ dict.type.NoticeState.find(v => {return v.raw.Code * 1 === scope.row.ActualNoticeStateEnum}) ? dict.type.NoticeState.find(v => {return v.raw.Code * 1 === scope.row.ActualNoticeStateEnum}).label : '' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="适用项目" prop="ApplicableProjectEnum" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ dict.type.NoticeApplicableTrial.find(v => {return v.raw.Code * 1 === scope.row.ApplicableProjectEnum}) ? dict.type.NoticeApplicableTrial.find(v => {return v.raw.Code * 1 === scope.row.ApplicableProjectEnum}).label : '' }}
          </template>
        </el-table-column>
        <el-table-column label="适用角色" prop="NoticeUserTypeList" min-width="80" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.NoticeUserTypeList.map(v => v.UserTypeShortName).toString() }}
          </template>
        </el-table-column>
        <el-table-column label="提示方式" prop="NoticeModeEnum" min-width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ dict.type.NoticeMode.find(v => {return v.raw.Code * 1 === scope.row.NoticeModeEnum}) ? dict.type.NoticeMode.find(v => {return v.raw.Code * 1 === scope.row.NoticeModeEnum}).label : '' }}
          </template>
        </el-table-column>
        <el-table-column label="保留时长" prop="StartDate" min-width="240" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.StartDate }}-{{ scope.row.EndDate }}
          </template>
        </el-table-column>
        <el-table-column label="发布人" prop="PublishUserName" min-width="100" show-overflow-tooltip />
        <el-table-column label="发布时间" prop="PublishedTime" min-width="160" show-overflow-tooltip />
        <el-table-column label="更新时间" prop="UpdateTime" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.StartDate ? scope.row.StartDate: scope.row.CreateTime }}
          </template>
        </el-table-column>
        <el-table-column label="附件" fixed="right" prop="FileName" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <a :href="scope.row.FullFilePath" target="_blank" style="color:#00D1B2">{{ scope.row.FileName }}</a>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" prop="UserTypeShortName" min-width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit-outline"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              v-if="scope.row.NoticeStateEnum === 0"
              size="mini"
              type="text"
              icon="el-icon-s-promotion"
              @click="handlePush(scope.row)"
            >发布</el-button>
            <el-button
              v-if="scope.row.NoticeStateEnum === 1"
              size="mini"
              type="text"
              icon="el-icon-s-release"
              @click="handleGet(scope.row)"
            >撤回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="text-align: right;margin-top:5px;">
        <pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="getList" />
      </div>
    </div>
    <notice-form ref="NoticeForm" :role-list="roleList" @getList="getList" />
  </div>
</template>
<script>
import { getSystemNoticeList, addOrUpdateSystemNotice } from '@/api/system/notice'
import { getUserTypeRoleList } from '@/api/admin'
import NoticeForm from './components/from'
import Pagination from '@/components/Pagination'
const searchDataDefault = () => {
  return {
    Asc: true,
    SortField: '',
    NoticeContent: null,
    FileName: null,
    NoticeTypeEnum: null,
    NoticeLevelEnum: null,
    ApplicableProjectEnum: null,
    NoticeModeEnum: null,
    NoticeStateEnum: null,
    PageIndex: 1,
    PageSize: 20
  }
}
export default {
  components: { NoticeForm, Pagination },
  dicts: ['NoticeApplicableTrial', 'NoteLevel', 'NoteType', 'NoticeState', 'NoticeMode'],
  data() {
    return {
      list: [],
      total: 0,
      loading: false,
      treeData: [],
      defaultProps: {
        label: 'MenuName',
        children: 'Children'
      },
      userList: [],
      roleList: [],
      // 查询参数
      searchData: searchDataDefault(),
      dialogVisible: false,
      editRow: {},
      expandedKeys: [],
      treeLoading: false,
      funcListLoading: false,
      funcList: []
    }
  },
  mounted() {
    this.getUserTypeRoleList()
    this.getList()
  },
  methods: {
    handlePush(row) {
      this.loading = true
      var params = { ...row }
      params.NoticeUserTypeIdList = params.NoticeUserTypeList.map(v => v.Id)
      params.NoticeStateEnum = 1
      addOrUpdateSystemNotice(params).then(res => {
        this.loading = false
        this.$message.success('发布成功')
        this.getList()
      }).catch(() => { this.loading = false })
    },
    handleGet(row) {
      this.loading = true
      var params = { ...row }
      params.NoticeUserTypeIdList = params.NoticeUserTypeList.map(v => v.Id)
      params.NoticeStateEnum = 0
      addOrUpdateSystemNotice(params).then(res => {
        this.loading = false
        this.$message.success('撤回成功')
        this.getList()
      }).catch(() => { this.loading = false })
    },
    handleEdit(row) {
      this.$nextTick(() => {
        this.$refs['NoticeForm'].openDialog('编辑', row)
      })
    },
    handleAdd() {
      this.$nextTick(() => {
        this.$refs['NoticeForm'].openDialog('新增', {})
      })
    },
    getUserTypeRoleList() {
      getUserTypeRoleList({}).then((res) => {
        this.roleList = res.Result
      }).catch(() => {
      })
    },
    getList() {
      this.loading = true
      getSystemNoticeList(this.searchData).then((res) => {
        this.loading = false
        this.list = res.Result.CurrentPageData
        this.total = res.Result.TotalCount
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss">
  .role {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 10px;
    border-radius: 5px;
    .left {
      display: flex;
      flex-direction: column;
      width: 0;
      flex-grow: 4;
      // border-right: 1px solid #ccc;
      .filter-container {
        display: flex;
        align-items: center;
        margin: 5px;
      }
      .data-table {
        flex: 1;
        padding: 5px 0px;
      }
      .pagination-container {
        text-align: right;
      }
    }
    .right {
      width: 0;
      flex-grow: 6;
      overflow-y: auto;
      border-right: 1px solid #ccc;
    }
    .selected-row{
      background-color: cadetblue;
    }
  }
</style>
