<template>
  <div class="right_con">
    <div v-if="newsType==='list'">
      <Tabs type="card" class="mar_T_15" v-model="newsType">
        <TabPane label="公告通知" name="list">
          <div class="search">
            <Input placeholder="标题" class="wid_120" v-model="search.title" @on-enter="getNewsInfo()"></Input>
            <!-- <Select placeholder="显示状态" class="wid_120" v-model="search.status">
            	<Option value="1">显示</Option>
            	<Option value="0">不显示</Option>
            </Select> -->
            <Select placeholder="分类" :transfer='true' class="wid_120" v-model="search.category">
            	<Option value="">全部</Option>
            	<Option value="gonggao">公告通知</Option>
            	<Option value="biaoyang">内部表扬</Option>
            	<Option value="falv">法律法规</Option>
            </Select>
            <DatePicker type="date" :transfer='true' :options="start_time_op" :value='search.start_time' placeholder="更新开始时间" class="wid_120" @on-change="bgdatechange" ></DatePicker> -
            <DatePicker type="date" :transfer='true' :options="end_time_op" :value='search.end_time' placeholder="更新结束时间" class="wid_120" @on-change="eddatechange" ></DatePicker>
            <Button type="primary" @click="getNewsInfo()">搜索</Button>
            <Button class="clear_btn" @click="removeSearch">清空</Button>
          </div>
          <Table :columns="newList" :data="newData" border class="clear"></Table>
          <div class="page">
            <Page :total="count" :current="pindex" :page-size="10" size="small" show-total show-elevator @on-change="getNewsInfo"/>
          </div>
        </TabPane>
        <TabPane label="添加公告" name='add'></TabPane>
      </Tabs>
    </div>
    <div v-else>
      <editNewNotice :newsType='newsType' :newsid='newsid' :pindex='pindex' @return_false='return_false'></editNewNotice>
    </div>
  </div>
</template>
<script>
import editNewNotice from '@@/set/edit_newNotice'
import {getNewtoday,removeSearch,changetime} from '@/assets/js/common'
export default {
  name: "new_notice",
  components:{editNewNotice},
  data() {
    return {
      count:0,
      pindex:1,
      checkList:{},
      start_time_op:{},
      end_time_op:{},
      checkLength:'',
      newsid:null,
      is_sort:false,
      curIndex:null,
      changeval:'',
      newsType:'list',
      search:{
        start_time:'',
        end_time:'',
        title:'',
        status:''
      },
      is_add:true,
      newList: [
        {
          title: "编号",
          width:60,
          key: "id"
        },
        {
          title: "标题",
          width:240,
          key: "title"
        },
        {
          title: "分类",
          render:(h,params)=>{
            if(params.row.category=='gonggao'){
              return h('span','公告通知')
            }
            if(params.row.category=='biaoyang'){
              return h('span','内部表扬')
            }
            if(params.row.category=='falv'){
              return h('span','法律法规')
            }
          }
        },
        {
          title: "状态",
          render: (h, params) => {
            if (params.row.status === 0) {
              return h("span",
                { 
                  style: { 
                    color: "rgba(255, 121, 0, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      this.enableNewNotice(params.row.id,params.index)
                    }
                  }
                },"已关闭");
            } else {
              return h("span",
                { 
                  style: { 
                    color: "rgba(0, 156, 255, 1)",
                    cursor:'pointer'
                  },
                  on:{
                    click:()=>{
                      this.disableNewNotice(params.row.id,params.index)
                    }
                  }
                },"正常");
            }
          }
        },
        {
          title: "优先级",
          render:(h,params)=>{
            if(this.is_sort&&params.index === this.curIndex){
              return h("Input", {
                props: {
                  type: "text",
                  value: this.changeval,
                  autofocus:"autofocus"
                },
                style:{width:'50px',margin:'0px 5px'},
                class:'is_show_input',
                on: {
                  input: value => {
                    this.changeval = value;
                  },
                  'on-blur':()=>{
                    this.saveNewsSort(params)
                  },
                  'on-keyup':()=>{
                    this.clearNoNum()
                  },
                }
              });
            }else{
              return h('span',{
                class:'a_text',
                on:{
                  click:()=>{
                    this.is_sort=true
                    this.curIndex = params.index;
                    this.changeval = params.row.sort;
                    setTimeout(() => {
                      document.getElementsByClassName('is_show_input')[0].getElementsByTagName('input')[0].focus()
                    }, 10);
                  }
                }
              },params.row.sort)
            }
          }
        },
        {
          title: "通知角色",
          width:260,
          render:(h,params)=>{
            let ids=!!params.row.role_ids?params.row.role_ids.split(','):''
            let arr=''
            if(ids[0]==0){
              return h('span','全部')
            }else{
              for(let i in ids){
                if(ids.length&&i==Number(ids.length)-1){
                  arr+=this.checkList[ids[i]]
                }else{
                  arr+=this.checkList[ids[i]]+'、'
                }
              }
              return h('span',arr)
            }
          }
        },
        // {
        //   title: "短信通知",
        //   render:(h,params)=>{
        //     if(params.row.is_push===1){
        //       return h('span','开启')
        //     }else{
        //       return h('span','关闭')
        //     }
        //   }
        // },
        {
          title: "添加时间",
          width:180,
          key: "create_time"
        },
        {
          title: "最后更新时间",
          width:180,
          key: "update_time"
        },
        {
          title: "操作",
          render: (h,params) => {
            const edit_btn = h("span",
              {
                class: "operate-btn",
                style: {
                  color: "rgba(0, 156, 255, 1)"
                },
                on: {
                  click: () => {
                    this.newsType='edit'
                    this.newsid=params.row.id
                  }
                }
              },"编辑");
            const delete_btn = h("span",
              {
                class: "operate-btn",
                style: {
                  color: "rgba(255, 121, 0, 1)"
                },
                on: {
                  click: () => {
                    this.deleteNewsInfo(params.row.id,params.index)
                  }
                }
              },"删除");
            return [edit_btn, delete_btn];
          }
        }
      ],
      newData: [],
      newInfo: {},
    };
  },
   watch: {
    'search.start_time'(n){
      if(n){
        let yest=getNewtoday(n)
        this.end_time_op={
          disabledDate: date => {
            return date && date.valueOf() <  new Date(yest) ;
          }
        }
      }else{
        this.end_time_op={}
      }
    },
    'search.end_time'(n){
      if(n){
         this.start_time_op={
          disabledDate: date => {
            return date && date.valueOf() >  new Date(n);
          }
        }
      }else{
        this.start_time_op={}
      }
    },
  },
  methods: {
    // input验证
    clearNoNum(){
      this.changeval=this.changeval.replace(/[^\d.]/g,"");
      this.changeval=this.changeval.replace(/^\./g,"");
      this.changeval=this.changeval.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
      this.changeval=this.changeval.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
    },
    removeSearch(){
      this.search={...removeSearch({...this.search})}
    },
    saveNewsSort(params){
      if(this.changeval.toString()===params.row.sort.toString()){
        this.is_sort=false
      }else{
        this.$api.editNewssort({id:params.row.id,sort:this.changeval}).then(data => {
          if(data.code==200){
            this.$Message.info(data.msg)
            this.newData[params.index].sort=parseInt(this.changeval)
            this.is_sort=false
          }else{
            this.$Message.info(data.msg)
          }
        })
      }
    },
    getNewsInfo(page=1){
      this.$store.commit('changeloading',true)
      this.pindex=page
      this.search.start_time=this.search.start_time?changetime(this.search.start_time):''
      this.search.end_time=this.search.end_time?changetime(this.search.end_time):''
      this.$api.getNewsInfo({limit:10,page:this.pindex,...this.search}).then(data=>{
        if(data.code==200){
          this.newData=data.data
          this.count=data.count
          this.$store.commit('changeloading',false)
        }else{
          this.$Message.info(data.msg)
          this.$store.commit('changeloading',false)
        }
      })
    },
    return_false(pindex){
      this.newsType='list'
      this.getNewsInfo(pindex)
    },
    disableNewNotice(id,i){
      this.$api.disableNewsInfo({id}).then(data =>{
        if(data.code==200){
          this.newData[i].status=0
          this.$Message.info(data.msg)
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    enableNewNotice(id,i){
      this.$api.enableNewsInfo({id}).then(data =>{
        if(data.code==200){
          this.newData[i].status=1
          this.$Message.info(data.msg)
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    getCheckRoleList(){
      this.$api.getRoleList({limit:200,page:1}).then(data =>{
        if(data.code==200){
          let arr={}
          data.data.forEach((item,index) => {
            arr[item.id]=item.name
            this.checkList=arr
          });
          this.checkLength=data.data.length
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    deleteNewsInfo(id,i){
      this.$Modal.confirm({
        title: "提示信息",
        class: "vertical-center-modal",
        render: h => {
          return h("div",
            { class: "delete_info" },
            [ h("p",
                {
                  style: {
                    width: "100%",
                    padding: "30px 0px",
                    textAlign: "center",
                    backgourndColor: "rgba(52, 64, 78, 1)",
                    fontSize: "16px",
                    color: "rgba(51, 51, 51, 1)",
                    fontWeight: "400"
                  }
                },"确认执行删除操作么？")
            ],
          );
        },
        onOk:()=>{
          this.$api.deleteNewsInfo({id:id}).then(data=>{
            if(data.code===200){
              this.count--
              this.$Message.info('删除成功')
              this.newData.splice(i,1)
            }else{
              this.$Message.info('删除失败')
            }
          })
        }
      });
    },
    // 时间选择--开始时间
    bgdatechange(date){
      this.search.start_time=date
    },
    // 时间选择--结束时间
    eddatechange(date){
      this.search.end_time=date
    },
  },
  created() {
    this.getNewsInfo()
  },
  mounted(){
    this.getCheckRoleList()
  },
};
</script>
<style>
</style>



