<template>
  <transition name="slide-fade">
    <div class="plan-detail" v-drag>
      <div class="header">
        <span class="title">计划详情</span>
        <i class="el-icon-close" @click="cancel"></i>
      </div>
      <div class="content">
        <selfTable :columns="columns" :dataList="tableData" :index="true" indexLabel="序号" maxHeight="500" :hasPage="false">
          <!-- 使用插槽,使用的2.6之前的语法-->
          <template #operation="{ row }">
            <el-button type="primary" size="small" @click="showRail(row)">查看</el-button>
          </template>
        </selfTable>
      </div>
      <!-- <div class="footer">
        <div class="footer-left">
          <el-button type="primary" @click="edit">编辑</el-button>
          <el-button plain class="del" @click="del">删除</el-button>
        </div>
        <div class="footer-right">
          <el-button type="success" @click="addElectronic">新增电子围栏</el-button>
        </div>
      </div> -->
    </div>
  </transition>
</template>
<script>
// import { parseTime } from "@/utils/index";
import selfTable from "@/components/common/selfTable";
import { searchRail } from "@/api/security-station-rails-controller";
export default {
  name: "trajectory",
  components: {
    selfTable,
  },
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      columns: [
        {
          prop: "railName",
          label: "围栏名称",
          width: 120,
        },
        {
          prop: "stationName",
          label: "所属驻勤点",
          width: 120,
        },
        {
          prop: "ruleTypeText",
          label: "围栏类型",
          width: 75,
        },
        {
          prop: "time",
          label: "时间范围",
        },
        {
          prop: "operation",
          label: "操作",
          width: 90,
        },
      ],
      tableData: [],
      stationForRail: {},
      multipleSelection: [],
      originData: [], // 后台返回的原始数据
    };
  },
  methods: {
    selectionChange(list) {
      this.multipleSelection = list;
    },
    edit() {
      if (this.multipleSelection.length === 1) {
        let params = this.originData.find((item) => {
          return item.id === this.multipleSelection[0].railId;
        });
        let paramIndex = this.originData.findIndex((item) => {
          return item.id === this.multipleSelection[0].railId;
        });
        let emitData = {
          data: params,
          index: paramIndex,
        };
        this.$emit("electronicFenceEdit", emitData);
      } else if (this.multipleSelection.length === 0) {
        this.$message({
          message: "请先选择一条数据",
          type: "error",
        });
      } else {
        this.$message({
          message: "只能选中一条数据进行编辑",
          type: "error",
        });
      }
    },
    showRail(row) {
      let params = this.originData.find((item) => {
        return item.id === row.railId;
      });
      let emitData = {
        data: params,
      };
      this.$emit("electronicFenceEdit", emitData);
    },
    addElectronic() {
      this.$emit("addElectronic");
    },
    del() {
      if (this.multipleSelection.length === 1) {
        let params = this.originData.find((item) => {
          return item.id === this.multipleSelection[0].railId;
        });
        let paramIndex = this.originData.findIndex((item) => {
          return item.id === this.multipleSelection[0].railId;
        });
        let emitData = {
          data: params,
          index: paramIndex,
        };
        this.$emit("del", emitData);
      } else if (this.multipleSelection.length === 0) {
        this.$message({
          message: "请先选择一条数据",
          type: "error",
        });
      } else {
        this.$message({
          message: "只能选中一条数据进行编辑",
          type: "error",
        });
      }
    },
    cancel() {
      this.$emit("cancel");
    },
    getRails() {
      searchRail({
        pageIndex: 0,
        pageSize: 0,
        searchModel: "Station",
        stationId: this.info.id,
      })
        .then((res) => {
          console.log("searchRail", res);
          if (res) {
            this.tableData = [];
            this.originData = res;
            res.forEach((rail) => {
              this.tableData.push({
                railId: rail.id,
                railName: rail.name,
                stationName: rail.stationName,
                ruleType: rail.ruleType,
                ruleTypeText: rail.ruleTypeText,
                // time: rail.beginTime.slice(11, 16) + "-" + rail.endTime.slice(11, 16)
                time: rail.beginTime + "-" + rail.endTime,
              });
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    operation(row) {
      console.log("operation", row);
    },
  },
  mounted() {
    this.getRails();
  },
};
</script>
<style lang="scss" scoped>
.plan-detail {
  width: 54px;
  height: 527px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 8px 8px;
  border: 2px solid #3e8dff;
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  padding: 0 24px;
  z-index: 999;

  .header {
    height: 54px;
    border-bottom: 1px solid #bdcfde;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }

    i {
      cursor: pointer;
      font-size: 16px;
      color: #999999;
    }
  }

  .content {
    .top {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      margin: 16px 0 19px 0;

      .location {
        width: 22px;
        height: 22px;
        background: url("~@/assets/images/mapSearch/驻勤点类型.png") no-repeat;
        background-size: 100% 100%;
        margin-right: 8px;
      }

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #0e71ff;
      }
    }

    .type-icon {
      width: 16px;
      height: 16px;
    }

    .el-col {
      margin-bottom: 24px;
    }

    ::v-deep .el-radio {
      display: flex;
      align-items: center;

      .el-radio__label {
        display: flex;
        align-items: center;
        padding-left: 8px;
        font-size: 16px;
        color: #666666;
      }
    }

    .btn-row {
      display: flex;
      align-items: center;

      &-btn {
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
      }

      &-btnAc {
        background: rgba(22, 119, 255, 0.1);
        border-radius: 4px;
        border: 1px solid #1677ff;
      }

      &-btnSelf {
        width: 70px;
        height: 38px;

        ::v-deep .el-input {
          width: 70px;
          height: 38px;
          line-height: 38px;
          font-weight: 500;
          color: #666666;
          font-size: 14px;
        }

        ::v-deep .el-input__inner {
          border: 0;
        }
      }
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    &-left {
      .del {
        color: rgba(255, 77, 79, 1);
        background-color: #ffffff;
        border-color: rgba(255, 77, 79, 1);

        &:hover {
          color: #ffffff;
          background-color: rgba(255, 77, 79, 1);
          border-color: rgba(255, 77, 79, 1);
        }

        &:focus {
          color: #ffffff;
          background-color: rgba(255, 77, 79, 1);
          border-color: rgba(255, 77, 79, 1);
        }
      }
    }
  }
}
</style>
