<template>
  <div class="app-container video-site">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
      <el-form-item label="站点名称" prop="siteName">
        <el-input
          v-model="queryParams.siteName"
          placeholder="请输入站点名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <!-- <el-form-item label="行政区划" prop="regionalismId">
        <treeselect
          :disable-branch-nodes="true"
          v-model="queryParams.regionalismId"
          :options="regionalismOption"
          :normalizer="normalizer"
          placeholder="行政区划"
          style="width: 200px"
        />
      </el-form-item> -->
      <!-- <el-form-item label="站点状态" prop="siteStatus">
        <el-select
          v-model="queryParams.siteStatus"
          placeholder="请选择站点状态"
          clearable
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['iot:site:add']"
          >新增</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['iot:site:remove']"
          >删除</el-button
        >
      </el-col> -->
    </el-row>

    <el-table
      v-loading="loading"
      :data="siteList"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column
          type="index"
          label="序号"
          align="center"
          :index="indexFormatter"
          width="80px"
        ></el-table-column>

      <el-table-column label="站点名称" align="left" width="200" prop="siteName" />
      <!-- <el-table-column
        label="行政区划"
        align="left"
        width="180"
        prop="regionalismFullName"
      /> -->
      <el-table-column label="项目名称" align="left" width="150" prop="projectName" />
      <el-table-column label="站点地址" align="left" prop="siteAddress" >
        <template slot-scope="scope">
          <span :title="scope.row.siteAddress" class="lay-table-textarea">{{ scope.row.siteAddress || '--'}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="站点状态" align="center" width="100" prop="siteStatus">
        <template slot-scope="scope">
          <div class="list-row">
            <span class="notice-item" :class="noticeState(scope.row.siteStatus)"></span>
            <span
              class="notice-text"
              v-text="scope.row.siteStatus === '1' ? '在线' : '离线'"
            ></span>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="接入协议" align="left" width="100" prop="videoProtocol" />
      <el-table-column label="站点通道" align="left" width="200" prop="devId" />
      <el-table-column label="设备编码" align="left" width="150" prop="devCode" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['iot:site:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['iot:site:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改站点监控对话框 -->
    <div class="eldialog-div">
      <el-dialog
        class="n-dialog"
        :title="title"
        :visible.sync="open"
        width="750px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="110px">
          <el-row :gutter="20" v-show="tempType !== 'distri'">
            <el-col :span="24">
              <el-form-item label="所属项目" prop="projectName">
                <el-input
                  v-model="form.projectName"
                  placeholder="点击选择厂商"
                  @focus="handleOpenTableSelect()"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="站点名称" prop="siteName">
                <el-input
                  :disabled="tempType === 'distri'"
                  v-model="form.siteName"
                  placeholder="请输入站点名称"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="接入协议" prop="videoProtocol">
                <el-select
                  :disabled="tempType === 'distri'"
                  v-model="form.videoProtocol"
                  placeholder="请输入接入协议"
                  clearable
                  style="width: 100%"
                >
                  <el-option
                    v-for="dict in videoProtocolOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-show="tempType !== 'distri'">
            <el-col :span="12">
              <el-form-item label="启用https" prop="https">
                <!-- <el-switch
                  v-model="form.https"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  :active-value="true"
                  :inactive-value="false"
                >
                </el-switch> -->
                <el-switch
                  size="mini"
                  v-model="form.https"
                  active-text="启用"
                  inactive-text="关闭"
                  :active-value="true"
                  :inactive-value="false"
                  active-color="#13ce66"
                  inactive-color="#dcdfe6"
                  class="e-switch-c"
                  >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务类型" prop="serverType">
                <el-select
                  :disabled="tempType === 'distri'"
                  v-model="form.serverType"
                  placeholder="请选择服务类型"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(itemKey, itemVal) in serverTypeOpt"
                    :key="itemKey"
                    :label="itemKey"
                    :value="itemVal"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="行政区划" prop="regionalismId">
                <treeselect
                  :disabled="tempType === 'distri'"
                  @select="regionalismChange"
                  :disable-branch-nodes="true"
                  v-model="form.regionalismId"
                  :options="regionalismOption"
                  :normalizer="normalizer"
                  placeholder="请选择上级行政区划"
                />
              </el-form-item>
            </el-col> -->
          </el-row>

          <el-row :gutter="20" v-show="tempType !== 'distri'">
            <el-col :span="12">
              <el-form-item label="站点经度" prop="siteLng">
                <el-input v-model="form.siteLng" disabled placeholder="请输入站点经度" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="站点纬度" prop="siteLat">
                <el-input v-model="form.siteLat" disabled placeholder="请输入站点纬度" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-show="tempType !== 'distri'">
            <el-col :span="24">
              <el-form-item label="站点地址" prop="siteAddress">
                <el-input
                  v-model="form.siteAddress"
                  @blur="mapAddressFromPoint"
                  :disabled="tempType === 'distri'"
                  placeholder="请输入站点地址"
                >
                  <el-popover
                    slot="suffix"
                    placement="left-start"
                    title="地图选择坐标"
                    width="730"
                    trigger="manual"
                    v-model="visible"
                  >
                    <i
                      slot="reference"
                      class="el-icon-map-location"
                      @click="mapClick"
                    ></i>
                    <!-- 地图模块选择和设置 -->
                    <slot>
                      <el-row>
                        <el-col :span="7">
                          <span>经度：{{ mapForm.lng }}</span>
                        </el-col>
                        <el-col :span="7">
                          <span>纬度：{{ mapForm.lat }}</span>
                        </el-col>
                        <el-col :span="10">
                          <span>地址：{{ mapForm.address }}</span>
                        </el-col>
                      </el-row>

                      <shop-location
                        v-if="visible === true"
                        style="height: 300px"
                        :mapCenter="mapCenter"
                        :draggable="true"
                        @mapEvent="mapEvent"
                        :zoom="zoom"
                      />

                      <div
                        style="
                          width: 100%;
                          height: 50px;
                          display: flex;
                          align-items: center;
                          justify-content: flex-end;
                          margin-top: 5px;
                        "
                      >
                        <el-button type="primary" @click="mapSureClick">确 定</el-button>
                        <el-button @click="visible = false">取 消</el-button>
                      </div>
                    </slot>
                  </el-popover>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="站点通道" prop="devId" v-show="tempType !== 'distri'">
            <el-input
              v-model="form.devId"
              :disabled="tempType === 'distri'"
              placeholder="请输入站点通道"
            />
          </el-form-item>
          <el-form-item label="设备编码" prop="devCode" v-show="tempType !== 'distri'">
            <el-input
              v-model="form.devCode"
              :disabled="tempType === 'distri'"
              placeholder="请输入设备编码"
            />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="排序" prop="sortNum">
                <el-input v-model="form.sortNum" placeholder="请输入排序" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row
            :gutter="20"
            v-if="tempType !== 'distri' && form.serverType === 'QI_NIU'"
          >
            <!-- <template> -->
            <el-col :span="12">
              <el-form-item label="七牛访问秘钥" prop="qnAccessKey">
                <el-input v-model="form.qnAccessKey" placeholder="请输入七牛访问秘钥" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="七牛秘钥" prop="qnSecretKey">
                <el-input v-model="form.qnSecretKey" placeholder="请输入七牛秘钥" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="七牛空间ID" prop="qnNamespaceId">
                <el-input v-model="form.qnNamespaceId" placeholder="请输入七牛空间ID" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="七牛host" prop="qnHost">
                <el-input v-model="form.qnHost" placeholder="请输入七牛host" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="七牛port" prop="qnPort">
                <el-input v-model="form.qnPort" placeholder="请输入七牛port" />
              </el-form-item>
            </el-col>
            <!-- </template> -->
          </el-row>
          <el-row
            :gutter="20"
            v-if="tempType !== 'distri' && form.serverType === 'M7S'"
          >
            <el-col :span="12">
              <el-form-item label="版本" prop="m7sVersion">
                <el-select
                  v-model="form.m7sVersion"
                  placeholder="请选择版本"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(itemKey, itemVal) in serviceApiDesc"
                    :key="itemKey"
                    :label="itemKey"
                    :value="itemVal"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <template> -->
            <el-col :span="12">
              <el-form-item label="IP地址" prop="m7sHost">
                <el-input v-model="form.m7sHost" placeholder="请输入IP地址" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="端口" prop="m7sPort">
                <el-input v-model="form.m7sPort" placeholder="请输入端口" />
              </el-form-item>
            </el-col>
            <!-- </template> -->
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer form-button-div">
          <el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
          <el-button size="mini" @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>

    <el-dialog
      title="选择"
      :visible.sync="selectTableShow"
      width="75%"
      top="10vh"
      class="select-table-dialog"
      :close-on-click-modal="false"
    >
      <select-table-wrap
        v-if="selectTableShow"
        :tableOption="tableSelectOption.tableOpt"
        :queryOption="tableSelectOption.queryOpt"
        :tableList="tableSelectOption.tableList"
        @parentGetList="childGetList($event)"
        :otherOption="tableSelectOption.otherOption"
        @returnEvent="returnEvent($event)"
      />

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="resuleClick"
          >确 定</el-button
        >
        <el-button
          size="mini"
          @click="
            () => {
              selectTableShow = false;
            }
          "
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listSite, getSite, delSite, addSite, updateSite } from "@/api/iot/site";
import {
  listProject
} from "@/api/iot/project";
import { initMap, gjzCode } from "@/utils/latlngFromAddress";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import ShopLocation from "@/components/Amap/components/shopLocation/index";
import SelectTableWrap from "@/components/SelectTable/index";
import { serviceApiDesc } from '@/config/dvr.config'
const serverTypeOpt = {
  SRS: "SRS",
  QI_NIU: "七牛",
  M7S:"M7S"
};

export default {
  name: "Site",
  components: {
    Treeselect,
    ShopLocation,
    SelectTableWrap,
  },
  data() {
    return {
      serverTypeOpt,
      serviceApiDesc,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 站点监控表格数据
      siteList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        siteName: undefined,
        regionalismId: undefined,
        siteStatus: undefined,
        createTime: undefined,
        updateTime: undefined,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        devId: [
          { required: true, message: "站点通道不能为空", trigger: "blur" },
          {
            pattern: /^[0-9]{20}$/,
            message: "格式不正确; 纯数字 组合20个字符",
          },
        ],
        devCode: [
          { required: true, message: "设备编码不能为空", trigger: "blur" },
          {
            pattern: /^[A-Z a-z]{1}[A-Z a-z 0-9 \- ]{5,45}$/,
            message: "格式不正确; (a-Z , 0-9) 组合 6 - 45个字符",
          },
        ],
        projectName: [{ required: true, message: "项目名称不能为空", trigger: "change" }],
        siteName: [{ required: true, message: "站点名称不能为空", trigger: "blur" }],
        videoProtocol: [{ required: true, message: "接入协议不能为空", trigger: "blur" }],
        serverType: [{ required: true, message: "服务类型不能为空", trigger: "blur" }],
        siteLng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
        siteLat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
        qnAccessKey: [
          { required: true, message: "七牛访问秘钥不能为空", trigger: "blur" },
        ],
        qnSecretKey: [{ required: true, message: "七牛秘钥不能为空", trigger: "blur" }],
        qnNamespaceId: [
          { required: true, message: "七牛空间ID不能为空", trigger: "blur" },
        ],
        qnHost: [{ required: true, message: "七牛host不能为空", trigger: "blur" }],
        qnPort: [{ required: true, message: "七牛port不能为空", trigger: "blur" }],
        m7sHost: [{ required: true, message: "ip地址不能为空", trigger: "blur" }],
        m7sPort: [{ required: true, message: "端口不能为空", trigger: "blur" }],
        m7sVersion: [{ required: true, message: "服务版本不能为空", trigger: "blur" }]
      },
      // 地图 弹窗
      visible: false,
      BMap: null,
      mapCenter: {
        lng: 119.459889,
        lat: 25.98974,
      },
      zoom: 15,
      mapForm: {},
      // 行政划分树选项
      regionalismOption: [],
      // 状态数据字典
      videoProtocolOptions: [],
      statusOptions: [
        {
          dictValue: "0",
          dictLabel: "离线",
        },
        {
          dictValue: "1",
          dictLabel: "在线",
        },
      ],
      tenantList: [],
      tempType: "",
      selectTableShow: false,
      tableSelectOption: {},
      selectResult: {},
    };
  },
  created() {
    this.getDicts("video_protocol").then((response) => {
      this.videoProtocolOptions = response.data;
    });
    this.getList();
    // this.getRegionalisTree();
  },
  methods: {
    indexFormatter(val) {
      return (
        val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      );
    },
    // 打开 表单选择 弹窗
    handleOpenTableSelect() {
      this.selectResult = {};
      this.tableSelectOption = {
        otherOption: {
          tableType: "project",
        },
        queryOpt: {
          disable: false,
          labelWidth: "68px",
          params: {
            projectName: '',
          },
          page: {
            pageSize: 10,
            pageNum: 1,
            total: 0,
          },
          inline: true,
          queryChilds: [
            {
              style: "",
              placeholder: "项目名称",
              clearable: true,
              label: "项目名称",
              type: "input",
              key: "projectName",
              size: "small",
              value: "",
            },
          ],
        },
        tableOpt: {
          loading: false,
          rowKey: "projectId",
          selection: false,
          maxHeight: "45vh",
          childs: [
            {
              style: "",
              label: "项目名称",
              type: "",
              prop: "projectName",
              align: "left",
              width: "",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
            {
              style: "",
              label: "行政区划",
              type: "",
              prop: "regionalismFullName",
              align: "left",
              width: "250",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
            {
              style: "",
              label: "项目地址",
              type: "",
              prop: "projectAddress",
              align: "left",
              width: "250",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
            {
              style: "",
              label: "创建时间",
              type: "",
              prop: "createTime",
              align: "left",
              width: "160",
              "show-overflow-tooltip": false,
              tempType: "span",
            },
          ],
          tableList: {
            type: Array,
          },
        },
        tableList: [],
      };
      this.selectTableShow = true;
    },
    // 查询回调
    childGetList(data) {
      if (data.otherOption.tableType === "project") {
        this.handleQueryProject(data);
      }
    },
    // 查询项目列表
    handleQueryProject(data) {
      listProject(Object.assign(data.page, data.param, { selected: 1 })).then(
        (response) => {
          this.tableSelectOption.tableList = response.rows;
          this.tableSelectOption.queryOpt.page.total = Number(response.total);
        }
      );
    },
    // 点击或者双击数据回调
    returnEvent(data) {
      this.selectResult = {};
      if (data.type === "dblclick") {
        if (data.otherOption.tableType === "project") {
          this.form.projectId = data.value.projectId;
          this.form.projectName = data.value.projectName;
          this.form.siteLat = data.value.projectLat;
          this.form.siteLng = data.value.projectLng;
          this.form.siteAddress = data.value.projectAddress;
        }
        this.selectTableShow = false;
      } else if (data.type === "click") {
        if (data.otherOption.tableType === "project") {
          this.selectResult.projectId = data.value.projectId;
          this.selectResult.projectName = data.value.projectName;
          this.selectResult.siteLat = data.value.projectLat;
          this.selectResult.siteLng = data.value.projectLng;
          this.selectResult.siteAddress = data.value.projectAddress;
        }
        this.selectResult.tableType = data.otherOption.tableType;
      }
    },
    // 点击确定按钮
    resuleClick() {
      if (this.selectResult.tableType === "project") {
        this.form.projectId = this.selectResult.projectId;
        this.form.projectName = this.selectResult.projectName;
        this.form.siteLat = this.selectResult.projectLat;
        this.form.siteLng = this.selectResult.projectLng;
        this.form.siteAddress = this.selectResult.projectAddress;
      }
      this.selectTableShow = false;
    },
    noticeState(state) {
      let className = "";
      switch (state) {
        case "1":
          className = "online";
          break;
        case "0":
          className = "outline";
          break;
        default:
          className = "outline";
      }
      return className;
    },
    // 字典状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.videoProtocolOptions, row.status);
    },
    // 地图方法
    handler({ BMap, map }) {
      //地图
      this.BMap = BMap;
      this.map = map;
      this.mapLoading = false;
      // this.getPointByIp()
    },
    mapEvent(data) {
      this.mapForm.lng = data.lng;
      this.mapForm.lat = data.lat;
      this.mapForm.address = data.address;
      this.$forceUpdate();
    },
    // 使用地图方式定位
    mapClick() {
      if (this.form.siteLng && this.form.siteLat) {
        this.mapCenter.lng = this.form.siteLng;
        this.mapCenter.lat = this.form.siteLat;
        this.mapForm.lng = this.form.siteLng;
        this.mapForm.lat = this.form.siteLat;
        this.mapForm.address = this.form.siteAddress;
      } else {
        this.mapCenter = {
          lng: 119.459889,
          lat: 25.98974,
        };
        this.mapForm.lng = 119.459889;
        this.mapForm.lat = 25.98974;
        this.mapForm.address = "";
      }
      this.visible = !this.visible;
    },
    // 地图显示窗口 确认
    mapSureClick() {
      // 确认的时候将值赋值给form表单并且关闭地图
      this.form.siteAddress = this.mapForm.address
        ? this.mapForm.address
        : this.form.siteAddress;
      this.form.siteLng = this.mapForm.lng;
      this.form.siteLat = this.mapForm.lat;
      this.visible = false;
    },
    // 地图地址选择
    mapAddressFromPoint() {
      if (this.form.siteAddress) {
        // geoCode(this.form.siteAddress, this, { form: 'form', lat: 'shopLat', lng: 'shopLng' })
        gjzCode(this.form.siteAddress, this, {
          form: "form",
          lat: "shopLat",
          lng: "shopLng",
        });
      }
    },
    /** 转换行政划分数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.regionalismId,
        label: node.regionalismName,
        children: node.children,
      };
    },
    /** 查询行政区划下拉树结构 */
    // getRegionalisTree() {
    //   listRegionalism().then((response) => {
    //     this.regionalismOption = [];
    //     const data = {
    //       regionalismId: 0,
    //       regionalismName: "中国",
    //       children: [],
    //     };
    //     data.children = this.handleTree(response.data, "regionalismId", "parentId");
    //     this.regionalismOption.push(data);
    //   });
    // },
    // 行政区划 下拉变化
    regionalismChange(val) {
      this.mapCenter = {
        lng: val.stationLng,
        lat: val.stationLat,
      };
      this.form.siteLng = val.stationLng;
      this.form.siteLat = val.stationLat;
    },
    /** 查询站点监控列表 */
    getList() {
      this.loading = true;
      if (this.queryParams.siteStatus === "") {
        this.queryParams.siteStatus = null;
      }
      listSite(this.queryParams).then((response) => {
        this.siteList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        recordId: undefined,
        siteCode: undefined,
        siteName: undefined,
        regionalismId: undefined,
        siteAddress: undefined,
        siteLng: undefined,
        siteLat: undefined,
        siteStatus: "0",
        videoProtocol: undefined,
        devId: undefined,
        devCode: undefined,
        tenantId: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        remark: undefined,
        m7sVersion: 'v3',
        https: false,
        serverType: "M7S",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.recordId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.tempType = "create";
      this.open = true;
      this.title = "添加站点监控";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.tempType = "update";
      const recordId = row.recordId || this.ids;
      getSite(recordId).then((response) => {
        this.form = response.data;
        // this.form.https = response.data["https"]
        //   ? response.data["https"].toString()
        //   : "false";
        this.open = true;
        this.title = "修改站点监控";
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.recordId != undefined) {
            updateSite(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addSite(this.form).then((response) => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const recordIds = row.recordId || this.ids;
      this.$confirm(
        // '是否确认删除站点监控编号为"' + recordIds + '"的数据项?',
        "是否删除该选项",
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return delSite(recordIds);
        })
        .then((data) => {
          if (data.msg === 'ok') {
            this.msgSuccess('删除成功');
          } else {
            this.msgError(data.msg);
          }
          this.getList();
        })
        .catch(function () {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "iot/site/export",
        {
          ...this.queryParams,
        },
        `iot_site.xlsx`
      );
    },
  },
};
</script>
<style lang="scss">
.video-site {
  .n-dialog {
    .el-dialog__body {
      padding: 20px;
      padding-bottom: 0px;
    }
    .el-dialog__header {
      border-bottom: 1px solid #747373;
    }
    .el-dialog__footer {
      border-top: 1px solid #747373;
    }
  }
  .list-row {
    .notice-item {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 6px;
    }
    .on {
      background: rgb(77, 189, 218);
    }
    .online {
      background: rgb(99, 194, 112);
    }
    .outline {
      background: #e55130;
    }
    .undeloda {
      background: #d3d5d5;
    }
    .notice-text {
      margin-left: 6px;
      margin-right: 8px;
    }
  }
}
</style>
