// 车辆属性预警配置
<template>
  <div class="app-container">
    <div class="container">
      <div class="head">
        <span>车辆属性预警配置</span>
      </div>
      <div class="personnel-main">
        <div class="personnel-main-item">
          <div class="personnel-top">
            <span>车辆违章预警</span>
            <el-switch
              v-model="sevenWarningForm.sevenWarning"
              @change="handleSevenWarningChange"
            ></el-switch>
          </div>
          <div v-if="sevenWarningForm.sevenWarning" class="personnel-content">
            <el-form
              label-position="left"
              ref="sevenWarningFormRefs"
              :model="sevenWarningForm"
              label-width="110px"
            >
              <el-form-item
                label="预警项："
                class="seven-Warning-form-item form-item-width"
                prop="sevenWarningDetail"
                label-width="100%"
                :rules="[
                  {
                    required: true,
                    message: '请选择预警项',
                    trigger: 'change',
                  },
                ]"
              >
                <el-checkbox-group
                  v-model="sevenWarningForm.sevenWarningDetail"
                >
                  <el-checkbox
                    :label="item.code"
                    v-for="(item, index) in sevenWarningForm.list"
                    :key="item.code"
                  >
                    <span>{{ item.desc }}</span>
                    <el-form-item
                      v-if="
                        sevenWarningForm.sevenWarningDetail.includes(item.code)
                      "
                      style="margin-left: 20px"
                      label="预警等级"
                      :prop="'list.' + index + '.type'"
                      :rules="[
                        {
                          required: true,
                          message: '请选择预警等级',
                          trigger: 'change',
                        },
                      ]"
                    >
                      <el-select
                        v-model="item.type"
                        clearable
                        placeholder="请选择预警等级"
                        @change="changeWarning($event, index)"
                        style="width: 100%"
                      >
                        <template #prefix>
                          <div
                            class="trade-type"
                            v-if="item.type !== ''"
                            :style="{ backgroundColor: item.color }"
                          >
                            {{ item.name }}
                          </div>
                        </template>
                        <el-option
                          v-for="v in warning_list"
                          :key="v.status"
                          :label="v.name"
                          :value="v.status"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="personnel-main-item">
          <div class="personnel-top">
            <span>车辆年检预警</span>
            <el-switch
              v-model="nationWarningForm.nationWarning"
              @change="handleNationWarningChange"
            ></el-switch>
          </div>
          <div v-if="nationWarningForm.nationWarning" class="personnel-content">
            <el-form
              label-position="left"
              ref="nationWarningFormRefs"
              :model="nationWarningForm"
              label-width="90px"
            >
              <el-form-item
                label="预警项："
                label-width="100%"
                class="seven-Warning-form-item form-item-width"
                :prop="'nationWarningDetail'"
                :rules="[
                  {
                    required: true,
                    message: '请选择预警项',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-checkbox-group
                  v-model="nationWarningForm.nationWarningDetail"
                >
                  <el-checkbox
                    :label="item.code"
                    v-for="(item, index) in nationWarningForm.list"
                    :key="item.code"
                  >
                    <span>{{ item.desc }}</span>
                    <el-form-item
                      v-if="
                        nationWarningForm.nationWarningDetail.includes(
                          item.code
                        )
                      "
                      style="margin-left: 20px"
                      label="预警等级"
                      :prop="'list.' + index + '.type'"
                      :rules="[
                        {
                          required: true,
                          message: '请选择预警等级',
                          trigger: 'change',
                        },
                      ]"
                    >
                      <el-select
                        v-model="item.type"
                        clearable
                        placeholder="请选择预警等级"
                        @change="changeCarYearWarning($event, index)"
                        style="width: 100%"
                      >
                        <template #prefix>
                          <div
                            class="trade-type"
                            v-if="item.type !== ''"
                            :style="{ backgroundColor: item.color }"
                          >
                            {{ item.name }}
                          </div>
                        </template>
                        <el-option
                          v-for="v in warning_list"
                          :key="v.status"
                          :label="v.name"
                          :value="v.status"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <!-- 确认 -->
      <div class="sure">
        <el-button plain type="primary" @click="getInfo(1)" class="reset"
          >重置</el-button
        >
        <el-button type="primary" @click="submit">保存配置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getwarningConfigUpdate,
  getwarningConfig,
  getCarViolationTerm,
  getCarYearCheckTerm,
} from "@/api/carWarning";
export default {
  data() {
    return {
      listLoading: false,
      sevenWarningForm: {
        sevenWarning: true,
        sevenWarningDetail: [],
        list: [
          {
            desc: "累积记分大于等于12",
            type: "", //预警等级
            code: 1,
            name: "",
            color: "",
          },
        ],
      },
      nationWarningForm: {
        nationWarning: true,
        nationWarningDetail: [],
        list: [
          {
            desc: "未年检",
            type: "", //预警等级
            code: 1,
            name: "",
            color: "",
          },
        ],
      },
      warning_color: "",
      warning_list: [
        {
          name: "Ⅰ级",
          status: 1,
          color: "#B60ED1",
        },
        {
          name: "Ⅱ级",
          status: 2,
          color: "#FF5C66",
        },
        {
          name: "Ⅲ级",
          status: 3,
          color: "#FF8B49",
        },
        {
          name: "Ⅳ级",
          status: 4,
          color: "#FFC52F",
        },
        {
          name: "Ⅴ级",
          status: 5,
          color: "#78D1E5",
        },
      ],
    };
  },

  created() {
    this.getCarViolationTerm();
    this.getCarYearCheckTerm();
    this.getInfo();
  },

  methods: {
    async getCarViolationTerm() {
      const res = await getCarViolationTerm();
      this.sevenWarningForm.list = res.data;
    },
    async getCarYearCheckTerm() {
      const res = await getCarYearCheckTerm();
      this.nationWarningForm.list = res.data;
    },
    async getInfo(type) {
      const { data } = await getwarningConfig();
      this.sevenWarningForm.sevenWarning = data.carViolation;
      this.sevenWarningForm.sevenWarningDetail = data.carViolationDetail.map(
        (item) => item.warningTerm
      );
      this.sevenWarningForm.list = this.sevenWarningForm.list.map((item) => {
        const res = data.carViolationDetail.find(
          (v) => v.warningTerm === item.code
        );
        const res1 = this.warning_list.find((i) => {
          return i.status == res?.warningGrade;
        });
        if (res && res1) {
          return {
            desc: item.desc,
            type: res.warningGrade,
            code: res.warningTerm,
            name: res1.name,
            color: res1.color,
          };
        }
        return item;
      });
      this.nationWarningForm.nationWarning = data.carYearCheck;
      this.nationWarningForm.nationWarningDetail = data.carYearCheckDetail.map(
        (item) => item.warningTerm
      );
      this.nationWarningForm.list = this.nationWarningForm.list.map((item) => {
        const res = data.carYearCheckDetail.find(
          (v) => v.warningTerm === item.code
        );
        const res1 = this.warning_list.find((i) => {
          return i.status == res?.warningGrade;
        });
        if (res && res1) {
          return {
            desc: item.desc,
            type: res.warningGrade,
            code: res.warningTerm,
            name: res1.name,
            color: res1.color,
          };
        }
        return item;
      });
      if (type) {
        this.$message.success("重置成功！");
      }
    },
    _getsevenWarningFormRef() {
      return new Promise((resolve, reject) => {
        if (this.sevenWarningForm.sevenWarning) {
          this.$refs.sevenWarningFormRefs.validate((valid) => {
            if (valid) {
              resolve();
            }
          });
        } else {
          resolve();
        }
      });
    },
    _getnationWarningFormRef() {
      return new Promise((resolve, reject) => {
        if (this.nationWarningForm.nationWarning) {
          this.$refs.nationWarningFormRefs.validate((valid) => {
            if (valid) {
              resolve();
            }
          });
        } else {
          resolve();
        }
      });
    },

    submit() {
      Promise.all([
        this._getsevenWarningFormRef(),
        this._getnationWarningFormRef(),
      ]).then(async (res) => {
        const result = this.sevenWarningForm.list
          .map((item) => {
            if (this.sevenWarningForm.sevenWarningDetail.includes(item.code)) {
              return {
                warningTerm: item.code,
                warningGrade: item.type,
              };
            }
          })
          .filter(Boolean);
        const result1 = this.nationWarningForm.list
          .map((item) => {
            if (
              this.nationWarningForm.nationWarningDetail.includes(item.code)
            ) {
              return {
                warningTerm: item.code,
                warningGrade: item.type,
              };
            }
          })
          .filter(Boolean);
        const sevenWarningForm = {
          carViolation: this.sevenWarningForm.sevenWarning,
          carViolationDetail: result,
          carYearCheck: this.nationWarningForm.nationWarning,
          carYearCheckDetail: result1,
        };
        // console.log(sevenWarningForm, 1);
        await getwarningConfigUpdate(sevenWarningForm);
        this.$message.success(`配置成功`);
        await this.getInfo();
      });
    },
    // 预警等级
    changeCarYearWarning(e, index) {
      const res = {
        ...this.nationWarningForm.list[index],
        ...this.warning_list.find((item) => item.status === e),
      };
      this.nationWarningForm.list.splice(index, 1, res);
    },
    // 车辆年检预警等级
    changeWarning(e, index) {
      const res = {
        ...this.sevenWarningForm.list[index],
        ...this.warning_list.find((item) => item.status === e),
      };
      this.sevenWarningForm.list.splice(index, 1, res);
    },
    // 开关变化
    handleSevenWarningChange(value) {
      this.sevenWarningForm = {
        sevenWarning: value,
        sevenWarningDetail: [],
        list: [
          {
            desc: "累积记分大于等于12",
            type: "", //预警等级
            code: 1,
            name: "",
            color: "",
          },
        ],
      };
    },
    handleNationWarningChange(value) {
      this.nationWarningForm = {
        nationWarning: value,
        nationWarningDetail: [],
        list: [
          {
            desc: "未年检",
            type: "", //预警等级
            code: 1,
            name: "",
            color: "",
          },
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-left: 16px;
}

.head {
  margin-bottom: 32px;
  span {
    color: #333;
    font-size: 18px;
    font-weight: 500;
  }
}
.personnel-main {
  width: 100%;
  display: flex;
  align-items: flex-start;
}
.personnel-main-item {
  width: 34%;
  height: 550px;
  border-radius: 12px;
  box-shadow: 0 0 5px rgba(153, 189, 243, 0.85);
  padding: 20px;
  overflow: auto;
  margin-right: 20px;

  .personnel-top {
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #333;
    margin-bottom: 10px;
    span {
      margin-right: 20px;
    }
  }
  .personnel-content {
    ::v-deep .el-input__prefix {
      display: flex;
      align-items: center;
    }
    ::v-deep .el-select .el-input__inner {
      color: transparent;
    }
    .trade-type {
      color: #fff;
      // background-color: red;
      border-radius: 8px;
      height: 28px;
      box-sizing: border-box;
      line-height: 28px;
      padding: 0 5px;
    }
  }
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px !important;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.form-item-width {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }
}
.form-item-age {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;

  .form-item-text {
    margin: 10px 10px 0 10px;
  }
  ::v-deep .form-item-age-right .el-form-item__content {
    margin-left: 0 !important;
  }
  .form-item-age-right-20 {
    margin-left: 20px;
  }
}
.seven-Warning-form-item {
  ::v-deep .el-form-item__content {
    .el-checkbox-group .el-checkbox {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      .el-checkbox__label {
        display: flex;
        align-items: center;
      }
    }
  }
}
//确认
.sure {
  text-align: center;
  margin-top: 37px;
}
</style>
