<!--
 * @Author: wlo_o
 * @Date: 2022-02-09 11:18:19
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-11 14:45:15
 * @FilePath: /frontend/lib/components/MdSetList.vue
 * @Description: 数据集列表
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <div class="oecp-md-set-list">
    <el-row
      type="flex flex-center"
      style="padding:10px 12px;background: #ebeff2;"
    >
      <el-col :span="18">
        <div
          class="flex"
          style="align-items:center"
        >

          <template v-if="!!$slots['title']">
            <slot name="title"></slot>
          </template>
          <div
            v-else-if="!!title"
            class="title-style"
          >
            <img
              v-if="$attrs.icon && $attrs.icon == '../common/img/source.png'"
              src="../common/img/source.png"
            />
            <img
              v-else-if="$attrs.icon && $attrs.icon == '../common/img/add.png'"
              src="../common/img/add.png"
            />
            <img
              v-else-if="$attrs.icon && $attrs.icon == '../common/img/edit.png'"
              src="../common/img/edit.png"
            />
            <img
              v-else-if="$attrs.icon && $attrs.icon == '../common/img/metaData.png'"
              src="../common/img/metaData.png"
            />
            {{title}}
          </div>
          <div v-else>&nbsp;</div>
          <el-input
            v-model="searchName"
            @clear="getList"
            placeholder="请输入内容"
            @keyup.enter.native="getList"
            clearable
          >
            <el-button
              slot="append"
              @click="getList"
              icon="el-icon-search"
            />
          </el-input>
        </div>
      </el-col>
      <el-col :span="6">
        <el-row
          type="flex"
          justify="end"
        >
          <el-button
            v-oecp-auth:[{type}]="'setList.create'"
            class="addBtn"
            @click="handleSetAdd"
            type="primary"
            icon="el-icon-plus"
            size="medium"
          >创建数据集</el-button>
        </el-row>
      </el-col>
    </el-row>
    <!-- <el-row type="flex">
      <el-col :span="18">
        <el-input
          v-model="searchName"
          @clear="getList"
          placeholder="请输入内容"
          @keyup.enter.native="getList"
          clearable
        >
          <el-button
            slot="append"
            @click="getList"
            icon="el-icon-search"
          />
        </el-input>
      </el-col>
    </el-row> -->
    <!-- <el-divider /> -->
    <el-row style="background:#ebeff2">
      <div style="padding:20px 20px;background: #fff;border-top-left-radius: 6px;border-top-right-radius: 6px;">
        <el-table
          :header-cell-style="{background:'#F2F7FF',color:'#323232',height:'46px'}"
          v-loading="loading"
          size="mini"
          :data="tableData"
          stripe
        >
          <el-table-column
            type="index"
            width="90"
            align="center"
          >
            <div slot="header">序号</div>
            <template scope="scope">{{(pagination.page-1)*pagination.pageSize+scope.$index+1}}</template>
          </el-table-column>
          <el-table-column
            align="center"
            v-for="(column,idx) in columns"
            :key="`column_${idx}`"
            v-bind="column"
          />
          <el-table-column
            label="操作"
            :width="showRowBtnText?200:100"
            align="center"
          >
            <template slot-scope="scope">

              <el-button
                v-oecp-auth:[{...scope,type}]="'setList.row.view'"
                @click="handleRowClick(scope.row)"
                title="详情"
                size="mini"
                icon="el-icon-data-analysis"
                round
              >
                <span v-if="showRowBtnText">详情</span>
              </el-button>

              <el-button
                v-oecp-auth:[{...scope,type}]="'setList.row.edit'"
                :disabled="scope.row.isSys==1"
                @click="handleRowClick(scope.row, true)"
                icon="el-icon-edit"
                size="mini"
                round
              >
                <span v-if="showRowBtnText">编辑</span>
              </el-button>

              <el-button
                v-oecp-auth:[{...scope,type}]="'setList.row.del'"
                :disabled="scope.row.isSys==1"
                @click="handleRowDel(scope.row)"
                type="text"
                size="small"
                circle
              >
                <i
                  style="color: #FF432E;background: #FFEEEB;border-radius: 100%;font-size:13px;padding:2px;font-weight:600;"
                  class="el-icon-close"
                ></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </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"
        hide-on-single-page
        background
      />
    </el-row>
  </div>
</template>
<script>
import OptionsMixin from '../mixins/OptionsMixin'
import EventMixin from '../mixins/EventMixin'
import RouterMixin from '../mixins/RouterMixin'
import { fetchApi } from '../common/apis.js'
import { clone } from '../common/utils.js'
export default {
  mixins: [OptionsMixin, RouterMixin, EventMixin],
  props: {
    title: { type: [String, null], default: '' },
    type: { type: [String, null], default: '' },
    editable: { type: Boolean, default: true },
    query: { type: [Object, null], default: () => ({}) }, // 默认查询条件,默认只查顶级元素;例：{ parentId: '0' }
    page: { type: [Number, null], default: 1 }, // 页码，部分逻辑后退的时候可以用
  },
  watch: {
    'pagination.page': function () {
      this.getList()
    },
    'pagination.pageSize': function () {
      this.getList()
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      showRowBtnText: true,
      searchName: '',
      columns: [
        { prop: 'name', label: '名称' },
        { prop: 'code', label: '编码' },
        { prop: 'sourceFileCode', label: '来源文件编码' },
        { prop: 'sourceCode', label: '来源标识符' },
      ],
      pagination: {
        total: 0,
        page: this.page || 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
      },
    }
  },
  methods: {
    getCurrentRouteCfg() {
      let current = clone(this.$OecpMetaDataEventBus.component)
      return { ...current, attrs: { ...current.attrs, page: this.pagination.page } }
    },
    handleSetAdd() {
      this.goto(
        {
          componentName: 'md-set-form',
          attrs: {
            title: '新增数据集',
            showSubset: true,
            showCategory: true,
            type: this.type,
          },
          history: this.getCurrentRouteCfg(),
        },
        true,
        true,
      )
    },
    handleRowClick(data, editable) {
      let { type } = this
      let { id } = data
      if (editable) {
        let title = (editable ? '修改' : '查看') + '数据集'
        this.goto(
          {
            componentName: 'md-set-form',
            attrs: { title, editable: !!editable, id, type, showSubset: true, showElement: true, showCategory: true, showGoBack: true },
            history: this.getCurrentRouteCfg(),
          },
          true,
          true,
        )
      } else {
        this.goto(
          {
            componentName: 'md-set-preview',
            attrs: { id, type },
            history: this.getCurrentRouteCfg(),
          },
          true,
          true,
        )
      }
    },
    handleRowDel(data) {
      let that = this
      this.$confirm('此操作将永久删除该数据集, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let { id } = data
        fetchApi
          .call(that, '/set/delete', { id })
          .then(function (res) {
            that.$message({ type: 'success', message: '删除成功' })
            that.getList()
          })
          .catch(() => {
            // 统一 使用 defaultFail 做信息提示。这里只能做回滚等业务
            //   that.$message({ type: 'error', message: '删除失败' })
          })
      })
    },
    getList() {
      let that = this
      let { pageSize, page } = this.pagination
      let { searchName: name } = this
      fetchApi
        .call(this, '/set/pageList', { ...this.query, pageSize, page, ...(name && { name }) })
        .then(function (res) {
          let { records = [] } = res
          that.tableData = records
          that.pagination.total = res.total || 0
        })
        .finally(() => {
          that.loading = false
        })
    },
  },
  created() {
    this.getList()
  },
}
</script>
<style scoped>
.mb5 {
  margin-bottom: 5px;
}
.title-style {
  /* padding-top: 6px; */
  font-size: 18px;
  /* font-weight: 600; */
}
.el-input-group {
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid #ddd;
}

/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;
}
/* 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;
}
/deep/.el-icon-close {
  font-size: 18px;
}
/deep/.el-button--mini i {
  color: #2468f2 !important;
  font-size: 12px;
}
/deep/.el-button--small {
  padding: 9px 0 !important;
  font-size: 16px;
  font-weight: 600;
}
/deep/.el-button--mini {
  padding: 4px 7px !important;
}
.oecp-md-set-list {
  height: 100%;
  background: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
img {
  height: 23px;
  width: 23px;
  margin-right: 10px;
}
.addBtn {
  background: #2468f2;
  border-color: #2468f2;
  padding: 0 20px;
}
.addBtn:hover {
  background: #2469f2d6;
  border-color: #2469f2d6;
}
/deep/.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
</style>
