<template>
  <div class="hum-page-container">
    <div class="hum-page-title">{{ title }}</div>
      <el-form :model="form" :rules="rules" size="large" ref="form" label-position="top">
        <div class="hum-page-form">
          <el-row :gutter="30">
            <el-col :span="6">
              <el-form-item label="站码" prop="id">
                <el-input
                  v-model="form.id"
                  placeholder="请输入站码"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="站点名称" prop="siteName">
                <el-input
                  v-model="form.siteName"
                  placeholder="请输入站点名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="站点类型" prop="siteType">
                <el-select v-model="form.siteType" placeholder="站点类型" clearable>
                  <el-option
                    v-for="option in siteTypeOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备ID" prop="deviceId">
                <el-input
                  v-model="form.deviceId"
                  placeholder="请输入设备ID"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="纬度" prop="lat">
                <el-input
                  v-model="form.lat"
                  placeholder="请输入纬度"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="经度" prop="lon">
                <el-input
                  v-model="form.lon"
                  placeholder="请输入经度"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设站日期" prop="siteTime">
                <el-date-picker
                  v-model="form.siteTime"
                  type="date"
                  placeholder="请选择设站日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="行政区域" prop="adminRegion">
                <el-input
                  v-model="form.adminRegion"
                  placeholder="请输入行政区域"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="管理单位" prop="manageUnit">
                <el-input
                  v-model="form.manageUnit"
                  placeholder="请输入管理单位"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属单位" prop="affiliatedUnit">
                <el-input
                  v-model="form.affiliatedUnit"
                  placeholder="请输入所属单位"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人姓名" prop="contactName">
                <el-input
                  v-model="form.contactName"
                  placeholder="请输入联系人姓名"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系人电话" prop="contactPhone">
                <el-input
                  v-model="form.contactPhone"
                  placeholder="请输入联系人电话"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="摄像头IP地址" prop="videoUrl">
                <el-input
                  v-model="form.videoUrl"
                  placeholder="请输入摄像头IP地址"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="摄像头端口" prop="videoPort">
                <el-input
                  v-model="form.videoPort"
                  placeholder="请输入摄像头端口"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="摄像头用户名" prop="videoUser">
                <el-input
                  v-model="form.videoUser"
                  placeholder="请输入摄像头用户名"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="摄像头密码" prop="videoPwd">
                <el-input
                  v-model="form.videoPwd"
                  placeholder="请输入摄像头密码"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="hum-page-form-action">
          <el-button @click="$router.back()">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">保存</el-button>
        </div>
      </el-form>
  </div>
</template>

<script>
import { addSite, updateSite, getSite } from '@/api/site/site'

export default {
  data() {
    return {
      id: 0,
      loading: false,
      form: {
        id: '',
        siteName: '',
        siteType: '',
        deviceId: '',
        lon: '',
        lat: '',
        siteTime: '',
        adminRegion: '',
        manageUnit: '',
        affiliatedUnit: '',
        contactName: '',
        contactPhone: '',
        videoUrl: '',
        videoPort: '',
        videoUser: '',
        videoPwd: '',
      },
      rules: {
        id: [
          { required: true, message: "站码不能为空", trigger: "blur" }
        ],
        siteName: [
          { required: true, message: "站点名称不能为空", trigger: "blur" }
        ],
        siteType: [
          { required: true, message: "站点类型不能为空", trigger: "change" }
        ],
        deviceId: [
          { required: true, message: "设备ID不能为空", trigger: "blur" }
        ],
        lon: [
          { required: true, message: "精度不能为空", trigger: "blur" }
        ],
        lat: [
          { required: true, message: "维度不能为空", trigger: "blur" }
        ],
        siteTime: [
          { required: true, message: "设站日期不能为空", trigger: "blur" }
        ],
        adminRegion: [
          { required: true, message: "行政区域不能为空", trigger: "blur" }
        ],
        manageUnit: [
          { required: true, message: "管理单位不能为空", trigger: "blur" }
        ],
        affiliatedUnit: [
          { required: true, message: "所属单位不能为空", trigger: "blur" }
        ],
        contactName: [
          { required: true, message: "联系人姓名不能为空", trigger: "blur" }
        ],
        contactPhone: [
          { required: true, message: "联系人电话不能为空", trigger: "blur" }
        ],
        // videoUrl: [
        //   { required: true, message: "摄像头IP地址不能为空", trigger: "blur" }
        // ],
        // videoPort: [
        //   { required: true, message: "摄像头端口不能为空", trigger: "blur" }
        // ],
        // videoUser: [
        //   { required: true, message: "摄像头用户名不能为空", trigger: "blur" }
        // ],
        // videoPwd: [
        //   { required: true, message: "摄像头密码不能为空", trigger: "blur" }
        // ],
      },
      siteTypeOptions: [
        { value: 1, label: '流量站' }
      ],
    }
  },
  computed: {
    title() {
      return this.id ? '编辑站点' : '新增站点';
    }
  },
  methods: {
    loadSite() {
      getSite(this.id).then((res) => {
        this.form = { ...res.data };
      })
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        this.loading = true;
        const promise = this.id ? updateSite({ ...this.form, siteId: this.id }) : addSite({ ...this.form });
        promise.then(response => {
          this.$modal.msgSuccess(this.id ? "编辑成功" : "新增成功");
          this.$router.back();
        }).finally(() => {
          this.loading = false;
        });
      });
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    if (this.id) {
      this.loadSite();
    }
  }
}
</script>

<style scoped>

</style>
