<template>
  <!-- 站点和摄像头关联 -->
  <div class="publicContainer">
    <el-form :model="queryParams"
             ref="queryRef"
             :inline="true"
             v-show="showSearch">
      <el-form-item label="建设方式"
                    prop="buildType">
        <el-select filterable
                   v-model="queryParams.buildType"
                   placeholder="请选择建设方式">
          <el-option v-for="item in typeNameList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   icon="Search"
                   @click="handleQuery">搜索</el-button>
        <el-button type="success"
                   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"
                   plain
                   icon="Plus"
                   @click="handleAdd"
                   v-hasPermi="['business:siteCameraRelation:add']">新增</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch"
                     @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading"
              :data="siteCameraRelationList"
              @selection-change="handleSelectionChange"
              max-height="650">
      <el-table-column type="selection"
                       width="55" />
      <el-table-column label="建设方式"
                       prop="buildType">
        <template #default="{ row }">
          <dict-tag :options="typeNameList"
                    :value="row.buildType + ''" />
        </template>
      </el-table-column>
      <el-table-column label="监测类型 "
                       prop="monitorTargetType">
        <template #default="{ row }">
          <dict-tag :options="headArr"
                    :value="row.monitorTargetType + ''" />
        </template>
      </el-table-column>
      <el-table-column label="站点名称"
                       prop="stName" />
      <el-table-column label="视频名称"
                       prop="indexCodeName" />
      <el-table-column label="操作"
                       class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link
                     type="primary"
                     icon="Edit"
                     @click="handleUpdate(scope.row)"
                     v-hasPermi="['business:siteCameraRelation:edit']">
            修改
          </el-button>
          <el-button link
                     type="primary"
                     icon="Delete"
                     @click="handleDelete(scope.row)"
                     v-hasPermi="['business:siteCameraRelation:remove']">
            删除
          </el-button>
          <el-button link
                     type="primary"
                     icon="View"
                     @click="handleDetail(scope.row)"
                     v-hasPermi="['business:siteCameraRelation:view']">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

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

    <!-- 添加或修改站点和摄像头关联对话框 -->
    <el-dialog :title="title"
               v-model="open"
               width="800px"
               append-to-body>
      <el-form ref="siteCameraRelationRef"
               :model="form"
               :rules="rules"
               label-width="120px">
        <el-row :gutter="10"
                class="mb8">
          <el-col :span="12">
            <el-form-item label="建设方式"
                          prop="buildType">
              <el-select filterable
                         v-model="form.buildType"
                         placeholder="请选择建设方式"
                         @change="stationTypechange"
                         :disabled="disableds">
                <el-option v-for="item in typeNameList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监测类型"
                          prop="monitorTargetType">
              <el-select filterable
                         v-model="form.monitorTargetType"
                         placeholder="请选择监测类型"
                         @change="stationTypechange"
                         :disabled="disableds">
                <el-option v-for="item in headArr"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10"
                class="mb8">
          <el-col :span="12">
            <el-form-item label="站点名称"
                          prop="stCode">
              <el-select filterable
                         v-model="form.stCode"
                         placeholder="请选择站点编号"
                         @change="stationchange"
                         :disabled="disableds">
                <el-option v-for="dict in stCodeList"
                           :key="dict.id"
                           :label="dict.stName"
                           :value="dict.stCode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频名称"
                          prop="indexCodeList">
              <el-select filterable
                         v-model="form.indexCodeList"
                         placeholder="请选择视频编号"
                         @change="indexCodechange"
                         multiple>
                <el-option v-for="dict in cameraList"
                           :key="dict.indexCode"
                           :label="dict.name"
                           :value="dict.indexCode" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info"
                     @click="cancel">取 消</el-button>
          <el-button type="primary"
                     @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 站点和摄像头关联详情 -->
    <el-dialog title="站点和摄像头关联详情"
               v-model="detailOpen"
               width="900px"
               append-to-body>
      <div class="publicContainer">
        <div class="publicDetail">
          <div class="part">
            <p class="title">建设方式:</p>
            <p class="content">
              <dict-tag :options="typeNameList"
                        :value="dialogFormDetail.buildType + ''" />
            </p>
          </div>
          <div class="part">
            <p class="title">监测类型:</p>
            <p class="content">
              <dict-tag :options="headArr"
                        :value="dialogFormDetail.monitorTargetType + ''" />
            </p>
          </div>
          <div class="part">
            <p class="title">站点名称:</p>
            <p class="content">
              {{ dialogFormDetail.stName }}
            </p>
          </div>
          <div class="part">
            <p class="title">站点编号:</p>
            <p class="content">
              {{ dialogFormDetail.stCode }}
            </p>
          </div>
          <div class="part">
            <p class="title">视频编号:</p>
            <p class="content">
              {{ dialogFormDetail.indexCode }}
            </p>
          </div>
          <div class="part">
            <p class="title">视频名称:</p>
            <p class="content">
              {{ dialogFormDetail.indexCodeName }}
            </p>
          </div>
          <!-- <div class="part">
            <p class="title">负责人手机:</p>
            <p class="content">
              {{ dialogFormDetail.dutyUserPhone }}
            </p>
          </div>
          <div class="part">
            <p class="title">备注:</p>
            <p class="content">
              {{ dialogFormDetail.remark }}
            </p>
          </div> -->
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="SiteCameraRelation">
import {
  pagesiteCameraRelation,
  getsiteCameraRelation,
  delsiteCameraRelation,
  addsiteCameraRelation,
  updatesiteCameraRelation,
  rtuSiteInfolist,
} from '@/api/cameraResource/siteCameraRelation';
import { listUser } from '@/api/system/user';
import { cameraInfolist } from '@/api/cameraResource/cameraGroupInfo';

const { proxy } = getCurrentInstance();
const { site_type } = proxy.useDict('site_type');
const site_types = ref([]);
const siteCameraRelationList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref('');
const detailOpen = ref(false);
const disableds = ref(false);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    type: null,
    buildType: null,
    stationType: null,
    stCode: null,

    indexCode: null,
    indexName: null,
    dutyUserNo: null,
    dutyUserName: null,
    dutyUserPhone: null,
    status: null,
  },
  rules: {
    buildType: [{ required: true, message: '不能为空', trigger: 'change' }],
    stName: [{ required: true, message: '不能为空', trigger: 'change' }],
    stCode: [{ required: true, message: '不能为空', trigger: 'change' }],
    indexCodeList: [{ required: true, message: '不能为空', trigger: 'change' }],
    dutyUserNo: [{ required: true, message: '不能为空', trigger: 'change' }],
  },
  dialogFormDetail: {}, //详情弹框数据
});
const stCodeList = ref([]);
const buildType = ref('');
const monitorTargetType = ref('');
const allpeople = ref([]); //所有人
const cameraList = ref([]); //所有的视频
const stationList = ref([]); //所有的站点
const stationTypeList = ref([
  { dictValue: 2, dictLabel: '雨量站' },
  { dictValue: 1, dictLabel: '水位站' },
]); //所有的站点类型

const typeNameList = ref([
  { value: 'owner', label: '自建' },
  { value: 'share', label: '共享' },
  { value: 'official', label: '市局' },
]); //绑定类型

const headArr = reactive([
  { label: '典型地块', value: 'typical_land' },
  { label: '雨量', value: 'rainfall' },
  { label: '管网', value: 'pipeline' },
  { label: '内涝点', value: 'waterlogging' },
  { label: '排口', value: 'drain_outlet' },
  { label: '河道', value: 'river' },
]);

const { queryParams, form, rules, dialogFormDetail } = toRefs(data);

/** 查询站点和摄像头关联列表 */
function getList () {
  loading.value = true;
  pagesiteCameraRelation(queryParams.value).then(response => {
    siteCameraRelationList.value = response.data;
    total.value = response.total;
    loading.value = false;
  });
}

// 获得所有人的接口
function getallpeople () {
  let params = {
    pageNum: 1,
    pageSize: 9999,
  };
  listUser(params).then(res => {
    allpeople.value = res.data;
  });
}

// 获取所有摄像头的接口
function Getallvideo () {
  cameraInfolist().then(res => {
    cameraList.value = res.data;
  });
}

function peoplechange (value) {
  var obj = allpeople.value.filter(item => {
    return item.userId == value;
  })[0];
  form.value.dutyUserName = obj.nickName;
  form.value.dutyUserPhone = obj.phonenumber;
}

function indexCodechange (value) {
  var obj = cameraList.value.filter(item => {
    return item.id == value;
  })[0];
  form.value.indexName = obj.name;
}

// function typeNamechange (value) {
//   var obj = typeNameList.value.filter(item => { return item.dictValue == value })[0]
//   form.value.typeName = obj.name
// }

// 筛选站点编号
function stationTypechange () {
  stCodeList.value = [];
  // console.log(form, 'form');
  // console.log(form.value.monitorTargetType, 'form.value.monitorTargetType');
  // console.log(form.value.buildType, 'form.value.buildType');
  // console.log(stationList.value[0], 1111);

  for (let i = 0; i <= stationList.value.length; i++) {
    // console.log(stationList.value[i], 8989);
    if (stationList.value[i].monitorTargetType == form.value.monitorTargetType && stationList.value[i].buildType == form.value.buildType) {
      stCodeList.value.push(stationList.value[i]);
      console.log(stationList.value[i], 123123);
    }
  }
  // console.log(stationList.value, 1111);
  // var obj = stationTypeList.value.filter(item => {
  //   return item.dictValue == value;
  // })[0];
  // form.value.stName = obj.name;
  // stationList.value = [];
  // site_types.value.forEach(i => {
  //   if (i.monitorTargetType == e) {
  //     stationList.value.push(i);
  //     console.log(stationList.value, 'stationList.value');
  //   }
  // });
}

async function rtuSiteInfolistM (value) {
  // var obj = stationList.value.filter(item => { return item.id == value })[0]
  let { data } = await rtuSiteInfolist();
  stationList.value = data;
  // form.value.indexName = obj.name
  console.log(stationList.value, 'stationList.value');
}
// 切换站点点位
function stationchange (params) {
  stationList.value.forEach(element => {
    if (element.stCode == params) {
      form.value.stName = element.stName;
      return;
    }
  });
}

// 取消按钮
function cancel () {
  open.value = false;
  detailOpen.value = false;
  reset();
}

// 表单重置
function reset () {
  form.value = {
    id: null,
    type: null,
    typeName: null,
    stationType: null,
    stCode: null,
    stName: null,
    indexCodeList: null,
    indexName: null,
    dutyUserNo: null,
    dutyUserName: null,
    dutyUserPhone: null,
    remark: null,
    status: null,
    delFlag: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
  };
  proxy.resetForm('siteCameraRelationRef');
}

/** 搜索按钮操作 */
function handleQuery () {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery () {
  proxy.resetForm('queryRef');
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange (selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd () {
  reset();
  open.value = true;
  title.value = '添加站点和摄像头关联';
  disableds.value = false;
  stCodeList.value = [];
}

/** 修改按钮操作 */
function handleUpdate (row) {
  reset();
  // open.value = true;
  // title.value = '修改站点和摄像头关联';
  disableds.value = true;
  // return;
  const _id = row.id || ids.value;
  getsiteCameraRelation(_id).then(response => {
    form.value = response.data;
    form.value.dutyUserNo = Number(form.value.dutyUserNo);
    open.value = true;
    title.value = '修改站点和摄像头关联';
    stCodeList.value = [];

    for (let i = 0; i <= stationList.value.length; i++) {
      console.log(stationList.value[i], 8989);
      if (
        stationList.value[i].monitorTargetType == form.value.monitorTargetType &&
        stationList.value[i].buildType == form.value.buildType
      ) {
        stCodeList.value.push(stationList.value[i]);
      }
    }
  });
}

/** 提交按钮 */
function submitForm () {
  console.log(form.value, 'form.value');
  proxy.$refs['siteCameraRelationRef'].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updatesiteCameraRelation(form.value).then(response => {
          proxy.$modal.msgSuccess('修改成功');
          open.value = false;
          getList();
        });
      } else {
        addsiteCameraRelation(form.value).then(response => {
          proxy.$modal.msgSuccess('新增成功');
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete (row) {
  const _ids = row.id || ids.value;
  proxy.$modal
    .confirm('是否确认删除站点和摄像头关联编号为"' + _ids + '"的数据项？')
    .then(function () {
      return delsiteCameraRelation(_ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess('删除成功');
    })
    .catch(() => { });
}
//查看详情操作
function handleDetail (row) {
  detailOpen.value = true;
  dialogFormDetail.value = row;
}

getList();
getallpeople();
Getallvideo();
rtuSiteInfolistM();
</script>