<template>
  <div style="cursor: default; margin: 43px 0 0 0">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      <el-breadcrumb-item>分配设备</el-breadcrumb-item>
    </el-breadcrumb> -->

    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      :class="
        'el-icon-arrow-right ' + (flag.flag == false ? 'breadcrumb_tab' : '')
      "
    >
      <el-breadcrumb-item :to="{ path: '/index/monitor1' }"
        >可视化监控</el-breadcrumb-item
      >
      <el-breadcrumb-item>监控设备列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-box">
      <div class="filter-box">
        <!-- <el-select
          size="small"
          v-model="type"
          @change="equipCheck()"
          clearable
          placeholder="请选择设备类型"
        >
          <el-option
            v-for="item in typelist"
            :key="item.id"
            :label="item.type_name"
            :value="item.id"
          ></el-option>
        </el-select> -->
        <el-input
          style="cursor: pointer"
          size="small"
          clearable
          placeholder="请输入设备ID"
          @change="equipCheck()"
          v-model="equipId"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <!-- <el-date-picker
          style="cursor: pointer"
          size="small"
          v-model="timeRange"
          @change="DateChange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker> -->
      </div>
      <div>
        <el-button type="primary" @click="allSel" size="mini">{{
          text
        }}</el-button>
        <el-button type="primary" @click="distSubm" size="mini"
          >确定分配</el-button
        >
      </div>
    </div>
    <el-row :gutter="10">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="6"
        :xl="4"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <el-card
          @click.native="itemFun(item)"
          :class="['box-card', item.checked ? 'selected' : '']"
        >
          <el-checkbox
            :ref="'checkboxRef'"
            v-model="item.checked"
            @click.native="stopDefault($event)"
          ></el-checkbox>
          <div class="img-box">
            <template>
              <img
                src="
                  http://www.hnyfwlw.com:8006/bigdata_pc/equipdistribute/6.png
                "
              />
            </template>
            <p>{{ item.equip_id }}</p>
          </div>

          <div class="detail">
            <p :title="item.device_name">
              设备名称
              <span>{{ (item.device_name || "无") | ellipsis }}</span>
            </p>
            <p>
              设备类型
              <span>监控</span>
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 暂无数据 -->
    <div class="expertDiagnosis_referral_units_not" v-if="dataList.length <= 0">
      <img
        src="../../static/zanwu.png"
        alt
        class="expertDiagnosis_referral_units_notImg"
        style="margin: 0 0 0 40%;"
      />
    </div>
    <div class="userTip">
      *注：以上所选设备分配给地块：{{ plotData.plot_name }}
    </div>
    <el-pagination
      v-if="dataList.length > 0"
      background
      :page-size="12"
      layout="prev, pager, next"
      :current-page="page"
      :total="totalNum"
      @current-change="changePage"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    flag: {
      flag: Boolean,
      siteID: Number,
    },
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },
  data() {
    return {
      //   uid: this.$route.params.id,
      timeRange: "",
      equipId: "",
      begin: "",
      end: "",
      type: "",
      dataList: [
        // {
        //   device_id: "863488051768862",
        //   d_id: 3496,
        //   device_user: 248,
        //   device_type_id: 2,
        //   device_name: "杀虫灯",
        //   creat_time: 1631520530,
        //   device_location: "内蒙古自治区乌海市乌达区",
        // },
        // {
        //   device_id: "863488051768854",
        //   d_id: 2576,
        //   device_user: 248,
        //   device_type_id: 2,
        //   device_name: "杀虫灯",
        //   creat_time: 1628642269,
        //   device_location: "内蒙古自治区乌海市乌达区",
        // },
        // {
        //   device_id: "863488051788209",
        //   d_id: 2568,
        //   device_user: 248,
        //   device_type_id: 2,
        //   device_name: "杀虫灯",
        //   creat_time: 1628589756,
        //   device_location: "内蒙古自治区乌海市乌达区",
        // },
        // {
        //   device_id: "863488050791832",
        //   d_id: 2543,
        //   device_user: 248,
        //   device_type_id: 2,
        //   device_name: "杀虫灯",
        //   creat_time: 1628556791,
        //   device_location: "内蒙古自治区乌海市乌达区",
        // },
        // {
        //   device_id: "863488050813255",
        //   d_id: 2519,
        //   device_user: 248,
        //   device_type_id: 2,
        //   device_name: "杀虫灯",
        //   creat_time: 1628497598,
        //   device_location: "内蒙古自治区乌海市乌达区",
        // },
        // {
        //   device_id: "860675044919049",
        //   d_id: 2893,
        //   device_user: 0,
        //   device_type_id: 15,
        //   device_name: "",
        //   creat_time: 0,
        //   device_location: "",
        // },
        // {
        //   device_id: "868626048758018",
        //   d_id: 3018,
        //   device_user: 0,
        //   device_type_id: 15,
        //   device_name: "",
        //   creat_time: 0,
        //   device_location: "",
        // },
        // {
        //   device_id: "868626048828316",
        //   d_id: 3019,
        //   device_user: 0,
        //   device_type_id: 15,
        //   device_name: "",
        //   creat_time: 0,
        //   device_location: "",
        // },
        // {
        //   device_id: "867435059487181",
        //   d_id: 2980,
        //   device_user: 0,
        //   device_type_id: 14,
        //   device_name: "色诱测报灯",
        //   creat_time: 1630296976,
        //   device_location: "",
        // },
        // {
        //   device_id: "03832004",
        //   d_id: 4069,
        //   device_user: 0,
        //   device_type_id: 10,
        //   device_name: "",
        //   creat_time: 1632900214,
        //   device_location: "河南省郑州市金水区",
        // },
        // {
        //   device_id: "03194571",
        //   d_id: 4066,
        //   device_user: 0,
        //   device_type_id: 10,
        //   device_name: "",
        //   creat_time: 1632897651,
        //   device_location: "河南省郑州市金水区",
        // },
        // {
        //   device_id: "03870746",
        //   d_id: 4065,
        //   device_user: 0,
        //   device_type_id: 10,
        //   device_name: "",
        //   creat_time: 1632896603,
        //   device_location: "河南省郑州市金水区",
        // },
      ],
      own_device: [],
      device_ids: [], //选中的所有设备ID
      page: 1,
      totalNum: 0,
      equipID: [],
      text: "全选",
      typelist: [], //该用户帐下所有的设备类型
      plotData: {},
    };
  },
  mounted() {
    this.plotData = JSON.parse(this.$route.query.plotData);
    this.getList();
    // this.equipmenttypelist()
  },
  methods: {
    getList() {
      this.$axios({
        method: "get",
        url: "/plot_equip",
        params: {
          page_size: 12,
          equip_id: this.equipId,
          plot_id: this.plotData.plot_id,
          page: this.page,
          equip_type: "jk",
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.scd_list) {
          let data = res.data.scd_list;
          this.dataList = data.map((item) => {
            item.checked = item.own != 0; //device_user=0代表待分配
            return item;
          });
          this.own_device = res.data.own_list;
          this.totalNum = res.data.count;
        }
      });
    },
    DateChange(val) {
      if (this.timeRange) {
        this.begin = parseInt(new Date(this.timeRange[0]).getTime() / 1000);
        this.end = parseInt(new Date(this.timeRange[1]).getTime() / 1000);
        this.page = 1;
        this.getList();
      } else {
        this.begin = "";
        this.end = "";
        this.getList();
      }
    },
    changePage(val) {
      this.page = val;
      this.getList();
    },
    distSubm() {
      this.dataList.forEach((item) => {
        if (item.checked == true) {
          this.device_ids.push(item.d_id);
        } else {
          for (let i = 0; i < this.own_device.length; i++) {
            if (item.d_id == this.own_device[i]) {
              this.own_device.splice(i, 1);
            }
          }
        }
      });
      this.device_ids = this.device_ids.concat(this.own_device);
      this.device_ids = [...new Set(this.device_ids)]; //数组去重

      this.$axios({
        method: "POST",
        url: "/plot_equip",
        data: this.qs.stringify({
          device_ids: this.device_ids.join(","),
          plot_id: this.plotData.plot_id,
          equip_type: "jk",
        }),
      }).then((res) => {
        console.log(res.data);
        if (res.data == "分配成功") {
          this.$message.success("分配设备成功！");
        }
        this.device_ids = [];
      });
    },
    equipCheck() {
      this.page = 1;
      this.getList();
    },
    stopDefault(e) {
      e.stopPropagation();
    },
    itemFun(item) {
      item.checked = !item.checked;
    },
    allSel() {
      if (this.text == "全选") {
        this.text = "取消全选";
        this.dataList = this.dataList.map((item) => {
          item.checked = true;
          return item;
        });
      } else {
        this.text = "全选";
        this.dataList = this.dataList.map((item) => {
          item.checked = false;
          return item;
        });
      }
    },
    equipmenttypelist() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=home.homes.user_device_type",
      }).then((res) => {
        this.typelist = res.data.data;
        var obj = {
          id: 0,
          type_name: "全部",
        };
        this.typelist.unshift(obj);
        console.log(this.typelist);
      });
    },
  },
};
</script>

<style lang='less' scoped>
.search-box {
  display: flex;
  justify-content: flex-left;
  justify-content: space-between;
  margin-bottom: 10px;
  .filter-box > div {
    margin-right: 15px;
  }
  .el-input {
    width: 200px;
  }
  .el-date-editor--daterange {
    width: 222px;
  }
}
.el-card.selected {
  border: 1px solid #14a478;
}
.el-card {
  box-sizing: border-box;
  .img-box {
    text-align: center;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    img {
      height: 45px;
    }
    p {
      font-size: 14px;
      font-weight: 800;
      margin-top: 10px;
    }
  }
  .detail {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    p {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      line-height: 34px;
      color: #666;
      padding: 0 0px;
    }
  }
}
.userTip {
  text-align: left;
  font-size: 14px;
}

.breadcrumb_tab {
  top: 60px !important;
}
</style>