<template>
  <div>
    <basicLayout
      ref="list"
      :oldFormPath="{add:'HManagement/notice/list/modules'}"
      tableName="noticeTable"
      idName="sat_noticeid"
      :apiId="{query:20221101094903,del:20221101095103}"
      :options="options"
      @listData="list"
      >
    >
    <div slot="titleRight">
      <el-button style="margin-left:10px" type="primary" size="small" @click="$store.dispatch('DrawerShowChange',true),$router.push('/noticeclass')">设置板块</el-button>
    </div>
    <div slot="custom" style="display:flex">
      <div class="label_center">
        <p class="search__label">状态:</p>
        <el-select
          class="inline-16"
          size="small"
          v-model="status"
          placeholder="请选择"
          @change="handleSelectChange"
          clearable
        >
          <el-option
            v-for="(item,index) in statusList"
            :label="item.label"
            :value="item.value"
            :key="index"
          ></el-option>
        </el-select>
      </div>
      <div class="label_center">
        <p class="search__label">板块:</p>
        <el-select
          class="inline-16"
          size="small"
          v-model="classname"
          placeholder="请选择板块"
          @change="classChange"
          clearable
        >
          <el-option
            v-for="(item,index) in classList"
            :label="item.classname"
            :value="item.sat_notice_classid"
            :key="index"
          ></el-option>
        </el-select>
      </div>
      <div class="label_center">
        <p class="search__label">发布时间:</p>
        <time-select class="inline-16" @clearSelect="clearTime" @timeChange="timeChange"></time-select>
      </div>
    </div>
      <template v-slot:tbList="scope">
        <div v-if="scope.data.column.columnname === 'status'">
          <span v-if="scope.data.column.data.isontop === 1" >
            <span v-if="scope.data.column.data[scope.data.column.columnname] === '发布'" style="color:#52C41A">{{scope.data.column.data[scope.data.column.columnname]}}</span>
            <span v-else>{{scope.data.column.data[scope.data.column.columnname]}}</span>
            <span style="color:#FF3B30;margin-left: 10px">置顶</span>
          </span>
          <div v-else>
            <span v-if="scope.data.column.data[scope.data.column.columnname] === '发布'" style="color:#52C41A">{{scope.data.column.data[scope.data.column.columnname]}}</span>
            <span v-else>{{scope.data.column.data[scope.data.column.columnname]}}</span>
          </div>
        </div>
        <div v-else>{{scope.data.column.data[scope.data.column.columnname]}}</div>
      </template>
      <template v-slot:tbOpreation="scope">
<!--        <edit :id="scope.data.data.sat_noticeid" @updateSuccess="onSuccess"></edit>-->
        <el-button class="inline-16" type="text" size="small" @click="$store.dispatch('DrawerShowChange',true),$router.push({path:'/notice_edit',query:{id:scope.data.data.sat_noticeid}})">详情</el-button>
        <el-button class="inline-16" v-if="tool.checkAuth($route.name,'data_analysis')" type="text" size="small" @click="$store.dispatch('DrawerShowChange',true),$router.push({path:'/notice_analysis',query:{id:scope.data.data.sat_noticeid}})">数据分析</el-button>
        <message class="inline-16" v-if="tool.checkAuth($route.name,'read')" :data="scope.data.data.sat_noticeid" @onSuccess="onSuccess"></message>
      </template>
    </basicLayout>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      direction="rtl"
      size="90%"
      append-to-body
      @close="closeDrawer">
      <div class="detail__panel">
        <router-view/>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'

import message from './list/modules/message.vue'
import edit from './list/modules/edit'
import TimeSelect from '@/HDrpManagement/projectChange/components/TimeSelect'
export default {
  data(){
    return {
      status:'',
      classname:'',
      options:[],
      accountType:'',
      statusList:[
        {label:'全部',value:''},
        {label:'新建',value:'新建'},
        {label:'发布',value:'发布'},
      ],
      classList:[],
      drawer:false
    }
  },
  components:{
    message,
    edit,
    TimeSelect
  },
  provide () {
    return {
      accountType: () => this.accountType
    }
  },
  computed: {
    ...mapGetters({
      DrawerShow:'DrawerShow'
    })
  },
  watch: {
    $route (val) {
      if (val.path == '/notice_mag_list') {
        this.$refs.list.listData()
      }
    },
    DrawerShow (val) {
      val ? this.drawer = true : this.drawer = false
    }
  },
  created () {
    this.getClassList()
    this.getAccountType()
  },
  methods:{
    /* 删除新建产生的无效通告 */
    async list (data) {
      let initID = '9999' + JSON.parse(window.sessionStorage.getItem("active_account")).userid;
      let deleteList = [];
      data.forEach(v => (initID == v.sat_notice_classid && v.title == '') ? deleteList.push(v.sat_noticeid) : '');
      if (deleteList.length != 0) this.handleDelete(deleteList);
    },
    /* 处理批量删除 */
    handleDelete(list) {
      this.$api.requested({
        "id":20221101095103,
        "content": {
          "sat_noticeids": list
        }
      }).then(res => {
        if (res.msg == '成功') this.$refs.list.listData();
      })
    },
    closeDrawer () {
      this.$store.dispatch('DrawerShowChange',false)
      this.$router.push({path:"notice_mag_list"})
    },
    onSuccess () {
      this.$refs.list.listData()
    },
    handleSelectChange () {
      this.$refs.list.param.content.where.status = this.status
      this.$refs.list.listData()
    },
    /* 用户类型 */
    async getAccountType () {
      let res = await this.$store.dispatch('optiontypeselect','accounttype')
      this.accountType = res.data
      console.log(this.accountType);
      
    },
    async getClassList () {
      let res = await this.$api.requested({
        'id':20221101094603,
        'content': {
          'where': {
            
          }
        }
      })
      res.data.unshift({'classname':'全部','sat_notice_classid':''})
      this.classList = res.data
      console.log(res);
    },
    classChange () {
      this.$refs['list'].param.content.where.sat_notice_classid = this.classname
      this.$refs['list'].listData()
    },
    clearTime () {
      this.$refs['list'].param.content.where.startdate = ''
      this.$refs['list'].param.content.where.enddate = ''
      this.$refs['list'].listData()
    },
    timeChange (time) {
      this.$refs['list'].param.content.where.startdate = time[0]
      this.$refs['list'].param.content.where.enddate = time[1]
      this.$refs['list'].listData()
    }
  }
}

</script>
<style>
</style>
<style scoped>
</style>