<template>
  <!--FEEDBACK-->
  <div v-if="visible" @click.stop="() => false" class="feedBack-box">
    <div class="feedBack-box-modal"></div>
    <el-dialog :visible.sync="visible" v-dialogDrag width="800px" :close-on-click-modal="false" @close="cancel"
      :modal="false">
      <div slot="title">
        {{ title }}
      </div>
      <!-- 项目详情 -->
      <div class="trialsBox" v-if="visitTaskId || SubjectVisitId">
        <el-form label-position="right" :model="form" :inline="true" class="trialsForm" v-if="type === 'detail'">
          <el-form-item :label="$t('feedBack:trials:code')" style="width: 40%">
            <span>{{ form.TrialCode }}</span>
          </el-form-item>
          <el-form-item :label="$t('feedBack:trials:name')" style="width: 40%">
            <span>{{ form.ExperimentName }}</span>
          </el-form-item>
          <el-form-item :label="$t('feedBack:trials:siteCode')" style="width: 40%">
            <span>{{ form.TrialSiteCode }}</span>
          </el-form-item>
          <el-form-item :label="$t('feedBack:trials:visit')" style="width: 40%">
            <span>{{ form.SubjectCode }} - {{ form.SubjectVisitName }}</span>
          </el-form-item>
        </el-form>
      </div>
      <el-form ref="feedBackForm" label-position="right" :model="form" :rules="rules" label-width="100px">
        <!-- 影像异常tip -->
        <p class="tip" v-if="type === 'imgfail'">
          <i class="el-icon-warning-outline" style="color: #f56c6c; font-size: 24px"></i>
          <span>{{ $t('feedBack:imgfail:tip') }}</span>
        </p>
        <!-- 问题反馈 -->
        <el-form-item :label="$t('feedBack:form:feedBack')" prop="QuestionType" v-if="type === 'feedback' && trialId">
          <el-select v-model="form.QuestionType" style="width: 100%" popper-class="feedBack-select-box">
            <el-option v-for="item in QuestionTypeOptions" :key="item.id" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 问题反馈 -->
        <el-form-item :label="$t('feedBack:form:feedBack')" prop="QuestionType" v-if="type === 'detail'">
          <span>{{
            QuestionTypeOptions.filter(
              (item) => item.value === form.QuestionType
            )[0].label
          }}</span>
        </el-form-item>
        <!-- 问题描述 -->
        <el-form-item :label="$t('feedBack:form:description')" prop="QuestionDescription">
          <el-input v-model="form.QuestionDescription" type="textarea" :rows="4" :maxlength="500"
            :disabled="type === 'detail'" />
        </el-form-item>
        <!-- 截图 -->
        <el-form-item :label="$t('feedBack:form:screenshot')" prop="screenshot">
          <uploadImage :path.sync="form.ScreenshotList" :isUpload.sync="loading" :trialId="trialId"
            :disabled="type === 'detail'" ref="uploadImage" />
        </el-form-item>
        <!-- 反馈时间 -->
        <el-form-item :label="$t('feedBack:form:time')" prop="screenshot" v-if="type === 'detail'">
          <span>{{ form.CreateTime }}</span>
        </el-form-item>
        <!-- 状态 -->
        <el-form-item :label="$t('feedBack:form:status')" prop="screenshot" v-if="type === 'detail' && level >= 7">
          <!-- <el-switch
            v-model="form.State"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            :active-text="$fd('FeedBackStatus', 1)"
            :inactive-text="$fd('FeedBackStatus', 0)"
            :disabled="level < 8 || !isStateChange"
            @change="changeState"
          >
          </el-switch> -->
          <el-select v-model="form.State" :popper-append-to-body="false" :disabled="level < 8">
            <el-option v-for="item in $d.FeedBackStatus" :key="item.id" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 无法解决原因 -->
        <el-form-item :label="$t('feedBack:form:Reason')" prop="Reason"
          v-if="type === 'detail' && level >= 7 && form.State === 2">
          <el-input v-model="form.Reason" type="textarea" :rows="4" :maxlength="500" :disabled="level < 8" />
        </el-form-item>
      </el-form>
      <!--type !== 'detail'-->
      <div slot="footer" v-if="level >= 7 || isImgfail">
        <!-- 取消 -->
        <el-button size="small" @click.stop="cancel" v-if="type !== 'detail' || level >= 8">
          {{ $t('feedBack:button:cancel') }}
        </el-button>
        <!-- 保存 -->
        <el-button type="primary" size="small" @click.stop="save" :loading="loading"
          v-if="type !== 'detail' || level >= 8">
          {{ $t('feedBack:button:save') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import uploadImage from './uploadImage.vue'
import {
  addOrUpdateUserFeedBack,
  getUserFeedBackInfo,
  batchUpdateFeedBackState,
} from '@/api/trials.js'
export default {
  name: 'FB',
  components: { uploadImage },
  data() {
    return {
      title: null,
      visible: false,
      loading: false,
      options: [],
      type: null, // detail 表格详情  feedback 填写反馈  imgfail 影像异常
      trialId: null, // 项目id
      Id: null, // 反馈数据id
      visitTaskId: null, // 任务id
      isImgfail: false, // 是否是影像异常
      isStateChange: true, // 是否可以切换状态
      form: {
        Id: null,
        SubjectId: null,
        SubjectVisitId: null,
        QuestionType: 0,
        QuestionDescription: null,
        State: 0,
        TrialSiteId: null,
        TrialId: null,
        VisitTaskId: null,
        SubjectVisitId: null,
        ScreenshotList: [],
        ScreenshotListStr: null,
        Reason: null
      },
      rules: {
        QuestionType: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
        ],
        QuestionDescription: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (value.length < 5) {
                callback(
                  new Error(this.$t('feedBack:ruleMessage:lengthLimitMin5'))
                )
              }
              callback()
            },
            trigger: 'blur',
          },
        ],
      },
      isUpload: false,
    }
  },
  computed: {
    level() {
      if (this.hasPermi(['role:dev', 'role:admin'])) {
        return 9
      }
      if (this.hasPermi(['role:pm', 'role:apm'])) {
        return 8
      }
      if (this.hasPermi(['role:ir', 'role:crc'])) {
        return 7
      }
      return 0
    },
    QuestionTypeOptions() {
      if (this.level > 7) {
        return [
          ...this.$d.FeedBackTypeToCRC.filter((item) => item.value > 0),
          ...this.$d.FeedBackTypeToIR,
        ]
      }
      if (this.hasPermi(['role:ir'])) {
        return this.$d.FeedBackTypeToIR
      }
      if (this.hasPermi(['role:crc'])) {
        return this.$d.FeedBackTypeToCRC
      }
      return []
    },
  },
  methods: {
    open(data) {
      let { type, trialId, Id, visitTaskId, SubjectVisitId } = data
      this.type = type
      this.trialId = trialId
      this.Id = Id
      this.visitTaskId = visitTaskId
      this.SubjectVisitId = SubjectVisitId
      if (visitTaskId) {
        this.isImgfail = true
      }
      this.setTypeOption()
      if (!Id) {
        this.title = this.setTitle()
      }
      if (Id || visitTaskId) {
        this.getInfo(Id, visitTaskId)
      }
      this.visible = true
    },
    cancel() {
      this.visible = false
      this.$emit('closed')
    },
    async save() {
      try {
        let validate = await this.$refs.feedBackForm.validate()
        if (!validate) return
        if (this.trialId) {
          this.form.TrialId = this.trialId
        }
        if (this.visitTaskId) {
          this.form.VisitTaskId = this.visitTaskId
          this.form.QuestionType = 6
        }
        if (this.SubjectVisitId) {
          this.form.SubjectVisitId = this.SubjectVisitId
        }
        if (this.Id) {
          this.form.Id = this.Id
        }
        this.loading = true
        let res = await addOrUpdateUserFeedBack(this.form)
        this.loading = false
        if (res.IsSuccess) {
          this.$emit('success')
          this.$message.success(this.$t('feedBack:save:success'))
          this.cancel()
        }
      } catch (err) {
        this.loading = false
        console.log(err)
      }
    },
    // 修改状态
    async changeState() {
      if (this.isImgfail) return
      if (this.form.State !== 1 && this.form.State !== 0) return false
      try {
        let data = {
          IdList: [this.Id],
          State: this.form.State,
        }
        let res = await batchUpdateFeedBackState(data)
        if (res.IsSuccess) {
          this.$message.success(this.$t('feedBack:changeState:success'))
          this.$emit('success')
          // this.cancel();
          this.getInfo(this.Id, this.visitTaskId)
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取反馈详情
    async getInfo(Id, visitTaskId) {
      try {
        let data = {
          Id,
          visitTaskId,
        }
        let res = await getUserFeedBackInfo(data)
        if (res.IsSuccess && res.Result) {
          this.form = res.Result
          this.form.ScreenshotList = this.form.ScreenshotList || []
          this.Id = res.Result.Id
          if (res.Result.State > 0) {
            this.isStateChange = false
          }
          if (res.Result.VisitTaskId) {
            this.visitTaskId = res.Result.VisitTaskId
          }
          if (res.Result.SubjectVisitId) {
            this.SubjectVisitId = res.Result.SubjectVisitId
          }
          let code = this.$fd('UserType', res.Result.UserTypeEnum)
          this.title = this.setTitle(code, res.Result.FeedBackFullName)
          if (visitTaskId) {
            code = `${res.Result.SubjectCode}-${res.Result.SubjectVisitName}`
            this.title = this.setTitle(code, res.Result.FeedBackFullName)
          }
          this.$refs.uploadImage.initFileList(res.Result.ScreenshotList)
        }
      } catch (err) {
        console.log(err)
      }
    },
    setTypeOption() {
      if (!this.trialId) return (this.options = [])
      if (this.hasPermi(['role:ir']))
        return (this.option = this.$d.FeedBackTypeToIR)
      if (this.hasPermi(['role:crc']))
        return (this.option = this.$d.FeedBackTypeToCRC)
    },
    setTitle(code, name) {
      if (this.hasPermi(['role:pm']) && this.visitTaskId) {
        return `${this.$t('feedBack:form:title:pm2')}(${code}/${name})`
      }
      if (this.hasPermi(['role:pm', 'role:dev', 'role:admin'])) {
        return `${this.$t('feedBack:form:title:pm')}(${code},${name})`
      }
      if (this.hasPermi(['role:ir', 'role:crc']) && this.type === 'detail') {
        return `${this.$t('feedBack:form:detail:title')}`
      }
      if (this.hasPermi(['role:ir', 'role:crc'])) {
        return `${this.$t('feedBack:form:title')}`
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep.el-popper {
  z-index: 4000 !important;
}

.tip {
  width: 86%;
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
  padding: 0 10px;
  display: flex;
  align-items: center;

  // border-radius: 5px;
  // background-color: #eee;
  i {
    margin-right: 5px;
  }
}

.trialsBox {
  margin: auto;
  margin-bottom: 20px;
  text-align: left;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background-color: #eee;
}

.trialsForm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;

  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>