<template>
  <div class="add">
    <div class="add-tab">
      <el-tabs v-model="activeName" :stretc="true" @tab-click="handleClick">
        <el-tab-pane label="铁路线" name="0">
          <div class="content" v-if="activeName === '0'">
            <div class="content-title">添加铁路线</div>  
            <railWay></railWay>
            <!-- <el-form
              ref="form"
              :model="formData"
              :rules="rules"
              label-width="200px"
              class="form"
            >
          
                
              <el-form-item label="铁路名：" prop="name">
                <el-input v-model="formData.name" placeholder="请输入铁路名" />
              </el-form-item>
              <el-form-item label="铁路线起点站名：" prop="startPointName">
                <el-input
                  v-model="formData.startPointName"
                  placeholder="请输入铁路线起点站名"
                />
              </el-form-item>
              <el-form-item label="铁路线终点站名：" prop="endPointName">
                <el-input
                  v-model="formData.endPointName"
                  placeholder="请输入铁路线终点站名"
                />
              </el-form-item>
              <el-form-item label="铁路全长（公里）：" prop="totalLong">
                <el-input
                  v-model="formData.totalLong"
                  placeholder="请输入铁路全长公里数"
                />
              </el-form-item>
            </el-form> -->
          </div> 
        
        </el-tab-pane>

        <el-tab-pane label="站点" name="1">
          <div class="content" v-if="activeName === '1'">
            <div class="content-title">添加站点</div>
            <station></station>
            <!-- <el-form
              ref="stationform"
              :model="stationForm"
              :rules="rules"
              label-width="200px"
              class="form"
            >
              <el-form-item label="站点所属铁路线：" prop="parentId">
                <el-select
                  v-model="stationForm.parentId"
                  placeholder="请选择铁路线"
                >
                <el-option
                    v-for="item in FSUrailway"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="站点编号：" prop="siteCode">
                <el-input
                  v-model="stationForm.siteCode"
                  placeholder="请输入站点编号"
                />
              </el-form-item>
              <el-form-item label="站名" prop="siteName">
                <el-input
                  v-model="stationForm.siteName"
                  placeholder="请输入站名"
                />
              </el-form-item>
              <el-form-item label="站点地址" prop="siteAddress">
                <el-input
                  v-model="stationForm.siteAddress"
                  placeholder="请输入站点地址"
                />
              </el-form-item>
              <el-form-item label="站点所在局" prop="siteArea">
                <el-input
                  v-model="stationForm.siteArea"
                  placeholder="请输入站点所在局"
                />
              </el-form-item>
              <el-form-item label="站点所在段号" prop="siteSectionCode">
                <el-input
                  v-model="stationForm.siteSectionCode"
                  placeholder="请输入站点所在段号"
                />
              </el-form-item>
              <el-form-item label="站点所在公里标" prop="siteKmSign">
                <el-input
                  v-model="stationForm.siteKmSign"
                  placeholder="请输入站点所在公里标"
                />
              </el-form-item>
              <el-form-item label="站点经度" prop="siteLatitude">
                <el-input
                  v-model="stationForm.siteLatitude"
                  placeholder="请输入站点经度"
                />
              </el-form-item>
              <el-form-item label="站点维度" prop="siteLongitude">
                <el-input
                  v-model="stationForm.siteLongitude"
                  placeholder="请输入站点维度"
                />
              </el-form-item>
              <el-form-item label="站点其他信息" prop="siteOtherMessage">
                <el-input
                  v-model="stationForm.siteOtherMessage"
                  placeholder="请输入站点其他信息"
                />
              </el-form-item>
            </el-form> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="FSU" name="2">
          <div class="content" v-if="activeName === '2'">
            <div class="content-title">添加FSU</div>
            <el-form
              ref="FSUform"
              :model="FSUForm"
              :rules="rules"
              label-width="200px"
              class="form"
            >
              <el-form-item label="所在铁路线：" prop="parentId">
                <el-select
                  v-model="FSUForm.parentId"
                  placeholder="请选择铁路线"
                >
                  <el-option
                    v-for="item in FSUrailway"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="所在站点：" prop="station">
                <el-select v-model="FSUForm.station" placeholder="请选择站点">
                  <el-option
                    v-for="item in FSUstation"
                    :key="item.key"
                    :label="item.label"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="FSU身份编号" prop="FSUid">
                <el-input
                  v-model="FSUForm.FSUid"
                  placeholder="请输入FSU身份编号"
                />
              </el-form-item>
              <el-form-item label="FSU端口数" prop="FSUport">
                <el-input
                  v-model="FSUForm.FSUport"
                  placeholder="请输入FSU端口数"
                />
              </el-form-item>
              <el-form-item label="设备名称" prop="deviceName">
                <el-input
                  v-model="FSUForm.deviceName"
                  placeholder="请输入设备名称"
                />
              </el-form-item>
              <el-form-item label="IP地址" prop="IP">
                <el-input v-model="FSUForm.IP" placeholder="请输入IP地址" />
              </el-form-item>
              <el-form-item label="设备厂商" prop="deviceManufacturer">
                <el-input
                  v-model="FSUForm.deviceManufacturer"
                  placeholder="请输入设备厂商"
                />
              </el-form-item>
              <el-form-item label="设备备用方式" prop="backup">
                <el-input
                  v-model="FSUForm.backup"
                  placeholder="请选择设备备用方式"
                />
              </el-form-item>
              <el-form-item label="通信方式" prop="communication">
                <el-input
                  v-model="FSUForm.communication"
                  placeholder="请选择通信方式"
                />
              </el-form-item>
              <el-form-item label="设备类型" prop="deviceType">
                <el-input
                  v-model="FSUForm.deviceType"
                  placeholder="请选择设备类型"
                />
              </el-form-item>
              <el-form-item label="设备子类型" prop="devicechildrenType">
                <el-input
                  v-model="FSUForm.devicechildrenType"
                  placeholder="请选择设备子类型"
                />
              </el-form-item>
              <el-form-item label="软件版本号" prop="version">
                <el-input
                  v-model="FSUForm.version"
                  placeholder="请输入软件版本号"
                />
              </el-form-item>
              <el-form-item label="设备生产序列号" prop="seriesNumber">
                <el-input
                  v-model="FSUForm.seriesNumber"
                  placeholder="请输入设备生产序列号"
                />
              </el-form-item>
              <el-form-item label="设备所在铁路公里标" prop="deviceKm">
                <el-input
                  v-model="FSUForm.deviceKm"
                  placeholder="请输入设备所在铁路公里标"
                />
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="监测设备" name="3">
          <div class="content" v-if="activeName === '3'">
            <div class="content-title">添加监测设备</div>
<monitor></monitor>
          </div>
        </el-tab-pane>
        <el-tab-pane label="漏缆" name="4">
          <div class="content" v-if="activeName === '4'">
            <div class="content-title">添加漏缆</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="天馈线" name="5">
          <div class="content" v-if="activeName === '5'">
            <div class="content-title">添加天馈线</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

     <!-- <div class="btn">
      <el-button type="primary" @click="reset">重置</el-button>
      <el-button type="primary" @click="submit">确认提交</el-button>
    </div> -->
  </div>
</template>

<script>
import { railWaysave,sitesave } from "../api"
import railWay from "./comp/railWay.vue"
import monitor from "./comp/monitor.vue"
import station from "./comp/station.vue"
export default {
   components: {
  monitor,station,railWay
  },
  data() {
    return {
      FSUrailway: [
        {
          key: 0,
          label: "张呼客运专线",
        },
        {
          key: 1,
          label: "南昆客运专线",
        },
      ],
      FSUstation: [
        {
          key: 0,
          label: "NiGeLong",
        },
        {
          key: 1,
          label: "STATION2",
        },
      ],
      activeName: "0",
      tabs: [
        {
          label: "铁路线",
          key: "0",
        },
        {
          label: "站点",
          key: "1",
        },
        {
          label: "FSU",
          key: "2",
        },
        {
          label: "监测设备",
          key: "3",
        },
        {
          label: "漏缆",
          key: "4",
        },
        {
          label: "天馈线",
          key: "5",
        },
      ],
      formData: {
       endPointName: "",
  name: "",
  startPointName: "",
  totalLong: ""
      },
      stationForm: {
        parentId: "",
        siteCode: "",
        siteName: "",
        siteAddress: "",
        siteArea: "",
        siteSectionCode: "",
        siteKmSign: "",
        siteLatitude: "",
        siteLongitude: "",
        siteOtherMessage: "",
      },
      FSUForm: {
        parentId: "",
        station: "",
        FSUid: "",
        FSUport: "",
        deviceName: "",
        IP: "",
        deviceManufacturer: "", //设备厂商
        backup: "",
        communication: "", //通信方式
        deviceType: "",
        devicechildrenType: "",
        version: "",
        seriesNumber: "",
        deviceKm: "",
      },
      rules: {
          
        name: [
          { required: true, message: "请输入铁路名", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        startPointName: [
          { required: true, message: "请输入铁路线起点站名", trigger: "blur" },
        ],
        endPointName: [
          { required: true, message: "请输入铁路线终点站名", trigger: "blur" },
        ],
        totalLong: [
          { required: true, message: "请输入铁路全长公里数", trigger: "blur" },
        ],
        siteLongitude: [
          { required: true, message: "请输入铁路全长公里数", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    reset() {
      this.$refs.form.resetFields();
    },
    submit() {
      if (this.activeName==0) {
           this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.formData);
          railWaysave(this.formData).then(res=>{
            console.log(res);
          })
        }
          this.formData={
       endPointName: "",
  name: "",
  startPointName: "",
  totalLong: ""
      }
      });
      }
    if (this.activeName==1) {
           this.$refs.stationform.validate((valid) => {
        if (valid) {
          console.log(this.stationForm);
          // sitesave(this.stationForm).then(res=>{
          //   console.log(res);
          // })
        }
           this.stationForm={
        parentId: "",
        siteCode: "",
        siteName: "",
        siteAddress: "",
        siteArea: "",
        siteSectionCode: "",
        siteKmSign: "",
        siteLatitude: "",
        siteLongitude: "",
        siteOtherMessage: "",
      }
      });
      }
    
      
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__nav {
  display: flex;
  width: 100%;
  padding-bottom: 10px;
  .el-tabs__item {
    flex: 1;
    text-align: center;
    font-size: 18px;
    color: #666;
  }
  .el-tabs__item.is-active {
    color: #1e64f6;
  }
  .el-tabs__active-bar {
    background-color: #1e64f6;
  }
}
.add {
  padding: 10px;
  .tab {
    // width: 600px;
    margin: 0 auto;
  }
  .content {
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    .content-title {
      width: 100%;
      height: 60px;
      background: rgba(226, 235, 255, 0.39);
      line-height: 60px;
      font-size: 18px;
      color: #333;
      font-weight: 500;
      text-align: center;
      border-bottom: 1px solid #e3e3e3;
    }
    .form {
      padding: 20px 0;
      width: 600px;
      margin: 0 auto;
    }
  }
  .btn {
    padding-top: 50px;
    text-align: center;
    button {
      width: 120px;
    }
  }
}
</style>
