<template>
  <div class="role">
    <div ref="leftContainer" class="left">
      <el-form :inline="true">
        <el-form-item
          :label="$t('system:notice:label:NoticeLevel')"
          prop="NoticeLevelEnum"
        >
          <el-select
            v-model="searchData.NoticeLevelEnum"
            clearable
            size="small"
          >
            <el-option
              v-for="item of $d.NoteLevel"
              :key="item.value"
              :label="item.label"
              :value="item.raw.Code * 1"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('system:notice:label:NoticeType')"
          prop="NoticeTypeEnum"
        >
          <el-select v-model="searchData.NoticeTypeEnum" clearable size="small">
            <el-option
              v-for="item of $d.NoteType"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('system:notice:label:ApplicableProject')"
          prop="ApplicableProjectEnum"
        >
          <el-select
            v-model="searchData.ApplicableProjectEnum"
            clearable
            size="small"
          >
            <el-option
              v-for="item of $d.TrialType"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('system:notice:label:NoticeUserTypeIdList')"
          prop="NoticeUserTypeIdList"
        >
          <el-select
            v-model="searchData.NoticeUserTypeIdList"
            multiple
            clearable
            size="small"
          >
            <el-option
              v-for="item of roleList"
              :key="item.Id"
              :label="item.UserTypeName"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('system:notice:label:NoticeMode')"
          prop="NoticeModeEnum"
        >
          <el-select v-model="searchData.NoticeModeEnum" clearable size="small">
            <el-option
              v-for="item of $d.NoticeMode"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="getList"
            >{{ $t("common:button:search") }}</el-button
          >
          <el-button
            v-hasPermi="['system:notice:add']"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            >{{ $t("common:button:add") }}</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        v-adaptive="{ bottomOffset: 45 }"
        height="100"
        :data="list"
        class="table"
        ref="noticeTable"
        @sort-change="handleSortChange"
      >
        <el-table-column type="index" width="50" />
        <el-table-column
          :label="$t('system:notice:table:NoticeLevel')"
          prop="NoticeLevelEnum"
          min-width="120"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              $d.NoteLevel.find((v) => {
                return v.raw.Code * 1 === scope.row.NoticeLevelEnum;
              })
                ? $d.NoteLevel.find((v) => {
                    return v.raw.Code * 1 === scope.row.NoticeLevelEnum;
                  }).label
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:NoticeType')"
          prop="NoticeTypeEnum"
          min-width="100"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              $d.NoteType.find((v) => {
                return v.raw.Code * 1 === scope.row.NoticeTypeEnum;
              })
                ? $d.NoteType.find((v) => {
                    return v.raw.Code * 1 === scope.row.NoticeTypeEnum;
                  }).label
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:NoticeContent')"
          prop="NoticeContent"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.NoticeContent }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:NoticeState')"
          prop="NoticeStateEnum"
          min-width="100"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.ActualNoticeStateEnum === 0
                  ? 'info'
                  : scope.row.ActualNoticeStateEnum === 1
                  ? 'success'
                  : 'danger'
              "
            >
              {{
                $d.NoticeState.find((v) => {
                  return v.raw.Code * 1 === scope.row.ActualNoticeStateEnum;
                })
                  ? $d.NoticeState.find((v) => {
                      return v.raw.Code * 1 === scope.row.ActualNoticeStateEnum;
                    }).label
                  : ""
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:ApplicableProject')"
          prop="ApplicableProjectEnum"
          min-width="100"
          sortable="custom"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              $d.TrialType.find((v) => {
                return v.raw.Code * 1 === scope.row.ApplicableProjectEnum;
              })
                ? $d.TrialType.find((v) => {
                    return v.raw.Code * 1 === scope.row.ApplicableProjectEnum;
                  }).label
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:NoticeUserTypeList')"
          prop="NoticeUserTypeList"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              scope.row.NoticeUserTypeList.map(
                (v) => v.UserTypeShortName
              ).toString()
            }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:NoticeMode')"
          prop="NoticeModeEnum"
          min-width="100"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            {{
              dict.type.NoticeMode.find((v) => {
                return v.raw.Code * 1 === scope.row.NoticeModeEnum;
              })
                ? $d.NoticeMode.find((v) => {
                    return v.raw.Code * 1 === scope.row.NoticeModeEnum;
                  }).label
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:StartDate')"
          prop="StartDate"
          min-width="240"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            {{ scope.row.StartDate }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:PublishUserName')"
          prop="PublishUserName"
          min-width="100"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          :label="$t('system:notice:table:PublishedTime')"
          prop="PublishedTime"
          min-width="160"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          :label="$t('system:notice:table:UpdateTime')"
          prop="UpdateTime"
          min-width="160"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            {{ scope.row.EndDate ? scope.row.EndDate : scope.row.CreateTime }}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('system:notice:table:FileName')"
          fixed="right"
          prop="FileName"
          min-width="120"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <a
              :href="OSSclientConfig.basePath + scope.row.Path"
              target="_blank"
              style="color: #428bca"
              >{{ scope.row.FileName }}</a
            >
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('common:action:action')"
          fixed="right"
          prop="UserTypeShortName"
          min-width="200"
          show-overflow-tooltip
          v-if="
            hasPermi([
              'system:notice:edit',
              'system:notice:publish',
              'system:notice:back',
            ])
          "
        >
          <template slot-scope="scope">
            <el-button
              v-hasPermi="['system:notice:edit']"
              size="mini"
              type="text"
              icon="el-icon-edit-outline"
              @click="handleEdit(scope.row)"
              >{{ $t("common:action:edit") }}</el-button
            >
            <el-button
              v-hasPermi="['system:notice:publish']"
              v-if="scope.row.NoticeStateEnum === 0"
              size="mini"
              type="text"
              icon="el-icon-s-promotion"
              @click="handlePush(scope.row)"
              >{{ $t("common:action:push") }}</el-button
            >
            <el-button
              v-hasPermi="['system:notice:back']"
              v-if="scope.row.NoticeStateEnum === 1"
              size="mini"
              type="text"
              icon="el-icon-s-release"
              @click="handleGet(scope.row)"
              >{{ $t("common:action:pull") }}</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: {
    // 表格排序
    handleSortChange(sort) {
      this.searchData.SortField = sort.prop;
      if (sort.order === "ascending") this.searchData.Asc = true;
      if (sort.order === "descending") this.searchData.Asc = false;
      if (!sort.order) this.searchData.SortField = null;
      this.getList();
    },
    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(this.$t("common:button:edit"), row);
      });
    },
    handleAdd() {
      this.$nextTick(() => {
        this.$refs["NoticeForm"].openDialog(this.$t("common:button:add"), {});
      });
    },
    getUserTypeRoleList() {
      getUserTypeRoleList({})
        .then((res) => {
          let arr = [];
          if (this.hasPermi(["role:admin"])) {
            arr = [1];
          }
          if (this.hasPermi(["role:sa"])) {
            arr = [1, 2];
          }
          if (this.hasPermi(["role:pm"])) {
            arr = [1, 2, 14];
          }
          this.roleList = res.Result.map((item) => {
            if (!arr.includes(item.UserTypeEnum)) {
              return item;
            }
          }).filter((item) => item);
        })
        .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;
  }
}
.el-upload-list__item-name {
  display: inline-block;
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
