<template>
  <section class="AppLeavingMessage">
    <ai-list v-if="!showDetail">
      <template slot="title">
        <ai-title title="群众留言" :isShowBottomBorder="false" :instance="instance" :isShowArea="true" v-model="areaId" @change="changeArea"></ai-title>
      </template>
      <template slot="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs-page">
          <el-tab-pane v-for="(item, index) in paneList" :key="index" :label="item.label" :name="item.name">
            <component :is="comp" ref="list" :instance="instance" :dict="dict" :activeName="activeName" @toDetail="toDetail"
                       :areaId="areaId"></component>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>
    <template v-if="showDetail">
      <message-detail :instance="instance" :dict="dict" :detailId="detailId" @back="showDetail=false"></message-detail>
    </template>
  </section>
</template>

<script>
  import {mapState} from "vuex";
  import AlreadyList from "./components/alreadyList";
  import MessageDetail from "./components/messageDetail";

  export default {
    name: 'AppMassesMessage',
    label: "群众留言",
    props: {
      instance: Function,
      dict: Object,
      permissions: Function,
      openim: Function
    },
    components: {AlreadyList, MessageDetail},
    data() {
      return {
        activeName: '0',
        comp:"AlreadyList",
        paneList: [
          {
            label: '待我回复',
            name: '0'
          },
          {
            label: '我已回复',
            name: '1'
          },
          {
            label: '处理完成',
            name: '2'
          }
        ],
        showDetail: false,
        detailId: '',
        oldActiveName: '',
        areaId: '',
        hideLevel: ''
      }
    },
    computed: {
      ...mapState(['user'])
    },
    created() {
      this.areaId = this.user.info.areaId
      this.hideLevel = this.user.info.areaList.length
    },
    methods: {
      changeArea() {
        this.$nextTick(() => {
          this.$refs.list.getAppLeaveMessage()
        })
      },
      openIM() {
        if (this.openim) this.openim()
      },
      handleClick(tab) {
        if (this.oldActiveName == this.activeName) {
          return
        }
        this.activeName = tab.name
        this.$nextTick(() => {
          this.$refs.list[0].getAppLeaveMessage()
          this.$refs.list.search = {}
          this.oldActiveName = tab.name
        })
      },
      toDetail(id) {
        this.detailId = id
        this.showDetail = true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .AppLeavingMessage {
    height: 100%;
    background-color: #f3f6f9;
  }
</style>
