<!--
 * @Author: wlo_o
 * @Date: 2022-02-17 17:24:05
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-04 11:06:29
 * @FilePath: /frontend/lib/components/MdElementResource.vue
 * @Description: 元素资源
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <div>
    <md-set-form
      :id="id"
      :title="title"
      :showGoBack="true"
      :showSubset="false"
      :showCategory="false"
      :showSaveBtn="false"
      :editable="false"
      ref="form"
    />
    <el-row>
      <el-col :span="12">
        <el-tag type="info">{{title}} 所包含的数据元</el-tag>
      </el-col>
      <el-col
        v-if="editable"
        :span="12"
      >
        <el-row
          type="flex"
          justify="end"
        >
          <el-button
            :disabled="!id"
            @click="handleModuleAddClick"
            type="primary"
            class="addBtn"
          >添加模块</el-button>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :header-cell-style="{background:'#F2F7FF',color:'#323232',height:'46px'}"
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        stripe
      >
        <el-table-column
          type="index"
          width="50"
        >
          <div slot="header">序号</div>
          <!-- <template scope="scope">{{(pagination.page-1)*pagination.pageSize+scope.$index+1}}</template> -->
        </el-table-column>
        <el-table-column
          v-for="(column,idx) in columns"
          :key="`column_${idx}`"
          v-bind="column"
        />
        <el-table-column
          v-if="editable"
          :width="showRowBtnText?200:100"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              :disabled="scope.row.isSys==1"
              @click="handleRowDel(scope.row)"
              type="text"
              size="medium"
            >
              <i
                :style="scope.row.isSys!=1?{color:'#F56C6C'}:{}"
                class="el-icon-close"
              ></i>
              <span v-if="showRowBtnText">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row
      v-show="pagination.total"
      type="flex"
      justify="end"
    >
      <el-pagination
        :loading="loading"
        :total="pagination.total"
        :page-sizes="pagination.pageSizes"
        :page-size.sync="pagination.pageSize"
        :current-page.sync="pagination.page"
        layout="prev,pager,next,sizes,jumper"
        background
      />
    </el-row>
    {{dialogVisible}}
    <md-set-module-dialog
      :id="id"
      :visible="dialogVisible"
      :editable="true"
      @close="dialogVisible=false"
    />
  </div>
</template>
<script>
import OptionsMixin from '../mixins/OptionsMixin'
import EventMixin from '../mixins/EventMixin'
import get from 'lodash/get'
import { fetchApi } from '../common/apis.js'

export default {
  mixins: [OptionsMixin, EventMixin],
  props: {
    title: { type: [String, null], default: '' },
    query: { type: [Object, null], default: null }, // 查询条件
    id: { type: String, default: null }, // 数据集主键
    editable: { type: Boolean, default: false },
  },
  watch: {
    'pagination.page': function () {
      this.getList()
    },
    'pagination.pageSize': function () {
      this.getList()
    },
  },
  data() {
    return {
      loading: false,
      showRowBtnText: false,
      tableData: [{}],
      columns: [
        { prop: 'name', label: '名称' },
        { prop: 'code', label: '编码' },
        { prop: 'sourceFile', label: '来源文件' },
        { prop: 'sourceCode', label: '来源标识符' },
        { prop: 'moduleName', label: '模块' },
      ],
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
      },
      moduleList: [],
      dialogVisible: false,
    }
  },
  methods: {
    handleModuleAddClick() {
      this.dialogVisible = true
    },
    loadData() {
      this.getList()
    },
    getList() {
      let that = this
      let { pageSize, page } = this.pagination
      let { id } = this
      this.loading = true
      let tableData = []
      let total = 0
      fetchApi
        .call(that, '/element/source', { id, pageSize, page })
        .then(res => {
          let { list = [] } = res
          tableData = list
          total = res.total || 0
          let dfd = new Promise(function (resolve, reject) {
            if (!list || list.length === 0) return resolve()
            let dataKv = list.reduce((rs, o) => {
              return { ...rs, [o.id]: o }
            }, {})
            let ids = Object.keys(dataKv)
            // 拼装扩展数据
            fetchApi
              .call(that, '/set/extList', { ids, extNameList: [''] })
              .then(extRes => {
                let extList = get(extRes, 'list') || []
                extList.forEach(item => {
                  let { parentId, extName: key, extValue: val } = item
                  ids.includes(parentId) && (dataKv[parentId] = { ...{ [key]: val }, ...dataKv[parentId] }) // 注意主数据不能被覆盖
                })
                tableData = Object.values(dataKv)
                resolve()
              })
              .catch(err => {
                reject(err)
              })
          })
          dfd
            .then(function () {
              that.tableData = tableData
              that.pagination.total = total
              that.loading = false
            })
            .catch(() => {
              that.loading = false
            })
        })
        .catch(() => {
          that.loading = false
        })
    },
    handleRowDel(data) {
      let that = this
      this.$confirm('此操作将永久删除该数据集, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        that.$message({ type: 'success', message: '删除成功!' })
      })
    },
  },
  created() {
    if (this.id) {
      this.loadData()
    }
  },
}
</script>
<style scoped>
/deep/.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
.addBtn {
  background: #2468f2;
  border-color: #2468f2;
  padding: 0 20px;
}
.addBtn:hover {
  background: #2469f2d6;
  border-color: #2469f2d6;
}
/deep/.el-icon-close {
  font-size: 18px;
}
</style>