<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form label-width="120px" :rules="plcPointInfoRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1">
        <el-form-item
          :label="i.label"
          style="width: 45%"
          :prop="i.prop"
          v-for="i in plcPointInfoForm"
          :disabled="typeList.type == 1 || typeList.type == 2"
        >
          <el-radio-group v-model="FormList.status" v-if="i.prop == '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-radio-group v-model="FormList.createReport" v-else-if="i.prop == 'createReport'">
            <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-select
            style="width: 100%"
            clearable
            v-model="FormList.monitorType"
            class="m-2"
            v-else-if="i.prop == 'monitorType'"
            :placeholder="i.placeholder"
          >
            <el-option v-for="dict in monitor_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
          <!-- 站点 -->
          <el-select
            style="width: 100%"
            v-model="FormList.stationCode"
            v-else-if="i.prop == 'stationCode'"
            :placeholder="i.placeholder"
            @change="stationNameChange"
            :disabled="typeList.type == 2"
          >
            <el-option
              v-for="dict in typeList.stationName_type"
              :key="dict.stationCode"
              :label="dict.stationName"
              :value="dict.stationCode"
            />
          </el-select>
          <!-- 区域 -->
          <el-select
            style="width: 100%"
            v-model="FormList.areaCode"
            v-else-if="i.prop == 'areaCode'"
            :disabled="!FormList.stationCode"
            :placeholder="i.placeholder"
          >
            <el-option v-for="dict in areaName_type" :key="dict.stationCode" :label="dict.areaName" :value="dict.areaCode" />
          </el-select>
          <!-- 设备 -->
          <el-select
            style="width: 100%"
            v-model="FormList.deviceCode"
            v-else-if="i.prop == 'deviceCode'"
            :disabled="!FormList.stationCode"
            :placeholder="i.placeholder"
          >
            <el-option v-for="dict in deviceNameList" :key="dict.stationCode" :label="dict.deviceName" :value="dict.deviceCode" />
          </el-select>

          <el-select
            style="width: 100%"
            v-model="FormList.pointType"
            class="m-2"
            v-else-if="i.prop == 'pointType'"
            :placeholder="i.placeholder"
          >
            <el-option v-for="dict in plc_point_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>

          <el-select
            style="width: 100%"
            v-model="FormList.dataType"
            class="m-2"
            v-else-if="i.prop == 'dataType'"
            :placeholder="i.placeholder"
          >
            <el-option v-for="dict in data_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>

          <el-input
            v-else
            v-model="FormList[i.prop]"
            :placeholder="i.placeholder"
            :disabled="i.prop == 'projectNo'"
            :type="i.prop == 'orderNum' || i.prop == 'scaleNum' ? 'number' : ''"
          >
          </el-input>
        </el-form-item>

        <el-form-item
          label="报表统计类型:"
          prop="reportType"
          :disabled="typeList.type == 1 || typeList.type == 2"
          style="width: 45%"
          :rules="[{ required: FormList.createReport == 1, message: '报表统计类型不能为空', trigger: 'change' }]"
        >
          <el-select style="width: 100%" clearable v-model="FormList.reportType" class="m-2" placeholder="请选择报表统计类型">
            <el-option v-for="dict in report_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="搜索展示:" prop="dataShow" style="width: 45%" :disabled="typeList.type == 1 || typeList.type == 2">
          <el-radio-group v-model="FormList.dataShow">
            <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-form-item>
        <el-form-item label="数据来源:" prop="dataSource" style="width: 45%">
          <el-select filterable v-model="FormList.dataSource" placeholder="选择" style="width: 610px" clearable>
            <el-option v-for="item in dataSourceList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="数据共享地址:" prop="dataUrl" style="width: 45%" v-show="FormList.dataSource == 2">
          <el-input v-model="FormList.dataUrl" placeholder="请输入数据共享地址" clearable />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { projectInfoAdd, projectInfoEdit } from '@/api/scada/plcPointInfo';
import bus from '@/utils/mitt';
import { plcPointInfoRules } from '@/utils/rules';
import { plcPointInfoForm } from '@/utils/form';
import { areaInfolist } from '@/api/scada/areaInfo';
import { getInfolist } from '@/api/scada/deviceInfo';
import { reactify } from '@vueuse/core';
import { reactive } from 'vue';

const dataSourceList = reactive([
  { value: 1, label: '网关采集' },
  { value: 2, label: '数据共享' },
]);

const deviceNameList = ref([]);
const areaName_type = ref([]);

const { proxy } = getCurrentInstance();
const { data_type, monitor_type, report_type, plc_point_type } = proxy.useDict(
  'data_type',
  'monitor_type',
  'report_type',
  'plc_point_type'
);
const { typeList } = defineProps(['typeList']);
const emits = defineEmits();
defineExpose({ submit, closed, resetFiled });
let FormList = ref({ projectNo: '', fileSaveRequestList: [], status: '1', dataShow: 1, createReport: 1 });
const fileList1 = ref([]);
function submit() {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      FormList.value.fileSaveRequestList = [];
      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 resetFiled() {
  proxy.$refs.ruleForm.resetFields();
  fileList1.value = [];
}

function closed() {
  emits('onModalClose');
}

// 站点选择点击,加载区域和设备
function stationNameChange(code) {
  console.log(code, '1');
  getAreaList({ stationCode: code });
  getDeviceList({ stationCode: code });
}
// 获取区域
const getAreaList = async codes => {
  areaName_type.value = [];
  let res = await areaInfolist(codes);
  if (res && res.code == 200) {
    console.log(res, 'res');
    areaName_type.value = res.data;
  }
};
// 获取设备
const getDeviceList = async codes => {
  deviceNameList.value = [];
  let res = await getInfolist(codes);
  if (res && res.code == 200) {
    deviceNameList.value = res.data;
  }
};
onMounted(() => {
  FormList.value = typeList;
  getAreaList({ stationCode: FormList.value.stationCode });
  getDeviceList({ stationCode: FormList.value.stationCode });
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>