<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="关键词">
          <el-input v-model="pagerDto._Co_Title" />
        </el-form-item>
        <el-button type="primary" @click="pagerSerach()">
          搜索
        </el-button>
      </el-form>
    </template>
    <template slot="n_option">
      <el-button type="primary" @click="add">
        添加
      </el-button>
    </template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column label="标题" prop="Title">
          <template slot-scope="r">
            <el-button type="text" @click="info(r.row)">{{ r.row.Title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="CreateTime" />
        <el-table-column label="创建人" prop="CreateUserName" />
        <el-table-column label="更新时间" prop="UpdateTime" />
        <el-table-column label="更新人" prop="UpdateUserName" />
        <el-table-column label="操作">
          <template slot-scope="r">
            <el-button @click="eidt(r.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40,100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />

    </template>
    <el-dialog
      :visible.sync="dialogShow"
      :title="row.Title"
    >
      <div v-html=" row.Content" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogAdd"
      title="添加"
    >
      <el-form>
        <el-form-item label="标题">
          <el-input v-model="row.Title" />
        </el-form-item>
        <el-form-item label="内容">
          <vue-editor v-model="row.Content" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd = false">关 闭</el-button>
        <el-button type="primary" @click="postAdd()">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogEdit"
      title="添加"
    >
      <el-form>
        <el-form-item label="标题">
          <el-input v-model="row.Title" />
        </el-form-item>
        <el-form-item label="内容">
          <vue-editor v-model="row.Content" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">关 闭</el-button>
        <el-button type="primary" @click="postEdit()">保 存</el-button>
      </span>
    </el-dialog>
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import { _getPageResult, _edit, _add } from '@/api/order/notice'
import { VueEditor } from 'vue2-editor'
export default {
  name: 'NoticeList',
  components: { 'base-list': BaseList, VueEditor: VueEditor },
  data() {
    return {
      row: {},
      dialogAdd: false,
      dialogShow: false,
      dialogEdit: false,
      data: [], dataLoading: false,
      pagerDto: { PageIndex: 0, PageSize: 10, total: 0 }
    }
  },
  mounted() {
    this.pagerSerach(1)
  },
  methods: {
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      _getPageResult(this.pagerDto).then(res => {
        this.data = res.Result
        this.pagerDto.total = res.TotalCount
      }).finally(res => { this.dataLoading = false })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    },
    add() {
      this.dialogAdd = true
      this.row = {}
    },
    eidt(row) {
      this.dialogEdit = true
      this.row = row
    },
    postAdd() {
      _add(this.row).then(r => {
        this.pagerSerach()
        this.dialogAdd = false
      })
    },
    postEdit() {
      _edit(this.row).then(r => {
        this.pagerSerach()
        this.dialogEdit = false
      })
    },
    info(row) {
      this.dialogShow = true
      this.row = row
    }
  }
}
</script>
