<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item
            v-for="(item, key) in pipeList"
            :key="key"
            :title="item.type"
            :name="key + 1"
          >
            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                v-for="(headitem, key) in tableHead"
                :key="key"
                :prop="headitem.name"
                :label="headitem.label"
                :width="headitem.width"
              >
              </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>
              <span>需要系统图：</span>
              <el-switch
                v-model="value"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
            <div>
              <span>精细化机房</span>
              <el-checkbox-group v-model="checkList">
                <el-checkbox
                  v-for="(item, key) in mrList"
                  :key="key"
                  class="checkList"
                  :label="item.name"
                ></el-checkbox>
                <el-checkbox class="checkList" label="复选框 A"></el-checkbox>
              </el-checkbox-group>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { major_mr } from "@/api/workScope.js";
export default {
  data() {
    return {
      activeName: "1",
      pipeList: [
        {
          type: "中央供冷系统",
          teble: [],
        },
        {
          type: "应急照明系统",
          teble: [],
        },
      ],
      tableHead: [
        {
          label: "管道类型名",
          name: "pipeName",
          width: "180",
        },
        {
          label: "仅干管",
          name: "onlyMain",
          width: "180",
        },
        {
          label: "含支路管道",
          name: "andBranch",
          width: "180",
        },
        {
          label: "其他",
          name: "anthor",
          width: "180",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          pipeName: "王小虎",
          label: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      // 机房list
      mrList: [],
      checkList: [],
    };
  },
  mounted() {
    major_mr({ target: "rtn" }).then((res) => {
      this.mrList = res.rtn.map((item) => {
        item.id = item.code;
        return item;
      });
    });
  },
};
</script>
<style lang="less" scoped>
.checkList {
  display: block;
}
</style>