<template>
  <div class="lineBtn">
    <el-button type="primary" @click="dialogVisible = true">选择线路</el-button>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="1050px">
      <div class="lineList">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in lineListData"
            :label="item.id"
            :key="item.id"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
        <!-- {{ lineListData }} -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCheck">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getLineListJoggle } from "@/utils/api/index";
export default {
  data() {
    return {
      dialogVisible: false,
      checkList: [],
      lineListData: [],
      total: 0,
    };
  },
  mounted() {
    this.lineList();
    const storedArray = localStorage.getItem("checkListLocal");
    if (storedArray) {
      // 将JSON字符串转换回数组
      this.checkList = JSON.parse(storedArray);
    }
  },
  methods: {
    lineList() {
      getLineListJoggle({
        pageindex: 1,
        pagesize: 100,
      })
        .then((res) => {
          this.lineListData = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {});
    },
    saveCheck() {
      console.log(this.checkList);
      localStorage.setItem("checkListLocal", JSON.stringify(this.checkList));
      this.dialogVisible = false;
      this.$parent.getTablefun();
    },
  },
};
</script>
<style lang="less">
.lineBtn {
  .el-dialog__body {
    padding: 10px;
  }
  .lineList {
    .el-checkbox-group {
      .el-checkbox {
        width: 220px;
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
