<template>
  <div>
    <d2-container>
      <template slot="header">
        <div class="nav">当前所在位置:系统管理>公告管理</div>
      </template>
      <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="gettime">查询</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="cfInfoList" 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="state" label="发布状态" align="center">
              </el-table-column>
              <el-table-column prop="publisher" label="发布人" align="center">
              </el-table-column>
              <el-table-column prop="time" label="发布时间" align="center">
              </el-table-column>

              <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button @click="handleCheck(scope.row)" type="text" size="small" icon="el-icon-circle-check">查看</el-button>
                  <el-button type="text" size="small" icon="el-icon-edit">编辑</el-button>
                  <el-button type="text" size="small" icon="el-icon-delete">删除</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>

      <el-dialog title="发布公告" :visible.sync="dialogFormVisible">
        <el-form :model="diaform" :rules="rules" 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="time" :label-width="formLabelWidth">
            <el-input v-model="diaform.time" 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="dialogFormVisible = false">保存为草稿</el-button>
            <el-button type="primary" @click="issue">正式发布</el-button>
          </el-form-item>
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = 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: [
        {
          title: '关于数量监测系统正式使用通知', //公告标题
          details: '关于数量监测系统正式使用通知...',//公告详情
          state: '已发布',
          publisher: '孟莹',//发布人 
          time: '2021-10-20 17:43:11'//发布时间
        },
        {
          title: '关于数量监测系统正式使用通知', //公告标题
          details: '关于数量监测系统正式使用通知...',//公告详情
          state: '已发布',
          publisher: '孟莹',//发布人 
          time: '2021-10-20 17:43:11'//发布时间
        },
        {
          title: '关于数量监测系统正式使用通知', //公告标题
          details: '关于数量监测系统正式使用通知...',//公告详情
          state: '已发布',
          publisher: '孟莹',//发布人 
          time: '2021-10-20 17:43:11'//发布时间
        },
        {
          title: '关于数量监测系统正式使用通知', //公告标题
          details: '关于数量监测系统正式使用通知...',//公告详情
          state: '已发布',
          publisher: '孟莹',//发布人 
          time: '2021-10-20 17:43:11'//发布时间
        },
        {
          title: '关于数量监测系统正式使用通知', //公告标题
          details: '关于数量监测系统正式使用通知...',//公告详情
          state: '已发布',
          publisher: '孟莹',//发布人 
          time: '2021-10-20 17:43:11'//发布时间
        },
        {
          title: '关于数量监测系统正式使用通知', //公告标题
          details: '关于数量监测系统正式使用通知...',//公告详情
          state: '已发布',
          publisher: '孟莹',//发布人 
          time: '2021-10-20 17:43:11'//发布时间
        }

      ],
      // 日期插件

      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: '', //日期
      //弹窗
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',

      //分页
      total: 30,
      listQuery: {
        page: 1,
        limit: 10,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },
      //弹窗表单
      diaform: {
        title: '', //公告标题
        details: '',//公告详情
        publisher: '',//发布人
        time: ''//发布时间
      },
      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 = '孟莹'
    this.diaform.time = parseTime(new Date())
    // this.dateFormat(new Date('yyyy-MM-dd hh:mm'))
    this.getpageinfo()
  },
  mounted () { },
  methods: {
    search () { },
    reset () { },
    getList () { },
    //查看
    handleCheck () {
      this.$router.push(
        {
          path: "/warehouseInfo-check"
        }
      )
    },
    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": 1,
        "pageSize": 10,
        "createTimeStart": "2021-10-01",
        "createTimeEnd": "2021-12-01"
      }

      api.getOrgAnnouncementPage(data).then(res => {
        console.log(res, 'res')
      }).catch(err => {
        console.log(err, 'err')
      })
    }

  },

};
</script>
<style lang="scss" scoped>
.nav {
  color: #fff;
  font-size: 14px;

  background: #004a93;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
</style>