<template>
  <div class="addRecord">
    <van-form :readonly="!!formData.id">
      <div v-if="formData.id">
        <van-field v-model="formData.createdAt" label="监管时间" />
      </div>
      <van-field name="isRecord" label="1.是否考前备案">
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isRecord"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="isPostExamGuide" label="2.是否明显位置张贴《考试简章》?">
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isPostExamGuide"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="isPerfectDeviceServices" label="3.考场服务设备是否完善?">
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isPerfectDeviceServices"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        name="isHaveTheSameTime"
        label="4.考试时间与备案考试时间是否一致?"
      >
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isHaveTheSameTime"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="isSameAddress" label="5.考试地点与备案考试地点是否一致?">
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isSameAddress"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="isExaminer" label="6.是否有无相关专业考官且佩戴考官证?">
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isExaminer"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="isRate" label="7.是否现场对艺术水平做出评定?">
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isRate"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        name="isSureContent"
        label="8.是否是所属考级机构教材确定的考级内容?"
      >
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isSureContent"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        name="isPostPoster"
        label="9.是否在明显位置张贴《疫情防控指南》海报?"
      >
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isPostPoster"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        name="isHaveThermometer"
        label="10.考点是否配备测量体温设备，且专人值守?"
      >
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isHaveThermometer"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="isSchedule" label="11.考场是否实施预约限流措施?">
        <template #input>
          <van-radio-group
            :disabled="!!formData.id"
            v-model="formData.isSchedule"
            direction="horizontal"
          >
            <van-radio :name="true">
              是
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon : inactiveIcon"
                />
              </template>
            </van-radio>
            <van-radio class="no" :name="false"
              >否
              <template #icon="props">
                <img
                  class="img-icon"
                  :src="props.checked ? activeIcon2 : inactiveIcon"
                /> </template
            ></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="formData.other"
        rows="2"
        autosize
        label="12.其他"
        type="textarea"
        maxlength="200"
        placeholder="请输入备注信息…"
        class="textfield"
      />
    </van-form>

    <div class="bottom">
      <div v-if="!formData.id">
        <van-button round block :color="$colors.prim" @click="onSave"
          >提交</van-button
        >
      </div>
      <div v-else>
        <van-button round block color="#C4C7CC" @click="$router.go(-1)"
          >返回</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "addRecord",
  metaInfo() {
    return {
      title: this.formData.id ? "记录详情" : "添加记录"
    };
  },
  data() {
    return {
      formData: {},
      rules: {},
      activeIcon: require("../../assets/icon_sel_yes.svg"),
      activeIcon2: require("../../assets/icon_sel_no.svg"),
      inactiveIcon: ""
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.$http.get(`/regulatory/get/${this.$route.query.id}`).then(res => {
        this.formData = res;
      });
    }
  },
  methods: {
    onSave() {
      if (
        ![true, false].includes(this.formData.isRecord) ||
        ![true, false].includes(this.formData.isPostExamGuide)
      ) {
        this.$toast("请选择所有必选项");
        return;
      }

      this.submit();
    },
    submit() {
      let data = { ...this.formData };
      data.recordId = this.$route.query.recordId;
      data.supervisorUserId = this.$store.state.userInfo.id;
      // data.time = dayjs().format("YYYY-MM-DD HH:mm:ss");

      this.saving = true;
      this.$http
        .post("/regulatory/save", data, { body: "json" })
        .then(() => {
          this.saving = false;
          this.$toast.success("成功");
          this.$router.go(-1);
        })
        .catch(e => {
          console.log(e);
          this.saving = false;
          this.$message.error(e.error);
        });
    },
    onDelete() {
      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
        .then(() => {
          return this.$http.post(`/regulatory/del/${this.formData.id}`);
        })
        .then(() => {
          this.$message.success("删除成功");
          this.$router.go(-1);
        })
        .catch(e => {
          if (e !== "cancel") {
            console.log(e);
            this.$message.error((e || {}).error || "删除失败");
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
.addRecord {
  .title {
    font-size: 36px;
    text-align: center;
    font-weight: 700;
    margin: 20px;
  }
  .el-row {
    padding: 0 20px;
    & + .el-row {
      margin-top: 10px;
    }
  }
}
.van-form {
  padding: 16px 16px 100px;
}
.van-cell {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  &::after {
    content: none;
  }

  &:not(:first-child) {
    margin-top: 12px;
  }
}

.van-radio {
  width: 100px;
  height: 44px;
}
</style>

<style lang="less">
.van-cell {
  flex-wrap: wrap;
}
.van-field__label {
  width: 100%;
  color: #313233;
  font-weight: bold;
  font-size: 18px;
}

.van-field__value {
  margin-top: 10px;
}

.van-radio {
  position: relative;
  font-size: 16px;
  text-align: center;
  display: flex;
  justify-content: center;

  .van-radio__label {
    margin-left: 0;
    color: #313233;
    position: relative;
    z-index: 1;
  }

  .van-radio__icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    border: 1px solid #e6e7eb;
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    z-index: 0;
    .img-icon {
      position: absolute;
      right: 0px;
      bottom: -1px;
    }
  }
  .van-radio__icon--checked {
    background: rgba(44, 150, 255, 0.12);
    border: 1px solid #2c96ff;
  }
  .van-radio__icon--checked + .van-radio__label {
    color: #2c96ff;
  }

  &.no {
    .van-radio__icon--checked {
      background: rgba(250, 81, 81, 0.12);
      border: 1px solid #fa5151;
    }
    .van-radio__icon--checked + .van-radio__label {
      color: #fa5151;
    }
  }
}

.textfield {
  .van-field__value {
    padding: 0 10px;
  }
  .van-field__body {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #e6e7eb;
  }
}

.bottom {
  position: fixed;
  background: #ffffff;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 26px calc(env(safe-area-inset-bottom) + 6px);
  z-index: 20;
  .van-button {
    height: 48px;
  }
}
</style>
