<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>
            <div>
              <a-checkbox
                v-model="checkedMode2"
                @change="handleChange('checkedMode2')"
                >手动叫修</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_PICK_REPAIR_TICKET">抢单</a-radio>
                <div class="mode_note">
                  *当企业注重员工的主动性，可以选择抢单模式，产生叫修单以后统一放在公共叫修单池中，由维修人员根据自己的技能、loading情况等自己决定要不要接单，接什么单
                </div>
              </div>
              <div>
                <a-radio value="SCENE_ASSIGN_REPAIR_TICKET">派工</a-radio>
                <div class="mode_note">
                  *当企业的管理模式为当产生故障时统一由设备经理根据人员技能、loading、故障现象等派单给对应的人员，可以采用派工模式
                </div>
              </div>
              <div>
                <a-radio value="SCENE_SELF_REPAIR_TICKET">自修</a-radio>
                <div class="mode_note">
                  *当企业的管理模式为产生故障后派工模式又担心叫修单统一到设备经理手上再指派会影响效率，可以由操作工在叫修时自己先修机的模式，节省派工等待时间，提高工厂效率，降低停机损失
                </div>
              </div>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="结单模式">
            <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"
                  :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"
                  :class="{ active: checkedMode1 === true }"
                >
                  系统自动产生叫修单
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode1 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_top 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: 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: 129px"
                  :class="{ active: checkedMode2 === true }"
                >
                  手动维护叫修单
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode2 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  :class="{ active: checkedMode2 === true }"
                ></div>
              </div>
            </div>
            <div class="mode_flow_node relative">
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 2px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: radioMode1 === 'SCENE_PICK_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{
                    active: radioMode1 === 'SCENE_PICK_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 142px"
                  :class="{
                    active: radioMode1 === 'SCENE_PICK_REPAIR_TICKET',
                  }"
                >
                  在接单页面主动接单
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: radioMode1 === 'SCENE_PICK_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_top absolute"
                  :class="{
                    active: radioMode1 === 'SCENE_PICK_REPAIR_TICKET',
                  }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 39px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: radioMode1 === 'SCENE_ASSIGN_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{
                    active: radioMode1 === 'SCENE_ASSIGN_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  :class="{
                    active: radioMode1 === 'SCENE_ASSIGN_REPAIR_TICKET',
                  }"
                >
                  在派工页面指派叫修单
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: radioMode1 === 'SCENE_ASSIGN_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_a absolute"
                  :class="{
                    active:
                      (checkedMode1 === true &&
                        radioMode1 === 'SCENE_ASSIGN_REPAIR_TICKET') ||
                      (checkedMode1 === true &&
                        radioMode1 === 'SCENE_SELF_REPAIR_TICKET') ||
                      (checkedMode2 === true &&
                        radioMode1 === 'SCENE_PICK_REPAIR_TICKET'),
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_center_b absolute"
                  :class="{
                    active:
                      (checkedMode1 === true &&
                        radioMode1 === 'SCENE_SELF_REPAIR_TICKET') ||
                      (checkedMode2 === true &&
                        radioMode1 === 'SCENE_PICK_REPAIR_TICKET') ||
                      (checkedMode2 === true &&
                        radioMode1 === 'SCENE_ASSIGN_REPAIR_TICKET'),
                  }"
                ></div>
              </div>
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 34px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: radioMode1 === 'SCENE_SELF_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{
                    active: radioMode1 === 'SCENE_SELF_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  :class="{
                    active: radioMode1 === 'SCENE_SELF_REPAIR_TICKET',
                  }"
                >
                  叫修单产生后自动接单
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{
                    active: radioMode1 === 'SCENE_SELF_REPAIR_TICKET',
                  }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  style="height: 43px"
                  :class="{
                    active:
                      (checkedMode1 === true &&
                        radioMode1 === 'SCENE_SELF_REPAIR_TICKET') ||
                      (checkedMode2 === true &&
                        radioMode1 === 'SCENE_SELF_REPAIR_TICKET'),
                  }"
                ></div>
              </div>
              <div
                class="mode_flow_line vertical_center_c absolute"
                :class="{
                  active: radioMode1 === 'SCENE_PICK_REPAIR_TICKET',
                }"
              ></div>
              <div
                class="mode_flow_line vertical_center_d absolute"
                :class="{
                  active: radioMode1 === 'SCENE_SELF_REPAIR_TICKET',
                }"
              ></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_node">
              <div
                class="mode_flow_node_box flex items-center relative"
                style="margin-top: 40px"
              >
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode3 === true }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: checkedMode3 === true }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 129px"
                  :class="{ active: checkedMode3 === true }"
                >
                  确认维修结果
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode3 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_top absolute"
                  :class="{ active: checkedMode3 === true }"
                ></div>
                <div
                  class="mode_flow_line vertical_top right absolute"
                  :class="{ active: checkedMode3 === 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: checkedMode3 === false }"
                ></div>
                <div
                  class="mode_flow_arrow"
                  :class="{ active: checkedMode3 === false }"
                ></div>
                <div
                  class="mode_flow_text flex items-center justify-center"
                  style="width: 129px"
                  :class="{ active: checkedMode3 === false }"
                >
                  不确认维修结果
                </div>
                <div
                  class="mode_flow_line short"
                  :class="{ active: checkedMode3 === false }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot absolute"
                  :class="{ active: checkedMode3 === false }"
                ></div>
                <div
                  class="mode_flow_line vertical_bot right absolute"
                  :class="{ active: checkedMode3 === 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: "FixConfigFlow",
  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,
      form: {},
      radioMode1: "",
      changeType: "",
      changeModelOld: "",
    };
  },
  // 监听父组件值是否在变化
  watch: {
    acceptList: {
      handler(newValue, oldValue) {
        if (!newValue || newValue.length === 0 || newValue === oldValue) return;
        newValue.forEach((item) => {
          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;
        this.checkedMode1 = this.callList[0]?.sceneValue === "Y";
        this.checkedMode2 = this.callList[1]?.sceneValue === "Y";
      },
      immediate: true,
      deep: true,
    },
    confirmList: {
      handler(newValue, oldValue) {
        if (!newValue || newValue.length === 0) return;
        this.checkedMode3 = this.confirmList[0].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.callList[0]);
          break;
        case "checkedMode2":
          this.onChangeCall(this.callList[1]);
          break;
        case "checkedMode3":
          this.onChangeConfirm(this.confirmList[0]);
          break;
        case "radioMode1":
          // eslint-disable-next-line no-case-declarations
          let index = 0;
          if (this.radioMode1 === "SCENE_ASSIGN_REPAIR_TICKET") {
            index = 1;
          } else if (this.radioMode1 === "SCENE_SELF_REPAIR_TICKET") {
            index = 2;
          }
          this.onChangeModel(this.acceptList[index], index);
          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.onChangeConfirm(this.confirmList[0]);
              break;
          }
        },
      });
    },
    onChangeConfirm(item) {
      const openOrClose = item.sceneValue === "Y" ? "关闭" : "开启";
      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: () => {
          this.checkedMode3 = !this.checkedMode3;
        },
      });
    },
    onChangeModel(item, index) {
      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") {
        this.acceptList[index].sceneSwitch = true;
        return;
      }
      this.$confirm({
        title: this.$t("CONFIRM"),
        content: `${confirmText}${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: () => {
          this.radioMode1 = this.changeModelOld;
        },
      });
    },
    editModel(data) {
      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: 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: 62px;
    height: 6px;
    background: rgba(0, 104, 150, 0.2);
    &.short {
      width: 43px;
    }
    &.vertical_top {
      width: 6px;
      height: 38px;
      left: 0;
      top: 20px;
      &.right {
        left: initial;
        right: 0;
      }
    }
    &.vertical_center_a {
      width: 6px;
      height: 43px;
      left: 0;
      bottom: 15px;
    }
    &.vertical_center_b {
      width: 6px;
      height: 39px;
      left: 0;
      top: 15px;
    }
    &.vertical_center_c {
      width: 6px;
      height: 75px;
      right: 0;
      top: 23px;
    }
    &.vertical_center_d {
      width: 6px;
      height: 70px;
      right: 0;
      bottom: 28px;
    }
    &.vertical_bot {
      width: 6px;
      height: 39px;
      left: 0;
      bottom: 15px;
      &.right {
        left: initial;
        right: 0;
      }
    }
    &.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>
