<template>
  <!--MFA-->
  <el-dialog
    v-if="visible"
    :visible.sync="visible"
    v-dialogDrag
    width="540px"
    :close-on-click-modal="false"
    append-to-body
    @close="cancel"
  >
    <div slot="title">
      {{ title }}
    </div>
    <!-- 项目详情 -->
    <div class="trialsBox">
      <el-form
        label-position="right"
        :model="form"
        :inline="true"
        class="trialsForm"
      >
        <el-form-item :label="$t('feedBack:trials:code')">
          <span>2024-06-28 15:00</span>
        </el-form-item>
        <el-form-item :label="$t('feedBack:trials:name')">
          <span>2024-06-28 15:00</span>
        </el-form-item>
        <el-form-item :label="$t('feedBack:trials:siteCode')">
          <span>2024-06-28 15:00</span>
        </el-form-item>
        <el-form-item :label="$t('feedBack:trials:visit')">
          <span>2024-06-28 15:00</span>
        </el-form-item>
      </el-form>
    </div>
    <el-form
      ref="mfaForm"
      label-position="right"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <!-- 影像异常tip -->
      <p class="tip">
        <i
          class="el-icon-warning-outline"
          style="color: #f56c6c; font-size: 24px"
        ></i>
        <span> 影像异常导致无法阅片</span>
      </p>
      <!-- 问题反馈 -->
      <el-form-item :label="$t('feedBack:form:feedBack')" prop="feedBack">
        <el-select v-model="form.value" style="width: 100%">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>影像异常导致无法阅片</span>
      </el-form-item>
      <!-- 问题描述 -->
      <el-form-item :label="$t('feedBack:form:description')" prop="description">
        <el-input v-model="form.Code" type="textarea" :rows="4" />
      </el-form-item>
      <!-- 截图 -->
      <el-form-item :label="$t('feedBack:form:screenshot')" prop="screenshot">
        <uploadImage :path.sync="form.HospitalLogoPath" :disabled="disabled" />
      </el-form-item>
      <!-- 反馈时间 -->
      <el-form-item :label="$t('feedBack:form:time')" prop="screenshot">
        <span>2024-06-28 15:00</span>
      </el-form-item>
      <!-- 状态 -->
      <el-form-item :label="$t('feedBack:form:status')" prop="screenshot">
        <el-switch
          v-model="form.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="true"
          :inactive-value="false"
          :active-text="$fd('FeedBackStatus', true)"
          :inactive-text="$fd('FeedBackStatus', false)"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <!-- 取消 -->
      <el-button size="small" @click.stop="cancel">
        {{ $t("feedBack:button:cancel") }}
      </el-button>
      <!-- 保存 -->
      <el-button
        type="primary"
        size="small"
        @click.stop="save"
        :loading="loading"
      >
        {{ $t("feedBack:button:save") }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import uploadImage from "./uploadImage.vue";
export default {
  name: "FB",
  components: { uploadImage },
  data() {
    return {
      title: null,
      visible: false,
      loading: false,
      options: [],
      form: {
        Code: null,
        UserId: null,
        EMail: null,
        username: null,
      },
      rules: {
        Code: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
        ],
        EMail: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
        ],
        username: [
          {
            required: true,
            message: this.$t("common:ruleMessage:specify"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    disabled() {
      return false;
    },
  },
  methods: {
    open(data) {
      this.visible = true;
    },
    cancel() {
      this.visible = false;
      this.$emit("closed");
    },
    async save() {
      this.cancel();
    },
  },
};
</script>
<style lang="scss" scoped>
.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>