·<!--
  @description: 按钮管理-新增按钮/编辑按钮弹框
  @author:高铭昱
  @routerPath:
  @date:  2020/12/12 14:09
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form
        ref="fromData"
        :rules="rules"
        :model="fromData"
        :inline-message="true"
        label-position="right"
      >
        <table class="from_table">
          <tr>
            <!-- 按钮是否可用 01可用 00不可用 -->
            <td><el-form-item label="是否可用" prop="status" /></td>
            <td>
              <el-radio-group v-model="fromData.status">
                <el-radio
                  v-for="(item) in isEnabledList"
                  :key="item.typecode"
                  :label="item.typecode"
                >
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr>
            <!-- 新增按钮等级 00 一级 01 子级 -->
            <td><el-form-item label="按钮等级" prop="level" /></td>
            <td>
              <!-- isLevelType 是否禁用按钮等级  00 一级 01子级 一级时禁用 -->
              <el-radio-group v-model="fromData.level" :disabled="isLevelType">
                <el-radio
                  v-for="(item) in buttonLevelList"
                  :key="item.typecode"
                  :label="item.typecode"
                >
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </td>
          </tr>
          <tr v-if="fromData.level==='01'">
            <!-- 是否显示选择上级按钮 level 00一级 01子级 子级显示 一级不显示 一级已经是最顶级-->
            <td><el-form-item label="上级按钮" prop="parentId" /></td>
            <td>
              <el-cascader
                ref="cascader"
                v-model="fromData.parentId"
                :props="defaultParams"
                :options="superiorBtnData"
                filterable
                clearable
                style="width: 100%"
                popper-class="checkStrictly"
                :disabled="isLevelType"
                @change="selectSuperior"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="按钮名称" prop="name" /></td>
            <td>
              <gx-input
                v-model="fromData.name"
                gx-maxlength="varchar50"
                type="text"
              />
            </td>
          </tr>
          <tr>
            <td><el-form-item label="备注" /></td>
            <td>
              <gx-input
                v-model="fromData.buttonRemark"
                gx-maxlength="varchar4000"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :show-word-limit="true"
                gx-placeholder="placeholderText4000"
              />
            </td>
          </tr>
        </table>
      </el-form>
      <!-- 底部操作按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button :loading="confrimLoading" type="primary" @click="submit('fromData')">
          确定
        </el-button>
        <el-button :loading="confrimLoading" @click="dialog = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* 接口 */
import { saveOrUpdateButton } from '@/api/common/buttonMgmt' // 保存按钮信息
/* 公共方法 */
import { characters1_auto } from '@/assets/js/validate' // 校验输入内容
import { cloneObject } from '@/assets/js/utils' // 深克隆
/* 混入-字典信息 */
import { buttonMgmtGrounpMixin } from './mixins/buttonMgmtGrounpMixin' // 按钮管理字典信息

export default {
  name: 'ButtonMgmtDialog',
  mixins: [buttonMgmtGrounpMixin],
  props: {
    // 按钮数据
    buttonList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      confrimLoading: false, // btnloading
      dialog: false, // 弹框打开状态 true 打开 false关闭 默认关闭
      title: '', // 标题
      type: '', // add  rowAdd新增 edit 编辑
      isLevelType: false, // 00 一级 01子级 一级禁用
      fromData: {
        id: '', // 编辑id/新增子节点时的父级ID
        name: '', // 按钮名称
        state: '', // 新增 编辑状态 新增00 编辑 01
        status: '01', // 是否可用 01可用 00 不可用
        level: '01', // 按钮等级 00 一级 01 二级 默认01
        parentId: '', // 父级id
        buttonRemark: '' // 按钮备注
      },
      // 上级按钮联动选择设置参数
      defaultParams: {
        children: 'children',
        label: 'name',
        value: 'id',
        checkStrictly: true,
        expandTrigger: 'hover',
        disabled: 'disabled'
      },
      superiorBtnData: [], // 上级按钮数据
      // 校验
      rules: {
        name: [{ required: true, validator: characters1_auto, trigger: 'blur' }], // 按钮名称
        status: [{ required: true, message: '请选择', trigger: 'change' }], // 是否可用
        level: [{ required: true, message: '请选择', trigger: 'change' }], // 按钮等级
        parentId: [{ required: true, message: '请选择', trigger: 'blur' }] // 上级按钮
      }
    }
  },
  methods: {
    // 打开弹框
    open(data) {
      this.dialog = true // 打开弹框
      this.type = data.type // 判断新增和编辑
      this.superiorBtnData = this.handleButtonlist(cloneObject(this.buttonList)) // 对父级传入的按钮数据处理返回处理后的新数据
      this.title = data.type === 'add' || data.type === 'rowAdd' ? '新增按钮' : data.type === 'edit' ? '编辑按钮' : '标题' // 标题
      this.isLevelType = !!(data.type === 'rowAdd' || data.type === 'edit') // 新增子级或者修改按钮时禁用选择按钮等级和上级按钮的选择
      // 编辑
      if (this.type === 'edit') {
        this.fromData = { ...data.row }
        delete this.fromData.code
        delete this.fromData.children
      } else {
        this.fromData = {
          id: '', // 编辑id/新增子节点时的父级ID
          name: '', // 按钮名称
          state: '', // 新增 编辑状态 新增00 编辑 01
          status: '01', // 是否可用 01可用 00 不可用
          level: '01', // 按钮等级 00 一级 01 二级 默认01
          parentId: '', // 父级id
          buttonRemark: '' // 按钮备注
        }
        // 新增行的子级
        if (data.type === 'rowAdd') {
          this.fromData.parentId = data.row.id // 获取按钮主键id作为新增子级保存参数中的父级id
        }
        this.$nextTick(function() {
          // 初始化表单校验
          this.$refs.fromData.clearValidate()
        })
      }
    },
    /*
    *上级按钮选择事件
    @params pitchOnArr 选中的上级按钮数据返回数组,值为每次选中等级的id [一级id，二级id] 读取其最后一项的id作为新增按钮保存参数中的父级id
    */
    selectSuperior(pitchOnArr) {
      const len = pitchOnArr.length // 获取选中数据的长度
      if (len) { // 非空判断
        this.fromData.parentId = pitchOnArr[len - 1] // 父级id
        this.$refs.cascader.dropDownVisible = false // 监听值发生变化就关闭它
      }
    },
    /*
    * 新增按钮/编辑按钮提交事件
    */
    submit(fromName) {
      this.$refs[fromName].validate(valid => {
        // 校验成功
        if (valid) {
          this.confrimLoading = true // btnLoading
          // 新增
          if (this.type === 'add' || this.type === 'rowAdd') {
            // state：新增/编辑按钮的状态值 00 添加 01编辑
            this.fromData.state = '00'
          } else if (this.type === 'edit') { // 编辑
            this.fromData.state = '01'
          }
          this.saveBtn() // 调用新增/编辑保存接口
        } else {
          this.confrimLoading = false // btnLoading
        }
      })
    },
    /*
    * 新增/编辑保存接口
    *@params { id:编辑id/新增子节点时的父级ID, name:按钮名称,state:新增或编辑的状态，status：是否可用， level：按钮等级，parentId父级id，buttonRemark：按钮备注}
    */
    saveBtn() {
      saveOrUpdateButton(this.fromData).then(() => {
        this.confrimLoading = false // btnLoading
        this.dialog = false
        this.$message.success({ message: '操作成功' })
        // 刷新父组件列表
        this.$parent.getButtonList()
      }).catch(() => {
        this.confrimLoading = false
        this.dialog = false
      })
    },
    /*
    * 处理按钮数据方法(按钮等级仅显示三级在显示选择上级时仅展示前两级数据)
    * @params buttonList 按钮数据
    * 按钮code码是已_拼接的 001_001_001 根据_对code码变数组，利用数据长度来判断是否是一级 二级 三级 然后将二级以下的children置空
    */
    handleButtonlist(buttonList) {
      buttonList.forEach(itemTree => {
        if (itemTree.code.split('_') && itemTree.code.split('_').length >= 2) { // 判断大于二级的数据
          this.$set(itemTree, 'children', '') // 置空children值
        } else {
          this.handleButtonlist(itemTree.children) // 递归选择
        }
      })
      return buttonList
    }
  }

}
</script>

<style lang="less" scoped>

</style>
