<template>
  <div>
    <p class=" text-2xl font-bold mb-5">消息管理</p>
    <!-- 消息分类 -->
    <span class=" mr-3">消息分类</span>
    <a-select :default-value="1" style="width: 120px; margin-right:10px;" v-model="types">
      <a-select-option v-for="type in msgType" :key="type.value">{{ type.label }}</a-select-option>
    </a-select>
    <!-- 操作 -->
    <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
    <a-button type="primary" style=" margin-right:10px;" @click="publish">发布</a-button>
    <!-- 发布弹窗 -->
    <a-modal v-model="show" title="发布消息" :centered="true" footer="">
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" ref="ruleForm" :rules="rules">
        <!-- <a-form-model-item label="模板名称" :required="true" prop="module">
          <a-input v-model="form.module" placeholder="请输入模板名称" style="width: 200px"/>
        </a-form-model-item> -->
        <a-form-model-item label="消息分类" :required="true" prop="type">
          <a-select style="width: 200px" v-model="form.type" placeholder="请选择分类" > 
            <a-select-option v-for="type in msgType" :key="type.value">{{type.label}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="消息标题" :required="true" prop="title" >
          <a-input v-model="form.title" placeholder="请输入消息标题" style="width: 200px"/>
        </a-form-model-item>
        <a-form-model-item label="消息内容" :required="true" type="textarea" prop="content" >
          <a-textarea v-model="form.content" placeholder="请输入消息内容" style="width: 300px" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">发布</a-button>
          <a-button style="margin-left: 10px;" @click="resetForm">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <!-- 内容弹窗 -->
    <a-modal v-model="visible" title="查看内容" @ok="handleOk" footer="" :centered="true">
      <p class=" text-center text-lg">{{current.title}}</p>
      <p class=" text-base">{{current.content}}</p>
    </a-modal>
    <!-- 消息列表 -->
    <a-table
      :columns="columns"
      :data-source="list"
      style=" text-align: center; margin-top:40px;"
      bordered
      :pagination="pagination"
      @change="tableChange">
        <!-- 发布时间 -->
        <span slot="time" slot-scope="text,record">
          {{ record.created_at | format }}
        </span>
        <!-- 新闻内容 -->
        <span slot="content" slot-scope="text,record">
          <a href="javascript:;" @click="showModal(record)">查看</a>
        </span>
        <!-- 显示类型 -->
        <span slot="type" slot-scope="text,record">
          {{ record.notify_type === 1 ? '滚动通知' : '系统消息' }}
        </span>
        <!-- 状态 -->
        <span slot="status" slot-scope="text,record">
          {{ record.notify_status === 1 ? '待发布' : '已发布' }}
        </span>
        <!-- 操作 -->
        <span slot="action" slot-scope="text,record">
          <a  v-if="record.notify_status==1" 
              @click="add(record)">
              上架
          </a>
          <a  v-else
              @click="remove(record)">
              下架
          </a>
          <a-divider v-show="record.notify_status === 1" type="vertical" />
          <a  v-show="record.notify_status === 1" 
              @click="onEdit(record)">
              编辑
          </a>
          <a-divider v-show="record.notify_status === 1" type="vertical" />
          <a v-if="record.notify_status==1" @click="onDelete(record)">
              删除
          </a>
        </span>
      </a-table>
      <!-- 操作Modal -->
      <a-modal
        :title="title"
        v-model="showActionModal"
        :centered="true"
        :closable="false"
        @ok="onOk"
        @cancle="show = false"
      >
        <p class=" text-center">{{text}}</p>
      </a-modal>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { columns } from '@/const/columns/msgColumns'
import { FormModel, message } from 'ant-design-vue'
import { msg } from '@/types/msg'
import { modal } from './const'
import timerange from '@/components/TimePicker/index.vue'
import Notify from '@/service/Notify/index'
import Filter from '@/filter/index'

const notify = new Notify()

export default Vue.extend({
  components:{ timerange },
  filters: {
    format(value: string) {
      return Filter.formatDate(value)
    }
  },
  computed:{
    columns(){
      return columns
    }
  },
  props:{
    msgType:{
      type:Array,
      default(){
        return [
          {
            label: '滚动通知',
            value: 1
          },
          {
            label: '系统消息',
            value: 2
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList() {
      console.log(this.form.type)
      notify.notifyList({
        limit: this.pagination.defaultPageSize,
        offset: (this.pagination.current - 1) * this.pagination.defaultPageSize,
        notify_status: 0,
        notify_type: this.types
      }).then(res => {
        this.list = res.data.items
        this.pagination.total = res.data.total
      })
    },
    tableChange(e: {current: number}) {
      this.pagination.current = e.current
      this.getList()
    },
    add(record:any){
      this.type = modal.on
      this.showActionModal = true
      this.uuid = record.uuid
      this.title = '上架消息'
      this.text = '确定上架该消息吗？'
    },
    remove(record:any){
      this.type = modal.off
      this.showActionModal = true
      this.uuid = record.uuid
      this.title = '下架消息'
      this.text = '确定下架该消息吗？'
    },
    onEdit(record: any) {
      this.btnType = 'edit'
      this.uuid = record.uuid
      this.show = true
      this.$nextTick(() => {
        (this.$refs.ruleForm as any).resetFields()
        this.form = {
          title: record.title,
          content: record.content,
          type: record.notify_type
        }
      })
    },
    onDelete(record:any){
      this.type = modal.delete
      this.showActionModal = true
      this.uuid = record.uuid
      this.title = '删除消息'
      this.text = '确定删除该消息吗？'
    },
    setStatus(status: number, msg: string) {
      notify.modifyNotifyStatus({
        notify_status: status,
        uuid: this.uuid
      }).then(res => {
        if (res.code === 200) {
          message.success(msg)
          this.getList()
        }
      })
    },
    removeNotify() {
      notify.removeNotify(this.uuid).then(res => {
        if (res.code === 200) {
          message.success('删除成功')
          this.getList()
        }
      })
    },
    onOk(record:any){
      if( this.type == modal.on){
        this.setStatus(2, '发布成功')
      } else if( this.type == modal.off){
        this.setStatus(1, '下架成功')
      } else if( this.type == modal.delete){
        this.removeNotify()
        this.pagination.current = 1
      }

      this.showActionModal = false
    },
    query(){
      this.pagination.current = 1
      this.getList()
    },
    publish(){
      this.show = true
      this.btnType = 'add'
      this.$nextTick(() => {
        (this.$refs.ruleForm as any).resetFields()
        this.resetForm()
      })
    },
    showModal(current:object){
      this.visible = true
      this.current = current   
    },
    handleOk(){
      this.visible = false
    },
    addNotice() {
      notify.addNotify({
        content: this.form.content,
        notify_type: this.form.type,
        title: this.form.title
      }).then(res => {
        if (res.code === 200) {
          message.success('新增成功')
          this.show = false
          this.getList()
        }
      })
    },
    editNotice() {
      notify.modifyNotify({
        content: this.form.content,
        notify_type: this.form.type,
        title: this.form.title,
        uuid: this.uuid
      }).then(res => {
        if (res.code === 200) {
          message.success('编辑成功')
          this.show = false
          this.getList()
        }
      })
    },
    onSubmit() {
      (this.$refs.ruleForm as FormModel).validate(valid => {
        if (valid) {
          if (this.btnType === 'add') {
            this.addNotice()
          } else {
            this.editNotice()
          }
        } else {
          message.error('请先填写表单内容')
          return false;
        }
      });
    },
    resetForm() {
      let form = this.form
      form.title='',
      form.content=''
      type formtype = keyof typeof form
      Object.keys(this.form).forEach(m=>{
        // this.form[m as formtype] = '' 
      })
      this.form['type'] = 1
    },
  },
  data(){
    const rules={
      // module: [
      //   { required: true, message: '请输入模板名称', trigger: 'blur' },
      // ],
      type: [
        { required: true, message: '请选择消息分类', trigger: 'blur' },
      ],
      title: [
        { required: true, message: '请输入消息标题', trigger: 'blur' },
      ],
      content: [
        { required: true, message: '请输入消息内容', trigger: 'blur' },
      ],
    }
    return{
      visible:false,
      show:false,
      showActionModal:false,
      title:'',
      type:modal.on,
      text:'',
      current:{},
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        title:'',
        type: 1,
        content:'',
      },
      rules,
      uuid: "",
      types: 1,
      list: [],
      pagination: {
        current: 1,
        defaultPageSize: 10,
        total: 0
      },
      btnType: 'add'
    }
  }
})
</script>