<template>
  <div>
    <p class=" text-2xl font-bold mb-5">聊天管理</p>
     <!-- timepicker -->
      <span class=" font-semibold">发布时间：</span>
      <timerange class=" mr-3"
                 @getNewTime="getNewTime"/>
      <!-- 操作 -->
      <a-button type="primary" style=" margin-right:10px;" @click="query">查询</a-button>
      <a-button type="primary" style=" margin-right:10px;" @click="reset">重置</a-button>
      <a-button type="primary" @click="show=true">发布</a-button>
      <!-- 发布弹窗 -->
      <a-modal v-model="show" title="发布消息" :centered="true" footer="">
        <a-form-model :model="form" ref="ruleForm">
          <a-form-model-item>
            <a-tabs default-active-key="1">
              <a-tab-pane key="1" tab="自动回复" >
                <a-input v-for="index of autoSize" :placeholder="'自动回复'+index+'（50字以内）'" :key="index"/>
              </a-tab-pane>
              <a-tab-pane key="2" tab="常用问题">
                <a-input v-for="index of commonSize" :placeholder="'常用问题'+index+'（20字以内）'" :key="index"/>
              </a-tab-pane>
            </a-tabs>
          </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-table :columns="columns" :data-source="list" style=" text-align: center; margin-top:40px;" bordered >
        <!-- 新闻内容 -->
        <span slot="content" slot-scope="text,record">
          <a @click="toDetail(record.key)">查看</a>
        </span>
        <!-- 操作 -->
        <span slot="action" slot-scope="text,record">
          <span  v-if="record.state=='已下架'">
            <a @click="add(record.key)"> 上架</a>
            <a-divider type="vertical" />
            <a @click="onDelete(record.key)">删除</a>
          </span>
          <span v-else>
            <a @click="remove(record.key)">下架</a>
          </span>
          <span v-if="record.state=='已发布' && record.type=='自动回复'">
            <a-divider type="vertical" />
            <a @click="setDefault(record.key)">设为默认</a>
          </span>
        </span>
    </a-table>
    <!-- 操作Modal -->
    <a-modal
      :title="title"
      v-model="visible"
      :centered="true"
      :closable="false"
      @ok="handleOk"
      @cancle="visible = false"
    >
      <p class=" text-center">{{text}}</p>
    </a-modal>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { chatList } from '@/mock/index'
import { columns } from '@/const/columns/chatColumns'
import { FormModel } from 'ant-design-vue'
import { modal } from './const'
import timerange from '@/components/TimePicker/index.vue'
import { Tabs } from 'ant-design-vue'
Vue.use(Tabs)

export default Vue.extend({
  components:{ timerange },
  computed:{
    columns(){
      return columns
    },
    autoSize(){
      let count:number = 0
      const max:number = 11
      chatList.forEach(m=>{
        if(m.type == '自动回复') count++
      })
      return max-count
    },
    commonSize(){
      let count:number = 0
      let max:number = 10
      chatList.forEach(m=>{
        if(m.type == '常用语') count++
      })
      return max-count
    },
    list(){
      return chatList
    },
  },
  data(){
    return{
      searchPageReqParams: {
        startTime: undefined as undefined | number,
        endTime: undefined as undefined | number,
      },
      show:false,
      form:{

      },
      visible:false,
      title:'',
      type:modal.on,
      text:'',
    }
  },
  methods:{
    query(){
      console.log(this.searchPageReqParams);
    },
    getNewTime(startTime:number,endTime:number){
      this.searchPageReqParams.startTime = startTime
      this.searchPageReqParams.endTime = endTime
    },
    reset(){
      this.searchPageReqParams.startTime = undefined
      this.searchPageReqParams.endTime = undefined   
    },
    onSubmit() {
      (this.$refs.ruleForm as FormModel).validate(valid => {
        if (valid) {
          this.show = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      // let form = this.form
      // type formtype = keyof typeof form
      // Object.keys(this.form).forEach(m=>{
      //   this.form[m as formtype] = '' 
      // })
    },
    add(record:any){
      this.type = modal.on
      this.visible = true
      this.title = '上架内容'
      this.text = '确定上架该内容吗？'
    },
    remove(record:any){
      this.type = modal.off
      this.visible = true
      this.title = '下架内容'
      this.text = '确定下架该内容吗？'
    },
    setDefault(record:any){
      this.type = modal.setDefault
      this.visible = true
      this.title = '设为自动回复'
      this.text = '确定将该内容设为自动回复吗？'
    },
    onDelete(record:any){
      this.type = modal.delete
      this.visible = true
      this.title = '删除内容'
      this.text = '确定删除该内容吗？'
    },
    handleOk(record:any){
      if( this.type == modal.on){

      } else if( this.type == modal.off){
        
      } else if( this.type == modal.delete){
        
      } else if( this.type == modal.setDefault){
        
      }

      this.visible = false
    },
  },
  // created(){
  //    chatList.forEach(m=>{
  //       if(m.type == '自动回复')
  //         autoLength
  //     })
  // }
})
</script>
