// 人员属性预警配置
<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
              ref="sevenWarningFormRefs"
              :model="sevenWarningForm"
              label-width="110px"
            >
              <el-form-item
                :label="'重点预警项'"
                class="seven-Warning-form-item"
                prop="sevenWarningDetail"
                :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)
                      "
                      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="预警等级"
                prop="nationWarningGrade"
                :rules="[
                  {
                    required: true,
                    message: '请选择预警等级',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model="nationWarningForm.nationWarningGrade"
                  clearable
                  placeholder="请选择预警等级"
                  @change="formatStatus"
                >
                  <template #prefix>
                    <div
                      v-if="nationWarningForm.nationWarningGrade !== ''"
                      class="trade-type"
                      :style="{
                        backgroundColor: warning_color,
                      }"
                    >
                      {{
                        formatStatus(nationWarningForm.nationWarningGrade).name
                      }}
                    </div>
                  </template>
                  <el-option
                    v-for="item in warning_list"
                    :key="item.status"
                    :label="item.name"
                    :value="item.status"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="民族预警项"
                label-width="100%"
                class="form-item-width"
                :prop="'nationWarningDetail'"
                :rules="[
                  {
                    required: true,
                    message: '请添加民族预警项',
                    trigger: 'blur',
                  },
                ]"
              >
                <div>
                  <el-tag
                    :key="tag.key"
                    v-for="tag in nationWarningForm.nationWarningDetail"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >
                    {{ tag }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput"
                    >+ 选项</el-button
                  >
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="personnel-main-item">
          <div class="personnel-top">
            <span>年龄预警</span>
            <el-switch
              v-model="ageWarningForm.ageWarning"
              @change="handleAgeWarningChange"
            ></el-switch>
          </div>
          <div v-if="ageWarningForm.ageWarning" class="personnel-content">
            <el-form
              ref="ageWarningFormRefs"
              :model="ageWarningForm"
              label-position="left"
              label-width="90px"
            >
              <el-form-item
                label="预警等级"
                prop="ageWarningGrade"
                :rules="[
                  {
                    required: true,
                    message: '请选择预警等级',
                    trigger: 'change',
                  },
                ]"
              >
                <el-select
                  v-model="ageWarningForm.ageWarningGrade"
                  clearable
                  placeholder="请选择预警等级"
                  @change="formatStatus"
                >
                  <template #prefix>
                    <div
                      v-if="ageWarningForm.ageWarningGrade !== ''"
                      class="trade-type"
                      :style="{
                        backgroundColor: formatStatus(
                          ageWarningForm.ageWarningGrade
                        ).color,
                      }"
                    >
                      {{ formatStatus(ageWarningForm.ageWarningGrade).name }}
                    </div>
                  </template>
                  <el-option
                    v-for="(item, index) in warning_list"
                    :key="index"
                    :label="item.name"
                    :value="item.status"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="年龄预警项（岁）"
                label-width="130px"
                style="margin-bottom: 0px"
              >
              </el-form-item>
              <template
                v-for="(item, index) in ageWarningForm.ageWarningDetail"
              >
                <div :key="item.key" class="form-item-age">
                  <el-form-item
                    label-width="75px"
                    :prop="'ageWarningDetail.' + index + '.startAge'"
                    :label="`年龄段${index + 1}`"
                    :rules="{
                      required: true,
                      message: '请选择年龄范围',
                      trigger: 'blur',
                    }"
                  >
                    <el-input-number
                      size="mini"
                      v-model="item.startAge"
                      :min="0"
                    ></el-input-number>
                  </el-form-item>
                  <div class="form-item-text">至</div>
                  <el-form-item
                    class="form-item-age-right"
                    :prop="'ageWarningDetail.' + index + '.endAge'"
                    :rules="{
                      required: true,
                      message: '请选择年龄范围',
                      trigger: 'blur',
                    }"
                  >
                    <el-input-number
                      size="mini"
                      v-model="item.endAge"
                      :min="0"
                    ></el-input-number>
                  </el-form-item>
                  <el-form-item
                    class="form-item-age-right form-item-age-right-20"
                  >
                    <el-button
                      icon="el-icon-close"
                      circle
                      @click="deleteProduct(item)"
                      v-if="index"
                      size="small"
                    ></el-button>
                    <el-button
                      icon="el-icon-plus"
                      circle
                      @click="addProduct"
                      size="small"
                    ></el-button>
                  </el-form-item>
                </div>
              </template>
            </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 {
  getsevenWarningTerm,
  getwarningConfigUpdate,
  getwarningConfig,
} from "@/api/personnelWarning";
export default {
  data() {
    return {
      listLoading: false,
      sevenWarningForm: {
        sevenWarning: true,
        sevenWarningDetail: [],
        list: [
          {
            desc: "涉恐",
            type: "", //预警等级
            code: 1,
            name: "",
            color: "",
          },
          {
            desc: "涉稳",
            type: "",
            code: 2,
            name: "",
            color: "",
          },
          {
            desc: "逃犯",
            type: "",
            code: 3,
            name: "",
            color: "",
          },
          {
            desc: "涉毒",
            type: "",
            code: 4,
            name: "",
            color: "",
          },
          {
            desc: "前科",
            type: "",
            code: 5,
            name: "",
            color: "",
          },
          {
            desc: "安康",
            type: "",
            code: 6,
            name: "",
            color: "",
          },
          {
            desc: "上访",
            type: "",
            code: 7,
            name: "",
            color: "",
          },
        ],
      },
      nationWarningForm: {
        nationWarning: true,
        nationWarningGrade: "",
        nationWarningDetail: [],
      },
      ageWarningForm: {
        ageWarning: true,
        ageWarningGrade: "",
        ageWarningDetail: [
          {
            endAge: "",
            startAge: "",
          },
        ],
      },
      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",
        },
      ],
      inputVisible: false,
      inputValue: "",
    };
  },

  created() {
    this.getsevenWarningTerm();
    this.getInfo();
  },

  methods: {
    async getsevenWarningTerm() {
      const res = await getsevenWarningTerm();
    },
    async getInfo(type) {
      const { data } = await getwarningConfig();
      this.sevenWarningForm.sevenWarning = data.sevenWarning;
      this.sevenWarningForm.sevenWarningDetail = data.sevenWarningDetail.map(
        (item) => item.warningTerm
      );
      this.sevenWarningForm.list = this.sevenWarningForm.list.map((item) => {
        const res = data.sevenWarningDetail.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.nationWarning,
        nationWarningGrade: data.nationWarningGrade,
        nationWarningDetail: data.nationWarningDetail,
      };
      this.ageWarningForm = {
        ageWarning: data.ageWarning,
        ageWarningGrade: data.ageWarningGrade,
        ageWarningDetail: data.ageWarningDetail,
      };
      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();
        }
      });
    },
    _getageWarningFormRef() {
      return new Promise((resolve, reject) => {
        if (this.ageWarningForm.ageWarning) {
          this.$refs.ageWarningFormRefs.validate((valid) => {
            if (valid) {
              resolve();
            }
          });
        } else {
          resolve();
        }
      });
    },
    submit() {
      Promise.all([
        this._getsevenWarningFormRef(),
        this._getnationWarningFormRef(),
        this._getageWarningFormRef(),
      ]).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 sevenWarningForm = {
          sevenWarning: this.sevenWarningForm.sevenWarning,
          sevenWarningDetail: result,
          ...this.nationWarningForm,
          ...this.ageWarningForm,
        };
        // console.log(sevenWarningForm, 1);
        await getwarningConfigUpdate(sevenWarningForm);
        this.$message.success(`配置成功`);
        await this.getInfo();
      });
    },
    // 预警等级
    changeWarning(e, index) {
      const res = {
        ...this.sevenWarningForm.list[index],
        ...this.warning_list.find((item) => item.status === e),
      };
      this.sevenWarningForm.list.splice(index, 1, res);
    },
    formatStatus(type) {
      const value = this.warning_list.find((item) => item.status == type);
      this.warning_color = value.color;
      return {
        name: value?.name,
        color: value?.color,
      };
    },
    // 功能增加
    addProduct() {
      this.ageWarningForm.ageWarningDetail.push({
        endAge: 0,
        startAge: 0,
        key: new Date().getTime(),
      });
    },
    //功能刪除
    deleteProduct(item) {
      let index = this.ageWarningForm.ageWarningDetail.findIndex(
        (v) => v.key === item.key
      );
      if (index !== -1) {
        this.ageWarningForm.ageWarningDetail.splice(index, 1);
      }
    },

    handleClose(tag) {
      const index = this.nationWarningForm.nationWarningDetail.indexOf(tag);
      if (index > -1) {
        this.nationWarningForm.nationWarningDetail.splice(index, 1);
      }
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.nationWarningForm.nationWarningDetail.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 开关变化
    handleSevenWarningChange(value) {
      this.sevenWarningForm = {
        sevenWarning: value,
        sevenWarningDetail: [],
        list: [
          {
            desc: "涉恐",
            type: "", //预警等级
            code: 1,
            name: "",
            color: "",
          },
          {
            desc: "涉稳",
            type: "",
            code: 2,
            name: "",
            color: "",
          },
          {
            desc: "逃犯",
            type: "",
            code: 3,
            name: "",
            color: "",
          },
          {
            desc: "涉毒",
            type: "",
            code: 4,
            name: "",
            color: "",
          },
          {
            desc: "前科",
            type: "",
            code: 5,
            name: "",
            color: "",
          },
          {
            desc: "安康",
            type: "",
            code: 6,
            name: "",
            color: "",
          },
          {
            desc: "上访",
            type: "",
            code: 7,
            name: "",
            color: "",
          },
        ],
      };
    },
    handleNationWarningChange(value) {
      this.nationWarningForm = {
        nationWarning: value,
        nationWarningGrade: "",
        nationWarningDetail: [],
      };
    },
    handleAgeWarningChange(value) {
      this.ageWarningForm = {
        ageWarning: value,
        ageWarningGrade: "",
        ageWarningDetail: [
          {
            endAge: "",
            startAge: "",
          },
        ],
      };
    },
  },
};
</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;
  justify-content: space-between;
}
.personnel-main-item {
  width: 32%;
  height: 550px;
  border-radius: 12px;
  box-shadow: 0 0 5px rgba(153, 189, 243, 0.85);
  padding: 20px;
  overflow: auto;

  .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>
