<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input size="mini" v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"/>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button @click="addNotice" size="mini" class="filter-item" type="primary" icon="el-icon-plus">
        增加公告
      </el-button>
      <el-checkbox style="margin-left: 10px" size="small" @change="checkState" v-model="processStateBtn"
                   label="已禁用" border></el-checkbox>

    </div>
    <div class="table-con">
      <el-table
        :data="tableData"
        v-loading="listLoading"
        style="width: 100%;margin-bottom: 20px;"
        size="mini"
        row-key="id"
        border
      >
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column label="操作" align="left" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button @click="handleUpdate(row.id)" type="primary" size="mini">
              编辑查看
            </el-button>
            <el-button @click="releaseBtn(row.id)" type="warning" v-if="row.announcementState==0 && row.voidFlag==0" size="mini">
              发布
            </el-button>
            <el-button @click="deleteBtn(row.id)" type="info" v-if="row.announcementState==1 && row.voidFlag==0" size="mini">
              取消
            </el-button>
            <el-button @click="editStatus(row.id,'1')" type="danger" v-if="row.voidFlag==0" size="mini">
              禁用
            </el-button>
            <el-button type="success" @click="editStatus(row.id,'0')" v-else-if="row.voidFlag==1" size="mini">
              启用
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          width="120px"
          prop="announcementType"
          label="公告类型">
        </el-table-column>
        <el-table-column
          prop="announcementTitle"
          label="公告标题">
        </el-table-column>
        <el-table-column
          label="创建时间"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.createTime">{{ scope.row.createTime | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发布状态" class-name="status-col">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.announcementState==1" type="success">
              已发布
            </el-tag>
            <el-tag size="mini" v-else-if="row.announcementState==0" type="info">
              未发布
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态" class-name="status-col">
          <template slot-scope="{row}">
            <el-tag size="mini" v-if="row.voidFlag==0" type="success">
              启用中
            </el-tag>
            <el-tag size="mini" v-else-if="row.voidFlag==1" type="danger">
              禁用中
            </el-tag>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page"
                  :limit.sync="listData.pageSize" @pagination="getTableInfo"/>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="1300px">
      <el-form size="mini" :model="form">
                <el-form-item label="公告类型" :label-width="formLabelWidth">
                  <el-select
                    style="display: inline-block;width: 150px;"
                    size="mini"
                    v-model="form.announcementType"
                  >
                    <el-option
                      v-for="item in announcementTypeList"
                      :key="item.id"
                      :label="item.dictValue"
                      :value="item.dictValue"
                    ></el-option>
                  </el-select>
                </el-form-item>
        <el-form-item label="公告标题" :label-width="formLabelWidth">
          <el-input style="width: 300px" v-model="form.announcementTitle" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <tinymce ref="content" v-model="content" :height="600"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='1'?saveNotice():editBtn()">确 定</el-button>
      </div>
    </el-dialog>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
import {
  getAnnouncementList,
  addAnnouncement,
  getAnnouncementById,
  updateAnnouncement,
  releaseAnnouncement,
  cancelReleaseAnnouncement
} from '@/api/system/notice.js'
import {
  getDictTypeInfo,
} from '@/api/printbill/printbill.js'
import Tinymce from '@/components/Tinymce'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'

export default {
  name: "list",
  components: {
    Tinymce,
    Cancledialog
  },
  data() {
    return {
      processStateBtn: false,
      idNotice: "",
      dialogTitle: "",
      content: '',
      form: {
        announcementType: "",
        announcementTitle: "",
      },
      announcementTypeList:[],
      formLabelWidth: "120px",
      dialogFormVisible: false,
      listLoading: false,
      tableData: [],
      search: {
        keyWord: ''
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.getTableInfo();
    this.getAnnouncementType();
  },
  methods: {
    checkState(val) {
      // console.log(val);
      const _that = this;
      _that.listData.page = 1;
      _that.getTableInfo();
    },
    getAnnouncementType() {
      //获取公告类型
      const _that = this
      var data = {
        'dictTypeTextMulti': 'AnnouncementType'
      }

      // console.log(data)
      getDictTypeInfo(data).then(response => {
        // console.log("_that.printRequireOptions",response.data);
        const data = response.data;
        _that.announcementTypeList = data.AnnouncementType.result;

      }).catch(err => {
        _that.$message(err)
      })
    },
    releaseBtn(id) {
      //发布
      const _that = this;
      var data = {
        "id": id,
      }
      // console.log(_that.content);
      releaseAnnouncement(data).then(response => {
        // console.log("tableData",response)
        _that.$message.success("发布成功");
        _that.listData.page = 1;
        _that.getTableInfo()
      }).catch(err => {

      })
    },
    deleteBtn(id) {
      //发布
      const _that = this;
      var data = {
        "id": id,
      }
      // console.log(_that.content);
      cancelReleaseAnnouncement(data).then(response => {
        // console.log("tableData",response)
        _that.$message("取消成功");
        _that.listData.page = 1;
        _that.getTableInfo()
      }).catch(err => {

      })
    },
    // 启用禁用
    editStatus(id, status) {
      var _that = this
      var params = {
        id: id,
        voidFlag: status
      }

      var url = '/system/voidAnnouncement'
      _that.$refs.confirmDialog.updataClick(params, url)
    },
    editBtn() {
      const _that = this;
      var data = {
        "id": _that.idNotice,
        "idAnnouncementType": "",
        "announcementType": _that.form.announcementType,
        "announcementTitle": _that.form.announcementTitle,
        "announcementContent": _that.content,
      }
      // console.log(_that.content);
      updateAnnouncement(JSON.stringify(data)).then(response => {
        // console.log("tableData",response)
        _that.$message.success("修改成功");
        _that.dialogFormVisible = false;
        _that.listData.page = 1;
        _that.getTableInfo()
      }).catch(err => {

      })
    },
    saveNotice() {
      const _that = this;
      console.log(_that.form.announcementType);
      if (!_that.form.announcementType) {
        _that.$message("公告类型不能为空");
        return
      }
      if (!_that.form.announcementTitle) {
        _that.$message("公告标题不能为空");
        return
      }
      var data = {
        "idAnnouncementType": "",
        "announcementType": _that.form.announcementType,
        "announcementTitle": _that.form.announcementTitle,
        "announcementContent": _that.content,
      }
      // console.log(_that.content);
      addAnnouncement(JSON.stringify(data)).then(response => {
        // console.log("tableData",response)
        _that.$message.success("增加成功");
        _that.dialogFormVisible = false;
        _that.listData.page = 1;
        _that.getTableInfo()
      }).catch(err => {

      })
    },
    //获取表格数据
    getTableInfo() {
      const _that = this
      _that.listLoading = true
      var params = {
        keyWord: _that.search.keyWord,
        voidFlag: ""
      };
      if (_that.processStateBtn) {
        params.voidFlag = 1;
      } else {
        params.voidFlag = 0;
      }
      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
      })
    },
    //搜索
    searchData() {
      this.listData.page = 1;
      this.getTableInfo()
    },
    // 刷新变革
    tableRefresh() {
      this.listData.page = 1;
      this.getTableInfo()
    },
    addNotice() {
      const _that = this;
      _that.dialogTitle = '增加公司公告'
      _that.dialogStatus = '1';
      _that.dialogFormVisible = true;
      _that.form.announcementTitle = "";
      _that.form.announcementType = "";
      _that.content = "";
      _that.$refs.content.setContent("");
    },
    handleUpdate(id) {
      const _that = this;
      _that.idNotice = id,
        _that.dialogTitle = '编辑查看公司公告'
      _that.dialogStatus = '2';
      _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.$refs.content.setContent(data.announcementContent);
        _that.form.announcementTitle = data.announcementTitle;
        _that.form.announcementType = data.announcementType;
      }).catch(err => {

      })
    },
    //序号
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}

.filter-container {
  margin-bottom: 15px;
}
</style>
