<!--
 * @Author: wlo_o
 * @Date: 2022-02-17 08:51:32
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-04 11:05:42
 * @FilePath: /frontend/lib/components/MdSetModuleDialog.vue
 * @Description: 模块编辑
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="stateVisible"
    :before-close="handleDialogClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="oecp-md-set-module-dialog"
    width="90%"
  >
    <el-row
      v-show="editable"
      type="flex"
      justify="end"
    >
      <el-button
        :disabled="!id||editRowIndex!=-1"
        @click="handleRowAddClick"
        type="primary"
      >添加</el-button>
    </el-row>
    <el-row>
      <el-table
        :header-cell-style="{background:'#F2F7FF',color:'#323232',height:'46px'}"
        v-loading="loading"
        :data="tableData"
        stripe
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          prop="value"
          label="名称"
        >
          <template slot-scope="scope">
            <template v-if="editRowIndex==scope.$index">
              <el-input
                v-model="editRowData.name"
                placeholder="请输入值"
              />
            </template>
            <template v-else>{{scope.row.name}}</template>
          </template>
        </el-table-column>
        <el-table-column
          prop="value"
          label="编码"
        >
          <template slot-scope="scope">
            <template v-if="editRowIndex==scope.$index&&action=='add'">
              <el-input
                v-model="editRowData.code"
                placeholder="请输入编码"
              >
                <el-button
                  slot="append"
                  @click="handleRefreshClick"
                  icon="el-icon-refresh"
                />
              </el-input>
            </template>
            <template v-else>{{scope.row.code}}</template>
          </template>
        </el-table-column>
        <el-table-column
          v-if="editable"
          :width="showRowBtnText?200:100"
          label="操作"
        >
          <template slot-scope="scope">
            <template v-if="editRowIndex==scope.$index">
              <el-button
                v-show="editRowIndex==scope.$index"
                :disabled="scope.row.isSys==1"
                @click="handleRowSaveClick(scope)"
                type="text"
                size="medium"
                icon="el-icon-check"
                style="color:#67C23A"
              >
                <span v-if="showRowBtnText">保存</span>
              </el-button>
              <el-button
                v-show="editRowIndex==scope.$index"
                :disabled="scope.row.isSys==1"
                @click="handleRowCancelClick(scope)"
                type="text"
                size="medium"
                icon="el-icon-close"
                style="color:#909399"
              >
                <span v-if="showRowBtnText">取消</span>
              </el-button>
            </template>
            <template v-else>
              <el-button
                @click="handleRowEditClick(scope)"
                type="text"
                size="medium"
                icon="el-icon-edit"
              >
                <span v-if="showRowBtnText">编辑</span>
              </el-button>
              <el-button
                @click="handleRowDelClick(scope)"
                type="text"
                size="medium"
              >
                <i
                  :style="{color:'#F56C6C'}"
                  class="el-icon-close"
                ></i>
                <span v-if="showRowBtnText">删除</span>
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="handleDialogClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import OptionsMixin from '../mixins/OptionsMixin'
import isEmpty from 'lodash/isEmpty'
import { fetchApi } from '../common/apis.js'
import { s4 } from '../common/utils.js'
// import get from 'lodash/get'

export default {
  mixins: [OptionsMixin],
  props: {
    visible: { type: Boolean, default: false },
    editable: { type: Boolean, default: false }, // 能否编辑
    disabled: { type: Boolean, default: false }, // 禁用
    title: { type: String, default: '模块管理' },
    id: { type: String, default: '' }, // 集合id
  },
  watch: {
    visible(val) {
      this.stateVisible = val
      val && this.loadData()
    },
  },
  data() {
    return {
      action: null,
      loading: false,
      showRowBtnText: false,
      editRowIndex: -1,
      editRowData: {}, // 编辑时，数据备份
      stateVisible: this.visible,
      tableData: [],
    }
  },
  methods: {
    handleRefreshClick() {
      this.editRowData = { ...this.editRowData, code: `${s4()}${s4()}` }
    },
    handleRowAddClick() {
      this.tableData.push({})
      this.handleRowEditClick({ $index: this.tableData.length - 1, row: {} }, 'add')
    },
    handleRowCancelClick(scope) {
      if (this.action === 'add') {
        this.tableData.pop()
      }
      this.editRowIndex = -1
    },
    handleRowEditClick(scope, action = 'edit') {
      this.action = action
      this.editRowIndex = scope.$index
      this.editRowData = JSON.parse(JSON.stringify(scope.row))
    },
    handleRowDelClick(scope) {
      let that = this
      this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        let { id } = scope.row
        fetchApi.call(that, '/set/moduleDelete', { id }).then(function () {
          that.editRowIndex = -1
          setTimeout(function () {
            that.loadData()
          }, 200) // 保存完立刻查会查不出数据
        })
      })
    },
    handleRowSaveClick(scope) {
      let that = this
      let { name, code } = this.editRowData
      let err = isEmpty(name) ? '名称不能为空' : isEmpty(code) ? '编码不能为空' : ''
      if (err) return this.$message.error(err)
      let { id: setId } = this
      fetchApi.call(this, '/set/moduleSave', { ...this.editRowData, setId }).then(res => {
        that.$message.success('操作成功')
        that.editRowIndex = -1
        setTimeout(function () {
          that.loadData()
        }, 200) // 保存完立刻查会查不出数据
      })
    },
    loadData() {
      let that = this
      let { id: setId } = this
      if (!setId) return
      this.laoding = true
      that.tableData = []
      fetchApi
        .call(this, '/set/moduleList', { setId })
        .then((list = []) => {
          that.tableData = list
        })
        .finally(() => {
          that.loading = false
        })
    },
    handleDialogClose() {
      this.$emit('close')
    },
  },
}
</script>
<style scoped>
/deep/.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
/deep/.el-icon-close {
  font-size: 18px;
}
</style>
