<template>
  <section style="height: 100%;">
    <ai-list isTabs>
      <template slot="content">
        <ai-search-bar>
          <template #left>
            <ai-select v-model="search.status" placeholder="发布状态" :selectList="dict.getDict('announcementStatus')"
                       @change="search.current = 1, getList()"></ai-select>
            <el-date-picker
              type="daterange"
              size="small"
              v-model="date"
              @change="search.current = 1,getList()"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </template>
          <template slot="right">
            <el-input
              v-model="search.title"
              size="small"
              v-throttle="() => {search.current = 1, getList()}"
              placeholder="标题"
              clearable
              @clear="search.current = 1, search.title = '', getList()"
              suffix-icon="iconfont iconSearch">
            </el-input>
          </template>
        </ai-search-bar>
        <ai-search-bar>
          <template #left>
            <el-button icon="iconfont iconAdd" type="primary" @click="add">创建公告</el-button>
          </template>
        </ai-search-bar>
        <ai-table
          :tableData="tableData"
          :col-configs="colConfigs"
          :total="total"
          :current.sync="search.current"
          :size.sync="search.size"
          @getList="getList">
          <el-table-column slot="releaseUserName" label="发布人" align="center">
            <template slot-scope="{ row }">
              <ai-open-data type="userName"  :openid="row.releaseUserName"></ai-open-data>
            </template>
          </el-table-column>
          <el-table-column slot="unitName" label="发布部门" align="center">
            <template slot-scope="{ row }">
              <ai-open-data type="departmentName"  :openid="row.unitName"></ai-open-data>
            </template>
          </el-table-column>

          <el-table-column slot="options" width="250" label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" @click="toDetail(row)">详情</el-button>
              <el-button type="text" v-if="row.status==0" @click="publish(row,0)">发布</el-button>
              <el-button type="text" v-if="row.status==1" @click="publish(row,1)">撤回</el-button>
              <el-button type="text" @click="toEdit(row)" v-if="row.status==0 || row.status==3">编辑</el-button>
              <el-button type="text" @click="handleDel(row)">删除</el-button>
            </template>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <ai-dialog
      title="查阅状态"
      :visible.sync="visible"
      @closed="row={},readList=[]"
      :customFooter="true"
      width="800px">
      <template v-if="readObj.read && readObj.read.length">
        <header>已读人员</header>
        <div class="wrap">
          <div class="item" v-for="(item,index) in readObj.read" :key="index">
            <img :src="item.avatar" alt="">
            <ai-open-data type="userName"  :openid="item.name"></ai-open-data>
          </div>
        </div>
      </template>

      <template v-if="readObj.unRead && readObj.unRead.length">
        <header>未读人员</header>
        <div class="wrap">
          <div class="item" v-for="(item,index) in readObj.unRead" :key="index">
            <img :src="item.avatar" alt="">
            <ai-open-data type="userName"  :openid="item.name"></ai-open-data>
          </div>
        </div>
      </template>
    </ai-dialog>
  </section>
</template>

<script>
  export default {
    name: "noticeManage",
    props: {
      instance: Function,
      dict: Object
    },
    data() {
      return {
        search: {
          title: "",
          status: "",
          size: 10,
          current: 1,
        },
        date: [],
        tableData: [],
        total: 0,
        visible: false,
        row: {},
        readObj:{},
      }
    },

    computed: {
      colConfigs() {
        return [
          {prop: 'title', label: '标题'},
          {
            prop: 'readNum', label: '查询状态', align: 'center',
            render:(h,{row})=>[<span class='status' onClick={this.showDialog.bind(this,row)}>{row.readNum}人已读，</span>,<span class='status' onClick={this.showDialog.bind(this,row)}>{row.unReadNum}人未读</span>]
          },
          {slot: 'releaseUserName'},
          {slot: 'unitName'},
          {prop: 'releaseTime', label: '发布时间', align: 'center'},
          {
            prop: 'status', label: '发布状态', align: 'center',
            render:(h,{row})=>[<span style={{color:this.dict.getColor("announcementStatus",row.status)}}>{this.dict.getLabel("announcementStatus",row.status)}</span>]
          },
          {slot: 'options'},
        ];
      }
    },

    methods: {
      showDialog(row) {
        this.row = row;
        this.getReadList();
      },
      toDetail(row){
        this.$emit('goPage', {
          comp: 'manageDetail',
          row
        });
      },
      toEdit(row){
        this.$emit('goPage', {
          comp: 'add',
          row
        });
      },
      publish(row,status){
        this.$confirm(`是否要${status==0?'发布':'撤回'}该公告？`).then(()=>{
          this.instance.post("/app/appannouncement/update-status",null,{
            params: {
              id:row.id
            }
          }).then(res=>{
            if(res.code==0){
              this.$message.success(status==0?'发布成功':'撤回成功');
              this.getList();
            }
          })
        })
      },
      handleDel(row){
        this.$confirm("是否要删除该公告？").then(()=>{
          this.instance.post("/app/appannouncement/delete",null,{
            params:{
              ids:row.id
            }
          }).then(res=>{
            if(res.code==0){
              this.$message.success("删除成功");
              this.getList();
            }
          })
        })
      },
      add(){
        this.$emit('goPage', {
          comp: 'add',
          row: {},
        });
      },
      getReadList(){
        this.instance.post("/app/appannouncementreader/list-unread",null,{
          params:{
            id:this.row.id
          }
        }).then(res=>{
          if(res && res.data){
            this.readObj = res.data;
            this.visible = true;
            this.$store.dispatch('initOpenData')
          }
        })
      },
      getList() {
        this.tableData = [];
        this.instance.post("/app/appannouncement/list-mgr",null,{
          params:{
            ...this.search,
            startTime: this.date?.length ? this.date[0] : null,
            endTime: this.date?.length ? this.date[1] : null,
          }
        }).then(res=>{
          if(res && res.data){
            this.tableData = res.data.records;
            this.total = res.data.total;
            this.$store.dispatch('initOpenData')
          }
        })
      }
    },
    created() {
      this.dict.load("announcementStatus").then(this.getList)
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .status {
    color: rgba(41, 107, 251, 100);
    cursor: pointer;
  }

  header{
    font-size: 14px;
    color: #333333;
    margin-bottom: 10px;
  }

  ::v-deep .wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .item {
      width: 50px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 22px;
      margin-bottom: 22px;

      img {
        width: 100%;
        height: 50px;
        border-radius: 50%;
      }

      span{
        font-size: 14px;
        color: #333333;
        text-align: center;
      }
    }
  }
</style>
