<template>
  <div>
    <el-dialog
      :title="title+'(河流)'"
      :visible.sync="showFormDia"
      width="85%"
      :before-close="handleClose"
      custom-class="bbsl-location-dialog"
      top="1.7vh"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="first">
          <div class="bbsl-scroll-pane">
          <el-form
            style="width:100%"
            ref="formInfo"
            :rules="rules"
            :model="params"
            label-width="150px"
            class="bbsl-scroll-form"
          >
          <p class="from-title" id="step1">
          <i class="el-icon-info"></i>
          <span>基础信息</span>
           </p>
           
            <el-row>
              <el-col :span="8">
                <el-form-item label="河流名称：" prop="name">
                  <el-input
                    size="mini"
                    clearable
                    placeholder="请输入河流名称"
                    v-model="params.name"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="河流代码：" prop="code">
                  <el-input
                    size="mini"
                    placeholder="请输入河流代码"
                    v-model="params.code"
                    maxlength="18"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上级河流：" prop="parentId">
                  <el-cascader
                    :show-all-levels="false"
                    style="width: 100%"
                    :options="parentIds"
                    v-model="params.parentId"
                    :props="{
                      value: 'id',
                      label: 'name',
                      children: 'children',checkStrictly: true
                    }"
                    @change="changeparentId"
                    placeholder="请选择上级河流"
                    clearable
                  ></el-cascader>
                </el-form-item>
              </el-col>
              
            </el-row>
            
            <el-row>
              <el-col :span="8">
                <el-form-item label="所属水系：" prop="rvSystem">
                  <el-select
                    size="mini"
                    clearable
                    placeholder="请输入所属水系"
                    v-model="params.rvSystem"
                    style="width: 100%"
                    :props="{multiple: true, value: 'fullId', label: 'name', children: 'children',checkStrictly: true}"
                  >
                  <el-option
                      v-for="item in rvBelong"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>              
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="水系分布：" prop="bank">
                  <el-select
                    @change="changeBank"
                    style="width: 100%"
                    size="mini"
                    v-model="params.bank"
                    clearable
                    placeholder="请选择水系分布"
                  >
                    <el-option
                      v-for="item in banks"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="河流级别：" prop="rvGrad">
                  <el-select
                    @change="changervGrad"
                    style="width: 100%"
                    size="mini"
                    v-model="params.rvGrad"
                    clearable
                    placeholder="请选择河流级别"
                  >
                    <el-option
                      v-for="item in rvGrads"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
             <el-row>
              <el-col :span="8">
                <el-form-item label="河流类型：" prop="rvType">
                  <el-select
                    @change="changervType"
                    style="width: 100%"
                    size="mini"
                    v-model="params.rvType"
                    clearable
                    placeholder="请选择河流类型"
                  >
                    <el-option
                      v-for="item in rvTypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>  
                 <el-col :span="8">
                <el-form-item label="河道功能：" prop="rvFunction">
                  <el-select
                    @change="changervFunction"
                    style="width: 100%"
                    size="mini"
                    v-model="params.rvFunction"
                    clearable
                    multiple
                    placeholder="请选择河流类型"
                  >
                    <el-option
                      v-for="item in rvFunctions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    >
                    <span style="float:left">{{item.name}}</span>
                    </el-option>  
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
             <p class="from-title" id="step2">
                <i class="el-icon-location"></i>
                <span>所在位置</span>
              </p>
            <el-row>      
              
              <el-col :span="8">
                <el-form-item label="跨界类型：" prop="crOverType">
                  <el-select
                    @change="changecrOverType"
                    style="width: 100%"
                    size="mini"
                    v-model="params.crOverType"
                    clearable
                    placeholder="请选择跨界类型"
                  >
                    <el-option
                      v-for="item in crOverTypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
               <el-col :span="16">
                <el-form-item label="流经省级行政区：" prop="flowArea">
                  <el-input
                    size="mini"
                    maxlength="11"
                    placeholder="请输入省级行政区"
                    v-model="params.flowArea"
                  ></el-input>
                </el-form-item>
              </el-col> 
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="境内涉及行政区：" prop="region">
                  <el-cascader
                    filterable
                    :show-all-levels="false"
                    :checkStrictly="false"
                    @change="changeregion"
                    style="width: 100%"
                    :options="basAdNames"
                    :props="{multiple: true, value: 'fullId', label: 'name', children: 'children',checkStrictly: true}"
                    v-model="params.region"
                    clearable
                  ></el-cascader> 
                </el-form-item>
              </el-col>  
            </el-row>
            <el-row>
               <el-row>
              <el-col :span="8">
                <el-form-item label="河源：" prop="rvSourLoc">
                  <el-input
                    size="mini"
                    clearable
                    placeholder="请输入河源"
                    v-model="params.rvSourLoc"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="河源经度(单位。)：" prop="rvSourLong">
                  <el-input
                    @input="deadLevs('5')"
                    size="mini"
                    clearable
                    placeholder="请输入河源经度"
                    v-model="params.rvSourLong"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="河源纬度(单位。)：" prop="rvSourLat">
                  <el-input
                    @input="deadLevs('6')"
                    size="mini"
                    clearable
                    placeholder="请输入河源纬度"
                    v-model="params.rvSourLat"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
              <el-row>
                <el-col :span="8">
                <el-form-item label="河口：" prop="rvMouLoc">
                  <el-input
                    size="mini"
                    clearable
                    placeholder="请输入河口"
                    v-model="params.rvMouLoc"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="河口经度(单位。)：" prop="rvMouLong">
                  <el-input
                    @input="deadLevs('4')"
                    size="mini"
                    clearable
                    placeholder="请输入河口经度"
                    v-model="params.rvMouLong"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="河口纬度(单位。)：" prop="rvMouLat">
                  <el-input
                    @input="deadLevs('3')"
                    size="mini"
                    clearable
                    placeholder="请输入河口纬度"
                    v-model="params.rvMouLat"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
              </el-row>
              <el-row>
              <el-col :span="8">
                <el-form-item label="境内起点：" prop="rvInsideStart">
                  <el-input
                    size="mini"
                    clearable
                    placeholder="请输入境内起点"
                    v-model="params.rvInsideStart"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="境内起点经度(单位。)：" prop="rvInsideStartLoc">
                  <el-input
                    size="mini"
                    clearable
                    @input="deadLevs('7')"
                    placeholder="请输入境内起点经度"
                    v-model="params.rvInsideStartLoc"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="境内起点纬度(单位。)：" prop="rvInsideStartLong">
                  <el-input
                    size="mini"
                    clearable
                    @input="deadLevs('8')"
                    placeholder="请输入境内起点纬度"
                    v-model="params.rvInsideStartLong"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              </el-row>
              <el-row>
              <el-col :span="8">
                <el-form-item label="境内终点：" prop="rvInsideEnd">
                  <el-input
                    size="mini"
                    clearable
                    placeholder="请输入境内终点"
                    v-model="params.rvInsideEnd"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="8">
                <el-form-item label="境内终点经度(单位。)：" prop="rvInsideEndLoc">
                  <el-input
                    size="mini"
                    clearable
                    @input="deadLevs('9')"
                    placeholder="请输入境内终点经度"
                    v-model="params.rvInsideEndLoc"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="境内终点纬度(单位。)：" prop="rvInsideEndLong">
                  <el-input
                    size="mini"
                    clearable
                    @input="deadLevs('10')"
                    placeholder="请输入境内终点纬度"
                    v-model="params.rvInsideEndLong"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              </el-row>
              <p class="from-title" id="step3">
                                <i class="el-icon-s-flag"></i>
                                <span>水文特征</span>
              </p>
             <el-row> 
              <el-col :span="8">
                <el-form-item label="河道长度(单位Km)：" prop="rvLen">
                  <el-input
                    @input="deadLevs('1')"
                    style="width: 100%"
                    size="mini"
                    clearable
                    placeholder="请输入河道长度"
                    v-model="params.rvLen"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="流域面积(单位Km2)：" prop="rvBasArea">
                  <el-input
                    @input="deadLevs('2')"
                    size="mini"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                    placeholder="请输入河流流域面积"
                    v-model="params.rvBasArea"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="境内流域面积(Km2)：" prop="jnBasArea">
                  <el-input
                    @input="deadLevs('11')"
                    size="mini"
                    clearable
                    placeholder="请输入境内流域面积"
                    v-model="params.jnBasArea"
                  ></el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
               <el-col :span="8">
                <el-form-item label="平均比降(单位%)：" prop="averSlop">
                  <el-input
                    style="width: 100%"
                    size="mini"
                    placeholder="请输入河流平均比降"
                    v-model="params.averSlop"
                  ></el-input>
                  <!-- <span>%</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="境内河道长度(单位Km)：" prop="rvInsideLen">
                  <el-input
                    @input="deadLevs('17')"
                    style="width: 100%"
                    size="mini"
                    clearable
                    placeholder="请输入境内河道长度"
                    v-model="params.rvInsideLen"
                  ></el-input>
                </el-form-item>
              </el-col>
             </el-row>
            <el-row> </el-row>
            <el-form-item label="备注：" prop="note">
              <el-input
                type="textarea"
                :autosize="{minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="params.note"
              >
              </el-input>
            </el-form-item>
          </el-form>
           </div>
        </el-tab-pane>
        <el-tab-pane label="河段信息" name="second">
          <el-form
            ref="formInfo"
            :model="params.riverBaseList"
            label-width="150px"
          >
            <p class="from-title" id="step1">
          <i class="el-icon-info"></i>
          <span>河段信息</span>
           </p>
            <el-row>
              <el-col :span="8">
                <el-form-item label="河段名称" prop="name">
                  <el-input
                    size="mini"
                    clearable
                    placeholder="请输入河段名称"
                    v-model="params.riverBaseList.name"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
               <el-col :span="8">
                <el-form-item label="总长(单位Km)" prop="chief">
                  <el-input
                    @input="heDuan('4')"
                    size="mini"
                    clearable
                    placeholder="请输入总长"
                    v-model="params.riverBaseList.chief"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="左岸" prop="leftBank">
                  <el-input
                    @input="heDuan('2')"
                    size="mini"
                    clearable
                    placeholder="请输入左岸"
                    v-model="params.riverBaseList.leftBank"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="右岸" prop="rightBank">
                  <el-input
                    @input="heDuan('3')"
                    size="mini"
                    clearable
                    placeholder="请输入右岸"
                    v-model="params.riverBaseList.rightBank"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="境内流域面积(单位km2)" prop="rvBasArea">
                  <el-input
                    @input="heDuan('1')"
                    maxlength="10"
                    size="mini"
                    clearable
                    placeholder="请输入河段境内流域面积"
                    v-model="params.riverBaseList.rvBasArea"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="起点" prop="rvSourLoc">
                  <el-input
                    size="mini"
                    clearable
                    placeholder="请输入起点"
                    v-model="params.riverBaseList.rvSourLoc"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="止点" prop="rvMouLoc">
                  <el-input
                    size="mini"
                    clearable
                    placeholder="请输入止点"
                    v-model="params.riverBaseList.rvMouLoc"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row> 
          </el-form>
          <p class="from-title" id="step1">
          <i class="el-icon-info"></i>
          <span>流经乡(镇，街道)行政区河段</span>
           </p>
          <div style="margin: 10px 0">
            <el-button
              size="mini"
              icon="el-icon-plus"
              type="primary"
              @click="addAcounts"
              >添加</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              @click="deletAcounts"
              >删除</el-button
            >
          </div>
          <el-table
            :row-key="getRowKey"
            ref="multipleSelections"
            border
            :data="params.riverBaseList.riverAreaList"
            :row-style="{height: '61px'}"
            style="width: 100%"
            @selection-change="handleChanges"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
          >
            <el-table-column
              type="selection"
              width="55"
              :reserve-selection="true"
            >
            </el-table-column>
            <el-table-column prop="areaId" label="乡镇街名">
              <template slot-scope="scope">
                <el-cascader
                  :show-all-levels="false"
                  @change="changeAreaId"
                  style="width: 100%"
                  :options="areaIds"
                  :props="propsareaId"
                  v-model="scope.row.areaId"
                  :class="scope.row.areaId ? '' : 'redBull'"
                  :placeholder="scope.row.areaId ? '' : '请选择乡镇街名'"
                  clearable
                ></el-cascader>
              </template>
            </el-table-column>
            <el-table-column prop="startAddress" label="起点地名">
              <template slot-scope="scope">
                <el-input
                  :class="scope.row.startAddress ? '' : 'redBull'"
                  :placeholder="scope.row.startAddress ? '' : '请输入起点地名'"
                  v-model="scope.row.startAddress"
                />
              </template>
            </el-table-column>
            <el-table-column prop="endAddress" label="止点地名">
              <template slot-scope="scope">
                <el-input
                  :class="scope.row.endAddress ? '' : 'redBull'"
                  :placeholder="scope.row.endAddress ? '' : '请输入止点地名'"
                  v-model="scope.row.endAddress"
                />
              </template>
            </el-table-column>
            <el-table-column prop="theLength" label="长度(Km2)">
              <template slot-scope="scope">
                <el-input
                  oninput="value=value.replace(/[^\d.]/g,'')"
                  :class="scope.row.theLength ? '' : 'redBull'"
                  :placeholder="scope.row.theLength ? '' : '请输入长度'"
                  v-model="scope.row.theLength"
                />
              </template>
            </el-table-column>
            <el-table-column prop="villageIds" label="流经村(居)">
              <template slot-scope="scope">
                <el-cascader
                  :show-all-levels="false"
                  :checkStrictly="false"
                  @change="chanvillageIds(scope.row, $event)"
                  style="width: 100%"
                  :options="basAdNames"
                  :props="{multiple: true, value: 'fullId', label: 'name', children: 'children'}"
                  v-model="scope.row.villageIds"
                  collapse-tags
                  clearable
                ></el-cascader>
              </template>
            </el-table-column>
            <el-table-column prop="villageNumber" label="个数">
              <template slot-scope="scope">
                <el-input :disabled="true" v-model="scope.row.villageNumber" />
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="goInfo">保 存</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {mapState} from 'vuex'
import rivers from '@/api/rivers.js'
import latitude from '@/mixins/latitude'
import req from '@/request.js'
export default {
  name: 'FormDialog',
  props: {
    showFormDia: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    pId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      multipleSelections: [],
      activeName: 'first',
      props: {multiple: true, value: 'id', label: 'name', children: 'children'},
      propss: {
        multiple: true,
        value: 'id',
        label: 'name',
        children: 'children',
      },
      propsareaId: {
        multiple: false,
        value: 'id',
        label: 'name',
        children: 'children',
      },
      params: {
        rvLen: null,
        rvInsideLen:null,//境内河道长度
        rvBasArea: null, //境内流域面积
        rvSystem: null, //所属水系    
        jnBasArea: null, //境内流域面积
        region: null, //境内设计行政区
        rvFunction: null, //河道功能
        averSlop: null, //平均比降
        bank: null, //岸别（参考字典
        crOverType: null, //跨界类型参考字典
        flowArea: null, //流经地区
        rvBasArea: null, //河流流域面积（单位：km2）
        code: null, //河流代码（唯一值，参考国标）
        rvGrad: null, //河流长度（单位：km）
        rvMouLong: null, //河口经度（单位：[°]）
        rvMouLat: null, //河口wei度（单位：[°]）
        rvMouLoc: null, //河口所在位置
        name: null, //h、河流名称
        rvSourLat: null, //河源纬度（单位：[°]）
        rvSourLoc: null, //河源所在位置
        rvSourLong: null, //河源经度（单位：[°]）
        rvType: null, //河流类型（参考字典）
        rvSourLat: null, //河源纬度（单位：[°]）
        parentId: null, //上级河流
        rvInsideStart:null,//境内起点
        rvInsideStartLoc:null,//境内起点经度（单位[°]）
        rvInsideStartLong:null,//境内起点纬度（单位[°]）
        rvInsideEnd:null,//境内终点
        rvInsideEndLoc:null,//境内终点经度（[°]）
        rvInsideEndLong:null,//境内终点维度（[°]）
        note: null, //备注
        riverBaseList: {
          name: null,
          chief: null,
          leftBank: null,
          rightBank: null,
          rvBasArea: null,
          rvSourLoc: null,
          rvMouLoc: null,
          riverAreaList: [],
        },
      },
      count: 0,
      rvFunctions: [], //河道功能
      areaIds: [],
      crOverTypes: [], //跨界类型字典数组
      banks: [], //岸别数组
      rvGrads: [], //河流级别
      rvTypes: [], //河流类型字典
      rvBelong:[],//所属水系
      parentIds: [], //河流下拉
      basAdNames: [], //行政下拉
      AdName: null, //接受每次选中的值
      region: null,
      areaId: null,
      setKesLabel: {
        value: 'code',
        label: 'name',
        children: 'children',
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入河流名称',
            trigger: 'blur',
          },
        ],
        code: [{required: true, message: '请输入流域代码', trigger: 'blur'}],
      },
    }
  },
  created() {
    this.getDetailInfo()
    this.getSysDict()
    // 行政区查询
    rivers.getbasAdName({}, (res) => {  
      this.basAdNames = res.value
        
    })
    // 河流下拉
    rivers.getParentIds({}, (res) => {
      let cj = {
        fullName:"/长江",
        id:"-1",
        name:"长江"
      }
      res.value.unshift(cj) 
      this.parentIds = res.value
      
    })
    // 乡镇信息区划
    rivers.getAreaIds({}, (res) => {
      this.areaIds = res.value
      
      
    })
  },
  methods: {
    deadLevs(val) {
      switch (val) {
        case '1':
          this.params.rvLen = latitude.SixTree(this.params.rvLen)
          break
        case '2':
          this.params.rvBasArea = latitude.ElghtTwo(this.params.rvBasArea)
          break
        case '3':
          this.params.rvMouLat = latitude.TreeFour(this.params.rvMouLat)
          break
        case '4':
          this.params.rvMouLong = latitude.TreeFour(this.params.rvMouLong)
          break
        case '5':
          this.params.rvSourLong = latitude.TreeFour(this.params.rvSourLong)
          break
        case '6':
          this.params.rvSourLat = latitude.TreeFour(this.params.rvSourLat)
          break
        case '7':
          this.params.rvInsideStartLoc = latitude.TreeFour(this.params.rvInsideStartLoc)
          break
        case '8':
          this.params.rvInsideStartLong = latitude.TreeFour(this.params.rvInsideStartLong)
          break
        case '9':
          this.params.rvInsideEndLoc = latitude.TreeFour(this.params.rvInsideEndLoc)
          break
        case '10':
          this.params.rvInsideEndLong = latitude.TreeFour(this.params.rvInsideEndLong)
          break
        case '17':
          this.params.rvInsideLen = latitude.SixTree(this.params.rvInsideLen)
          break
        default:
          this.params.jnBasArea = latitude.ElghtTwo(this.params.jnBasArea)
      }
    },
    heDuan(val) {
      switch (val) {
        case '1':
          this.params.riverBaseList.rvBasArea = latitude.ElghtTwo(
            this.params.riverBaseList.rvBasArea
          )
          break
        case '2':
          this.params.riverBaseList.leftBank = latitude.ElghtTwo(
            this.params.riverBaseList.leftBank
          )
          break
        case '3':
          this.params.riverBaseList.rightBank = latitude.ElghtTwo(
            this.params.riverBaseList.rightBank
          )
          break
        default:
          this.params.riverBaseList.chief = latitude.ElghtTwo(
            this.params.riverBaseList.chief
          )
      }
    },
    addAcounts() {
      const num = this.count++
      this.params.riverBaseList.riverAreaList.push({
        ident: num,
        areaId: null,
        rvMouLoc: null,
        rvSourLoc: null,
        theLength: null,
        villageIds: [],
        villageNumber: null,
      })
    },
    deletAcounts() {
      if (this.multipleSelections.length != 0) {
        const list = this.arrayRepeat(
          this.multipleSelections,
          this.params.riverBaseList.riverAreaList
        )
        this.params.riverBaseList.riverAreaList = JSON.parse(
          JSON.stringify(list)
        )
        this.$refs.multipleSelections.clearSelection()
      }
    },
    handleChanges(val) {
      this.multipleSelections = val.map((item, index) => {
        return item
      })
    },
    arrayRepeat(array1, array2) {
      var result = []
      for (var i = 0; i < array2.length; i++) {
        var obj = array2[i]
        var num = obj.id
        var isExist = false
        for (var j = 0; j < array1.length; j++) {
          var aj = array1[j]
          var n = aj.id
          if (n === num) {
            isExist = true
            break
          }
        }
        if (!isExist) {
          result.push(obj)
        }
      }
      return result
    },
    
    calleArr(array, val,data) {
      for (let i in array) {
        let item = array[i]
        if (item.children) {
          data.push(item.id)
          this.calleArr(item.children, val,data) //自己调用自己
        } else {
          if (item.id === val) {
            if(item.parentId!=data[data.length-1]){
              data.splice(data.length-1,1)
            }
            data.push(item.id)
          }
        }
      }
      return data
    },
    // 根据ID查询
    getDetailInfo() {
      if (this.title === '修改') {
        rivers.getbasAdName({}, (res) => {
          this.basAdNames = res.value; 
          rivers.detailId(this.pId, (res) => {
           if (res.state) {
              if (res.value.riverBaseList) {
                this.params = res.value
                this.params.rvFunction = res.value.rvFunction.split(",")
                this.params = res.value
                  let arr = res.value.region.split(",") 
                  let arr2 = []
                  for(let i = 0;i<arr.length;i++){
                      arr2.push(arr[i].split("/"))
                      arr2[i].shift()
                      arr2[i][0] = "/"+arr2[i][0]
                      for (let index = 1; index <arr2[i].length; index++) {
                        arr2[i][index] = arr2[i][index-1]+"/"+arr2[i][index]
                      }
                  }
                  this.params.region = arr2
                  
                if (this.params.riverBaseList.riverAreaList) {
                 let arr = this.params.riverBaseList.riverAreaList[0].villageIds.split(",")
                  let arr2 = []
                  for(let i = 0;i<arr.length;i++){
                      arr2.push(arr[i].split("/"))
                      arr2[i].shift()
                      arr2[i][0] = "/"+arr2[i][0]
                      for (let index = 1; index <arr2[i].length; index++) {
                        arr2[i][index] = arr2[i][index-1]+"/"+arr2[i][index]
                      }
                  }
                  this.params.riverBaseList.riverAreaList[0].villageIds =arr2  
                }
              } else {
                this.params.name = res.value.name
                this.params.code = res.value.code
                this.params.jnBasArea = res.value.jnBasArea
                this.params.rvSystem = res.value.rvSystem
                this.params.region = res.value.region
                this.params.rvBasArea = res.value.rvBasArea
                this.params.rvFunction = res.value.rvFunction
                this.params.averSlop = res.value.averSlop
                this.params.bank = res.value.bank
                this.params.crOverType = res.value.crOverType
                this.params.flowArea = res.value.flowArea
                this.params.rvGrad = res.value.rvGrad
                this.params.rvMouLong = res.value.rvMouLong
                this.params.rvMouLat = res.value.rvMouLat
                this.params.rvMouLoc = res.value.rvMouLoc      
                this.params.rvInsideStart = res.value.rvInsideStart
                this.params.rvInsideStartLoc = res.value.rvInsideStartLoc
                this.params.rvInsideStartLong = res.value.rvInsideStartLong
                this.params.rvInsideEnd = res.value.rvInsideEnd
                this.params.rvInsideEndLoc = res.value.rvInsideEndLoc
                this.params.rvInsideEndLong = res.value.rvInsideEndLong
                this.params.rvSourLat = res.value.rvSourLat
                this.params.rvSourLoc = res.value.rvSourLoc
                this.params.rvSourLong = res.value.rvSourLong
                this.params.rvType = res.value.rvType
                this.params.id = res.value.id
                this.params.parentId = res.value.parentId
                this.params.note = res.value.note
                this.params.riverBaseList.riverAreaList
              }
              this.$set(this.params)
            }
          })
        })
        this.getSysDict()
      } else {
      }
    },
    changeAreaId(val) {
      // val.areaId = val[val.length - 1];
      this.areaId = val
    },
    changeregion(val) {
      if (val) {
        let arr = []
        val.forEach((e) => {
          arr.push(e[e.length - 1])
        })
        arr = arr.toString()
        this.region = arr 
      }
    },
    chanvillageIds(val, e) {
      val.villageNumber = e.length //个数赋值
      
    },
    changervFunction(val) {
      if (val) {
        this.params.rvFunction = val
      } else {
        this.params.rvFunction = null
      }
    },
    changeparentId(val) {
      if (val) {
        this.params.parentId =val[val.length - 1]
      } else {
        this.params.parentId = null
      }
    },
    changervGrad(val) {
      if (val) {
        this.params.rvGrad = val
      } else {
        this.params.rvGrad = null
      }
    },
    changervType(val) {
      if (val) {
        this.params.rvType = val
      } else {
        this.params.rvType = null
      }
    },
    changeBank(val) {
      if (val) {
        this.params.bank = val
      } else {
        this.params.bank = null
      }
    },
    changecrOverType(val) {
      if (val) {
        this.params.crOverType = val
      } else {
        this.params.crOverType = null
      }
    },
    handleClose() {
      this.params = {
        averSlop: null, //平均比降
        bank: null, //岸别（参考字典
        crOverType: null, //跨界类型参考字典
        flowArea: null, //流经地区
        rvBasArea: null, //河流流域面积（单位：km2）
        code: null, //河流代码（唯一值，参考国标）
        rvGrad: null, //河流长度（单位：km）
        rvMouLong: null, //河口经度（单位：[°]）
        rvMouLat: null, //河口wei度（单位：[°]）
        rvMouLoc: null, //河口所在位置
        name: null, //h、河流名称
        rvSourLat: null, //河源纬度（单位：[°]）
        rvSourLoc: null, //河源所在位置
        rvSourLong: null, //河源经度（单位：[°]）
        rvType: null, //河流类型（参考字典）
        rvSourLat: null, //河源纬度（单位：[°]）
        rvInsideStart:null,//境内起点
        rvInsideStartLoc:null,//境内起点经度（单位[°]）
        rvInsideStartLong:null,//境内起点纬度（单位[°]）
        rvInsideEnd:null,//境内终点
        rvInsideEndLoc:null,//境内终点经度（[°]）
        rvInsideEndLong:null,//境内终点维度（[°]）
        note: null, //备注
        rvInsideLen:null,//境内河道长度
      }
      this.$emit('closeFormDiao')
    },
    goInfo(e) {
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          if (this.title === '新增') {
            let arr = JSON.parse(JSON.stringify(this.params))
            arr.region = this.region
            //表格    
            arr.rvFunction = String(arr.rvFunction)
            this.params.riverBaseList.riverAreaList.forEach((v) => {
              let villageIdString = []
              if (v.villageIds.length != 0) {
                v.villageIds.forEach((itm) => {
                  villageIdString.push(itm[itm.length - 1])
                })
              }
              arr.riverBaseList.riverAreaList.forEach((t) => {
                t.areaId = t.areaId[t.areaId.length - 1]
                if (v.id === t.id) {
                  delete t['villageIds']
                  t['villageIds'] = villageIdString.toString()
                }
              })
            })
            if(arr.riverBaseList.chief==null){
            delete arr.riverBaseList
            }   
           rivers.addSave(arr, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '新增成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
              } else {
              }
            })
          }
          if (this.title === '修改') {
            let arr = JSON.parse(JSON.stringify(this.params))
            // arr.region = this.region;
            //表格 
            this.params.riverBaseList.riverAreaList.forEach((v) => {
              let villageIdString = []
              if (v.villageIds.length != 0) {
                v.villageIds.forEach((itm) => {
                  villageIdString.push(itm[itm.length - 1])
                })
              }
              arr.riverBaseList.riverAreaList.forEach((t) => {
                let areid = '';
                if(typeof(t.areaId)!='string'){
                  areid = t.areaId[t.areaId.length - 1]
                }else{
                  areid = t.areaId
                }
                if (v.id === t.id) {
                  delete t['areaId']
                  t['areaId'] = areid
                  delete t['villageIds']
                  t['villageIds'] = villageIdString.toString()
                }
              })
            })
            let arrs =[]
            for(let i = 0;i<arr.region.length;i++){
                  arrs.push(arr.region[i][arr.region[i].length-1])
            }
            
            arr.region = String(arrs)
            arr.rvFunction = String(arr.rvFunction)
            delete arr.fullId
            delete arr.fullName
            delete arr.flowArea 
            delete arr.createTime
            rivers.upData(arr, (response) => {
              if (response.state) {
                this.$notify({
                  type: 'success',
                  message: '修改成功',
                  duration: 2000,
                })
                this.$emit('closeFormDiao')
                this.$emit('refList')
            } else {
            }
            })
          }
        } else {
          return false
        }
      })
    },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            this.crOverTypes = response.data.kjlx
            this.banks = response.data.hlab //岸别
            this.rvGrads = response.data.hljb
            this.rvTypes = response.data.hllx
            this.rvFunction = response.data.hdgn
            this.rvFunctions = response.data.hdgn
            this.rvBelong = response.data.sx
            this.params.rvSystem=this.rvBelong[0].value
            this.params.bank=this.banks[0].value
            this.params.rvGrad=this.rvGrads[0].value
            this.params.rvType=this.rvTypes[0].value
            this.params.crOverType=this.crOverTypes[0].value

          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    getRowKey(row) {
      return row.id
    },
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-input__inner {
//   border: 1px solid orange;
// }
// ::v-deep .el-textarea__inner {
//   border: 1px solid orange;
// }

.redBull {
  border: 1px solid red;
}
</style>
