<template>
  <div class="edit-add-detail">
    <div class="form-content">
      <el-form
        ref="addEditForm"
        :model="addEditForm"
        :rules="addEditRules"
        class="edit-add-form"
        label-position="left"
        label-width="140px"
      >
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">预警信息</div>
            <div v-if="isAdd" class="btn-action">
              <el-button
                icon="el-icon-refresh"
                size="mini"
                type="success"
                @click="earlyChange"
              >同步预警信息
              </el-button
              >
            </div>
          </div>
        </div>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="12">
            <el-form-item label="预警名称" prop="warningName">
              <el-input
                v-model="addEditForm.warningName"
                clearable
                placeholder="请输入预警名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预警发布单位" prop="warningUnit">
              <el-input
                v-model="addEditForm.warningUnit"
                clearable
                placeholder="请输入预警发布单位"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预警灾害类型" prop="warningValue">
              <el-select
                v-model="addEditForm.warningValue"
                clearable
                placeholder="请选择预警灾害类型"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getDictionaryByCode('yjlxdm')"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="6">-->
          <!--            <el-form-item label="预警信息来源" prop="warningChannel">-->
          <!--              <el-input-->
          <!--                v-model="addEditForm.warningChannel"-->
          <!--                clearable-->
          <!--                placeholder="请输入预警信息来源"-->
          <!--                type="text"-->
          <!--              ></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="所属省份" prop="province">
              <el-input
                v-model="addEditForm.province"
                clearable
                placeholder="请输入所属省份"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属区域" prop="regionalCode">
              <el-select
                v-model="addEditForm.regionalCode"
                filterable
                placeholder="请选择所属区域"
                style="width: 100%"
                @change="regionChange"
              >
                <el-option
                  v-for="item in regionList"
                  :key="item.adcode"
                  :label="item.adname"
                  :value="item.adcode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="可能受影响区县" prop="warnRange">
              <el-input
                v-model="addEditForm.warnRange"
                clearable
                placeholder="请输入可能受影响区县"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="可能受影响路段" prop="roadId">
              <el-select
                v-model="addEditForm.roadId"
                filterable
                placeholder="请选择可能受影响路段"
                style="width: 100%"
                @change="roadChange"
              >
                <el-option
                  v-for="item in roadOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item
              class="stake-mark"
              label="起始桩号"
              prop="locationStationNumberStart"
            >
              <div class="pegVal-text1">K</div>
              <el-input
                v-model="addEditForm.startPeg"
                clearable
                type="number"
              ></el-input>
              <div class="pegVal-text2">+</div>
              <el-input
                v-model="addEditForm.startPegAdd"
                clearable
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              class="stake-mark"
              label="结束桩号"
              prop="locationStationNumberEnd"
            >
              <div class="pegVal-text1">K</div>
              <el-input
                v-model="addEditForm.endPeg"
                clearable
                type="number"
              ></el-input>
              <div class="pegVal-text2">+</div>
              <el-input
                v-model="addEditForm.endPegAdd"
                clearable
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预警时间" prop="warningTime">
              <el-date-picker
                v-model="addEditForm.warningTime"
                default-time="12:00:00"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择预警时间"
                style="width: 100%"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-row :gutter="24" style="margin-left: 80px">-->
        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="方向" prop="direction">-->
        <!--              <el-radio-group v-model="addEditForm.direction">-->
        <!--                <el-radio-->
        <!--                  v-for="(item, index) in getDictionaryByCode('yxjc-fx')"-->
        <!--                  :key="index"-->
        <!--                  :label="item.value"-->
        <!--                  :value="item.value"-->
        <!--                  border-->
        <!--                >-->
        <!--                  {{ item.name }}-->
        <!--                </el-radio>-->
        <!--              </el-radio-group>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <!--        <el-row :gutter="24" style="margin-left: 80px">-->
        <!--          <el-col :span="24">-->
        <!--            <el-form-item label="位置描述" prop="locationCatUncle">-->
        <!--              <el-input-->
        <!--                v-model="addEditForm.locationCatUncle"-->
        <!--                :autosize="{minRows: 2, maxRows: 4}"-->
        <!--                clearable-->
        <!--                maxlength="100"-->
        <!--                placeholder="请输入位置描述"-->
        <!--                show-word-limit-->
        <!--                type="textarea"-->
        <!--              ></el-input>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <!--        <el-row :gutter="24" style="margin-left: 80px">-->
        <!--          <el-col :span="24">-->
        <!--            <el-form-item label="预警类型" prop="warningType">-->
        <!--              <el-radio-group-->
        <!--                v-model="addEditForm.warningType"-->
        <!--                border-->
        <!--                size="medium"-->
        <!--              >-->
        <!--                <el-radio-->
        <!--                  v-for="(item, index) in getDictionaryByCode('yxjc-yjlx')"-->
        <!--                  :key="index"-->
        <!--                  :label="Number(item.value)"-->
        <!--                  :value="Number(item.value)"-->
        <!--                  border-->
        <!--                >{{ item.name }}-->
        <!--                </el-radio>-->
        <!--              </el-radio-group>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="12">
            <el-form-item label="预警等级" prop="warningLevel">
              <el-radio-group
                v-model="addEditForm.warningLevel"
                border
                size="medium"
              >
                <el-radio
                  v-for="(item, index) in getDictionaryByCode('yxjc-yjdj')"
                  :key="index"
                  :label="Number(item.value)"
                  :value="Number(item.value)"
                >{{ item.name }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        <el-row :gutter="24" style="margin-left: 80px">-->
        <!--          <el-col :span="24">-->
        <!--            <el-form-item label="发布设备类型" prop="publishDeviceType">-->
        <!--              <el-radio-group-->
        <!--                v-model="addEditForm.publishDeviceType"-->
        <!--                size="medium"-->
        <!--              >-->
        <!--                <el-radio-->
        <!--                  v-for="(item, index) in getDictionaryByCode('yxjc-fbsblx')"-->
        <!--                  :key="index"-->
        <!--                  :label="item.value"-->
        <!--                  :value="item.value"-->
        <!--                  border-->
        <!--                >{{ item.name }}-->
        <!--                </el-radio>-->
        <!--              </el-radio-group>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <el-row :gutter="24" style="margin-left: 80px">

          <!--          <el-col :span="6" style="margin-left: 20px">-->
          <!--            <el-form-item label="预警解除时间" prop="relieveWarningTime">-->
          <!--              <el-date-picker-->
          <!--                v-model="addEditForm.relieveWarningTime"-->
          <!--                default-time="12:00:00"-->
          <!--                format="yyyy-MM-dd HH:mm:ss"-->
          <!--                placeholder="选择日期时间"-->
          <!--                style="width: 100%"-->
          <!--                type="datetime"-->
          <!--                value-format="yyyy-MM-dd HH:mm:ss"-->
          <!--              >-->
          <!--              </el-date-picker>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="24">
            <el-form-item label="预警内容" prop="warningContent">
              <el-input
                v-model="addEditForm.warningContent"
                :autosize="{minRows: 2, maxRows: 4}"
                clearable
                placeholder="请输入预警内容"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">叫应信息</div>
          </div>
        </div>
        <el-row :gutter="24" style="margin-left:80px">
          <el-col :span="24">
            <el-form-item label="是否落实“叫应”机制" prop="responseMechanism">
              <el-radio-group
                v-model="addEditForm.responseMechanism"
                size="medium"
              >
                <el-radio
                  v-for="(item, index) in mechanismList"
                  :key="index"
                  :label="item.value"
                  :value="item.value"
                  border
                >{{ item.name }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="巡查里程(公里)" prop="inspectMileage">
              <el-input
                v-model.number="addEditForm.inspectMileage"
                clearable
                placeholder="请输入巡查里程"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出动巡查人员(人)" prop="peopleSituation">
              <el-input
                v-model.number="addEditForm.peopleSituation"
                clearable
                placeholder="请输入出动巡查人员"
                type="text"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预置养护队伍(支)" prop="presetsTeamSituation">
              <el-input
                v-model.number="addEditForm.presetsTeamSituation"
                clearable
                placeholder="请输入预置养护队伍"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预置养护人数(人)" prop="presetsPeopleSituation">
              <el-input
                v-model.number="addEditForm.presetsPeopleSituation"
                clearable
                placeholder="请输入预置养护人数"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="6">
            <el-form-item label="出动巡查车辆(台)" prop="carSituation">
              <el-input
                v-model.number="addEditForm.carSituation"
                clearable
                placeholder="请输入出动巡查车辆"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预置车辆(台)" prop="presetsCarSituation">
              <el-input
                v-model.number="addEditForm.presetsCarSituation"
                clearable
                placeholder="请输入预置车辆"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="边坡土壤含水率" prop="waterContent">
              <el-input
                v-model="addEditForm.waterContent"
                clearable
                placeholder="请输入边坡土壤含水率"
                type="text"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="灾害天气(汛期)路段管控阈值" label-width="160px" prop="controlThreshold">
              <el-input
                v-model="addEditForm.controlThreshold"
                clearable
                placeholder="请输入管控阈值"
                type="number"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="24">
            <el-form-item :rules="[{ required:
            addEditForm.responseMechanism === '1', message: '请输入采取的措施', trigger: 'blur' }]" label="采取的措施"
                          prop="takeAction">
              <el-input
                v-model="addEditForm.takeAction"
                :autosize="{minRows: 2, maxRows: 4}"
                clearable
                placeholder="请输入采取的措施"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="24">
            <el-form-item label="管制情况" prop="controlSituation">
              <el-input
                v-model="addEditForm.controlSituation"
                :autosize="{minRows: 2, maxRows: 4}"
                clearable
                placeholder="请输入管制情况"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="24">
            <el-form-item label="出行信息发布情况" prop="publishSituation">
              <el-input
                v-model="addEditForm.publishSituation"
                :autosize="{minRows: 2, maxRows: 4}"
                clearable
                placeholder="请输入出行信息发布情况"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" style="margin-left: 80px">
          <el-col :span="24">
            <el-form-item label="预置物资" prop="presetsGoodsSituation">
              <el-input
                v-model="addEditForm.presetsGoodsSituation"
                :autosize="{minRows: 2, maxRows: 4}"
                clearable
                placeholder="请输入预置物资"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="footer">
      <el-button
        :loading="saveLoading"
        type="primary"
        @click="handleSave()"
      >
        保存
      </el-button>
      <el-button @click="changePage('TablePage')">
        {{ $t('domestic.cancel') }}
      </el-button>
    </div>

    <!-- 预警选择 -->
    <EarlyDialog :is-show.sync="earlyDialog" :treeId="addEditForm.roadId"
                 @confirm="handleEarlySelect" />
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import {
  callBaseDetail,
  tableAdd,
  tableDetail,
  tableEdit
} from '@/api/patrolAndRescue/operationalMonitoring/calledPartyAnswer'
import {getDictionaryByCode} from '@/utils/dictionary'
import {tableData as roadSectionInfoInter} from '@/api/patrolAndRescue/infoMgmtPatrolsRescues/roadSectionInfo'
import moment from 'moment'
import EarlyDialog from '../EarlyDialog/index.vue'
import {getRegionalData} from '@/api/patrolAndRescue/operationalMonitoring/informatiOnForAttention'

export default {
  name: 'EditAddPage',
  components: {EarlyDialog},
  props: {
    componentName: {
      default: 'TablePage',
      type: String
    }
  },
  computed: {},
  data() {
    const validatePegValStart = (_, __, callback) => {
      const {startPeg, startPegAdd} = this.addEditForm
      if (!startPeg || !startPegAdd) {
        callback(new Error('请输入开始桩号'))
      } else {
        callback()
      }
    }
    const validatePegValEnd = (_, __, callback) => {
      const {endPeg, endPegAdd} = this.addEditForm
      if (!endPeg || !endPegAdd) {
        callback(new Error('请输入结束桩号'))
      } else {
        callback()
      }
    }
    return {
      id: '', // id标识符
      addEditForm: {
        warningName: '',
        warningUnit: '',
        warnRange: '',

        warningLevel: 4,
        regionalCode: '',
        regionalName: '',
        roadId: '',
        roadName: '',
        roadCode: '',
        warningChannel: '',
        publishDeviceType: '',
        warningType: 1,
        warningValue: '',
        locationCatUncle: '',
        relieveWarningTime: '',
        warningContent: '',
        warningTime: moment().format('YYYY-MM-DD HH:mm:ss'),

        responseMechanism: '0',
        inspectMileage: '',
        peopleSituation: '',
        presetsTeamSituation: '',
        presetsPeopleSituation: '',
        carSituation: '',
        presetsCarSituation: '',
        controlThreshold: '',
        waterContent: '',
        takeAction: '',
        controlSituation: '',
        publishSituation: '',
        presetsGoodsSituation: ''
      },
      addEditRules: {
        province: [
          {required: true, message: '请输入预警名称', trigger: 'blur'}
        ],
        direction: [{required: true, message: '请选择方向', trigger: 'change'}],
        warningName: [
          {required: true, message: '请输入预警名称', trigger: 'blur'}
        ],
        regionalCode: [
          {required: true, message: '请选择所属区域', trigger: 'change'}
        ],
        warningUnit: [
          {required: true, message: '请输入预警发布单位', trigger: 'blur'}
        ],
        warningLevel: [
          {required: true, message: '请选择预警等级', trigger: 'change'}
        ],
        warningType: [
          {required: true, message: '请选择预警类型', trigger: 'change'}
        ],
        warningValue: [
          {required: true, message: '请选择预警灾害类型', trigger: 'change'}
        ],
        warningTime: [
          {required: true, message: '请选择预警时间', trigger: 'change'}
        ],
        warnRange: [
          {required: true, message: '请输入可能受影响区县', trigger: 'blur'}
        ],
        warningChannel: [
          {required: true, message: '请输入预警信息来源', trigger: 'blur'}
        ],
        roadId: [
          {required: true, message: '请选择可能受影响路段', trigger: 'change'}
        ],
        warningContent: [
          {required: true, message: '请输入预警内容', trigger: 'blur'}
        ],
        locationCatUncle: [
          {required: true, message: '请输入位置描述', trigger: 'blur'}
        ],
        locationStationNumberStart: [
          {
            required: true,
            validator: validatePegValStart,
            message: '请输入开始桩号',
            trigger: ['change', 'blur']
          }
        ],
        locationStationNumberEnd: [
          {
            required: true,
            validator: validatePegValEnd,
            message: '请输入结束桩号',
            trigger: ['change', 'blur']
          }
        ]
      },
      saveLoading: false,
      pubSub: null,
      roadOptions: [],
      regionList: [],
      mechanismList: [{
        name: '是',
        value: '1'
      }, {
        name: '否',
        value: '0'
      }],
      earlyWarningInformation: [],
      isAdd: false,
      earlyDialog: false
    }
  },
  watch: {
    componentName: {
      handler(newVal) {
        if (newVal === this.$options.name) {
          this.openPage()
        } else {
          this.closePage()
        }
      }
    }
  },
  created() {
  },
  mounted() {
    this.pubSub = PubSub.subscribe('EditAddPage', (_, data) => {
      // 第一层级不渲染 默认第一个
      if (data.roadName !== '') {
        this.addEditForm.roadName = data?.roadName || ''
        this.addEditForm.roadId = data?.roadId || ''
      }
      this.getRoadData()
      if (data.id) {
        this.isAdd = false
        this.id = data.id
        this.getDetail(data.id)
      } else {
        this.isAdd = true
        this.getCallBaseDetail()
      }
      this.getRegionalChange()

    })
  },
  methods: {
    getDictionaryByCode,
    async getCallBaseDetail() {
      const {value = {}} = await callBaseDetail(this.addEditForm.roadId)
      this.addEditForm = {...this.addEditForm, ...value}
    },
    earlyChange() {
      this.earlyDialog = true
    },
    handleEarlySelect(data) {
      this.addEditForm = {...this.addEditForm, ...data}
    },
    regionChange(val) {
      const {adname, pegEVal, pegSVal} = this.regionList.filter(
        item => item.adcode === val
      )[0]
      this.addEditForm.regionalName = adname
      if (pegSVal) {
        let startPegArr = pegSVal.split('+')
        this.$set(this.addEditForm, 'startPeg', startPegArr[0].slice(1))
        this.$set(this.addEditForm, 'startPegAdd', startPegArr[1])
      }
      if (pegEVal) {
        let endPegArr = pegEVal.split('+')
        this.$set(this.addEditForm, 'endPeg', endPegArr[0].slice(1))
        this.$set(this.addEditForm, 'endPegAdd', endPegArr[1])
      }
    },
    roadChange(val) {
      const {name, code} = this.roadOptions.filter(
        item => item.id === val
      )[0]
      this.addEditForm.roadName = name
      this.addEditForm.roadCode = code
      this.getRegionalChange()
      if (this.addEditForm.pubStatus != 1) {
        this.getCallBaseDetail()
      }
    },
    async getRegionalChange() {
      const {value = {}} = await getRegionalData(this.addEditForm.roadId)
      this.regionList = value.regional
      // this.addEditForm.province = value.province
      this.$set(this.addEditForm, 'province', value.province)
      if (this.regionList.length > 0 && !this.id) {
        // this.addEditForm.regionalCode = this.regionList[0].adcode
        // this.addEditForm.regionalName = this.regionList[0].adname
        this.$set(this.addEditForm, 'regionalCode', this.regionList[0].adcode)
        this.$set(this.addEditForm, 'regionalName', this.regionList[0].adname)
        if (this.regionList[0].pegSVal) {
          let startPegArr = this.regionList[0].pegSVal.split('+')
          this.$set(this.addEditForm, 'startPeg', startPegArr[0].slice(1))
          this.$set(this.addEditForm, 'startPegAdd', startPegArr[1])
        }
        if (this.regionList[0].pegEVal) {
          let endPegArr = this.regionList[0].pegEVal.split('+')
          this.$set(this.addEditForm, 'endPeg', endPegArr[0].slice(1))
          this.$set(this.addEditForm, 'endPegAdd', endPegArr[1])
        }
      }
    },
    //获取所在路段列表数据
    async getRoadData() {
      const {rows = []} = await roadSectionInfoInter({pageBean: {pageSize: -1}})
      this.roadOptions = rows.map(item => {
        item.roadName = item.name + ' ' + item.code
        return item
      })
      this.addEditForm.roadCode = this.roadOptions.filter(
        item => item.id === this.addEditForm.roadId
      )[0].code
    },

    // 打开页面执行
    openPage() {
    },
    // 关闭页面执行
    closePage() {
      const {roadOptions} = this
      // 重置组件数据
      Object.assign(this.$data, this.$options.data.call(this), {
        pubSub: this.pubSub,
        roadOptions
      })
      this.$nextTick(_ => {
        this.$refs.addEditForm.$el.scrollTop = 0
        this.$refs.addEditForm.clearValidate()
      })
    },
    // 获取详情
    async getDetail(id) {
      this.addEditForm = await tableDetail(id)
      const {pegSVal, pegEVal} = this.addEditForm
      if (pegSVal) {
        let startPegArr = pegSVal.split('+')
        this.$set(this.addEditForm, 'startPeg', startPegArr[0].slice(1))
        this.$set(this.addEditForm, 'startPegAdd', startPegArr[1])
      }
      if (pegEVal) {
        let endPegArr = pegEVal.split('+')
        this.$set(this.addEditForm, 'endPeg', endPegArr[0].slice(1))
        this.$set(this.addEditForm, 'endPegAdd', endPegArr[1])
      }
      if (this.addEditForm.pubStatus != 1) {
        this.getCallBaseDetail()
      }
    },
    // 保存
    handleSave() {
      this.$refs.addEditForm.validate(async (valid, object) => {
        if (!valid) {
          this.$message.warning(
            `有${
              Object.keys(object).length
            }个字段未通过校验，请正确填写表单内容。`
          )
        } else {
          this.saveLoading = true
          const {startPeg, startPegAdd, endPeg, endPegAdd} = this.addEditForm
          let pegSVal = ''
          let pegEVal = ''
          if (
            startPeg !== '' &&
            startPeg !== undefined &&
            startPegAdd !== '' && startPegAdd !== undefined
          ) {
            pegSVal =
              'k' +
              (startPeg !== '' ? startPeg : '') +
              '+' +
              (startPegAdd !== '' ? startPegAdd : '')
          }
          if (
            endPeg !== '' &&
            endPeg !== undefined &&
            endPegAdd !== '' && endPegAdd !== undefined
          ) {
            pegEVal =
              'k' +
              (endPeg !== '' ? endPeg : '') +
              '+' +
              (endPegAdd !== '' ? endPegAdd : '')
          }
          const myInterFace = this.id ? tableEdit : tableAdd
          try {
            const response = await myInterFace({
              ...this.addEditForm,
              pegSVal,
              pegEVal,
              pubStatus: 1
            })
            const {state, message} = response
            if (state) {
              const action = this.id ? '编辑' : '新增'
              this.$message.success(`${action}成功`)
              PubSub.publish('TablePage', {type: this.id ? 'edit' : 'add'})
              this.changePage('TablePage', this.id ? 'edit' : 'add')
            }
          } finally {
            this.saveLoading = false
          }
        }
      })
    },
    // 改变页面
    changePage(pageName = '', type = '') {
      if (!pageName) return
      this.$emit('changePage', pageName, _ => {
        PubSub.publish(pageName, {type})
      })
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables';

.rows-title {
  position: relative;
  width: 500px;

  .btn-action {
    position: absolute;
    top: 50%;
    left: 90px;
    transform: translateY(-50%);
  }
}

::v-deep .el-textarea .el-input__count {
  background: transparent;
}

.stake-mark {
  ::v-deep .el-form-item__content {
    display: flex;
    justify-content: space-between;

    .pegVal-text2,
    .pegVal-text1 {
      color: #fff;
      padding-right: 10px;
      font-size: 16px;
      width: fit-content;
    }

    .pegVal-text2 {
      padding-left: 10px;
      font-size: 24px;
    }
  }
}
</style>
