<template>
  <div>
    <a-collapse
      v-model="activeKeyA"
      disabled
      expand-icon-position="right"
      class="collapse-header-divide"
    >
      <a-collapse-panel
        key="a"
        :header="$t('MANAGEMENT_MODEL')"
        :show-arrow="false"
        disabled
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
        >
          <a-form-model-item label="任务生成模式">
            <div>
              <a-checkbox
                v-model="checkedMode1"
                @change="handleChange('checkedMode1')"
                >按寿命保养</a-checkbox
              >
              <div class="mode_note">
                *支持配置寿命保养模型并根据模型规则生成单次保养任务
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="任务执行模式">
            <div>
              <a-checkbox
                v-model="checkedMode2"
                @change="handleChange('checkedMode2')"
                >保养并点检</a-checkbox
              >
              <div class="mode_note">
                *根据该模式的开启关闭，控制在执行保养任务后是否立即执行点检任务
              </div>
            </div>
            <div>
              <a-checkbox
                v-model="checkedMode3"
                @change="handleChange('checkedMode3')"
                >逾期补保养</a-checkbox
              >
              <div class="mode_note">
                *根据该模式的开启关闭，控制在保养任务逾期后是否仍然能执行保养任务
              </div>
            </div>
          </a-form-model-item>
        </a-form-model>
      </a-collapse-panel>
    </a-collapse>
    <a-collapse
      v-model="activeKeyB"
      disabled
      expand-icon-position="right"
      class="collapse-header-divide"
    >
      <a-collapse-panel
        key="b"
        :header="$t('OPERATION_PROCESS')"
        :show-arrow="false"
        disabled
      >
        <div class="pb-5" style="overflow-x: auto">
          <div class="mode_flow_box flex items-center justify-center">
            <div
              class="mode_flow_round active flex items-center justify-center"
            >
              开始
            </div>
            <div class="mode_flow_line active"></div>
            <div class="mode_flow_arrow active"></div>
            <div class="mode_flow_text active flex items-center justify-center">
              配置保养表单
            </div>
            <div class="mode_flow_line active short"></div>
            <div class="mode_flow_node">
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 40px"
              >
                <div class="mode_flow_line short active"></div>
                <div class="mode_flow_arrow active"></div>
                <div
                  class="mode_flow_text flex items-center justify-center active"
                >
                  按周期配置保养计划
                </div>
                <div
                  class="mode_flow_line short active"
                  style="width: 27px"
                ></div>
                <div class="mode_flow_line vertical_top absolute active"></div>
                <div
                  class="mode_flow_line vertical_center_a absolute active"
                ></div>
                <div
                  class="mode_flow_line vertical_center_b absolute"
                  :class="{ active: checkedMode1 === true }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 34px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode1 === true }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: checkedMode1 === true }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 130px"
                  :class="{ active: checkedMode1 === true }"
                >
                  按寿命配置保养计划
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode1 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  :class="{ active: checkedMode1 === true }"
                ></div>
              </div>
            </div>
            <div class="mode_flow_line active"></div>
            <!-- 是否关联点检表单 -->
            <div class="mode_flow_node">
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 40px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 130px"
                  :class="{ active: checkedMode2 === true }"
                >
                  关联点检表单
                </div>
                <div
                  class="mode_flow_line short"
                  style="width: 27px"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_top absolute"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_a absolute"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_b absolute"
                  :class="{ active: checkedMode2 === false }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 34px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode2 === false }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: checkedMode2 === false }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 130px"
                  :class="{ active: checkedMode2 === false }"
                >
                  不关联点检表单
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode2 === false }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  :class="{ active: checkedMode2 === false }"
                ></div>
              </div>
            </div>
            <div class="mode_flow_line short active"></div>
            <div class="mode_flow_arrow active"></div>
            <div class="mode_flow_text active flex items-center justify-center">
              生成保养任务
            </div>
            <div class="mode_flow_line active"></div>
            <div class="mode_flow_arrow active"></div>
            <div class="mode_flow_text active flex items-center justify-center">
              执行保养任务
            </div>
            <div class="mode_flow_line active"></div>
            <!-- 是否关联点检表单 -->
            <div class="mode_flow_node">
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 40px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 160px"
                  :class="{ active: checkedMode2 === true }"
                >
                  保养后立即执行点检检查
                </div>
                <div
                  class="mode_flow_line short"
                  style="width: 27px"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_top absolute"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_a absolute"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_b absolute"
                  :class="{ active: checkedMode2 === false }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 34px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode2 === false }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: checkedMode2 === false }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 160px"
                  :class="{ active: checkedMode2 === false }"
                >
                  保养后不执行点检检查
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode2 === false }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  :class="{ active: checkedMode2 === false }"
                ></div>
              </div>
            </div>
            <div class="mode_flow_line active"></div>
            <div class="mode_flow_arrow active"></div>
            <div
              class="mode_flow_round active flex items-center justify-center"
            >
              结束
            </div>
          </div>
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
export default {
  name: "MaintainConfigFlow",
  props: {
    acceptList: {
      type: Array,
      default: () => [],
    },
    callList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeKeyA: "a",
      activeKeyB: "b",
      checkedMode1: false,
      checkedMode2: false,
      checkedMode3: false,
      radioMode1: "",
      form: {},
      changeType: "",
    };
  },
  // 监听父组件值是否在变化
  watch: {
    acceptList: {
      handler(newValue, oldValue) {
        if (!newValue || newValue.length === 0) return;
        this.checkedMode1 = newValue[0].sceneValue === "Y";
      },
      immediate: true,
      deep: true,
    },
    callList: {
      handler(newValue, oldValue) {
        if (!newValue || newValue.length === 0) return;
        this.checkedMode2 = newValue[0].sceneValue === "Y";
        this.checkedMode3 = newValue[1].sceneValue === "Y";
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleChange(type) {
      this.changeType = type;
      // eslint-disable-next-line default-case
      switch (type) {
        case "checkedMode1":
          this.onChangeCall(this.acceptList[0]);
          break;
        case "checkedMode2":
          this.onChangeCall(this.callList[0]);
          break;
        case "checkedMode3":
          this.onChangeCall(this.callList[1]);
          break;
      }
    },
    onChangeCall(item) {
      const openOrClose = item.sceneValue === "N" ? "开启" : "关闭";
      this.$confirm({
        title: this.$t("CONFIRM"),
        content: `确认${openOrClose}${this.$t(item.sceneName)}`,
        okText: this.$t("CONFIRM"),
        cancelText: this.$t("CANCEL"),
        centered: false,
        onOk: () => {
          const data = {
            id: item.id,
            sceneCode: item.sceneCode,
            sceneValue: item.sceneValue === "Y" ? "N" : "Y",
          };
          this.editModel(data);
        },
        onCancel: () => {
          // eslint-disable-next-line default-case
          switch (this.changeType) {
            case "checkedMode1":
              this.checkedMode1 = !this.checkedMode1;
              break;
            case "checkedMode2":
              this.checkedMode2 = !this.checkedMode2;
              break;
            case "checkedMode3":
              this.checkedMode3 = !this.checkedMode3;
              break;
          }
        },
      });
    },
    editModel(data) {
      this.$emit("editModel", data);
    },
  },
};
</script>

<style lang="less" scoped>
.mode_note {
  font-size: 12px;
  font-weight: 400;
  color: #333;
  line-height: 24px;
}

.mode_flow_box {
  width: 1400px;
  height: 220px;
  padding-top: 30px;
  color: #fff;
  .mode_flow_round {
    width: 45px;
    height: 45px;
    background: rgba(0, 104, 150, 0.2);
    border-radius: 50px;
    &.active {
      background-color: rgba(0, 104, 150, 1);
    }
  }
  .mode_flow_line {
    width: 40px;
    height: 6px;
    background: rgba(0, 104, 150, 0.2);
    &.short {
      width: 26px;
    }
    &.vertical_top {
      width: 6px;
      height: 38px;
      left: 0;
      top: 20px;
    }
    &.vertical_center_a {
      width: 6px;
      height: 43px;
      right: 0;
      top: 15px;
      left: initial;
    }
    &.vertical_center_b {
      width: 6px;
      height: 39px;
      right: 0;
      top: 52px;
      left: initial;
    }
    &.vertical_bot {
      width: 6px;
      height: 39px;
      left: 0;
      bottom: 15px;
    }
    &.active {
      background-color: rgba(0, 104, 150, 1);
    }
  }
  .mode_flow_text {
    height: 36px;
    background: rgba(0, 104, 150, 0.2);
    border-radius: 4px;
    padding: 0 6px;
    font-size: 13px;
    &.active {
      background-color: rgba(0, 104, 150, 1);
    }
  }
  .mode_flow_arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-left: 12px solid rgba(0, 104, 150, 0.2);
    border-bottom: 8px solid transparent;
    &.active {
      border-left: 12px solid rgba(0, 104, 150, 1);
    }
  }
  .mode_flow_node {
    height: 100%;
  }
}
</style>
