<template>
  <div class="urgent-config-form">
    <!-- 配置信息表单 -->
    <el-form
      ref="urgentConfigForm"
      v-loading="loading"
      :model="form"
      label-width="300px"
      style="width:800px;"
      :rules="rules"
      size="small"
    >
      <!-- 入组确认评估 -->
      <el-form-item :label="$t('trials:urgentCfg:form:enroll')" prop="IsEnrollementQualificationConfirm">
        <el-radio-group
          v-model="form.IsEnrollementQualificationConfirm"
          :disabled="form.IsTrialUrgentConfirmed && !isEdit"
        >
          <el-radio v-for="item of $d.YesOrNo" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 疾病进展确认评估 -->
      <el-form-item :label="$t('trials:urgentCfg:form:pd')" prop="IsPDProgressView">
        <el-radio-group
          v-model="form.IsPDProgressView"
          :disabled="form.IsTrialUrgentConfirmed && !isEdit"
        >
          <el-radio v-for="item of $d.YesOrNo" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 启用项目加急 -->
      <el-form-item :label="$t('trials:urgentCfg:form:trial')" prop="IsUrgent">
        <el-radio-group
          v-model="form.IsUrgent"
          :disabled="form.IsTrialUrgentConfirmed && !isEdit"
        >
          <el-radio v-for="item of $d.YesOrNo" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 启用受试者加急 -->
      <el-form-item :label="$t('trials:urgentCfg:form:subject')" prop="IsSubjectExpeditedView">
        <el-radio-group
          v-model="form.IsSubjectExpeditedView"
          :disabled="form.IsTrialUrgentConfirmed && !isEdit"
        >
          <el-radio v-for="item of $d.YesOrNo" :label="item.value">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <!-- 保存 -->
        <el-button
          v-if="form.IsTrialUrgentConfirmed === false && hasPermi(['trials:trials-panel:setting:trial-config:save'])"
          type="primary"
          @click="handleSave"
        >
          {{ $t('common:button:save') }}
        </el-button>
        <!-- 配置确认 -->
        <el-button
          v-if="form.IsTrialUrgentConfirmed === false && hasPermi(['trials:trials-panel:setting:trial-config:save'])"
          type="primary"
          @click="handleConfirm"
        >
          {{ $t('trials:trialCfg:button:confirm') }}
        </el-button>
        <!-- 配置更新 -->
        <el-button
          v-if="form.IsTrialUrgentConfirmed === true && !isEdit && hasPermi(['trials:trials-panel:setting:trial-config:save'])"
          type="primary"
          @click="isEdit = true"
        >
          {{ $t('trials:trialCfg:button:update') }}
        </el-button>
        <!-- 配置更新确认 -->
        <el-button
          v-if="form.IsTrialUrgentConfirmed === true && isEdit && hasPermi(['trials:trials-panel:setting:trial-config:save'])"
          type="primary"
          @click="handleUpdate"
        >
          {{ $t('trials:trialCfg:button:updateAndConfirm') }}
        </el-button>
        <!-- 取消 -->
        <el-button
          v-if="form.IsTrialUrgentConfirmed === true && isEdit && hasPermi(['trials:trials-panel:setting:trial-config:save'])"
          type="primary"
          @click="isEdit = false"
        >
          {{ $t('common:button:cancel') }}
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 配置信息确认框 -->
    <el-dialog
      v-if="confirmVisible"
      :visible.sync="confirmVisible"
      :close-on-click-modal="false"
      width="600px"
      :title="$t('trials:trialCfg:dialogTitle:cfgConfirm')"
      custom-class="base-dialog-wrapper"
    >
      <div class="base-dialog-body">
        <el-table
          :data="confirmData"
          border
          style="width: 100%"
          size="small"
        >
          <!-- 配置项 -->
          <el-table-column
            prop="Name"
            :label="$t('trials:trialCfg:table:cfgItem')"
            show-overflow-tooltip
          />
          <!-- 配置值 -->
          <el-table-column
            prop="NewVal"
            :label="$t('trials:trialCfg:table:cfgVal')"
            show-overflow-tooltip
          />
        </el-table>
      </div>
      <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
        <el-button size="small" type="primary" :loading="btnLoading" @click="handleConfirmConfigData">
          {{ $t('trials:trialCfg:button:confirmCfg') }}
        </el-button>
      </div>
    </el-dialog>

    <!-- 配置信息更新框 -->
    <el-dialog
      v-if="updateVisible"
      :visible.sync="updateVisible"
      :close-on-click-modal="false"
      width="600px"
      :title="$t('trials:trialCfg:dialogTitle:cfgConfirm')"
      custom-class="base-dialog-wrapper"
    >
      <div class="base-dialog-body">
        <el-table
          :data="confirmData"
          border
          style="width: 100%"
          size="small"
        >
          <!-- 配置项 -->
          <el-table-column
            prop="Name"
            :label="$t('trials:trialCfg:table:cfgItem')"
            show-overflow-tooltip
          />
          <!-- 配置值（更改前） -->
          <el-table-column
            prop="OldVal"
            :label="`${$t('trials:trialCfg:table:cfgVal')} （${$t('trials:trialCfg:table:beforeChange')}）`"
            show-overflow-tooltip
          />
          <!-- 配置值（更改后） -->
          <el-table-column
            prop="NewVal"
            :label="`${$t('trials:trialCfg:table:cfgVal')} （${$t('trials:trialCfg:table:updated')}）`"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span :class="{fontColor:scope.row.NewVal!==scope.row.OldVal}">{{ scope.row.NewVal }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="base-dialog-footer" style="text-align:right;margin-top:10px;">
        <el-button size="small" type="primary" :loading="btnLoading" @click="handleUpdateConfigData">
          {{ $t('trials:trialCfg:button:confirmCfg') }}
        </el-button>
      </div>
    </el-dialog>

    <!-- 配置信息签名框 -->
    <el-dialog
      v-if="signVisible"
      :visible.sync="signVisible"
      :close-on-click-modal="false"
      width="600px"
      custom-class="base-dialog-wrapper"
    >
      <div slot="title">
        <span style="font-size:18px;">{{ $t('common:dialogTitle:sign') }}</span>
        <span style="font-size:12px;margin-left:5px">{{ `(${$t('common:label:sign')}${ currentUser })` }}</span>
      </div>
      <SignForm ref="signForm" :sign-code-enum="signCode" @closeDialog="closeSignDialog" />
    </el-dialog>
  </div>
</template>
<script>
import { configTrialUrgentInfo } from '@/api/trials'
import { ConfigTrialUrgentInfoConfirm } from '@/api/trials/setting'
import SignForm from '@/views/trials/components/newSignForm'
import const_ from '@/const/sign-code'
export default {
  name: 'UrgentConfig',
  components: { SignForm },
  data() {
    return {
      form: {
        TrialId: '',
        IsEnrollementQualificationConfirm: null,
        IsPDProgressView: null,
        IsUrgent: null,
        IsSubjectExpeditedView: null,
        IsTrialUrgentConfirmed: false
      },
      rules: {
        IsEnrollementQualificationConfirm: [
          { required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }
        ],
        IsPDProgressView: [
          { required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }
        ],
        IsUrgent: [
          { required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }
        ],
        IsSubjectExpeditedView: [
          { required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }
        ],
        IsTrialUrgentConfirmed: [
          { required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }
        ]
      },
      confirmVisible: false,
      updateVisible: false,
      signVisible: false,
      btnLoading: false,
      confirmData: [],
      loading: false,
      signCode: null,
      currentUser: zzSessionStorage.getItem('userName'),
      initialForm: {},
      isEdit: false
    }
  },
  methods: {
    // 配置信息保存
    handleSave() {
      this.$refs['urgentConfigForm'].validate((valid) => {
        if (!valid) return
        this.loading = true
        // 保存配置信息
        configTrialUrgentInfo(this.form).then(res => {
          this.loading = false
          if (res.IsSuccess) {
            this.initialForm = { ...this.form }
            this.$message.success(this.$t('common:message:savedSuccessfully'))
          }
        }).catch(_ => { this.loading = false })
      })
    },

    // 打开配置信息确认框
    handleConfirm() {
      this.$refs['urgentConfigForm'].validate((valid) => {
        if (!valid) return
        this.getConfigArr()
        this.confirmVisible = true
      })
    },

    // 打开配置信息更新框
    handleUpdate() {
      this.$refs['urgentConfigForm'].validate((valid) => {
        if (!valid) return
        this.getConfigArr()
        this.updateVisible = true
      })
    },
    // 配置确认
    handleConfirmConfigData() {
      const { ExpeditedConfigConfirmation } = const_.processSignature
      this.signCode = ExpeditedConfigConfirmation
      // this.confirmConfigData()
      this.initialForm = { ...this.form }
      this.signVisible = true
    },
    // 配置更新
    handleUpdateConfigData() {
      const { ExpeditedConfigUpdates } = const_.processSignature
      this.signCode = ExpeditedConfigUpdates
      this.initialForm = { ...this.form }
      this.signVisible = true
    },
    // 配置保存
    confirmConfigData() {
      this.$refs['urgentConfigForm'].validate((valid) => {
        if (!valid) return

        this.btnLoading = true
        // 保存配置信息
        configTrialUrgentInfo(this.form).then(res => {
          this.btnLoading = false
          if (res.IsSuccess) {
            this.initialForm = { ...this.form }
            this.signVisible = true
          }
        }).catch(_ => { this.btnLoading = false })
      })
    },
    // 关闭签名框
    closeSignDialog(isSign, signInfo) {
      if (isSign) {
        this.signConfirm(signInfo)
      } else {
        this.signVisible = false
      }
    },
    // 签名并确认
    signConfirm(signInfo) {
      this.loading = true
      var params = {
        data: this.form,
        signInfo: signInfo
      }
      ConfigTrialUrgentInfoConfirm(params).then(res => {
        this.loading = false
        if (res.IsSuccess) {
          this.$message.success(this.$t('common:message:savedSuccessfully'))
          this.form.IsTrialUrgentConfirmed = true
          this.isEdit = false
          this.$refs['signForm'].btnLoading = false
          this.signVisible = false
          this.confirmVisible = false
          this.updateVisible = false
          this.$emit('refresh')
        }
      }).catch(_ => {
        this.loading = false
        this.$refs['signForm'].btnLoading = false
      })
    },
    // 配置信息数组结构
    getConfigArr() {
      this.confirmData = [
        {
          Name: this.$t('trials:urgentCfg:form:enroll'), // 入组确认评估
          NewVal: this.$fd('YesOrNo', this.form.IsEnrollementQualificationConfirm),
          OldVal: this.$fd('YesOrNo', this.initialForm.IsEnrollementQualificationConfirm)
        },
        {
          Name: this.$t('trials:urgentCfg:form:pd'), // 疾病进展确认评估
          NewVal: this.$fd('YesOrNo', this.form.IsPDProgressView),
          OldVal: this.$fd('YesOrNo', this.initialForm.IsPDProgressView)
        },
        {
          Name: this.$t('trials:urgentCfg:form:trial'), // 启用项目加急
          NewVal: this.$fd('YesOrNo', this.form.IsUrgent),
          OldVal: this.$fd('YesOrNo', this.initialForm.IsUrgent)
        },
        {
          Name: this.$t('trials:urgentCfg:form:subject'), // 启用受试者加急
          NewVal: this.$fd('YesOrNo', this.form.IsSubjectExpeditedView),
          OldVal: this.$fd('YesOrNo', this.initialForm.IsSubjectExpeditedView)
        }
      ]
    },

    // 初始化表单
    initForm(res) {
      for (const k in this.form) {
        if (res.hasOwnProperty(k)) {
          this.form[k] = res[k]
        }
      }
      this.initialForm = { ...this.form }
    }
  }
}
</script>
<style lang="scss" scoped>
.urgent-config-form {
  .fontColor{
    color: red;
  }
}
</style>
