<template>
  <div class="empower_page">
    <div class="top_btn">
      菜单赋权
      <el-button type="primary" class="save_btn" :loading="loading" @click="save">保存</el-button>
    </div>
    <div class="empower_content">
      <div class="item">
        <div class="top_box">
          <el-form inline label-width="100px">
            <el-form-item class="select_type">
              <el-select v-model="type" placeholder="请选择" @change="changeselect">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="type" label="账号">
              <el-col :span="15">
                <el-input v-model="form.account" placeholder="请输入账号" />
              </el-col>
              <el-col :span="6">
                <el-button @click="getSpecialMerchantMenu">搜索</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </div>
        <div class="menu_tree">
          <el-checkbox v-model="checked" @change="changeCheck">全选</el-checkbox>
          <el-tree
            ref="merchantTree"
            :data="form.menuList"
            show-checkbox
            default-expand-all
            node-key="id"
            highlight-current
            :props="defaultProps"
            @check-change="checkChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Menu from '@/api/Menu'
export default {
  data() {
    return {
      checked: false,
      loading: false,
      options: [
        { label: '同步所有商家', value: 0 },
        { label: '同步指定商家', value: 1 }
      ],
      type: 0,
      account: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      platFormMenu: [],
      mechantMenu: [],
      selected: [],
      form: {
        menuList: [],
        account: null
      },
      allKeys: []

    }
  },
  computed: {
    left () {
      return require('@/assets/menu-left.png')
    },
    right () {
      return require('@/assets/menu-right.png')
    }
  },
  created() {
    this.getAllMerchanMenu()
  },
  mounted() {

  },
  methods: {
    changeCheck(v) {
      if (v) {
        this.$refs.merchantTree.setCheckedKeys(this.allKeys)
      } else {
        this.$refs.merchantTree.setCheckedKeys([])
      }
    },
    changeselect(v) {
      if (!v) {
        this.getAllMerchanMenu()
      }
    },
    async getPlatformMenu() {
      const res = await Menu.getPlatformMenu()
      const resData = res.data
      if (resData.code === 0) {
        this.platFormMenu = resData.data
      }
    },
    async getAllMerchanMenu() {
      const res = await Menu.getAllMerchanMenu()
      const resData = res.data
      if (resData.code === 0) {
        const t = resData.data
        this.changeTreeData(t)
        this.form.menuList = t
        this.getSelected(t)
        this.$nextTick(() => {
          this.setCheckedNodes()
        })
      }
    },
    changeTreeData(data) {
      if (data && data.length) {
        data.map(item => {
          if (item.children && item.children.length && (item.children.findIndex(k => k.isSync === 0) > -1)) {
            item.isSync = 0
          }
        })
      }
    },
    // 获取指定商家的菜单
    async getSpecialMerchantMenu() {
      const res = await Menu.getSpecialMerchantMenu(this.form.account)
      const resData = res.data
      if (resData.code === 0) {
        // this.form.menuList = resData.data
        const t = resData.data
        this.changeTreeData(t)
        this.form.menuList = t
        this.getSelected(t)
        this.$nextTick(() => {
          this.setCheckedNodes()
        })
      }
    },
    save() {
      this.loading = true
      Menu.saveMenu(this.form).then(res => {
        this.loading = false
        if (res.data.code === 0) {
          this.$message.success('菜单同步成功')
        }
      })
    },
    getSelected(data) {
      const t = []
      const arr = []
      if (data && data.length) {
        data.forEach(item => {
          if (item.isSync) {
            t.push(item.id)
          }
          arr.push(item.id)
          if (item.children && item.children.length) {
            item.children.forEach(ob => {
              if (ob.isSync) {
                t.push(ob.id)
              }
              arr.push(ob.id)
            })
          }
        })
      }
      this.selected = t
      this.allKeys = arr
      if (t.length === arr.length) {
        this.checked = true
      }
    },
    setCheckedNodes() {
      if (this.selected.length) {
        this.$refs.merchantTree.setCheckedKeys(this.selected)
      }
    },
    checkChange(a, b, c, d) {
      a.isSync = b ? 1 : 0
    }
  }
}
</script>

<style lang='less' scoped>
.empower_page {
    min-height: 500px;
    margin-top:20px;
    padding: 20px;
    background-color: #ffffff;

    .top_btn {
        height: 50px;
        font-size: 20px;
        line-height: 50px;
        margin-bottom: 20px;
        border-bottom: 1px #E0E5EB solid;
        .save_btn {
            float: right;
        }
    }

    .empower_content {
        // overflow: hidden;
        .item {
            min-height: 700px;
            // float: left;
            box-sizing: border-box;
            &:nth-child(1), &:nth-child(3) {
                // width:calc(50% - 75px);
                width: 50%;
                margin: 20px auto;
                background:rgba(255,255,255,1);
                box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
                // border: 1px #E0E5EB solid;
                border-radius:4px;
                .top_box {
                    height: 60px;
                    line-height: 60px;
                    font-size: 18px;
                    border-radius: 4px 4px 0 0;
                    background-color: #F7F7F7;
                    padding: 0 10px;
                }
                .menu_tree {
                  padding: 0 20px;
                }
            }

            &:nth-child(2) {
                width: 150px;
                height: 100%;
                position: relative;
                .btn_list {
                    height: 150px;
                    width: 40px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -75px;
                    margin-left: -20px;
                    p {
                        height: 60px;
                        text-align: center;
                        background-color: #EEEEEE;
                        border-radius:4px;
                        padding-top: 18px;
                        img {
                            width:24px;
                            height:24px;
                        }
                        &:hover {
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}

.select_type {
  float: left;
}

/deep/.el-form {
    overflow: hidden;
}

/deep/.el-form-item {
  float: right;
}

/deep/.select_type {
  float: left;
}
/deep/.el-form-item__content {
        line-height: 60px !important;
    }
/deep/ label {
    font-weight: 400;
}
/deep/.el-col-6  {
    margin-left: 10px;
}
</style>
