<template>
  <div class="station-card-list">
    <div class="plan">
      <el-button class="btn-roll-call-plan" type="primary" @click="toPlan">点名计划</el-button>
    </div>
    <div class="list-container">
      <div
        v-for="(item, index) in stationTypeList"
        class="card"
        :class="[index === 3 || index === 4 ? 'card-mask' : '']"
        :key="index"
        @click="toStationRollCallList(item)"
      >
        <!-- 这是第{{ item }}个卡片 -->
        <div class="card-calling" v-if="index === 3">
          <el-progress type="circle" :percentage="25"></el-progress>
        </div>
        <div class="card-calling" v-if="index === 4">
          <el-progress type="circle" :percentage="100" status="success"></el-progress>
        </div>
        <div class="card-top">
          <img class="type-icon" :src="bindIcon(item.name)" alt="" />

          <div class="type-name">{{ item.name }}</div>
        </div>

        <div class="card-num">
          <div class="card-num-sub" style="border-right: 1px solid #cfe2ff; opacity: 1">
            <span class="card-num-sum">1200</span><span class="card-num-text">个</span>
          </div>
          <div class="card-num-sub"><span class="card-num-sum">10000</span><span class="card-num-text">人</span></div>
          <div class="card-num-sub" style="border-right: 1px solid #cfe2ff; opacity: 1">
            <span class="card-num-text">总数</span>
          </div>
          <div class="card-num-sub">
            <span class="card-num-text">总人数</span>
          </div>
        </div>
        <div class="card-btn">
          <el-button class="btn-roll-card-select" type="primary" plain @click.stop="selectStations(item.code)">选择</el-button>
          <el-button class="btn-roll-card-roll" type="primary" @click="selectStations">点名</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="选择驻勤点" :visible.sync="dialogVisible" width="1161px">
      <el-form :inline="true" :model="queryForm" label-width="125px">
        <el-form-item label="辖区">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="请选择"
            :normalizer="normalizer"
            v-model="queryForm.depart"
            noOptionsText="无数据"
            noResultsText="无数据"
          />
        </el-form-item>
        <el-form-item label="驻勤点名称">
          <el-input style="width: 200px" v-model="queryForm.stationName"></el-input>
        </el-form-item>

        <el-form-item label="保安服务公司名称">
          <el-input style="width: 200px" v-model="queryForm.companyName"></el-input>
        </el-form-item>

        <el-form-item class="transfer-div">
          <el-transfer
            class="transfer"
            v-model="yesData"
            :props="{ key: 'id', label: 'name' }"
            :titles="['全部', '已选']"
            :data="stationList"
            @change="handleChange"
            :render-content="renderFunc"
          >
          </el-transfer>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button type="primary" @click="confirmStation">确认</el-button>
          <el-button type="primary" plain @click="clossDialog">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import treeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getStations, getAllStationTypes } from "@/api/security-station-controller";
import { getDeparts } from "@/api/departs-controller";

export default {
  name: "stationCardList",
  components: {
    treeSelect,
  },
  methods: {
    async init() {
      this.departs = await getDeparts(); // 获取辖区树
      console.log("departs", this.departs);
      this.stationTypeList = await getAllStationTypes(); //获取驻勤点类型信息
      console.log("stationTypeList", this.stationTypeList);
      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;
        }
      }
    },
    toPlan() {
      this.$emit("toPlan");
    },
    toStationRollCallList(data) {
      this.$emit("toStationRollCallList", { data });
    },
    selectStations(stationTypeCode) {
      getStations({
        pageIndex: 1,
        pageSize: 1000,
        searchModel: "StationType",
        deskTypes: this.isCompany ? ["Normal", "Proprietor"] : this.deskTypes,
        stationTypes: [stationTypeCode + ""],
        keyword: this.queryForm.stationName,
      })
        .then((res) => {
          console.log("stationList", res);
          this.stationList = res;
        })
        .catch((err) => {
          console.log(err);
        });
      this.dialogVisible = true;
    },
    //右侧数据变动触发函数
    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
      this.stationIdList = movedKeys; //文件列表的id数组
    },
    confirmStation() {},
    clossDialog() {
      this.dialogVisible = false;
    },
    bindIcon(icon) {
      return require("@/assets/images/rollManage/" + icon + ".png");
    },
  },
  data() {
    return {
      platform: localStorage.getItem("platform") || "1",
      deskTypes: localStorage.getItem("platform") === "1" ? ["Normal"] : ["Proprietor"],
      isCompany: false,
      queryForm: {
        stationName: "", //驻勤点名称
        companyName: "", //公司名称
        depart: null, //辖区
      },
      stationTypeList: [], //驻勤点类型
      stationList: [], //驻勤点查询结果
      stationIdList: [], //移动驻勤点
      yesData: [1, 2], // 注意:key 的字符类型要一致!!!
      renderFunc(h, option) {
        return (
          <span title={option.name}>
            {option.companyName}-{option.name}
          </span>
        );
      },
      dialogVisible: false,
      departs: [],
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.code,
          label: node.name,
          children: node.children,
          isDisabled: !node.selectable,
        };
      },
    };
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.tree-select {
  //padding-top: 6px;
  width: 350px;
  // font-size: 14px;
  line-height: 35px;
  // font-family: PingFang SC-Regular, PingFang SC;
  // font-weight: 400;
  color: #606266;
  .vue-treeselect__placeholder {
    line-height: 35px;
  }
  .vue-treeselect__control {
    height: 35px !important;
  }
  .vue-treeselect__placeholder,
  .vue-treeselect__single-value {
    line-height: 35px;
  }
}
.transfer-div {
  width: 100%;
  display: flex;
  justify-content: center;
}

.station-card-list {
  width: 100%;
  height: 100%;
  .plan {
    margin-bottom: 28px;
    .btn-roll-call-plan {
      // height: 39px;
    }
  }
  .list-container {
    width: 100%;
    height: calc(100% - 39px - 28px);
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    .card {
      width: 362px;
      height: 260px;
      cursor: pointer;
      background: linear-gradient(180deg, #ecf3ff 0%, #ffffff 100%);
      box-shadow: 10px 10px 20px 0 rgba(46, 78, 134, 0.16);
      border-radius: 4px;
      border: 3px solid;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 3 3;
      margin-bottom: 48px;
      position: relative;
      &-mask {
        border: 0;
        &::after {
          background: rgba(0, 0, 0, 0.3);
          backdrop-filter: blur(3px);
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 4px;
          content: " ";
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
        }
      }
      &-calling {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .card-num {
        width: 362px;
        text-align: center; //实现水平居中
        position: absolute;
        left: 0;
        margin: auto;
        right: 0;
        margin-top: 92px;
        float: left;
        .card-num-sub {
          width: 180px;
          float: left;
          .card-num-sum {
            font-size: 28px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #333333;
          }
          .card-num-text {
            width: 16px;
            height: 16px;
            font-size: 16px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #666666;
          }
        }
      }
      .card-top {
        margin-top: px;
        .type-icon {
          width: 36px;
          height: 36px;
          margin-left: 24px;
          float: left;
        }
        .type-name {
          height: 36px;
          line-height: 36px;
          font-size: 20px;
          font-weight: 500;
          color: #3d3d3d;
          padding-left: 10px;
          float: left;
        }
      }

      .card-btn {
        text-align: center; //实现水平居中
        position: absolute;
        left: 0;
        margin: auto;
        right: 0;
        .btn-roll-card-select {
          width: 112px;
          height: 36px;
          line-height: 12px;
          margin-top: 204px;
        }

        .btn-roll-card-roll {
          width: 112px;
          height: 36px;
          line-height: 12px;
          margin-top: 204px;
        }
      }
    }
  }
}
</style>
<style>
.el-transfer-panel {
  width: 550px;
  height: 320px;
}
.el-transfer-panel__list.is-filterable {
  height: 400px;
}
</style>
