<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="执行点检模式">
            <a-radio-group
              v-model="radioMode1"
              name="radioGroup"
              @change="handleChange('radioMode1')"
            >
              <div class="mt-2">
                <a-radio value="SCENE_AUTO_CHECK">自动点检</a-radio>
                <div class="mode_note mt-2">
                  *支持从第三方接口直接获取点检结果并自动保存点检结果，完成点检任务
                </div>
              </div>
              <div class="mt-2">
                <a-radio value="SCENE_HALF_AUTO_CHECK">半自动点检</a-radio>
                <div class="mode_note mt-2">
                  *即支持从第三方接口直接获取点检结果，又支持人工判断点检结果，并手动保存点检结果
                </div>
              </div>
              <div class="mt-2">
                <a-radio value="SCENE_HAND_CHECK">手动点检</a-radio>
                <div class="mode_note mt-2">
                  *自动化进展相对落后的企业，可以选择开启手动点检模式，由人工判断点检结果是否异常，并手动保存点检结果
                </div>
              </div>
            </a-radio-group>
          </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>
            <div>
              <a-checkbox
                v-model="checkedMode5"
                @change="handleChange('checkedMode5')"
                >允许异常保存</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"></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_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: 36px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{ active: radioMode1 === 'SCENE_AUTO_CHECK' }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: radioMode1 === 'SCENE_AUTO_CHECK' }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  :class="{ active: radioMode1 === 'SCENE_AUTO_CHECK' }"
                >
                  系统自动执行点检任务
                </div>
                <div
                  class="mode_flow_line short"
                  style="width: 27px"
                  :class="{ active: radioMode1 === 'SCENE_AUTO_CHECK' }"
                ></div>
                <div
                  class="mode_flow_line vertical_top absolute"
                  style="height: 62px"
                  :class="{ active: radioMode1 === 'SCENE_AUTO_CHECK' }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 80px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{ active: radioMode1 !== 'SCENE_AUTO_CHECK' }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: radioMode1 !== 'SCENE_AUTO_CHECK' }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  :class="{ active: radioMode1 !== 'SCENE_AUTO_CHECK' }"
                >
                  员工人工执行点检任务
                </div>
                <div
                  class="mode_flow_line short"
                  style="width: 27px"
                  :class="{ active: radioMode1 !== 'SCENE_AUTO_CHECK' }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  :class="{ active: radioMode1 !== 'SCENE_AUTO_CHECK' }"
                ></div>
              </div>
            </div>
            <div class="mode_flow_node relative">
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 51px"
              >
                <div
                  class="mode_flow_line long"
                  :class="{
                    active: radioMode1 === 'SCENE_AUTO_CHECK',
                  }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 40px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{
                    active:
                      checkedMode3 === true &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{
                    active:
                      checkedMode3 === true &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  :class="{
                    active:
                      checkedMode3 === true &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                >
                  保存前呈现点检结果
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{
                    active:
                      checkedMode3 === true &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_b absolute"
                  :class="{
                    active:
                      checkedMode3 === true &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_g absolute"
                  :class="{
                    active:
                      checkedMode3 === true &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 60px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{
                    active:
                      checkedMode3 === false &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{
                    active:
                      checkedMode3 === false &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  :class="{
                    active:
                      checkedMode3 === false &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                >
                  保存后呈现点检结果
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{
                    active:
                      checkedMode3 === false &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  style="height: 47px"
                  :class="{
                    active:
                      checkedMode3 === false &&
                      radioMode1 !== 'SCENE_AUTO_CHECK',
                  }"
                ></div>
              </div>
              <div
                class="mode_flow_line vertical_center_c absolute"
                :class="{
                  active: radioMode1 === 'SCENE_AUTO_CHECK',
                }"
              ></div>
              <div
                class="mode_flow_line vertical_center_d absolute"
                :class="{
                  active:
                    checkedMode3 === false && radioMode1 !== 'SCENE_AUTO_CHECK',
                }"
              ></div>
            </div>
            <div class="mode_flow_line short active"></div>
            <!-- 是否允许异常结果保存 -->
            <div class="mode_flow_node relative">
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 59px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: checkedMode5 === true,
                  }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{
                    active: checkedMode5 === true,
                  }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 130px"
                  :class="{
                    active: checkedMode5 === true,
                  }"
                >
                  允许异常结果保存
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: checkedMode5 === true,
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_b absolute"
                  style="height: 44px"
                  :class="{
                    active: checkedMode5 === true,
                  }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 40px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: checkedMode5 === false,
                  }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{
                    active: checkedMode5 === false,
                  }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  :class="{
                    active: checkedMode5 === false,
                  }"
                >
                  不允许异常结果保存
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: checkedMode5 === false,
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  style="height: 44px"
                  :class="{
                    active: checkedMode5 === false,
                  }"
                ></div>
              </div>
              <div
                class="mode_flow_line vertical_center_e absolute"
                :class="{
                  active: checkedMode5 === true,
                }"
              ></div>
              <div
                class="mode_flow_line vertical_center_f absolute"
                :class="{
                  active: checkedMode5 === false,
                }"
              ></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 lang="ts">
interface IPlainObject {
  sceneCode: string;
  [key: string]: any;
}

export default {
  name: "CheckConfigFlow",
  props: {
    acceptList: {
      type: Array,
      default: () => [],
    },
    confirmList: {
      type: Array,
      default: () => [],
    },
    callList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      activeKeyA: "a",
      activeKeyB: "b",
      checkedMode1: false,
      checkedMode2: false,
      checkedMode3: false,
      checkedMode5: false,
      form: {},
      radioMode1: "",
      changeType: "",
      changeModelOld: "",
    };
  },
  // 监听父组件值是否在变化
  watch: {
    acceptList: {
      handler(newValue, oldValue) {
        if (!newValue || newValue.length === 0) return;
        newValue.forEach((item: IPlainObject) => {
          if (item.sceneValue === "Y") {
            this.radioMode1 = item.sceneCode;
            this.changeModelOld = item.sceneCode;
          }
        });
      },
      immediate: true,
      deep: true,
    },
    callList: {
      handler(newValue, oldValue) {
        if (!newValue || newValue.length === 0) return;

        const list = this.callList as any[];

        this.checkedMode1 = list[0]?.sceneValue === "Y";
        this.checkedMode2 = list[1]?.sceneValue === "Y";
        this.checkedMode3 = list[2]?.sceneValue === "Y";
        this.checkedMode5 = list[3]?.sceneValue === "Y";
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleChange(type: string) {
      this.changeType = type;
      const list = this.callList as any[];
      // eslint-disable-next-line default-case
      switch (type) {
        case "checkedMode1":
          this.onChangeCall(list[0]);
          break;
        case "checkedMode2":
          this.onChangeCall(list[1]);
          break;
        case "checkedMode3":
          this.onChangeCall(list[2]);
          break;
        case "checkedMode5":
          this.onChangeCall(list[3]);
          break;
        case "radioMode1":
          // eslint-disable-next-line no-case-declarations
          let index = 0;
          if (this.radioMode1 === "SCENE_HALF_AUTO_CHECK") {
            index = 1;
          } else if (this.radioMode1 === "SCENE_HAND_CHECK") {
            index = 2;
          }
          this.onChangeModel(this.acceptList[index], index);
          break;
      }
    },
    onChangeCall(item: {
      id: string;
      sceneCode: string;
      sceneValue: string;
      sceneName: string;
    }) {
      const openOrClose = item.sceneValue === "N" ? "开启" : "关闭";
      this.$confirm({
        title: this.$t("CONFIRM"),
        content: `确认${openOrClose}${this.$t(item.sceneName)}`,
        okText: this.$t("CONFIRM") as string,
        cancelText: this.$t("CANCEL") as string,
        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;
            case "checkedMode5":
              this.checkedMode5 = !this.checkedMode5;
              break;
          }
        },
      });
    },
    onChangeConfirm(item: any) {
      const openOrClose = item.sceneValue === "N" ? "开启" : "关闭";
      this.$confirm({
        title: this.$t("CONFIRM"),
        content: `确认${openOrClose}${this.$t(item.sceneName)}`,
        okText: this.$t("CONFIRM") as string,
        cancelText: this.$t("CANCEL") as string,
        centered: false,
        onOk: () => {
          const data = {
            id: item.id,
            sceneCode: item.sceneCode,
            sceneValue: item.sceneValue === "Y" ? "N" : "Y",
          };
          this.editModel(data);
        },
        onCancel: () => {
          this.checkedMode3 = !this.checkedMode3;
        },
      });
    },
    onChangeModel(item: any, index: number) {
      let confirmText = "确认更换";
      if (item.sceneType === "PM_MODE" && item.sceneValue === "Y") {
        confirmText = "确认关闭";
      } else if (item.sceneType === "PM_MODE" && item.sceneValue === "N") {
        confirmText = "确认开启";
      }
      if (item.sceneValue === "Y" && item.sceneType !== "PM_MODE") {
        const list = this.acceptList as any[];
        list[index].sceneSwitch = true;
        // 待验证
        return;
      }
      this.$confirm({
        title: this.$t("CONFIRM"),
        content: `${confirmText}${this.$t(item.sceneName)}`,
        okText: this.$t("CONFIRM") as string,
        cancelText: this.$t("CANCEL") as string,
        centered: false,
        onOk: () => {
          const data = {
            id: item.id,
            sceneCode: item.sceneCode,
            sceneValue: item.sceneValue === "Y" ? "N" : "Y",
          };
          this.editModel(data);
        },
        onCancel: () => {
          this.radioMode1 = this.changeModelOld;
        },
      });
    },
    editModel(data: any) {
      this.$emit("editModel", data);
    },
  },
};
</script>

<style lang="less" scoped>
.setting-user-page {
  position: absolute;
  width: 100%;
  height: 100%;
}
.collapse-header-divide {
  /deep/ .ant-collapse-header {
    border-bottom: solid 1px #eef1f4 !important;
    border-radius: 0 !important;
  }
}
/deep/.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
.ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
  color: rgba(0, 0, 0, 0.85);
}

.mode_note {
  font-size: 12px;
  font-weight: 400;
  color: #333;
  line-height: 24px;
}

.mode_flow_box {
  width: 1400px;
  height: 260px;
  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: 27px;
    }
    &.long {
      width: 200px;
    }
    &.vertical_top {
      width: 6px;
      height: 60px;
      left: 0;
      top: 20px;
    }
    &.vertical_center_a {
      width: 6px;
      height: 43px;
      left: 0;
      bottom: 15px;
    }
    &.vertical_center_b {
      width: 6px;
      height: 61px;
      left: 0;
      top: 15px;
    }
    &.vertical_center_c {
      width: 6px;
      height: 67px;
      right: 0;
      top: 51px;
    }
    &.vertical_center_d {
      width: 6px;
      height: 101px;
      right: 0;
      bottom: 17px;
    }
    &.vertical_center_e {
      width: 6px;
      height: 38px;
      right: 0;
      top: 80px;
    }
    &.vertical_center_f {
      width: 6px;
      height: 44px;
      right: 0;
      bottom: 74px;
    }
    &.vertical_center_g {
      width: 6px;
      height: 6px;
      right: 0;
      bottom: 15px;
    }
    &.vertical_bot {
      width: 6px;
      height: 61px;
      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>
