<!--
 * @Author: wlo_o
 * @Date: 2022-02-17 13:46:42
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-04 15:57:44
 * @FilePath: /frontend/lib/components/MdSetPreview.vue
 * @Description: 集合预览
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <el-container
    style="min-height: 500px"
    class="oecp-md-set-preview"
  >
    <el-header>
      <el-row type="flex">
        <p class="title-style">{{setData.name}}</p>
      </el-row>
    </el-header>
    <el-container>
      <el-aside
        v-show="showMenu"
        width="360px"
        class="innerSide"
      >
        <el-row style="margin-bottom:5px;">
          <el-input
            v-model="subsetName"
            @clear="loadSubsetData"
            @keyup.enter.native="loadSubsetData"
            placeholder="请输入子集名称"
            clearable
          >
            <el-button
              slot="append"
              @click="loadSubsetData"
              icon="el-icon-search"
            />
          </el-input>
        </el-row>
        <el-row>
          <el-menu
            :default-active="currentActive"
            @select="handleMenuSelect"
          >
            <el-menu-item
              v-for="(item, idx) in subsetTableData"
              :key="`subset_${idx}`"
              :index="item.id"
              @click="handleMenuClick(item.id)"
            >
              {{item.name}}
            </el-menu-item>
          </el-menu>
        </el-row>
        <el-row
          type="flex"
          justify="center"
        >
          <el-pagination
            :hide-on-single-page="true"
            :total="subsetPagination.total"
            :page-size.sync="subsetPagination.pageSize"
            :current-page.sync="subsetPagination.page"
            layout="prev, next"
            background
          >
          </el-pagination>
        </el-row>
      </el-aside>
      <el-main style="padding-top:0;border-radius: 6px;">
        <md-set-element-list v-bind="tableAttrs">
          <template
            v-if="currentSubset"
            slot="title"
          >
            <h3 style="margin-top:0px">{{currentSubset.name}}</h3>
          </template>
        </md-set-element-list>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import OptionsMixin from '../mixins/OptionsMixin'
import EventMixin from '../mixins/EventMixin'
import { fetchApi } from '../common/apis.js'
import get from 'lodash/get'

export default {
  mixins: [OptionsMixin, EventMixin],
  props: {
    id: { type: String, default: '' }, // 集合id
    type: { type: [String, Number, null] }, // 类型
  },
  watch: {
    id: function (newId, oldId) {
      newId && newId !== oldId && this.LoadData()
    },
    currentSubset: function (o) {
      if (o && o.id) {
        this.tableAttrs = { ...this.tableAttrs, id: o.id, showSubsetElement: false }
      } else {
        this.tableAttrs = { ...this.tableAttrs, id: this.id, showSubsetElement: true }
      }
    },
    'subsetPagination.page': function () {
      this.loadSubsetData()
    },
    'elementPagination.page': function () {
      this.loadElementTableData()
    },
  },
  computed: {
    setPreviewConfig: function () {
      return this.getMbOptionVar(`setPreviewConfig${this.type}`) || {}
    },
  },
  data() {
    return {
      loading: false,
      currentActive: '',
      tableAttrs: {
        id: this.id,
        showSubsetElement: true,
        type: this.type,
        displayType: 'preview',
        showForm: false,
        showSearch: true,
      },
      currentSubset: {}, // 当前选中的子集 { id: null, name: '' }
      setData: {}, // 主集合内容
      subsetName: '', // 子集查询条件：名称
      elementName: '', // 数据元查询条件: 名称
      subsetTableData: [], // 子集合列表
      subsetPagination: {
        // 子集的分页
        total: 0,
        page: 1,
        pageSize: 10,
      },
      init: false,
      showMenu: false,
      // 数据元列表
      elementTableList: [],
      elementPagination: {
        total: 0,
        page: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
      },
    }
  },
  methods: {
    handleMenuSelect(index) {
      console.log(index)
      this.currentActive = index
    },
    handleMenuClick(id) {
      console.log(this.subsetTableData)
      let item = this.subsetTableData.find(o => o.id === id)
      if (this.currentSubset.id === item.id) {
        this.currentSubset = {}
        this.currentActive = ''
      } else {
        this.currentSubset = item
      }
    },
    loadData() {
      // 集合信息
      let that = this
      let { id } = this
      fetchApi.call(this, '/set/find', { id }).then(res => {
        that.setData = res
      })
      this.loadSubsetData().then()
    },
    loadSubsetData() {
      // 子集信息
      let that = this
      let { id: parentId, subsetName: name } = this
      let { page, pageSize } = this.subsetPagination
      let query = { parentId, page, pageSize, ...(name && { name }) }
      return new Promise(function (resolve, reject) {
        fetchApi
          .call(this, '/set/pageList', query)
          .then(res => {
            let list = get(res, 'records') || []
            that.subsetTableData = list
            if (!that.init) {
              that.showMenu = list.length > 0
              that.init = true
            }
            that.subsetPagination = { ...that.subsetPagination, total: get(res, 'total') || 0 }
            if (list && list.length) {
              that.elementPagination = { ...that.elementPagination, page: 1 }
              // that.currentSubset = that.currentSubset || get(list, '[0]')
            }
            resolve()
          })
          .catch(err => reject(err))
      })
    },
    loadElementTableData() {
      let that = this
      let {
        currentSubset: { id },
        elementName,
      } = this
      let query = { id, ...(elementName && { elementName }) }
      fetchApi.call(this, '/element/source', query).then(res => {
        that.elementTableList = get(res, 'list') || []
        that.elementPagination = { ...that.elementPagination, total: get(res, 'total') || 0 }
      })
    },
    loadExtData(id) {
      let that = this
      return fetchApi.call(this, '/set/extList', { parentId: this.stateId }).then(res => {
        that.extList = res.list
      })
    },
    getList() {},
  },
  created() {
    this.tableAttrs = { ...this.tableAttrs, ...get(this.setPreviewConfig, 'tableConfig.attrs') }
    this.id && this.loadData()
  },
}
</script>
<style scoped>
.title-style {
  /* padding-top: 6px; */
  font-size: 18px !important;
  /* font-weight: 600; */
}
.el-aside,
.el-menu {
  background: #001628;
  border-right: none !important;
}

.el-menu-item,
/deep/.el-submenu__title {
  color: #fff !important;
}

.el-menu-item.is-active {
  color: #fff;
  background: #2468f2;
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background: #4479e3;
  color: #f5f5f5;
}

.el-submenu__icon-arrow {
  color: #fff !important;
}
/* checkbox start*/
/deep/.el-table .cell .el-checkbox .el-checkbox__input .el-checkbox__inner {
  border-radius: 100% !important;
  height: 16px;
  width: 16px;
}

/deep/.cell .el-checkbox .el-checkbox__inner::after {
  border: none;
  background: #1a63eb;
  border-radius: 100%;
  width: 9px;
  height: 9px;
  top: 17%;
  left: 17.85%;
}

/* checkbox end*/

.title-style {
  padding-bottom: 0;
  display: flex;
  align-items: center;
  font-size: 18px;
}

.el-input-group {
  border-radius: 30px;
  overflow: hidden;
  /* border: 1px solid #ddd; */
  width: 300px;
  margin-left: 15px;
}

/deep/.el-input-group--append .el-input__inner,
/deep/.el-input-group__prepend {
  border-top-left-radius: 30px !important;
  border-bottom-left-radius: 30px !important;
  height: 36px !important;
  background-color: #fff;
  border: none;
}

/deep/.el-input-group--prepend .el-input__inner,
/deep/.el-input-group__append {
  border-top-right-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
  background-color: #fff;
  border: none;
}

/deep/.el-icon-search {
  color: #2468f2 !important;
  font-size: 20px;
}

/deep/.el-input-group--append .el-input__inner {
  border-top-left-radius: 30px !important;
  border-bottom-left-radius: 30px !important;
  height: 36px !important;
}

/deep/.el-input-group__append {
  padding-right: 8px;
  border-top-right-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
}
.el-main {
  background: #ebeff2;
  padding: 0 12px 20px 12px !important;
}
/deep/.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
.oecp-md-set-preview {
  height: calc(100% - 20px);
  background: #fff;
  padding: 20px;
  margin-top: 20px;
  border-radius: 6px;
}
.innerSide {
  background: #fff;
}
/deep/.el-menu {
  background: #fff;
}
/deep/.innerSide .el-menu-item {
  color: #666 !important;
}
/deep/.innerSide .el-input-group {
  border: 1px solid #999;
}
/deep/.innerSide .el-menu-item.is-active {
  background: #ebeff2;
}
/deep/.innerSide .el-menu-item:hover {
  background: #ebeff2;
}
</style>
