<template>
  <div class="journal oa-bgcolor">
    <div class="btn-select">
      <div class="select-group">
        <label>审批类型</label>
        <el-select v-model="categoryType"
                   placeholder="请选择"
                   size="mini">
          <el-option v-for="item in categoryOptions"
                     :key="item.category_id"
                     :label="item.title"
                     :value="item.category_id">
          </el-option>
        </el-select>
      </div>
      <el-button type="primary"
                 class="new-btn"
                 @click="newBtn">新建审批</el-button>
    </div>
    <el-tabs v-model="activeName"
             @tab-click="tabClick">
      <el-tab-pane :name="item.key"
                   v-for="(item, index) in tabsData"
                   :key="index">
        <el-badge slot="label"
                  :hidden="item.key != 'examine' || messageOANum.examineNum == 0"
                  :max="99"
                  :value="messageOANum.examineNum">
          <span>{{item.label}}</span>
        </el-badge>
        <v-content :by="item.key"
                   :category_id="categoryType"
                   :ref="'tabcontent' + item.key"
                   id="examine-list-box"
                   @reset="reset"
                   @edit="editDetail">
        </v-content>
      </el-tab-pane>
    </el-tabs>
    <examine-category-select :show="showCategorySelect"
                             @select="selcetExamineCategory"
                             @close="showCategorySelect=false"></examine-category-select>
    <examine-create-view v-if="isCreate"
                         :category_id="createInfo.category_id"
                         :category_title="createInfo.title"
                         :action="createAction"
                         @save-success="createSaveSuccess"
                         @hiden-view="hideView"></examine-create-view>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { oaExamineCategoryList } from '@/api/oamanagement/examine' // 审批类型数据
import VContent from './components/content'
import ExamineCategorySelect from './components/examineCategorySelect'
import ExamineCreateView from './components/examineCreateView'

export default {
  components: {
    VContent,
    ExamineCategorySelect,
    ExamineCreateView
  },

  data() {
    return {
      loading: false,
      activeName: 'my',
      tabsData: [
        { label: '我发起的', key: 'my' },
        { label: '我审批的', key: 'examine' }
      ],
      // 审批类型
      categoryType: '',
      categoryOptions: [],
      // 新建
      showCategorySelect: false,
      isCreate: false, //是创建
      createAction: { type: 'save' },
      createInfo: {} // 创建所需要的id 标题名信息
    }
  },

  computed: {
    ...mapGetters(['messageOANum'])
  },

  mounted() {
    this.getExamineCategoryList()
  },

  methods: {
    // 审批类型列表
    getExamineCategoryList() {
      this.loading = true
      oaExamineCategoryList()
        .then(res => {
          this.loading = false
          this.categoryOptions = [{ category_id: '', title: '全部' }].concat(
            res.data
          )
        })
        .catch(() => {
          this.loading = false
        })
    },

    // 重置按钮
    reset() {
      this.categoryType = ''
    },

    editDetail(item) {
      item.title = item.category_name
      this.createInfo = item
      this.createAction = { type: 'update', id: item.examine_id, data: item }
      this.isCreate = true
    },

    // 创建
    newBtn() {
      this.showCategorySelect = true
    },

    // 审批类型选择
    selcetExamineCategory(item) {
      this.createInfo = item
      this.createAction = { type: 'save' }
      this.isCreate = true
    },

    createSaveSuccess() {
      this.$refs.tabcontentmy[0].searchBtn()
    },

    hideView() {
      this.isCreate = false
    },

    tabClick(val) {}
  }
}
</script>

<style scoped lang="scss">
@import '../styles/tabs.scss';

.journal {
  overflow: auto;
  position: relative;
  .btn-select {
    position: absolute;
    top: 10px;
    right: 40px;
    z-index: 999;
    .select-group {
      display: inline-block;
      .el-select {
        margin: 0 20px 0 10px;
        width: 116px;
      }
    }
  }
  .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .el-tabs /deep/ .el-tabs__content {
    padding: 0 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    // overflow: auto;
    .el-tab-pane {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }
}

// 消息效果
.el-badge /deep/ .el-badge__content.is-fixed {
  top: 15px;
}
</style>
