<template>
  <!-- 易涝积水点详情 -->
  <div class="publicContainer">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="基本信息" name="1">
        <!-- 基本信息 -->
        <div class="publicDetail">
          <div class="part" v-for="(item, index) in baseInfo" :key="index">
            <p class="title">{{ item.name }}:</p>
            <p
              class="content"
              v-if="
                item.value == 'isEngineeringRenovation' ||
                item.value == 'isPlanRectification' ||
                item.value == 'isCameraInstall' ||
                item.value == 'isClearDredg' ||
                item.value == 'isPersonDuty' ||
                item.value == 'isProjectAdminister' ||
                item.value == 'isStandbyEquipment'
              "
            >
              {{ props.detailObj[item.value] == 0 ? '是' : '否' }}
            </p>
            <p class="content" v-else-if="item.value == 'waterlogging'">
              <dict-tag :options="waterlogging_type" :value="props.detailObj['waterlogging']" />
            </p>
            <p class="content" v-else-if="item.value == 'originType'">
              <dict-tag :options="waterlogging_origin" :value="props.detailObj['originType']" />
            </p>
            <p class="content" v-else>{{ props.detailObj[item.value] }}</p>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="GIS地图位置" name="2">
        <!-- GIS地图位置 -->
        GIS地图位置
      </el-tab-pane>
      <el-tab-pane label="历史积水深度" name="3">
        <!-- 历史积水深度 -->
        <el-form :model="queryParams" :inline="true" ref="queryRef">
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="积水点监测站点名称"
                            prop="postCode">
                <el-input v-model="queryParams.postCode"
                          placeholder="请输入"
                          clearable
                          @keyup.enter="handleQuery"
                          style="width:160px" />
              </el-form-item>
            </el-col> -->
            <el-col :span="10">
              <el-form-item label="积水发生时间" prop="daterange">
                <el-date-picker
                  type="daterange"
                  v-model="queryParams.daterange"
                  value-format="YYYY-MM-DD"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="请选择日期"
                  style="width: 240px"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="积水深度" prop="postCode">
                <el-select v-model="queryParams.postCode" placeholder="请选择" clearable style="width: 180px">
                  <el-option v-for="item in flowType" :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="postCode"
                            style="width:360px">
                <el-select v-model="queryParams.postCode"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="item in hourType"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="6">
              <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-col>
          </el-row>
        </el-form>
        <el-table :data="tableData">
          <el-table-column label="场次降雨编号" prop="postCode" />
          <el-table-column label="降雨开始时间" prop="postCode" />
          <el-table-column label="降雨结束时间" prop="postCode" />
          <el-table-column label="累计降雨量" prop="postCode" />
          <el-table-column label="降雨强度" prop="postCode" />
          <el-table-column label="最大积水深度" prop="postCode" />
          <el-table-column label="操作" width="160" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="工程整治" name="4">
        <!-- 工程整治 -->
        <el-form :model="queryParams2" :inline="true" ref="queryRef2">
          <el-form-item label="工程名称" prop="postCode">
            <el-input v-model="queryParams2.postCode" placeholder="请输入" clearable @keyup.enter="handleQuery2" />
          </el-form-item>
          <el-form-item label="开工时间" prop="date">
            <el-date-picker type="date" v-model="queryParams2.date" value-format="YYYY-MM-DD" placeholder="请选择日期"> </el-date-picker>
          </el-form-item>
          <el-form-item label="资金来源" prop="postCode">
            <el-select v-model="queryParams2.postCode" placeholder="请选择" clearable>
              <el-option v-for="item in moneyType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery2">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery2">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData2">
          <el-table-column label="工程名称" prop="postCode" />
          <el-table-column label="治理内容" prop="postCode" />
          <el-table-column label="开工时间" prop="postCode" />
          <el-table-column label="计划完工时间" prop="postCode" />
          <el-table-column label="详细工程进展情况" prop="postCode" />
          <el-table-column label="投资金额" prop="postCode" />
          <el-table-column label="资金来源" prop="postCode" />
          <el-table-column label="治理前效果图" prop="postCode" />
          <el-table-column label="治理后效果图" prop="postCode" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="关联视频监控" name="5">
        <!-- 关联视频监控 -->
        <VideosHK videoHeightCus="500" v-if="activeName == '5'"></VideosHK>
      </el-tab-pane>
    </el-tabs>
    <!-- 历史积水深度编辑 -->
    <el-dialog title="编辑内涝治理情况" v-model="dialogShow" width="500px" append-to-body>
      <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="120px" class="publicForm">
        <el-form-item label="雨停后退水时长" prop="hour">
          <el-input type="number" :min="0" v-model="formData.hour" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="断交时长" prop="hour">
          <el-input type="number" :min="0" v-model="formData.hour" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="积水原因类别" prop="jinjiType">
          <el-select v-model="formData.jinjiType" placeholder="请选择" clearable>
            <el-option v-for="item in statusType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="具体原因" prop="hour">
          <el-input type="textarea" v-model="formData.hour" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="易涝积水点详情">
import VideosHK from '@/components/videoHK/index.vue'; //查看海康视频

const props = defineProps({
  detailObj: {
    type: Object,
    default: {},
  },
});

const { proxy } = getCurrentInstance();
const activeName = ref('1');
const { waterlogging_type } = proxy.useDict('waterlogging_type'); //易涝点类型  字典数据
const { waterlogging_origin } = proxy.useDict('waterlogging_origin'); // 易涝点原因 字典数据
const baseInfo = ref([
  { name: '积水点名称', value: 'name' },
  { name: '积水点类型', value: 'waterlogging' },
  { name: '积水原因', value: 'originType' },
  { name: '易涝点位置', value: 'address' },
  { name: '所属街道', value: 'belongsStreet' },
  { name: '行政辖区', value: 'jurisdiction' },
  { name: '风险类别', value: 'riskLevel' },
  { name: '是否为内涝点专项行动方案工程整治点位', value: 'isEngineeringRenovation' },
  { name: '是否为易涝点整治专项行动方案点位', value: 'isPlanRectification' },
  { name: '视频监控等设备安装情况', value: 'isCameraInstall' },
  { name: '是否提前清掏疏浚', value: 'isClearDredg' },
  { name: '是否专人值守', value: 'isPersonDuty' },
  { name: '是否提前备置排涝设备', value: 'isStandbyEquipment' },
  { name: '是否实施工程治理', value: 'isProjectAdminister' },
  { name: '积水点联系人', value: 'contactsPerson' },
  { name: '联系电话', value: 'telephone' },
  { name: '备注', value: 'remark' },
  { name: '本年度发生积水次数', value: 'yearHappenCount' },
  { name: '本年度积水最大深度(mm)', value: 'yearMaxDepth' },
  { name: '本年度积水最大深度退水时长(h)', value: 'yearMaxHour' },
]);
const flowType = ref([
  { label: '小于15cm', value: '1' },
  { label: '大于15cm小于30cm', value: '2' },
  { label: '大于30cm小于50cm', value: '3' },
]);
const hourType = ref([
  { label: '小于0.5h', value: '1' },
  { label: '大于0.5h小于1.5h', value: '2' },
  { label: '大于1.5h小于2h', value: '3' },
]);
const statusType = ref([
  { label: '设施过流能力', value: '1' },
  { label: '设施结构功能', value: '2' },
  { label: '日常运维', value: '3' },
]);
const moneyType = ref([
  { label: '区财政资金', value: '1' },
  { label: '国家专项资金', value: '2' },
  { label: '抢险救灾专项资金', value: '3' },
  { label: '社会资金', value: '4' },
]);
const tableData = ref([]);
const tableData2 = ref([]);
const dialogShow = ref(false);
const allData = reactive({
  formData: {
    hour: 0,
  },
  queryParams: {
    postCode: '',
    daterange: [proxy.moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')],
  },
  queryParams2: {
    postCode: '',
    date: proxy.moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'),
  },
  rulesForm: {
    hour: [{ required: true, message: '请输入', trigger: 'blur' }],
  },
});
const { queryParams, queryParams2, formData, rulesForm } = toRefs(allData);
// 历史积水深度查询
function handleQuery() {}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef');
  handleQuery();
}
// 历史积水深度编辑
function handleEdit() {
  dialogShow.value = true;
}
/** 取消按钮 */
function cancelForm() {
  dialogShow.value = false;
}
// 工程整治查询
function handleQuery2() {}
/** 工程整治操作 */
function resetQuery2() {
  proxy.resetForm('queryRef2');
  handleQuery2();
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      updatePost(formData.value).then(response => {
        proxy.$modal.msgSuccess('修改成功');
        dialogShow.value = false;
        getDataList();
      });
    }
  });
}
onMounted(() => {});
</script>
<style lang="scss"></style>