<template>
  <div class="content-main tzbtSty">
    <el-form
      :inline="true"
      class="search-bm-boder"
      label-width="100px"
      :model="searchForm"
      ref="form"
    >
      <!-- <div class="all-row-b5 search-div"> -->
      <el-form-item label="通知标题：" prop="title">
        <el-input
          placeholder="请输入通知标题"
          v-model="searchForm.title"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="通知对象：" prop="jsdw">
        <el-input
          placeholder="请输入通知对象"
          v-model="searchForm.jsdw"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="状态：" prop="fbzt">
        <el-select v-model="searchForm.fbzt" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <div class="search-button">
          <span class="search-line"></span>
          <el-button
            type="primary"
            class="outButton"
            icon="el-icon-search"
            @click="getList()"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="reset"
            icon="outButton iconfont iconzhongzhi"
            class="outButton"
            >重置</el-button
          >
        </div>
      </el-form-item>
      <!-- </div> -->
    </el-form>
    <el-row>
      <div class="addBtnBg">
        <el-button
          type="primary"
          class="outButton newReport"
          icon="el-icon-plus"
          @click="addBtnFn"
          >新增</el-button
        >
      </div>
    </el-row>

    <el-row>
      <el-table
        tooltip-effect="dark"
        style="width: 100%"
        align="center"
        border
        stripe
        highlight-current-rowv-loading="tableLoading"
        :data="tableData"
      >
        <el-table-column label="序号" align="center" width="55">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="通知标题"
          prop="title"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="发布人"
          prop="fqr"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="通知对象"
          prop="jsdw"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="发布日期"
          prop="fbrq"
          width="100"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="已读数量"
          prop="ydsl"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="未读数量"
          prop="wdsl"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          :show-overflow-tooltip="true"
          label="状态"
          prop="fbzt"
          width="80"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.fbzt == 0">{{ "草稿" }}</span>
            <span v-if="scope.row.fbzt == 1">{{ "已发布" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="120" label="操作">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="light"
              content="查看"
              placement="top"
            >
              <el-button
                class="button operate_show_btn iconfont iconchakan2"
                type="primary"
                @click.stop="detailFn(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="撤回"
              placement="top"
              v-if="scope.row.fbzt == '1' && scope.row.isToday"
            >
              <el-button
                class="button operate_edit_btn iconfont iconchehui"
                type="primary"
                @click.stop="goHomeFn(scope.row)"
              ></el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="light"
              content="修改"
              placement="top"
              v-if="scope.row.fbzt == '0'"
            >
              <el-button
                class="button operate_edit_btn"
                size="mini"
                type="primary"
                @click.stop="updateFn(scope.row)"
              >
                <i class="iconfont">&#xe69e;</i>
              </el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="删除"
              placement="top"
              v-if="scope.row.fbzt == '0'"
            >
              <el-button
                class="button operate_delete_btn"
                size="mini"
                type="primary"
                @click.stop="deleteFn(scope.row)"
              >
                <i class="iconfont">&#xe6a7;</i>
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页开始 -->
      <div class="pagination-container">
        <el-pagination
          class="right"
          :current-page.sync="limit.page"
          :page-size="limit.size"
          :page-sizes="[10, 20, 30, 40]"
          :total="limit.total"
          @size-change="sizeChange"
          @current-change="pageChange"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getKdListTreeNew,
  getListData,
  detailInfo,
  saveData,
  updateData,
  deleteData,
  sendData,
  viewFile,
  viewFileData,
  viewAllFileData,
  revocation,
} from "@/api/publicfunction/announcement";
export default {
  name: "Daily",
  data() {
    return {
      searchForm: {
        tzbt: null,
        fbr: null,
        zt: null,
      },
      options1: [
        {
          value: "0",
          label: "草稿",
        },
        {
          value: "1",
          label: "已发布",
        },
      ],
      tableData: [],
      limit: {
        page: 1,
        size: 10,
        total: 0,
      },
      buttonNameList: [],
      kdOption: [],
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  beforeCreate() {},
  created() {
    // this.getButtonList(sessionStorage.getItem("resourceCode"),sessionStorage.getItem("userCode"))
    this.getList();
  },
  methods: {
    goHomeFn(row) {
      this.$confirm("是否撤回这条通知？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: row.id,
          };
          revocation(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "撤回成功！",
                type: "success",
              });
              this.getList();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            message: "已取消撤回",
            type: "warning",
          });
        });
    },
    addBtnFn(form) {
      this.$router.push({
        path: "announcementDetail",
        query: { action: "新增" },
      });
    },
    updateFn(row) {
      this.$router.push({
        path: "announcementDetail",
        query: { action: "修改", id: row.id },
      });
    },
    detailFn(row) {
      this.$router.push({
        path: "announcementDetail",
        query: { action: "详情", id: row.id },
      });
    },
    getButtonList(menuCode, userCode) {
      let codeData = {
        resourceCode: menuCode,
        userId: userCode,
      };
      authorityControl(codeData).then((res) => {
        let buttonNameList = [];
        res.data.forEach((item) => {
          this.buttonNameList.push(item.resourceName);
        });
      });
    },
    reset() {
      (this.searchForm = {
        title: null,
        jsdw: null,
        fbztfssj: null,
      }),
        this.getList();
    },
    sizeChange(v) {
      this.limit.size = v;
      this.getList();
    },
    pageChange(v) {
      this.limit.page = v;
      this.getList();
    },

    getList(type) {
      //   if (type != "start") {//非初始化调用：查询、分页
      //       sessionStorage.setItem('searchData', JSON.stringify(this.formPop))
      //       sessionStorage.setItem('pageData', JSON.stringify(this.limit))
      //   } else {//初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
      //       if(JSON.parse(sessionStorage.getItem('searchData'))){//详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
      //           this.formPop = JSON.parse(sessionStorage.getItem('searchData'))
      //           this.limit = JSON.parse(sessionStorage.getItem('pageData'))
      //       }else {//第一次进去此菜单时，保存上方默认的data
      //           sessionStorage.setItem('searchData', JSON.stringify(this.formPop))
      //           sessionStorage.setItem('pageData', JSON.stringify(this.limit))
      //       }
      //   }
      const data = {
        title: this.searchForm.title,
        jsdw: this.searchForm.jsdw,
        fbzt: this.searchForm.fbzt,
        orgCode: sessionStorage.getItem("orgCode"),
      };
      getListData(data, this.limit)
        .then((response) => {
          this.tableData = response.items;
          this.limit.total = response.total;
          console.log("request数据成功");
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    deleteFn(row) {
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteData(row.id)
          .then((response) => {
            if (response.code == 200) {
              this.getList();
              this.$message({
                showClose: true,
                message: "删除成功！",
                type: "success",
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      });
    },
    dateFormat(timedate) {
      if (timedate === null || timedate === undefined) {
        return "";
      } else {
        let date = new Date(timedate);
        let year = date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        let month =
          date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1;
        let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        let hours =
          date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        let minutes =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        let seconds =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        // 拼接
        return (
          year +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          minutes +
          ":" +
          seconds
        );
      }
    },
  },
};
</script>
<style>
.el-tooltip__popper {
  max-width: 600px;
}
</style>