<!--
 * @Author: wlo_o
 * @Date: 2022-02-10 08:45:17
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-04 11:05:36
 * @FilePath: /frontend/lib/components/MdSetSubsetList.vue
 * @Description: 子集列表
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <div class="oecp-md-subset-list">
    <el-row>
      <el-col :span="12">
        <template v-if="!!$slots['title']">
          <slot name="title"></slot>
        </template>
        <div v-else-if="!!title">{{title}}</div>
        <div v-else>&nbsp;</div>
      </el-col>
      <el-col
        v-if="editable&&showAddSubset"
        :span="12"
      >
        <el-row
          type="flex"
          justify="end"
        >
          <el-button
            v-oecp-auth:[{type}]="'subsetList.create'"
            :disabled="disabled"
            @click="handleAddSubset"
            type="primary"
            size="medium"
            class="addBtn"
            icon="el-icon-plus"
          >添加子集</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 v-if="editable" type="selection" width="50"/> -->
        <el-table-column
          type="index"
          width="50"
        >
          <div slot="header">序号</div>
          <template slot-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"
        >
          <template
            v-for="(render,key) in column.slots"
            v-slot:[key]="scope"
          >
            <md-slot-shim
              :key="`slot_${key}`"
              :render="render"
              :data="scope"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-if="editable"
          fixed="right"
          label="操作"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              v-oecp-auth:[{...scope,type}]="'subsetList.row.edit'"
              :disabled="disabled||scope.row.isSys==1"
              @click="handleRowEdit(scope.row)"
              type="text"
              size="medium"
              icon="el-icon-edit"
            >
              <template v-if="showRowBtnText">编辑</template>
            </el-button>
            <el-button
              v-oecp-auth:[{...scope,type}]="'subsetList.row.del'"
              :disabled="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>
              <template v-if="showRowBtnText">删除</template>
            </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>
    <md-set-dialog
      :visible="dialogVisible"
      :title="dialogTitle"
      :type="type"
      :parentId="parentId"
      :data="dialogData"
      @close="handleDialogClose()"
      @success="handleDialogSuccess()"
    />
  </div>
</template>
<script>
import { fetchApi } from '../common/apis'
import OptionsMixin from '../mixins/OptionsMixin'
import RouterMixin from '../mixins/RouterMixin'
import EventMixin from '../mixins/EventMixin'
import get from 'lodash/get'

export default {
  mixins: [OptionsMixin, RouterMixin, EventMixin],
  props: {
    title: { type: [String, null], default: '' },
    type: { type: [String, null], default: '' },
    parentInfo: { type: Object, default: () => ({}) },
    editable: { type: Boolean, default: false }, // 能否编辑
    disabled: { type: Boolean, default: false }, // 禁用
    showAddSubset: { type: Boolean, default: false }, // 显示添加子集
  },
  watch: {
    type() {
      this.initAndLoad()
    },
    parentInfo: {
      handler: function (obj) {
        if (obj.id !== this.stateParentId) {
          this.stateParentId = obj.id
          this.getList()
        }
      },
      deep: true,
    },
    'pagination.page': function () {
      this.getList()
    },
    'pagination.pageSize': function () {
      this.getList()
    },
  },
  computed: {
    parentId: function () {
      return get(this.parentInfo, 'id')
    },
    parentName: function () {
      return get(this.parentInfo, 'name')
    },
  },
  data() {
    return {
      stateParentId: get(this.parentInfo, 'id'),
      loading: false,
      showRowBtnText: false,
      dialogVisible: false,
      dialogTitle: '',
      tableData: [],
      defaultColumns: [
        { prop: 'name', label: '子集' },
        { prop: 'code', label: '子集编码' },
      ],
      columns: [],
      dialogData: {},
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
      },
    }
  },
  methods: {
    handleDialogClose() {
      this.dialogVisible = false
    },
    handleDialogSuccess() {
      let that = this
      setTimeout(function () {
        that.getList()
      }, 200) // 保存完立即查询查不到
      this.handleDialogClose()
    },
    getSubsetTableConfig() {
      return this.getMbOptionVar(`subsetTableConfig${this.type}`) || {}
    },
    handleAddSubset() {
      this.dialogData = {}
      this.dialogVisible = false
      this.dialogVisible = true
      this.dialogTitle = this.parentName + ' 添加子集'
    },
    handleRowEdit(data) {
      this.goto(
        {
          componentName: 'md-subset-form',
          attrs: {
            title: `${this.parentName} — ${data.name}`,
            id: data.id,
            type: this.type,
            query: { type: null },
            editable: this.editable,
            showCategory: true,
          },
        },
        true,
      )
    },
    handleRowDel(data) {
      let that = this
      this.$confirm('此操作将永久删除该数据集, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        fetchApi.call(that, '/set/delete', { id: data.id }).then(res => {
          console.log(res)
          that.$message({ type: 'success', message: '删除成功!' })
          that.getList()
        })
      })
    },
    initAndLoad() {
      let { type } = this
      let tableCfg = this.getMbOptionVar(`subsetTableConfig${type}`)
      let columns = get(tableCfg, 'ext') || []
      this.columns = [...this.defaultColumns, ...columns]
      this.parentId && this.getList()
    },
    getList() {
      let that = this
      let { pageSize, page } = this.pagination
      let { parentId } = this
      this.loading = true
      fetchApi
        .call(this, '/set/pageList', { parentId, pageSize, page })
        .then(data => {
          that.tableData = data.records
          that.pagination = { ...that.pagination, total: data.total }
        })
        .finally(() => {
          that.loading = false
        })
    },
  },
  created() {
    this.initAndLoad()
  },
}
</script>
<style scoped>
/deep/.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
/deep/.el-icon-close {
  font-size: 18px;
}
.addBtn {
  background: #2468f2;
  border-color: #2468f2;
  padding: 0 20px;
}
.addBtn:hover {
  background: #2469f2d6;
  border-color: #2469f2d6;
}
</style>
