<template>
  <div>
    <a-form class="form-box" style="height: 500px;overflow: auto;margin-bottom: 15px;" :form="form" @submit="handleSubmit">
      <a-tree
        checkable
        @check="onCheck"
        @expand="onExpand"
        :autoExpandParent="autoExpandParent"
        v-model="checkedKeys"
        :treeData="treeData"
      />
    </a-form>
    <a-form-item :wrapper-col="{ offset: 3 }">
      <a-button id="menusAuth-handleSubmit" type="primary" @click="handleSubmit()">
        保存
      </a-button>
    </a-form-item>
  </div>
</template>

<script>
import { findLsMenu, saveLsMouldMenu, findDdMenu, saveDdMouldMenu } from '@/api/menuSet'
export default {
  name: 'MenusAuth',
  props: {
    types: {
      type: String,
      default: 'dd'
    }
  },
  data () {
    return {
      menuIds: '',
      treeData: [],
      expandedKeys: [],
      autoExpandParent: false,
      checkedKeys: [],
      checkedData: [],
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'menuModal' })
    }
  },
  methods: {
    tabChange (v) {
      console.log(v)
    },
    // 初始化树
    treeInit (dr) {
      this.treeData = dr.menuList
      this.menuIds = dr.mould.menuIds
      if (this.menuIds) {
        const arr = this.menuIds.split(',')
        const temp = []
        arr.map(item => {
          temp.push(Number(item))
        })
        this.checkedData = temp
        this.expandedKeys = temp
        // 找出叶子节点
        this.findLeaf(this.treeData, temp)
      }
    },
    // 获取连锁树数据
    getfindLsMenu () {
      findLsMenu().then(res => {
        console.log(res, '+++++++++连锁+++++++++')
        if (res.status == 200) {
          this.treeInit(res.data)
        }
      })
    },
    // 获取单店树数据
    getfindDdMenu () {
      findDdMenu().then(res => {
        console.log(res, '+++++++++单店+++++++++')
        if (res.status == 200) {
          this.treeInit(res.data)
        }
      })
    },
    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys, info) {
      this.checkedData = [...checkedKeys, ...info.halfCheckedKeys]
      this.checkedKeys = checkedKeys
    },
    // 勾选已选的菜单
    findLeaf (data, arr) {
      for (let i = 0; i < data.length; i++) {
        const node = data[i]
        if (node.children) {
          this.findLeaf(node.children, arr)
        } else {
          const hasNode = arr.find(item => {
            return item == node.id
          })
          if (hasNode) {
            this.checkedKeys.push(node.id)
          }
        }
      }
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log(this.checkedData)
          if (this.checkedData.length == 0) {
            return this.$message.warning('请先选择菜单')
          }
          const arr = this.checkedData.join(',')
          if (this.types == 'dd') {
            this.ddSave({ menuIds: arr })
          } else {
            this.lsSave({ menuIds: arr })
          }
        }
      })
    },
    // 保存单店
    ddSave (pars) {
      saveDdMouldMenu(pars).then(res => {
        console.log(res, 'res--save')
        if (res.status + '' === '200') {
          this.$message.success(res.message ? res.message : '保存成功')
        } else {
          // this.$message.warning(res.message)
        }
      })
    },
    // 保存连锁
    lsSave (pars) {
      saveLsMouldMenu(pars).then(res => {
        console.log(res, 'res--save')
        if (res.status + '' === '200') {
          this.$message.success(res.message ? res.message : '保存成功')
        } else {
          // this.$message.warning(res.message)
        }
      })
    }
  },
  mounted () {
    // 单店
    if (this.types == 'dd') {
      this.getfindDdMenu()
    } else {
      this.getfindLsMenu()
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'menu' })
  }
}
</script>

<style>
</style>
