<template>
  <el-dialog :title="dialogObj.title" :visible.sync="$parent.treedialogVisible" :close-on-click-modal="false"  @close="resetForm('form')">
      <_TREE :search=searchable :data='treeData'  :nodeKey="nodeKey"
                     :showCheckBox=showCheckBox :expandAll=expandAll ref='tree' :highlight='true'
                     :defaultCheckedKeys=defaultCheckedKeys  :check-change="handleCheckChange"></_TREE>

    <div slot="footer" class="dialog-footer" style="text-align: right">
      <el-button @click="resetForm('form')">取 消</el-button>
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import _TREE from '@/components/Template/Tree/Tree.vue'
import api from '@/api'
import log from '@/log'
import { mapState } from 'vuex'
export default {
  props: ['dialogObj', 'treedialogVisible'],
  data () {
    return {
      msg: '某某市烟草公司',
      nodeKey: 'id',
      defaultCheckedKeys: [],
      searchable: true, // 是否带搜索框
      showCheckBox: true, // 是否带复选框
      expandAll: true, // 是否展开所有节点
      treeData: [],
      comitArr: [],
      dialogVisible: false,
      changeArr: [],
      comitchangeArr: []
    }
  },
  methods: {
    //  组织机构树初始化
    treeInit () {
      api.requestJava('POST', this.dialogObj.getDataObj.url, this.dialogObj.getDataObj.params)
        .then((request) => {
          if (Number(request.data.code) === 200) {
            this.treeData = this.mapfuc(request.data.data)
            // this.treeData = request.data.data
            console.log(this.treeData)
          } else if (Number(request.data.code) === 401) {
            this.$message('登录失效')
            // this.dialogObj5.dialogVisible = true
          } else {
            this.$notify.error({title: '提示', message: request.data.message})
            throw new Error(JSON.stringify(request))
          }
        })
        .catch((err) => {
          let culprit = this.$route.name
            // this.toggleLoading()
          log.work(err, culprit)
        })
    },
    handleCheckChange (data, checked, indeterminate) {
      this.comitArr.forEach(function (item, index) {
        if (item.id === data.id) {
          item.changeflag = !item.changeflag
          if (checked === false) {
            item.isChecked = '1'
          } else {
            item.isChecked = '0'
          }
        }
      })
      // let ishave = this.changeArr.some(function (item, index, array) {
      //   return item.id === data.id
      // })
      // if (ishave) {
      //   this.changeArr.forEach(function (item, index) {
      //     if (item.id === data.id) {
      //       if (checked) {
      //         item.isChecked === '0'
      //       } else {
      //         item.isChecked === '1'
      //       }
      //     }
      //   })
      // } else {
      //   this.changeArr.push(data)
      // }
      // console.log(this.changeArr)
    },
    mapfuc (arr) {
      const that = this
      arr.map(function (o) {
        if (o.isChecked === '0') {
          that.defaultCheckedKeys.push(o.id)
        }
        if (that.dialogObj.getDataObj.params.hasOwnProperty('roleId')) {
          o.roleId = that.dialogObj.getDataObj.params.roleId
        }
        if (that.dialogObj.type === 'role') {
          o.createdBy = ''
        }
        o.changeflag = false
        that.comitArr.push(o)
        if (o.children.length > 0) {
          that.mapfuc(o.children)
        }
      })
      return arr
    },
    mapresfuc (checkedArr) {
      // const that = this
      // console.log(this.comitArr)
      this.comitArr.forEach(function (o) {
        let isContain = checkedArr.some(function (item, index, array) {
          return item === o.id
        })
        // console.log(isContain + '33333333')
        if (isContain) {
          o.isChecked = '0'
        } else {
          o.isChecked = '1'
        }
        // that.comitArr.push(o)
        // if (o.children.length > 0) {
        //   that.mapresfuc(o.children)
        // }
      })
    },
    comitURL (arr) {
      api.requestJava('POST', this.dialogObj.conmitObj.url, this.comitchangeArr)
        .then((request) => {
          if (Number(request.data.result.code) === 200) {
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            })
          } else if (Number(request.data.result.code) === 401) {
            this.$message('登录失效')
            // this.dialogObj5.dialogVisible = true
          } else {
            this.$notify.error({title: '提示', message: request.result.message})
            throw new Error(JSON.stringify(request))
          }
        })
        .catch((err) => {
          let culprit = this.$route.name
            // this.toggleLoading()
          log.work(err, culprit)
        })
    },
    resetForm (formName) {
      // this.dialogObj.dialogVisible = false
      this.treeData = []
      this.$parent.treedialogVisible = false
    },
    submitForm (formName) {
      // this.dialogObj.dialogVisible = false
      // this.treedialogVisible = false
      this.$parent.treedialogVisible = false
      // let checkedArr = this.$refs.tree.getCheckedKeys()
      // // console.log(checkedArr)
      // this.mapresfuc(checkedArr)
      // console.log(this.comitArr)
      this.comitchangeArr = this.comitArr.filter(function (item) {
        return (item.changeflag === true && item.children.length <= 0)
      })
      // let arr = this.$refs.tree.getCheckedKeys()
      this.treeData = []
      this.comitURL(this.comitchangeArr)
    }
  },
  mounted () {
    // this.treeInit()
    // this.roletreeInit()
    // this.treeData = this.mapfuc(this.treeData)
    // this.dialogVisible = this.dialogObj.dialogVisible
  },
  watch: {
    treedialogVisible (newv, old) {
      if (newv) {
        this.comitArr = []
        this.comitchangeArr = []
        this.defaultCheckedKeys = []
        this.treeInit()
      }
      // this.treedialogVisible = newv
    }
  },
  computed: {
    ...mapState([
      'tree'
    ])
  },
  components: {
    _TREE
  }
}
</script>
<style scoped>
.item__label_popup {
    text-align: right;
    vertical-align: middle;
    float: right;
    font-size: 14px;
    color: #48576a;
    line-height: 1;
    padding: 11px 8px 11px 0;
    box-sizing: border-box;
    /* display: inline-block; */
}
.el-input, .el-input__inner {
    /*width: '';*/
    display: inline-block;
}
</style>
