<template>
  <div class="deviceInformation">
    <div class="deviceBox">
      <div class="deviceBtnGroup">
        <h4>拍照时间表设置</h4>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click.native.stop="handleAdddevice()"
          >新增</el-button
        >
      </div>
      <div class="deviceTable">
        <el-table
          ref="multipleTable"
          :data="rulesListNew"
          stripe
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 40px)"
          @selection-change="handleSelectionChange"
          @row-click="handleRowClick"
          v-loading="loading"
        >
          <template slot="empty">
            <el-empty :image-size="160" description="暂无数据"></el-empty>
          </template>
          <el-table-column label="名称" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="时间表规则">
            <template slot-scope="scope">
              <p
                class="timeGz"
                v-for="(val, index) in scope.row.listTime"
                :key="index"
              >
                <span>{{ val.startTime }} </span>
                ~
                <span>{{ val.endTime }}</span>
                间隔：<b>{{ val.timeSpan }}分钟</b>
              </p>
            </template>
          </el-table-column>

          <el-table-column
            prop="remark"
            label="备注"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.stop="handleResive(scope.row)"
                type="text"
                >修改</el-button
              >
              <el-button
                type="text"
                class="deleteText"
                @click.native.stop="handleDelete(scope.row)"
                >删除</el-button
              >
              <el-button type="text" @click.native.stop="handleSet(scope.row)"
                >设置</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 新增时间表 -->
    <adddeviceDialog :title="title" ref="adddeviceDialogref"></adddeviceDialog>
    <!-- 设置时间表 -->
    <bdSchedule ref="setdeviceDialogref"></bdSchedule>
  </div>
</template>
<script>
import {
  getScheduleRulelListJoggle,
  deleteScheduleRulel,
} from "@/utils/api/index";
import adddeviceDialog from "./components/adddeviceDialog.vue";
import bdSchedule from "./components/bdSchedule.vue";

export default {
  name: "devicePhotoSchedule",
  components: {
    adddeviceDialog,
    bdSchedule,
  },
  data() {
    return {
      title: "", //弹窗标题
      rulesListNew: [],
      newList: [],
      listTime: [],
      //multipleSelection: [], //获取当前选中
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: true,
    };
  },
  created() {
    this.getruleList();
  },
  methods: {
    //获取时间表规则列表
    getruleList() {
      this.loading = true;
      getScheduleRulelListJoggle({
        pageindex: this.page,
        pagesize: this.pageSize,
      })
        .then((res) => {
          console.log(res);

          this.rulesList = res.data.list;
          this.total = res.data.total;
          this.rulesListNew = [];
          this.changeListData(this.rulesList);
          this.loading = false;
        })
        .catch((err) => {});
    },
    //时间表规则数据转化
    changeListData(data) {
      //循环数据
      for (let i = 0; i < data.length; i++) {
        console.log(data[i]);
        var ruleArr = [];
        //循环规则
        for (let k = 0; k < data[i].list.length; k++) {
          if (k % 3 == 0) {
            //定义一个空对象
            var ruleObj = {};
            ruleObj.timeSpan =
              data[i].list[k].hour * 60 + data[i].list[k].minute;
            console.log("时间间隔", ruleObj.timeSpan);
          } else if (k % 3 == 1) {
            //开始时间
            ruleObj.startTime = this.$moment(data[i].list[k]).format("HH:mm");
            console.log(this.$moment(data[i].list[k]).format("HH:mm"));
          } else if (k % 3 == 2) {
            ruleObj.endTime = this.$moment(data[i].list[k]).format("HH:mm");
            console.log(this.$moment(data[i].list[k]).format("HH:mm"));
            ruleArr.push(ruleObj);
          }
        }
        this.rulesListNew.push({
          id: data[i].id,
          list: data[i].list,
          name: data[i].name,
          remark: data[i].remark,
          listTime: ruleArr,
        });
      }
      console.log(this.rulesListNew);
    },
    //点击行选中
    handleRowClick(row, column, event) {
      this.$refs.multipleTable.toggleRowSelection(row);
    },
    //获取选中的行
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 新建
    handleAdddevice() {
      this.title = "新增";
      this.$refs.adddeviceDialogref.display();
      this.$refs.adddeviceDialogref.getdataform(null);
    },
    //修改
    handleResive(data) {
      this.title = "修改";
      this.$refs.adddeviceDialogref.display();
      this.$refs.adddeviceDialogref.getdataform(data);
    },

    //设置
    handleSet(data) {
      this.$refs.setdeviceDialogref.display();
      this.$refs.setdeviceDialogref.getdataform(data);
    },

    //删除数据
    handleDelete(data) {
      let deleteArr = [];
      deleteArr.push({
        id: data.id,
      });
      this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteScheduleRulel({ list: deleteArr }).then((res) => {
            this.getruleList(); //刷新
          });
          this.$message({
            duration: 1500,
            showClose: true,
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            duration: 1500,
            showClose: true,
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //点击分页
    handleCurrentChange(val) {
      this.page = val;
      this.getruleList();
    },
    //每页条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getruleList();
    },
  },
};
</script>
<style lang="less">
.deviceInformation {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: #fff;

  .deviceBox {
    border: 1px solid #dddddd;
    height: calc(100% - 24px);
    padding: 12px;
    border-radius: 4px;
  }
  .deviceBtnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .deviceTable {
    margin-top: 16px;
    height: calc(100% - 48px);
    //background: #fcc;
    .rulesBox {
      display: flex;
      flex-direction: row;
      li {
        list-style: none;
        margin-right: 24px;
        line-height: 24px;
        span {
          margin-right: 4px;
        }
        .el-tag--small {
          height: 16px;
          padding: 0 8px;
          line-height: 16px;
        }
      }
    }
    .timeGz {
      line-height: 32px;
      b {
        font-weight: normal;
        color: #169e8c;
      }
      span {
        margin: 0px 8px;
      }
    }
  }
}
</style>
