<template>
  <div>
    <d2-container>
      <!-- <template slot="header">
        <div class="nav">当前所在位置:系统管理>公告管理</div>
      </template> -->
      <div class="main">
        <div class="zt_right">
          <div class="nav">当前所在位置:首页>公告管理</div>
          <div class="right_main">
            
            <div class="right_title">
              <i
                class="fa fa-university"
                aria-hidden="true"
                style="padding-right: 5px"
              ></i
              >公告管理
            </div>
            <div class="right_table">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline float-left"
                id="formLabel"
              >
                <!-- <el-form-item label="仓房名称:">
                <el-cascader :options="options"></el-cascader>
              </el-form-item> -->
                <el-form-item label="发布时间">
                  <el-date-picker
                    v-model="value2"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    value-format="yyyy-MM-dd hh:mm"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="getpageinfo"
                    >查询</el-button
                  >
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-refresh-left"
                    @click="reset"
                    >重置</el-button
                  >
                </el-form-item>
              </el-form>
              <div class="float-right">
                <el-button
                  type="primary"
                  icon="fa fa-volume-up"
                  @click="dialogFormVisible = true"
                  >发布公告</el-button
                >
              </div>

              <el-table
                :data="tableData"
                border
                style="width: 100%"
                :header-cell-style="{ background: '#0064b9', color: '#c9f5fa' }"
              >
                <el-table-column type="index" width="50"> </el-table-column>
                <el-table-column prop="title" label="公告标题" align="center">
                </el-table-column>
                <el-table-column prop="details" label="公告详情" align="center">
                </el-table-column>
                <el-table-column prop="status" label="发布状态" align="center">
                  <template slot-scope="scope">
                    <div v-if="scope.row.status == '0'">
                      <!-- 无 -->
                      <span> 草稿</span>
                    </div>
                    <div v-if="scope.row.status == '1'">
                      <!-- 有 -->
                      <span>已发布</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="publisher" label="发布人" align="center">
                </el-table-column>
                <el-table-column
                  prop="publlisherTime"
                  label="发布时间"
                  align="center"
                >
                </el-table-column>

                <el-table-column align="center" label="操作" width="180">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleCheck(1, scope.$index, scope.row)"
                      type="text"
                      size="small"
                      icon="el-icon-circle-check"
                      >查看</el-button
                    >
                    <el-button
                      type="text"
                      size="small"
                      icon="el-icon-edit"
                      @click="handleCheck(2, scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      type="text"
                      size="small"
                      icon="el-icon-delete"
                      @click="deleAnnouncement(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
              >
              </el-pagination>
              <!-- <pagination
        
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        /> -->
            </div>
          </div>
        </div>
      </div>

      <el-dialog
        title="发布公告"
        :visible.sync="dialogFormVisible"
        id="dialogStyle"
      >
        <el-form
          :model="diaform"
          :rules="rules"
          :disabled="false"
          ref="ruleForm"
        >
          <el-form-item
            label="公告标题"
            prop="title"
            :label-width="formLabelWidth"
          >
            <el-input v-model="diaform.title" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item
            label="公告详情"
            prop="details"
            :label-width="formLabelWidth"
          >
            <el-input
              type="textarea"
              v-model="diaform.details"
              rows="10"
              style="width: 500px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="发布人"
            prop="publisher"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="diaform.publisher"
              style="width: 500px"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="发布时间"
            prop="publlisherTime"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="diaform.publlisherTime"
              style="width: 500px"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('diaform')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addAnnouncement(0)">保存为草稿</el-button>
            <el-button type="primary" @click="addAnnouncement(1)">正式发布</el-button>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="type == 0">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addAnnouncement(0)"
            >保存为草稿</el-button
          >
          <el-button type="primary" @click="addAnnouncement(1)"
            >正式发布</el-button
          >
        </div>
        <div slot="footer" class="dialog-footer" v-if="type == 2">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="editAnnouncement">修改</el-button>
        </div>
      </el-dialog>
      <!-- 修改公告 -->
      <el-dialog
        title="发布公告"
        :visible.sync="dialogFormVisible1"
        id="dialogStyle"
      >
        <el-form :model="checkform" :rules="rules" ref="checkform">
          <el-form-item
            label="公告标题"
            prop="title"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="checkform.title"
              style="width: 500px"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="公告详情"
            prop="details"
            :label-width="formLabelWidth"
          >
            <el-input
              type="textarea"
              v-model="checkform.details"
              rows="10"
              style="width: 500px"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="发布人"
            prop="publisher"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="checkform.publisher"
              style="width: 500px"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="发布时间"
            prop="publlisherTime"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="checkform.publlisherTime"
              style="width: 500px"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item>
             <el-button type="primary" @click="submitForm('diaform')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addAnnouncement(0)">保存为草稿</el-button>
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="addAnnouncement(1)">修改</el-button> 
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <!-- <el-button type="primary" @click="dialogFormVisible = false">保存为草稿</el-button>
          <el-button type="primary" @click="issue">正式发布</el-button> -->
        </div>
      </el-dialog>
    </d2-container>
  </div>
</template>
<script>
// 引入分页
import Pagination from "@/components/pagination";
import { parseTime } from "@/utils/index";
import api from "@api";
export default {
  name: "announcementManagement",
  components: { Pagination },
  data() {
    return {
      //options
      options: [
        {
          value: "zhinan",
          label: "指南",

          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
          ],
        },
      ],

      //头部查询条件
      formInline: {
        // cfName: "",
        issueTime: "",
      },
      //表格字段
      cfInfoList: [],
      // 日期插件
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "", //日期
      type: "0", // 控制发布公告和编辑公告按钮  0// 发布公告  1 == 编辑公告
      //弹窗
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisible1: false, //编辑公告
      formLabelWidth: "120px",

      //分页
      total: 30,
      listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: "+id",
      },
      //弹窗表单
      diaform: {
        id: "",
        title: "", //公告标题
        details: "", //公告详情
        publisher: "", //发布人
        publlisherTime: "", //发布时间
        status: "",
      },
      checkform: {
        id: "",
        title: "", //公告标题
        details: "", //公告详情
        publisher: "", //发布人
        publlisherTime: "", //发布时间
        status: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入公告标题", trigger: "blur" },
          { min: 3, message: "长度在 3 字符以上", trigger: "blur" },
        ],
        details: [
          { required: true, message: "请填写公告详情", trigger: "blur" },
        ],
      },
      pagination: {
        // 每页显示的条数
        pageSize: 10,
        // 当前页
        curPage: 1,
        // 总数
        total: 20,
      },
    };
  },
  created: function () {
    this.diaform.publisher = "admin";
    this.diaform.publlisherTime = parseTime(new Date());

    // this.dateFormat(new Date('yyyy-MM-dd hh:mm'))
    this.getpageinfo();
  },
  mounted() {},
  methods: {
    search() {},
    reset() {},
    getList() {},
    //查看
    handleCheck(type, index, row) {
      // type 1 查看  2 编辑
      console.log(type, index, row, "111000");
      if (type == 1) {
        // 查看
        this.disabled = true;
        console.log(row, "type1Row");
        this.checkform = row;
        this.dialogFormVisible1 = true;
      } else if (type == 2) {
        // 编辑
        this.type = type;
        console.log(row, "type2Row");
        this.diaform = row;
        this.dialogFormVisible = true;
        /*  this.editAnnouncement(){
           api.editOrgAnnouncement(row).then(res => {
           console.log(res,'res111')
         }).catch(err =>{
           console.log(err,'err')
         })
         } */
      }
    },
    gettime() {
      console.log(this.value2, "value2");
      console.log(this.value2[0], "开始时间");
      console.log(this.value2[1], "结束时间");
    },
    //重置时间
    reset() {
      this.value2 = "";
    },
    // 保存为草稿
    // 正式发布
    issue() {
      console.log(this.diaform, "diaform");
      this.dialogFormVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取页面数据
    getpageinfo(data) {
      data = {
        pageIndex: this.pagination.curPage,
        pageSize: this.pagination.pageSize,
        createTimeStart: this.value2[0],
        createTimeEnd: this.value2[1],
      };
      // console.log(data,'data')
      api
        .getOrgAnnouncementPage(data)
        .then((res) => {
          console.log(res, "res 页面数据");
          console.log(res.data.records, "records");
          if (res.code == 200) {
            this.tableData = res.data.records;
            this.pagination.limit = res.data.size;
            this.pagination.total = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },

    // 新增公告
    addAnnouncement(type, data) {
      console.log(type, "type");
      if (type == 0) {
        this.diaform.status = 0;
      } else if (type == 1) {
        this.diaform.status = 1;
      }
      data = this.diaform; //把弹窗表单的数据给data
      api
        .addOrgAnnouncement(data)
        .then((res) => {
          // console.log(data, 'res')
          if (res.code == 200) {
            // console.log(res, 'res021')
            this.getpageinfo();
            this.dialogFormVisible = false;
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },

    // 编辑公告
    editAnnouncement(data) {
      data = this.diaform;
      // console.log(data, 'data000....')
      api
        .editOrgAnnouncement(data)
        .then((res) => {
          if (res.code == 200) {
            // console.log(res, 'res123')
            this.dialogFormVisible = false;
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },

    // 删除公告
    deleAnnouncement(index, row) {
      console.log(index, row, "12000");
      let id = row.id;
      // let params = {id :row.id}
      api
        .deleOrgAnnouncement(id)
        .then((res) => {
          console.log(res, "relets");
          if (res.code == 200) {
            console.log(123);
            this.getpageinfo();
          }
        })
        .catch((err) => {
          console.log(err, "err");
        });
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.curPage = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  display: flex;

  .zt_right {
    width: 100%;
    // margin-left: 20px;
    // width: calc(100% - 250px);
    .nav {
      padding: 10px 0 10px 10px;
      color: #fff;

      font-size: 14px;

      background: #004a93;
    }
      .right_main {
      border: 1px solid #67a7df;
      background: #112f5d;

      margin-top: 10px;
      .right_title {
        color: #fff;
        border-bottom: 1px solid #67a7df;
        padding: 10px;
        font-size: 14px;
      }
      .right_table {
        padding: 20px;
      }
    }
  }
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
</style>