<template>
  <transition name="slide-fade">
    <div class="station-types" v-drag>
      <div class="header">
        <span class="title">关联驻勤点</span>
        <i class="el-icon-close" @click="cancel"></i>
      </div>
      <div class="content">
        <el-input v-model="stationKey" size="small" style="width: 300px" placeholder="请输入驻勤点名称"></el-input>
        <el-button type="primary" @click="searchStation" style="margin-left: 10px">查询</el-button>

        <selfTable
          ref="table"
          :columns="columns"
          :dataList="tableData"
          :index="true"
          indexLabel="序号"
          maxHeight="270"
          :hasPage="false"
          highlight-current-row
          @currentChange="selectionChange"
        >
          //使用插槽,使用的2.6之前的语法
        </selfTable>
      </div>
      <div class="footer">
        <div class="footer-right">
          <el-button type="primary" @click="cancel">取消</el-button>
          <el-button plain @click="reset">重置</el-button>
          <el-button type="success" @click="relationConfirm">确认关联</el-button>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
// import { parseTime } from "@/utils/index";
import selfTable from "@/components/common/selfTable";
import { getStations, getAllStationTypes } from "@/api/security-station-controller";
export default {
  name: "electronicFenceStation",
  components: {
    selfTable,
  },
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    electronicFenceInfo: {
      type: Object,
    },
  },
  data() {
    return {
      platform: localStorage.getItem("platform") || "1",
      deskTypes: localStorage.getItem("platform") === "1" ? ["Normal"] : ["Proprietor"],
      isCompany: false,
      columns: [
        {
          prop: "stationName",
          label: "驻勤点名称",
          width: 250,
        },
        {
          prop: "stationType",
          label: "驻勤点类型",
          width: 200,
        },
        {
          prop: "principalName",
          label: "负责人",
          width: 80,
        },
        {
          prop: "countOfSecurityMan",
          label: "驻勤人数",
        },
      ],
      tableData: [],
      stationForRail: {},
      selectionRow: null,
      originData: [], // 后台返回的原始数据
      stationKey: "", //查询条件
      stationTypes: [], //驻勤点类型
    };
  },
  watch: {
    electronicFenceInfo: {
      handler() {
        console.log("stations", this.electronicFenceInfo);
        const row = this.tableData.find((row) => row.stationName === this.electronicFenceInfo.stationName);
        this.$refs.table.table.setCurrentRow(row);
      },
      deep: true,
      immediate: false,
    },
  },
  methods: {
    async init() {
      const userInfo = localStorage.getItem("userInfo");
      let userInfoJson;
      if (userInfo) {
        userInfoJson = JSON.parse(userInfo);
      }
      if (userInfoJson) {
        //判断是否是企业或内保单位
        if (userInfoJson.role === "Company" || userInfoJson.role === "Proprietor") {
          this.isCompany = true;
        }
      }
    },
    selectionChange(val) {
      this.selectionRow = val;
    },
    searchStation() {
      getStations({
        searchModel: "Name",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
        keyword: this.stationKey,
        pageIndex: 1,
        pageSize: 1000,
      })
        .then((res) => {
          console.log("stations", res);
          console.log("stationTypes", this.stationTypes);
          if (res) {
            this.tableData = [];
            this.originData = res;
            res.forEach((station) => {
              const stationType = this.stationTypes.find((t) => t.code === station.stationTypes[0]);
              this.tableData.push({
                stationId: station.id,
                stationName: station.name,
                stationType: stationType ? stationType.name : "",
                principalName: station.principalName,
                countOfSecurityMan: station.countOfSecurityMan,
              });
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    cancel() {
      this.$emit("cancel");
    },

    reset() {
      this.stationKey = "";
    },

    relationConfirm() {
      this.$emit("relation", this.selectionRow);
    },
  },
  async mounted() {
    this.stationTypes = await getAllStationTypes(); //获取驻勤点信息
    this.searchStation();
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.station-types {
  width: 1064px;
  height: 610px;
  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>
