<template>
  <section class="formDetail">
    <AiResult v-if="result.tips" v-bind="result">
      <template v-if="isExam" #extra>
        <div flex class="scorePane">
          <div>成绩</div>
          <div class="fill"><em v-html="score"/> 分</div>
        </div>
      </template>
    </AiResult>
    <template v-else-if="form.id">
      <image v-if="form.headPicture" class="headPicture" :src="form.headPicture"/>
      <b class="title">{{ form.title || "标题" }}</b>
      <div class="tableExplain">{{ form.tableExplain }}</div>
      <u-form class="content" label-position="top">
        <u-form-item class="item" v-for="(op,i) in fields" :key="i" :label="(i+1)+'.'+op.fieldName"
                     :required="op.fieldInfo.required==1">
          <template v-if="op.fieldType=='input'">
            <input v-model="op.fieldValue" :placeholder="op.fieldInfo.placeholder" :disabled="isResult"/>
          </template>
          <template v-else-if="op.fieldType=='textarea'">
            <textarea v-model="op.fieldValue" :disabled="isResult" :placeholder="op.fieldInfo.placeholder"/>
          </template>
          <template v-else-if="op.fieldType=='upload'">
            <AiUploader @list="v=>op.fieldValue=v.map(e=>e.url)" :def="op.fieldValue" :disabled="isResult"
                        preview action="/admin/file/add2"/>
          </template>
          <u-row v-else-if="op.fieldType=='radio'">
            <radio-group @change="({detail})=>op.fieldValue=detail.value">
              <div class="option" flex v-for="option in op.fieldInfo.options" :key="option.label">
                <radio :value="option.label" :disabled="isResult" :checked="op.fieldValue==option.label"/>
                <AiImage v-if="option.img" :src="option.img" preview/>
                <div class="label fill">{{ option.label }}</div>
              </div>
            </radio-group>
          </u-row>
          <u-row v-else-if="op.fieldType=='checkbox'">
            <checkbox-group @change="({detail})=>op.fieldValue=detail.value">
              <div class="option" flex v-for="option in op.fieldInfo.options" :key="option.label">
                <checkbox :value="option.label" :disabled="isResult"
                          :checked="option.checked"/>
                <AiImage v-if="option.img" :src="option.img" preview/>
                <div class="label fill">{{ option.label }}</div>
              </div>
            </checkbox-group>
          </u-row>
          <template v-else-if="op.fieldType=='select'">
            <AiSelect @data="v=>op.fieldValue=v.map(e=>e.value)" :list="op.fieldInfo.options" :disabled="isResult">
              <div class="option" flex>
                <div class="label fill" v-if="op.fieldValue">{{ op.fieldValue.toString() }}</div>
                <i class="fill" v-else>请选择</i>
                <u-icon name="arrow-right" color="#ddd"/>
              </div>
            </AiSelect>
          </template>
        </u-form-item>
      </u-form>
      <div class="bottom" v-if="!(isPreview||isResult)">
        <div class="bottomBtn" @tap="handleSubmit">提交</div>
      </div>
    </template>
    <AiLoading v-else tips="调查问卷加载中..."/>
  </section>
</template>

<script>

import {mapMutations, mapState} from "vuex";

export default {
  name: "formDetail",
  inject: {root: {}},
  computed: {
    ...mapState(['openUser', 'token']),
    isExam() {
      return this.form?.type == 1
    },
    isResult() {
      return !!this.$route.query?.result
    },
    isPreview() {
      return !!this.$route.query?.preview
    }
  },
  data() {
    return {
      form: {},
      fields: [],
      checkUser: false,
      result: {},
      score: 0
    }
  },
  watch: {
    form: {
      deep: true,
      handler(v) {
        this.fields = v?.fields?.map(e => {
          let fieldInfo = JSON.parse(e.fieldInfo)
          fieldInfo?.options?.map(op => {
            op.img = op?.img?.[0]?.url
            op.checked = !!e.fieldValue?.split(",")?.includes(op.label)
          })
          if (e.fieldType == 'select') {
            fieldInfo.options = fieldInfo.options.map(e => ({...e, value: e.label, label: e.label}))
          }
          return {...e, fieldInfo}
        }) || []
      }
    }
  },
  methods: {
    ...mapMutations(['logout']),
    getForm() {
      let {id} = this.$route.query
      this.$http.post("/app/appquestionnairetemplate/queryDetailById", null, {
        withoutToken: true,
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.form = res.data
        }
      })
    },
    getResult() {
      let {id} = this.$route.query
      this.$http.post("/app/appquestionnairetemplate/commitCheck", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.form = res.data
        }
      })
    },
    validateForm() {
      return !this.fields.some(e => {
        if (!!e?.fieldInfo?.required && !e.fieldValue?.toString()) {
          this.$u.toast(e.fieldName + "不能为空!")
          return true
        }
      })
    },
    handleSubmit() {
      if (this.validateForm()) {
        this.handleScore()
        let {avatar: avatarUrl, openId, name: nickName, type: userType, unionId, corpName} = this.openUser
        this.$http.post("/app/appquestionnairetemplate/commit", {
          fields: this.fields.map(e => ({
            ...e,
            fieldInfo: JSON.stringify(e.fieldInfo),
            fieldValue: e.fieldValue?.toString()
          })),
          avatarUrl, openId, nickName, userType, unionId, corpName,
          totalScore: this.score,
          questionnaireTemplateId: this.$route.query.id
        }).then(res => {
          if (res?.code == 0) {
            this.result = {
              tips: "提交成功！感谢参与",
            }
          }
        }).catch(err => {
          this.$u.toast(err || "提交失败")
        })
      }
    },
    handleScore() {
      this.score = 0
      this.isExam && this.fields.map(field => {
        let item = field?.fieldInfo || {}
        let current = 0
        const calcScore = point => (current += (Number(point) || 0))
        if (item?.pointType == 0) {//此题有唯一答案和分值
          field.fieldValue?.toString() == item.answer?.toString() && calcScore(item?.points)
        } else if (item?.pointType == 1) {//每个选项都有对应分值
          item?.options?.map(op => {
            if (typeof field.fieldValue == "object") {
              if (field.fieldValue?.includes(op.label)) {
                calcScore(op.point)
              }
            } else {
              op.label == field.fieldValue && calcScore(op.point)
            }
          })
        } else if (item?.pointType == 2) {//答对几项得几分,答错不得分
          item?.options?.some(op => {
            if (typeof field.fieldValue == "object") {
              if (field.fieldValue?.includes(op.label)) {
                if (item.answer?.includes(op.label)) calcScore(op.point)
                else return current = 0
              }
            } else {
              op.label == field.fieldValue && calcScore(op.point)
            }
          })
        }
        this.score += current
        //打印每题打分
        if (!!field.fieldValue) {
          const typeResult = (reply, answer) => {
            console.log("题目:%s,回答:%s,得分:%s,总分:%s \n 答案:%s", field.fieldName,
                reply, current, this.score, answer)
          }
          typeResult(field.fieldValue?.toString(), item.answer?.toString())
        }
      })
    },
  },
  created() {
    this.isResult ? this.getResult() : this.getForm()
  }
}
</script>

<style lang="scss" scoped>
.formDetail {
  display: flex;
  flex-direction: column;
  background: #fff;

  .headPicture {
    width: 100%;
    height: 320px;

    .img {
      width: 100%;
    }
  }

  .title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 32px;
    box-sizing: border-box;
    font-size: 34px;
    font-weight: bold;
    color: #333;
    line-height: 48px;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 32px;
    box-sizing: border-box;
    background: #fff;
    z-index: 99;

    .bottomBtn {
      width: 100%;
      line-height: 96px;
      background: #287DE1;
      color: #fff;
      text-align: center;
      height: 96px;
      font-size: 32px;
      font-weight: bold;
      border-radius: 8px;
    }
  }

  .tableExplain {
    font-size: 28px;
    font-weight: 400;
    color: #666;
    padding: 32px 24px;
  }

  ::v-deep .u-form-item {
    .u-form-item--left {
      font-size: 30px;
      font-weight: bold;
      color: #333;
    }

    .u-form-item--right__content__slot > * {
      width: 100%;
    }

    .display {
      justify-content: space-between;
      min-height: 58px;
    }

    .uni-radio-input, .uni-checkbox-input {
      height: 32px;
      width: 32px;
    }

    .label {
      flex-shrink: 0;

      * + & {
        margin-left: 16px;
      }
    }

    .option {
      width: 100%;
      margin-right: 16px;
      margin-bottom: 16px;
    }
  }

  .content {
    padding: 64px 32px 200px;
    background: #fff;
  }

  ::v-deep .scorePane {
    width: calc(100% - 40px);
    padding: 0 32px;
    height: 124px;
    background: #E9F2FF;
    border-radius: 16px;
    font-size: 30px;
    font-weight: 500;
    color: #333333;
    margin-top: 48px;
    box-sizing: border-box;

    .fill {
      text-align: center;
    }

    em {
      font-size: 48px;
      font-weight: bold;
      color: #2C72FE;
      font-style: normal;
      margin-right: 8px;
    }
  }
}
</style>
