<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <el-tree :data="data2" highlight-current node-key="id" default-expand-all :props="defaultProps2" ref="checkedTree2" @node-click="handleNodeClick">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="6" v-show="isShow">
        <el-card class="box-card">
          <el-tree :data="data1" check-strictly highlight-current node-key="id" show-checkbox default-expand-all :default-checked-keys="checkedArr" :props="defaultProps1" ref="checkedTree1" @check="getData1">
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="6" v-show="isShow">
        <el-card class="box-card">
          <el-tree :data="data3" check-strictly highlight-current node-key="id" show-checkbox default-expand-all :default-checked-keys="checkedArr1" :props="defaultProps3" ref="checkedTree3" @check="getData3">
          </el-tree>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px">
      <el-button type="primary" @click="accept">授权</el-button>
    </el-row>
    <!-- <el-row>
      <el-table tooltip-effect="dark" style="width: 100%;" align="center" border stripe highlight-current-rowv-loading="tableLoading" :data="tableData">
        <el-table-column align="center" label="序号" width="60">
          <template slot-scope="scope"><span>{{scope.$index+1}}</span></template>
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" label="一级菜单" width="310px" prop="priceTypeName">
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" label="二级菜单" prop="useYear">
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" label="三级菜单" prop="useYear">
        </el-table-column>
        <!-- <el-table-column align="center" :show-overflow-tooltip="true" label="维护日期" prop="useYear">
        </el-table-column> -->
    <!-- <el-table-column align="center" :show-overflow-tooltip="true" label="状态" prop="useYear">
        </el-table-column> -->
    <!-- <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="light" content="修改" placement="top">
              <el-button class="button operate_edit_btn"  type="primary" @click.stop="see('update',scope.row)">
                <i class="iconfont">&#xe693;</i>
              </el-button>
            </el-tooltip> -->
    <!-- <el-tooltip class="item" effect="light" content="禁用" placement="top">
              <el-button class="button operate_forbidden_btn" type="primary" @click.stop="see('see',scope.row)">
                <i class="iconfont">&#xe7cf;</i>

              </el-button>
            </el-tooltip> -->
    <!-- <el-tooltip class="item" effect="light" content="删除" placement="top">
              <el-button class="button"  type="primary" @click.stop="deleteFn(scope.row)">
                <i class="el-icon-delete"></i>
              </el-button>
            </el-tooltip> -->
    <!-- </template>
        </el-table-column>
      </el-table>
      <!-- 分页开始 -->
    <!-- <div class="pagination-container">
        <el-pagination class="right" :current-page.sync="limit.page" :page-size="limit.size" :page-sizes="[10,20,30,40]" :total="limit.total" @size-change="handleChangeSize" @current-change="handleCurrentChangePage" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-row> -->

  </div>
</template>
<script>
import { allIndexTree, zbppggsSave, getZbppggsById } from '@/api/indexManage/index'
import { getBrand } from '@/api/dataDict/index'
import { connect } from 'tls';
import { constants } from 'crypto';
export default {
  data() {
    return {
      isShow: false,
      defaultExpanded: [],
      expanded: [],
      data2: [],
      data1: [],
      data3: [],
      tableData: [],
      limit: {
        page: 1,
        size: 10,
        total: 0
      },
      checkedArr: [],
      checkedArr1: [],
      defaultProps2: {
        label: 'indName',
        value: 'id',
        children: 'children'
      },
      defaultProps1: {
        children: 'children',
        label: 'dictName',
        value: 'id'
      },
      defaultProps3: {
        children: 'children',
        label: 'dictName',
        value: 'id'
      },
      // 多选树
      props: {
        label: 'name',
        children: 'zones'
      },
      count: 1,
      monitorForm: {}
    }
  },
  methods: {
    accept() {
      if (this.monitorForm.breedId === "") {
        this.$message({
          type: 'warning',
          message: '品牌未勾选'
        })
      } else if (this.monitorForm.specsId === "") {
        this.$message({
          type: 'warning',
          message: '规格未勾选'
        })
      }
      else {
        zbppggsSave(this.monitorForm).then(res => {
          this.$message({
            type: 'success',
            message: '授权成功'
          })
        })
      }
    },
    handleChangeSize(value) {

    },
    handleCurrentChangePage(value) {
    },
    getData1(a, b) {
      this.monitorForm.breedId = ""
      if (a.dictName == '品牌树') {
        this.$refs.checkedTree1.setCheckedKeys([])
      } else {
        if (b.checkedKeys.length > 0) {
          this.$refs.checkedTree1.setCheckedKeys([a.id])
          this.monitorForm.breedId = (a.id).toString()
          this.monitorForm.breedName = a.dictName
        }
      }


    },
    getData3(a, b) {
      this.monitorForm.specsId = ""
      if (a.dictName == '规格树') {
        this.$refs.checkedTree1.setCheckedKeys([])
      } else {
        if (b.checkedKeys.length > 0) {
          this.$refs.checkedTree3.setCheckedKeys([a.id])
          this.monitorForm.specsId = (a.id).toString()
          this.monitorForm.specsName = a.dictName
        }
      }

    },
    filterNode(value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value.inputCon) !== -1 && data.orgType.indexOf(value.orgType) !== -1;
    },
    handleNodeClick(value) {

      this.isShow = true
      this.$refs.checkedTree1.setCheckedKeys([]);
      this.$refs.checkedTree3.setCheckedKeys([]);

      this.monitorForm.indicatorId = value.id


      getZbppggsById(value.id).then(res => {
        if (this.checkedArr.length > 0 || this.checkedArr1 > 0) {
          this.checkedArr = []
          this.checkedArr1 = []
        }
        if (res.data !== null) {
          this.monitorForm = res.data
          this.checkedArr.push(res.data.breedId)
          this.checkedArr1.push(res.data.specsId)
        }
      })
    }
  },
  created() {
    allIndexTree().then(res => {
      this.data2 = res.data
    })
    // 获取数据字典 品牌
    getBrand('PP_GROUP').then(res => {
      let pObj = {
        dictName: '品牌树',
        children: res.data
      }
      this.data1.push(pObj)
      // this.data1 = res.data.resultList

    })
    // 获取数据字典 规格
    getBrand('GG_GROUP').then(res => {
      let pObj1 = {
        dictName: '规格树',
        children: res.data
      }
      this.data3.push(pObj1)
    })
  }
}
</script>
