<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form label-width="auto" :rules="stationInfoRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1">
        <el-form-item
          :label="i.label"
          :style="{ width: i.prop == 'fileList1' ? '93%' : '45%' }"
          :prop="i.prop"
          v-for="i in stationInfoForm"
          :key="i.prop"
          :disabled="typeList.type == 1 || typeList.type == 2"
        >
          <el-input v-model="FormList.lonLat" id="lonLat" v-if="i.prop == 'lonLat'" @click="clickMap(2)" :placeholder="i.placeholder">
          </el-input>
          <el-select
            style="width: 100%"
            clearable
            v-model="FormList.plcStationType"
            class="m-2"
            v-else-if="i.prop == 'plcStationType'"
            :placeholder="i.placeholder"
            id="plcStationType"
          >
            <el-option v-for="dict in plc_station_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
          <el-radio-group v-model="FormList.status" class="ml-4" v-else-if="i.prop == 'status'" id="status">
            <el-radio style="margin-top: -5px" label="1" size="large">启用</el-radio>
            <el-radio style="margin-top: -5px" label="0" size="large">停用</el-radio>
          </el-radio-group>
          <el-input
            v-else
            v-model="FormList[i.prop]"
            :placeholder="i.placeholder"
            :disabled="i.prop == 'stationCode' && typeList.type == 2"
            :type="i.prop == 'remark' ? 'textarea' : ''"
            :id="FormList[i.prop]"
          >
            <template #append v-if="i.prop == 'budget'"> 万元 </template>
          </el-input>
        </el-form-item>
        <el-form-item label="创建时间:" v-if="typeList.type == 1">
          <el-date-picker
            v-model="FormList.createTime"
            type="date"
            placeholder="创建时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="更新时间:" v-if="typeList.type == 1">
          <el-date-picker
            v-model="FormList.updateTime"
            type="date"
            placeholder="更新时间"
            style="width: 100%"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="建筑面积(亩):" prop="buildArea" style="width: 45%">
          <el-input-number :min="0" v-model="FormList.buildArea" placeholder="请输入建筑面积" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="建设年份:" prop="constructionYear" style="width: 45%">
          <el-input v-model="FormList.constructionYear" placeholder="请输入建设年份" clearable />
        </el-form-item>
        <el-form-item label="设计流量(立方/小时):" prop="designFlow" style="width: 45%">
          <el-input-number :min="0" v-model="FormList.designFlow" placeholder="请输入" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="设备数量:" prop="deviceCount" style="width: 45%">
          <el-input-number :min="0" v-model="FormList.deviceCount" placeholder="请输入" clearable style="width: 100%" />
        </el-form-item>
        <el-form-item label="关联摄像头:" prop="cameraInfoIds" style="width: 100%">
          <el-select placeholder="请输入" v-model="FormList.cameraInfoIds" clearable filterable multiple style="width: 100%">
            <el-option v-for="item in cameraList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="介绍:" style="width: 100%" prop="introduce">
          <el-input
            placeholder="请输入"
            v-model="FormList.introduce"
            :autosize="{ minRows: 3 }"
            type="textarea"
            clearable
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="图片:" style="width: 100%">
          <ImageFileUpload :limit="3" :saveFileArr="FormList.fileSaveRequestList" :listType="'picture-card'" />
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      v-model="isMap"
      title="地图选取位置(可搜索可直接点击获取)"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="800px"
    >
      <MapPosition v-if="isMap" :isShowSearch="true" :isShowTool="false" :isSelectAddress="true" @getPlace="getAddress"></MapPosition>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="isMap = false">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { pagecameraResource } from '@/api/cameraResource/cameraResource';
import { projectInfoAdd, projectInfoEdit } from '@/api/scada/stationInfo';
import MapPosition from '@/components/Map/index.vue';
import bus from '@/utils/mitt';
import { stationInfoRules } from '@/utils/rules';
import { stationInfoForm } from '@/utils/form';
import { ElMessage, ElMessageBox } from 'element-plus';
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传

const { proxy } = getCurrentInstance();
const { plc_station_type } = proxy.useDict('plc_station_type');
const { typeList } = defineProps(['typeList']);
const emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
let FormList = ref({ projectNo: '', fileSaveRequestList: [], status: '1' });
const fileList1 = ref([]);
const cameraList = ref([]);
function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      if (typeList.type == 4) {
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            proxy.$modal.msgSuccess('新增成功');
            emits('onModalClose');
          }
        });
      } else {
        projectInfoEdit(FormList.value).then(({ code }) => {
          if (code == 200) {
            proxy.$modal.msgSuccess('修改成功');
            emits('onModalClose');
          }
        });
      }
    }
  });
}

// 获取位置
function getAddress(val) {
  FormList.value.lonLat = val.lonLat.join(',');
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
  FormList.value.fileSaveRequestList = [];
  fileList1.value = [];
}
function closed() {
  emits('onModalClose');
}
const isMap = ref(false);
function clickMap(v) {
  isMap.value = true;
}
function handleExceed(uploadFile) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function beforeRemove(file) {
  return true;
}

/** 查询摄像头基础信息列表 */
function getList() {
  let param = {
    pageNum: 1,
    pageSize: 9999,
  };
  pagecameraResource(param).then(response => {
    cameraList.value = response.data;
    console.log('cameraList.value', cameraList.value);
  });
}

onMounted(() => {
  FormList.value = typeList;
  bus.on('mapPointClickSix', ({ lat, lng, address = '武汉市xx' }) => {
    FormList.value.lonLat = lng + ',' + lat;
    isMap.value = false;
  });
  getList();
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 10px;
}
</style>