<!--
  @description: 物料分类-新增/编辑弹框
  @author:张远远
  @routerPath:
  @date:  2021/4/2 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"
        style="margin-bottom: 10px"
      >
        <table class="from_table">
          <tr>
            <td><el-form-item label="分类等级" prop="typeLevel" /></td>
            <td>
              <el-select
                v-model="fromData.disLevel"
                style="width: 100%;"
                placeholder="请选择"
                :disabled="!canEdit"
                @change="currentTypeChange"
              >
                <el-option
                  v-for="(item,index) in typeLevelList"
                  :key="index"
                  :label="item.typename"
                  :value="item.typecode"
                />
              </el-select>
            </td>
          </tr>
          <!--这块做父级选择框遍历，如果没父级就不展示-->
          <!--1级到选择级前一级-->
          <tr v-for="(item,index) in (fromData.disLevel-1)" :key="index">
            <td><el-form-item :label="typeLevelList[index].typename" prop="typeSelectArr" /></td>
            <td>
              <el-select
                v-model="fromData.typeSelectArr[index]"
                style="width: 100%;"
                placeholder="请选择"
                :disabled="!canEdit"
                @change="selected($event, index)"
                @focus="position=index"
              >
                <el-option
                  v-for="(item2,index2) in filterTypeList[index]"
                  :key="index2"
                  :label="item2.categoryName"
                  :value="item2.id"
                />
              </el-select>
            </td>
          </tr>
          <!--分类编码-->
          <tr>
            <td><el-form-item label="分类编码" prop="id" /></td>
            <td>
              <gx-input
                v-model="fromData.id"
                type="text"
                :disabled="true"
              />
            </td>
          </tr>
          <!--分类名称-->
          <tr>
            <td><el-form-item label="分类名称" prop="categoryName" /></td>
            <td>
              <gx-input
                v-model="fromData.categoryName"
                gx-maxlength="varchar50"
                type="text"
              />
            </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 { saveOrUpdatePurcatalogCategory } from '@/api/procurement/purchasplan' // 新增/编辑物料信息
import { getPurcatalogCategoryTree } from '@/api/common/tools'// 物料分类
import { cloneObject } from '@/assets/js/utils' // 深克隆
export default {
  name: 'MaterialTypeAddDialog',
  props: {
    // 物料分类列表传入数据
    typeList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      confrimLoading: false, // btnloading
      dialog: false, // 弹框打开状态 true 打开 false关闭 默认关闭
      title: '', // 标题
      type: '', // add  rowAdd新增 edit 编辑
      position: null,
      canEdit: true,
      categoryParentId: '', // 父级id
      typeLevelList: [
        { typename: '一级菜单', typecode: 1 },
        { typename: '二级菜单', typecode: 2 },
        { typename: '三级菜单', typecode: 3 }
      ],
      filterTypeList: [], // 包含编辑或新增子集时的过滤树状数据
      fromData: {
        disLevel: 1, // 选取分类等级
        typeSelectArr: [], // 选区各个父辈分类等级编码
        id: '', // 分类编码
        categoryName: '' // 分类名称
      },
      // 校验
      rules: {
        categoryName: [{ required: true, message: '不能为空', trigger: ['blur', 'change'] }], // 分类名称
        disLevel: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }], // 分类等级
        typeSelectArr: [{ required: true, message: '请选择', trigger: 'change' }] // 上级分类
      }
    }
  },
  methods: {
    // 打开弹框 params: object data.row 行数据 data.type 操作类型
    open(data) {
      this.dialog = true // 打开弹框
      this.type = data.type // 判断新增和编辑
      this.$nextTick(function() {
        // 初始化表单校验
        this.$refs.fromData.clearValidate()
      })
      this.title = data.type === 'add' || data.type === 'rowAdd' ? '创建分类' : data.type === 'edit' ? '编辑分类' : '标题' // 标题
      // 初始化一些数据
      this.handleTypeList(data)
    },
    // 新建物料分类等级改变
    currentTypeChange() {
      // 初始化祖父级的分类下拉框数据
      this.addSelectList('', 0)
    },
    // 父级分类选择框变动，val 为选中值，index 为下标
    selected(val, index) {
      this.addSelectList(val, ++index)
    },
    // 获取分类选择框下一级下拉选项
    addSelectList(parentId, index) {
      const data = {
        parentId: parentId // 物料分类编码
      }
      getPurcatalogCategoryTree(data).then(res => {
        this.filterTypeList.splice(index, this.filterTypeList.length, [...res.data])
      })
    },
    /*
    * 新增/编辑物料分类提交事件
    */
    submit(fromName) {
      this.$refs[fromName].validate(valid => {
        // 校验成功
        if (valid) {
          this.confrimLoading = true // btnLoading
          // 新增
          if (this.type === 'add') {
            this.categoryParentId = this.fromData.disLevel > 1 ? this.fromData.typeSelectArr[this.fromData.disLevel - 2] : ''
          }
          this.saveBtn() // 调用新增/编辑保存接口
        } else {
          this.confrimLoading = false // btnLoading
        }
      })
    },
    /*
    * 新增/编辑保存接口
    *@params {level：分类等级}
    */
    saveBtn() {
      const data = {
        // categoryName: this.fromData.categoryName,
        // disLevel: this.fromData.disLevel,
        // id: this.fromData.id,
        ...this.fromData,
        categoryCode: this.fromData.id,
        categoryParentId: this.categoryParentId
      }
      saveOrUpdatePurcatalogCategory(data).then(() => {
        this.confrimLoading = false // btnLoading
        this.dialog = false
        this.$message.success({ message: '操作成功' })
        // 刷新父组件列表
        // this.$parent.getMaterialTypeList()
        this.$emit('addSuccessful')
      }).catch(() => {
        this.confrimLoading = false
        this.dialog = false
      })
    },
    /*
    * 初始化处理祖先级分类数据的方法
    * @params data 父级列表组件传入数据，data.row 行数据，data.type 操作类型 type: add ||rowAdd ||edit 新增 新增子集 编辑
    */
    handleTypeList(data) {
      this.fromData.typeSelectArr = []
      var parentsId_arr = [] // 要编辑或则新增子集的祖父级的id
      for (var i = 1; i <= data.row.disLevel; i++) {
        parentsId_arr.push(data.row.id.substring(0, i * 3)) // 切割字符串
      }
      if (data.type === 'edit') {
        this.canEdit = false
        // 编辑
        this.categoryParentId = data.row.categoryParentId
        this.fromData.disLevel = data.row.disLevel
        this.getfiltTreeData(this.typeList, parentsId_arr)
        this.fromData.categoryName = data.row.categoryName
        this.fromData.id = data.row.id
      } else if (data.type === 'rowAdd') {
        this.canEdit = false
        // 新增子集
        this.fromData.categoryName = ''
        this.fromData.id = ''
        this.categoryParentId = data.row.id
        this.fromData.disLevel = data.row.disLevel + 1
        this.getfiltTreeData(this.typeList, parentsId_arr)
      } else {
        // 新增
        this.fromData.categoryName = ''
        this.canEdit = true
        this.fromData.disLevel = 1
        this.categoryParentId = ''
        this.fromData.id = ''
      }
    },
    /*
    * 递归处理祖先级分类树形数据为平行数组数据
    * @params typeList 父级列表组件传入数据，parentsId_arr 要编辑或则新增子集的祖父级的id
    */
    getfiltTreeData(typeList, parentsId_arr) {
      const that = this
      typeList.forEach(function(e) {
        if (parentsId_arr.indexOf(e.id) !== -1) {
          that.fromData.typeSelectArr.push(e.id) // 处理祖先级分类选中
          const levData = cloneObject(e)
          levData.children = null // 去掉不必要的数据
          var arr1 = [levData]
          that.filterTypeList.push(arr1) // 处理祖先级分类的可选择数据，因为不可编辑祖先的，所以只用一条数据
          if (e.children && e.id !== parentsId_arr[parentsId_arr.length - 1 ]) {
            that.getfiltTreeData(e.children, parentsId_arr) // 递归处理数据
          } else {
            return
          }
        } else {
          return
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
