<template>
  <div class="pagemain">
    <div class="pageTitle">
      {{ $t("route.warning") }}
    </div>
    <div class="pageCon">
      <div class="toptipbox">
        <div class="ltip">{{ $t("table.warningTip") }}</div>
      </div>
      <el-form
        class="detail-form"
        label-width="120px"
        label-position="right"
        :model="formData"
      >
        <div v-for="(item,index) in formData.programItem" :key="index">
          <el-form-item :label="$t('table.warningFormTitle') + (index + 1)">
            <el-select
              v-model="formData.programIds[index]"
              style="width:350px;"
              placeholder="请选择"
              @change="selectChange($event, index)"
            >
              <el-option
                :key="0"
                :label="$t('table.noneText')"
                :value="0"
              />
              <el-option
                v-for="self in ProgramAlarmInfo"
                :key="self.id"
                :label="self.name"
                :value="self.id"
              />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <el-button
        v-if="formData.programIds.length > 0"
        type="primary"
        style="width: 10%; margin-left: 35%; margin-bottom: 100px"
        @click="saveData"
      >
        {{ $t("table.save") }}
      </el-button>
    </div>
  </div>
</template>

<script>
import {
  getProgramAlarmInfo,
  editProgramAlarm,
  programList
} from '@/api/index.js'
export default {
  name: 'Warning',
  components: {},
  data() {
    return {
      formData: {
        programIds: [],
        programNames: [],
        programItem: []
      },
      ProgramAlarmInfo: [] // 下拉节目数据
    }
  },
  mounted() {
    this.getList()
    this.getProgramList()
  },
  methods: {
    // 下拉选改变
    selectChange(e, index) {
      if (e === 0) {
        this.formData.programItem[index] = {
          id: 0,
          name: 'null'
        }
      } else {
        const itemData = this.ProgramAlarmInfo.find(obj => obj.id === e)
        this.formData.programItem[index] = itemData
      }
    },
    // 文件列表
    getList() {
      programList({}).then(res => {
        if (res.code === 200) {
          this.ProgramAlarmInfo = res.data?.files || []
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 报警回显
    getProgramList() {
      const loading = this.$loading({
        lock: true,
        text: this.$i18n.t('table.fileUpload'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getProgramAlarmInfo({}).then(res => {
        loading.close()
        if (res.code === 200) {
          if (res.data && res.data.program) {
            this.formData.programItem = res.data.program || []
            const arr = []
            const arr2 = []
            res.data.program.map(item => {
              arr.push(item.id || 0)
              arr2.push(item.name || 'null')
            })
            this.formData.programIds = arr
            this.formData.programNames = arr
          }
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        loading.close()
      })
    },
    // 保存编辑
    saveData() {
      console.log(this.formData)
      const formData = {
        ids: this.formData.programIds,
        names: this.formData.programNames
      }
      const loading = this.$loading({
        lock: true,
        text: this.$i18n.t('table.fileSave'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      editProgramAlarm({ data: formData }).then(res => {
        loading.close()
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: this.$i18n.t('table.warningTitle') + this.$i18n.t('table.save') + this.$i18n.t('table.success')
          })
        } else {
          this.$message.error(res.message)
        }
      }).catch(res => {
        loading.close()
        this.$message({
          type: 'error',
          message: this.$i18n.t('table.warningTitle') + this.$i18n.t('table.save') + this.$i18n.t('table.failed')
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.titlebox{
  margin: 12px 0;
}
</style>
