<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-col class="btn-top" :span="24">
            <el-button type="primary" @click="saveData">确定范围</el-button>
            <el-button @click="clearData">清空</el-button>
          </el-col>
        </el-row>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item
            v-for="(item, key) in pipeList"
            :key="key"
            :title="item.name"
            :name="key + 1"
          >
            <div style="float: right">
              <el-button
                icon="el-icon-plus"
                @click="openaddPipe(item)"
                size="mini"
                >添加</el-button
              >
            </div>
            <el-table :data="item.tableData" stripe style="width: 100%">
              <el-table-column
                v-for="(headitem, key) in tableHead"
                :key="key"
                :prop="headitem.name"
                :label="headitem.label"
                :width="headitem.width"
              >
                <template slot-scope="scope">
                  <div v-if="scope.row[headitem.name] == 'name'">
                    {{ scope.row[headitem.name]  }}
                  </div>
                  <div v-else>
                  <el-checkbox :value="scope.row[headitem.name] == '1'?true:false"></el-checkbox>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <i
                    class="el-icon-delete"
                    @click="handleEdit(scope.$index, scope.row)"
                  ></i>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="table-type">
              <span>精细化机房</span>
              <el-checkbox v-model="checked"></el-checkbox>
            </div> -->
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
    <el-dialog
      title="新增管道"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div>
        <div>
          <el-cascader
            :options="pipeTypeList"
            v-model="addpipeValue"
            :props="{
              value: 'code',
              label: 'name',
              children: 'children',
            }"
            clearable
          ></el-cascader>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="addPipe">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  major_mr,
  major_sys,
  dict_pipe,
  set_sys_diagram,
  get_sys_diagram,
} from "@/api/workScope.js";
export default {
  data() {
    return {
      activeName: "1",
      pipeList: [],
      pipeTypeList: [], // 所有设备类型
      addpipeValue: [], // 新增管道类型
      tableHead: [
        {
          label: "管道类型名",
          name: "name",
          width: "180",
        },
        {
          label: "仅干管",
          name: "main",
          width: "180",
        },
        {
          label: "含支路管道",
          name: "branch",
          width: "180",
        },
        {
          label: "其他",
          name: "anthor",
          width: "180",
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      // 机房list
      checked: false,
      value: "",
      dialogVisible: false, // 弹窗显示
      currentItem: null, // 当前选中的系统管道
    };
  },
  methods: {
    // 更改勾选内容
    changePipe(node, choiceKey, v) {},
    // 删除管道
    handleEdit() {},
    // 添加管道
    openaddPipe(item) {
      const data = {};
      this.currentItem = null;
      dict_pipe(data).then((res) => {
        if (res.rtn && res.rtn.length) {
          this.pipeTypeList = res.rtn;
        }
        this.dialogVisible = true;
        this.currentItem = item;
      });
    },
    addPipe() {
      this.currentItem.tableData.push({
        name: 123,
        code: this.addpipeValue[1],
        main: 0,
        branch: 0,
        anthor: 0,
      });
      this.addpipeValue = [];
      this.dialogVisible = false;
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    // 保存数据
    saveData() {
      let data = {
        type: "device",
        target: "action",
        codes: this.choiceCheckList,
      };
      set_scope(data).then(() => {
        this.readData();
      });
    },
    //清空
    clearData() {
      this.$confirm("是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.choiceCheckList = [];
          this.$refs.tree.setCheckedKeys([]);
          this.saveData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    majorSys() {
      const data = { scopeFilter: true, target: "rtn" };
      major_sys(data).then((res) => {
        let arr = [];
        res.rtn.forEach((item) => {
          item.children && item.children.length > 0
            ? (arr = [...arr, ...item.children])
            : arr;
        });
        arr.map((item) => {
          return Object.assign(item, {
            tableData: [],
          });
        });
        // 读取所有系统下的管道
        this.pipeList = arr;
      });
    },
  },
  created() {
    this.majorSys();
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.checkList {
  display: block;
}
.btn-top {
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-end;
}
.table-type {
  margin-top: 12px;
  display: flex;
  span {
    margin-right: 12px;
  }
}
.dialog-footer {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
</style>