<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="监控点名称"
        class="filter-item"
        clearable
      />

      <!-- <el-input
        v-model="listQuery.username"
        placeholder="请输入用户名"
        class="filter-item"
        clearable
      /> -->

      <el-select
        v-model="listQuery.group"
        class="filter-item"
        placeholder="分组"
        clearable
      >
        <el-option
          v-for="(item, index) in groups"
          :key="index"
          :label="item.groupName"
          :value="item.id"
        />
      </el-select>

      <el-select
        v-model="listQuery.isMarking"
        class="filter-item"
        placeholder="是否标注"
        clearable
      >
        <el-option label="已标注" :value="true" />
        <el-option label="未标注" :value="false" />
      </el-select>

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
        >搜索</el-button
      >

      <el-button class="filter-item" type="primary" @click="handleReset"
        >重置标注数据</el-button
      >
      <!-- <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
        >新建员工帐号</el-button
      > -->
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column label="监控点名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="分组id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column> -->

      <el-table-column label="经度" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.longitude }}</span>
        </template>
      </el-table-column>
      <el-table-column label="纬度" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.latitude }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标注" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.marking }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标注时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.markingDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标注者名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.markingName }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="180"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.type !== 0"
            type="primary"
            size="mini"
            @click="handleUpdate(scope.row.id)"
            >配置分组</el-button
          >
          <!-- <el-button
            v-if="scope.row.type !== 0"
            type="primary"
            size="mini"
            @click="handleReset(scope.row)"
            >重置</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" model="form" label-width="100px">
        <el-form-item label="绑定组">
          <el-select v-model="form.groupId">
            <el-option
              v-for="(item, index) in groups"
              :key="index"
              :label="item.groupName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="操作">
          <el-radio-group v-model="form.isAdd">
            <el-radio :label="true">绑定</el-radio>
            <el-radio :label="false">解绑</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSetGroup">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { spList, groupList, remarkReset, spGroupSet } from "@/api/spdwzl";
import Pagination from "@/components/Pagination/index";
// import { staffOptions } from "@/utils";
export default {
  components: { Pagination },
  filters: {
    typeFilter(type) {
      // 0-枪机,1-半球,2-快球,3-带云台枪机
      const typeMap = {
        0: "枪机",
        1: "半球",
        2: "快球",
        3: "带云台枪机",
      };
      return typeMap[type];
    },
  },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      listLoading: false,
      //   staffOptions,
      cameraTypes: [
        {
          label: "枪机",
          value: 0,
        },
        {
          label: "半球",
          value: 1,
        },
        {
          label: "快球",
          value: 2,
        },
        {
          label: "带云台枪机",
          value: 3,
        },
      ],
      groups: [],
      groups1: [
        {
          id: 1,
          groupName: "1组",
          isShow: true,
        },
        {
          id: 2,
          groupName: "2组",
          isShow: true,
        },
        {
          id: 3,
          groupName: "3组",
          isShow: true,
        },
        {
          id: 4,
          groupName: "4组",
          isShow: true,
        },
      ],
      dialogVisible: false,
      form: { groupId: undefined, id: undefined, isAdd: false },
    };
  },
  created() {
    // this.getBusinessList()
    this.getGroupList();
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      spList(this.listQuery).then((res) => {
        this.list = res.d.records;
        this.total = res.d.total;
        this.listLoading = false;
      });
    },
    getGroupList() {
      groupList().then((res) => {
        console.log(res);
        this.groups = res.d;
      });
    },
    handleSearch() {
      this.listQuery.current = 1;
      this.getList();
    },
    handleCreate() {
      this.$router.push({
        path: "/staff/create",
      });
    },
    handerDetail(row) {
      const { id, type } = row;
      this.$router.push({
        path: "/staff/detail",
        query: { id, type },
      });
    },
    // 修改(提交)
    confirm({ data, close, hideLoading }) {
      update(data)
        .then((res) => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.$refs["table"].getList();
          close();
        })
        .catch(() => {
          hideLoading();
        });
    },
    handleUpdate(id) {
      this.dialogVisible = true;
      this.form.id = id;
    },

    handleReset() {
      this.$confirm(`是否重置?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        remarkReset().then((res) => {
          console.log(res);
          if (res.c === 200) {
            this.$message.success("重置成功");
          }
        });
      });
    },
    handleSetGroup() {
      spGroupSet([this.form]).then((res) => {
        console.log(res);
        if (res.c === 200) {
          this.dialogVisible = false;
          this.$message.success("绑定成功");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.el-select {
  margin-right: 10px;
}
</style>
