<template>
  <section class="app-container" v-loading="loading">
    <el-form>
      <el-scrollbar class="scrollbar" wrap-class="scrollbar-wrapper">
      <el-form-item v-for="item1 in formTitle" :key="item1.id">
        <section>
          <div class="tab">
            {{ item1.signalName }}
          </div>
          <el-row :gutter="20">
            <el-col :span="8" v-for="(item2,index) in formList.filter(v=> v.parentSignalCode == item1.signalCode)" :key="item2.id">
              <!-- <section v-if="item1.signalCode === item2.parentSignalCode"> -->
              <el-form-item class="row" label-width="200px" :label="
                  item2.optValName 
                    ? item2.optValName + index
                    : (item2.optValName = item2.warningName)
                ">
                <el-select style="width:80px;margin-right:10px" v-model="item2.signalLevel">
                  <el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <el-select style="width:120px" v-model="item2.workIs">
                  <el-option v-for="item in workIsList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>
        </section>
        <el-divider class="mt10 mb10"></el-divider>

      </el-form-item>
      </el-scrollbar>
      <!-- 表单操作 -->
      <el-form-item>
        <el-button class="right" type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
import { select, type, update } from '@/api/fault/warning';
export default {
  name: 'warning',
  data () {
    return {
      formTitle: [],
      formList: [],
      initialFormList: [],
      value: '',
      signalLevelList: [
        { label: '一级', value: '1' },
        { label: '二级', value: '2' },
        { label: '三级', value: '3' },
        { label: '四级', value: '4' }
      ],
      workIsList: [
        { label: '生成工单', value: 1 },
        { label: '不生成工单', value: 2 },
      ],
      loading: true
    };
  },
  methods: {
    // 获取 title 的类型
    async getTitle () {
      const { select: data } = await type();
      this.formTitle = data;
      const { select: res } = await select({
        userId: this.$store.getters.userId
      });
      this.formList = JSON.parse(JSON.stringify(res));
      this.initialFormList = JSON.parse(JSON.stringify(res));
      this.loading = false;
    },
    async submitForm () {
      this.loading = true;
      const array = this.formList.filter(v => {
        v.warningName = v.optValName;
        if (v.id != null) {
          v.warningName = v.optValName;
          const { workIs, signalLevel } = this.initialFormList.find(e => v.signalCode == e.signalCode);
          if (v.workIs != workIs || v.signalLevel != signalLevel) {
            return v;
          }
        } else {
          return v;
        }
      })
      const { code } = await update({
        userId: this.$store.getters.userId,
        signalList: array
      });
      this.loading = false;
      if (code !== 200) {
        return this.$message.error('更新错误，请稍后重试');
      }
      this.$message.success('更新成功');
    }
  },
  computed: {
    otherList () {
      let signalCodes = this.formTitle.map(v => v.signalCode).filter(v => !!v);
      return this.formList.filter(v => {
        return signalCodes.indexOf(v.parentSignalCode) == -1;
      });
    }
  },
  watch: {},
  created () {
    this.getTitle();
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  .tab {
    font-weight: 700;
  }
  .row {
    margin-bottom: 10px;
  }
  .right {
    float: right;
  }
}
.scrollbar {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 200px)
}

/deep/ .el-scrollbar__view {
  overflow-x: hidden;
}
</style>
