<!--
 * @Author: wlo_o
 * @Date: 2022-03-19 18:31:38
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-04 11:15:42
 * @FilePath: /frontend/lib/components/MdImportFromElementDialog.vue
 * @Description: 数据元选择
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :width="'90%'"
    :visible="stateVisible"
    :before-close="handleDialogClose"
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="oecp-md-import-from-element-dialog"
  >
    <div class="oecp-md-element-list">
      <h3>1. 选择模块:</h3>
      <el-row>
        <el-col :span="4">&nbsp;</el-col>
        <el-col :span="20">
          <template v-if="modules.length">
            <el-tag
              v-for="item in modules"
              :key="item.id"
              :effect="item.id==selectedModule?'dark':'plain'"
              @click="handleModuleClick(item)"
              class="oecp-md-category-tag"
            >{{item.name}}</el-tag>
          </template>
          <el-alert
            v-else
            title="该数据集无模块"
            :closable="false"
            type="info"
            style="padding-left: 300px"
            show-icon
          />
        </el-col>
      </el-row>
    </div>
    <md-element-list
      v-bind="attrs"
      @change="handleChange"
      ref="elementList"
    >
      <h3
        slot="title"
        style="margin: 0;line-height: 36px;"
      >2. 选择数据元:</h3>
    </md-element-list>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="handleDialogClose">取 消</el-button>
      <el-button
        :disabled="disabledImport"
        :loading="loading"
        type="primary"
        class="addBtn"
        @click="handleDialogOk"
      >导 入</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { fetchApi } from '../common/apis'
import OptionsMixin from '../mixins/OptionsMixin'
// import get from 'lodash/get'

export default {
  mixins: [OptionsMixin],
  props: {
    title: { type: String, default: '导入' },
    visible: { type: Boolean, default: false },
    setId: { type: [String, null], default: null },
  },
  watch: {
    visible(val) {
      this.stateVisible = val
      val && this.loadModule()
    },
    setId() {
      this.loadModule()
    },
    'mainPagination.page': {
      handler: function (val) {
        this.getList()
      },
    },
  },
  data() {
    let arr = this.getMbOptionVar('typeConfig') || { list: [] }
    let cfg = arr.list.find(item => item.component === 'element' && item.showImport)
    return {
      loading: false,
      stateVisible: this.visible,
      importDisable: true,
      selectElements: [],
      selectedModule: '',
      disabledImport: true,
      modules: [],
      attrs: {
        showSelectAllTag: true,
        type: cfg.type,
        showSelection: true,
        setId: this.setId,
        showRowAction: false,
        editable: false,
      },
    }
  },
  methods: {
    loadModule() {
      let that = this
      fetchApi
        .call(this, '/set/moduleList', { setId: this.setId })
        .then((list = []) => {
          that.modules = list
        })
        .finally(() => {
          that.moduleLoading = false
        })
    },
    handleModuleClick(item) {
      this.selectedModule = this.selectedModule === item.id ? '' : item.id
    },
    handleChange(rows = []) {
      this.selectElements = rows
      this.disabledImport = rows.length === 0
    },
    handleDialogClose() {
      this.$emit('close', false)
    },
    handleDialogOk() {
      let that = this
      let { setId, selectElements: list, selectedModule } = this
      let elementIds = list.reduce((arr, o) => [...arr, o.id], [])
      this.loading = true
      fetchApi
        .call(this, '/set/addChildren', {
          setId,
          elementIds,
          moduleId: selectedModule,
        })
        .then(function (res) {
          let { success = 0, repetition = 0 } = res
          success && that.$message({ showClose: true, message: `${success} 条记录导入成功`, type: 'success', duration: 5000 })
          setTimeout(function () {
            repetition && that.$message({ showClose: true, message: `${repetition} 条重复记录跳过`, type: 'warning', duration: 5000 })
          }, 200)
          that.stateVisible = false
          that.$emit('success', false)
          that.handleDialogClose()
        })
        .finally(() => {
          that.loading = false
        })
    },
  },
  created() {
    this.loadModule()
  },
}
</script>
<style scoped>
.title {
  font-size: 1.17em;
}
.oecp-md-category-tag {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
}
.oecp-md-element-list {
  background-color: #fff;
}
.el-tag--plain {
  background-color: #edf2ff;
  border-color: #90afff;
  color: #497ee1;
  cursor: pointer;
}

.el-tag--dark {
  background-color: #73b9ff;
  border-color: #7399ff;
  color: #fff;
}
</style>
