<template>
  <div class="dashboard-editor-container">


<!--    <panel-group :panelData="panelData" @handleSetLineChartData="handleSetLineChartData" />-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>公司公告</span>
      </div>
      <div class="text item">
        <div>
          <div class="item-tit">
            <div style="float: left;text-align: left" class="tit-text">公告标题</div>
            <div style="float: right;text-align: right" class="tit-text">发布时间</div>
            <div style="clear: both"></div>
          </div>
          <div style="margin-top: 10px;margin-bottom: 15px" v-for="(item, index) in tableData" :key="index">
            <div @click="handleUpdate(item.id)" style="float: left;text-align: left;width: 380px;cursor: pointer;
    color: rgb(64, 158, 255);" class="li-item">【{{item.announcementType}}】&nbsp;&nbsp;{{item.announcementTitle}}</div>
            <div style="float: right;text-align: right;width: 150px" class="li-item">{{ item.releaseDate | getTime }}</div>
            <div style="clear: both"></div>
          </div>
        </div>
        <pagination v-show="listData.total>15" :total="listData.total" :page.sync="listData.page"
                    :limit.sync="listData.pageSize" @pagination="getTableInfo"/>
      </div>
    </el-card>
    <el-dialog title="公告内容" :visible.sync="dialogFormVisible" width="1300px">
      <div style="margin-bottom: 15px">{{form.releaseMan}}&nbsp;&nbsp;{{form.releaseDate | getTime }}</div>
      <el-form size="mini" :model="form">
        <!--        <el-form-item label="公告类型" :label-width="formLabelWidth">-->
        <!--          <el-input style="width: 300px" v-model="form.announcementType" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
<!--        <el-form-item label="公告标题" :label-width="formLabelWidth">-->
<!--          <span style="width: 300px">{{form.announcementTitle}}</span>-->
<!--        </el-form-item>-->
      </el-form>
      <div>
        <div class="content-div" style="border: 1px solid #ddd;padding: 20px;" ref="content" v-html="content"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import {getIndexCardPanelData} from '@/api/system/user.js'
import {getAnnouncementById, getAnnouncementList} from "@/api/system/notice";


export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup
  },
  data() {
    return {
      tableData:[],
      dialogFormVisible:false,
      listLoading:false,
      content: '',
      form: {
        announcementType: "",
        announcementTitle: "",
        releaseMan: "",
        releaseDate: "",
      },
      formLabelWidth: "120px",
      panelData:{},
      listData: {
        total: 0,
        page: 1,
        pageSize: 15
      }
    }
  },
  mounted() {
    const _that = this;
    _that.getInfo();
    _that.getTableInfo();
  },
  methods: {
    handleUpdate(id) {
      const _that = this;
      _that.dialogFormVisible = true;
      var data = {
        "id": id,
      }
      // console.log(_that.content);
      getAnnouncementById(data).then(response => {
        // console.log("tableData",response)
        var data = response.data;
        // console.log(data.announcementContent);
        _that.content = data.announcementContent;
        _that.form.announcementTitle = data.announcementTitle;
        _that.form.announcementType = data.announcementType;
        _that.form.releaseMan = data.releaseMan;
        _that.form.releaseDate = data.releaseDate;
      }).catch(err => {

      })
    },
    getInfo(){
      const _that = this;
      var data = {}
      getIndexCardPanelData(data).then(response => {

        var data = {
          waitBreedOrderCount:response.data.waitBreedOrderCount,
          waitSendOrderCount:response.data.waitSendOrderCount,
          workingOrderCount:response.data.workingOrderCount,
          scheduleBreedCount:response.data.scheduleBreedCount
        }
        _that.panelData = data;
        // console.log("111",_that.panelData);
      }).catch(err => {
        // _that.$message.error(err)
      })
    },
    //获取表格数据
    getTableInfo() {
      const _that = this
      _that.listLoading = true
      var params = {
        "voidFlag":0,
        "announcementState":1
      };
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      var data = {
        "params": JSON.stringify(params),
        "page": JSON.stringify(page),
      }
      // console.log(data);
      getAnnouncementList(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.listLoading = false
      })
    },
    //序号
    indexMethod(index) {
      return index + 1;
    },
    handleSetLineChartData(type) {
      // this.lineChartData = lineChartData[type]
    }
  }
}
</script>

<style lang="scss" scoped>
.li-item{
  font-size: 14px;
  line-height: 20px;
  color: #606266;
}
.tit-text{
  color: #909399;
  font-weight: 500;
  font-size: 15px;
}
.tit-text{
  width: 150px;
}
.wscnph{
  display: block;
  width: 100%;
}
.content-div p> img{
  display: block;
  width: 100%;
}
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  min-height: 800px;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
ul {
  list-style:none;
}
</style>
