<template>
  <BaseContainer v-loading="listLoading">
    <template slot="search-container">

      <span style="margin-left:auto;">
        <!-- Add -->
        <el-button
          v-hasPermi="['trials:trials-panel:setting:visit-plan:add']"
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
        >
          {{ $t('common:button:add') }}
        </el-button>
        <!-- 盲态标识 -->
        <el-button
          v-hasPermi="['trials:trials-panel:setting:visit-plan:add']"
          type="primary"
          icon="el-icon-setting"
          size="small"
          @click="handleConfig"
        >
          {{ $t('trials:visitPlan:button:blindFlag') }}
        </el-button>
        <!-- Confirm -->
        <el-button
          v-hasPermi="['trials:trials-panel:setting:visit-plan:confirm']"
          type="primary"
          icon="el-icon-check"
          :disabled="!isConfirm"
          :loading="confirmLoading"
          size="small"
          @click="handleConfirm(true)"
        >
          {{ $t('trials:visitPlan:button:confirm') }}
        </el-button>
        <!-- 调整记录 -->
        <el-button
          v-hasPermi="['trials:trials-panel:setting:visit-plan:adjust-record']"
          type="primary"
          size="small"
          @click="adjustVisible = true"
        >
          {{ $t('trials:visitPlan:button:adjustRecord') }}
        </el-button>
      </span>
    </template>
    <template slot="main-container">
      <el-table
        v-adaptive="{bottomOffset:60}"

        :data="list"
        height="100"
        stripe
      >
        <!-- Visit Name -->
        <el-table-column
          prop="VisitName"
          :label="$t('trials:visitPlan:table:visitName')"
          show-overflow-tooltip
          min-width="60"
        />
        <!-- 是否基线 -->
        <el-table-column
          prop="IsBaseLine"
          :label="$t('trials:visitPlan:table:isBaseLine')"
          show-overflow-tooltip
          min-width="60"
        >
          <template slot-scope="scope">
            {{ $fd('YesOrNo', scope.row.IsBaseLine) }}
          </template>
        </el-table-column>
        <!-- 盲态任务标识 -->
        <!-- <el-table-column
          prop="BlindName"
          :label="$t('trials:visitPlan:table:blindName')"
          show-overflow-tooltip
          min-width="80"
        /> -->
        <!-- Visit Num -->
        <el-table-column
          prop="VisitNum"
          :label="$t('trials:visitPlan:table:viistNum')"
          show-overflow-tooltip
          min-width="60"
        />
        <!-- 访视间隔 -->
        <el-table-column
          prop="VisitDay"
          :label="$t('trials:visitPlan:table:viistDay')"
          show-overflow-tooltip
          min-width="60"
        />
        <!-- 窗口 -->
        <el-table-column
          v-if="isHaveFirstGiveMedicineDate"
          prop="VisitWindowLeft"
          :label="$t('trials:visitPlan:table:window')"
          show-overflow-tooltip
          min-width="60"
        >
          <template slot-scope="scope">
            <span v-show="scope.row.VisitWindowLeft!==0 || scope.row.VisitWindowRight!==0">
              {{ `${scope.row.VisitWindowLeft}${$t('trials:visitPlan:table:day')} ~ ${scope.row.VisitWindowRight}${$t('trials:visitPlan:table:day')}` }}
            </span>
          </template>
        </el-table-column>
        <!-- 是否确认 -->
        <el-table-column
          prop="IsConfirmed"
          :label="$t('trials:visitPlan:table:isConfirm')"
          show-overflow-tooltip
          min-width="80"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsConfirmed" type="primary">{{ $fd('YesOrNo', scope.row.IsConfirmed) }}</el-tag>
            <el-tag v-else type="danger">{{ $fd('YesOrNo', scope.row.IsConfirmed) }}</el-tag>

          </template>
        </el-table-column>
        <!-- 是否废除 -->
        <el-table-column
          prop="IsDeleted"
          :label="$t('trials:visitPlan:table:isDeleted')"
          show-overflow-tooltip
          min-width="80"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.IsDeleted">{{ $fd('YesOrNo', scope.row.IsDeleted) }}</el-tag>
            <el-tag v-else type="danger">{{ $fd('YesOrNo', scope.row.IsDeleted) }}</el-tag>
          </template>
        </el-table-column>
        <!-- Description -->
        <el-table-column
          prop="Description"
          :label="$t('trials:visitPlan:table:description')"
          show-overflow-tooltip
          min-width="80"
        />
        <!-- Time Created -->
        <el-table-column
          prop="CreateTime"
          :label="$t('trials:visitPlan:table:createTime')"
          show-overflow-tooltip
          min-width="80"
        />
        <el-table-column
          v-if="hasPermi(['trials:trials-panel:setting:visit-plan:edit'])"
          :label="$t('common:action:action')"
          min-width="80"
        >
          <template slot-scope="scope">
            <!-- Edit -->
            <el-button
              v-hasPermi="['trials:trials-panel:setting:visit-plan:edit']"
              icon="el-icon-edit-outline"
              circle
              :title="$t('common:button:edit')"
              @click="handleEdit(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </template>

    <base-model v-if="visit_model.visible" :config="visit_model">
      <template slot="dialog-body">
        <VisitPlanForm :row="row" :is-have-first-give-medicine-date="isHaveFirstGiveMedicineDate" @closeDialog="closeDialog" @getList="getList" />
      </template>
    </base-model>
    <!-- 调整记录 -->
    <el-dialog
      v-if="adjustVisible"
      :visible.sync="adjustVisible"
      :close-on-click-modal="false"
      width="800px"
      :title="$t('trials:visitPlan:dialogTitle:record')"
    >
      <VisitPlanAdjust />
    </el-dialog>

    <!-- 配置 -->
    <el-dialog
      v-if="config_model.visible"
      :visible.sync="config_model.visible"
      :close-on-click-modal="false"
      width="500px"
      :title="config_model.title"
      custom-class="base-dialog-wrapper"
    >
      <el-form
        ref="blindNameForm"
        v-loading="formLoading"
        :model="form"
        :rules="rules"
        size="small"
        label-width="140px"
      >
        <div class="base-dialog-body">
          <!-- 基线盲态标识 -->
          <el-form-item :label="$t('trials:visitPlan:button:bsBlindFlag')" prop="BlindBaseLineName">
            <el-input :maxLength="$inputMax"
              v-model="form.BlindBaseLineName"
              :disabled="isHaveGeneratedTask"
            />
          </el-form-item>
          <!-- 随访盲态标识前缀 -->
          <el-form-item :label="$t('trials:visitPlan:button:visitBlindFlag')" prop="BlindFollowUpPrefix">
            <el-input :maxLength="$inputMax"
              v-model="form.BlindFollowUpPrefix"
              :disabled="isHaveGeneratedTask"
            />
          </el-form-item>
        </div>
        <div v-if="!isHaveGeneratedTask" class="base-dialog-footer" style="text-align:right;margin-top:10px;">
          <el-form-item>
            <el-button v-hasPermi="['trials:trials-panel:setting:visit-plan:add']" type="primary" @click="handleSaveBlindName">
              {{ $t('common:button:save') }}
            </el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </BaseContainer>
</template>
<script>
import { getVisitStageList, confirmTrialVisitPlan, updateVisitBlindName } from '@/api/trials'
import BaseContainer from '@/components/BaseContainer'
import BaseModel from '@/components/BaseModel'
import VisitPlanForm from './components/visitPlanForm'
import VisitPlanAdjust from './components/visitPlanAdjust'

export default {
  name: 'VisitPlan',
  components: { BaseContainer, BaseModel, VisitPlanForm, VisitPlanAdjust },
  data() {
    return {
      list: [],
      trialId: '',
      listLoading: false,
      row: {},
      visitPlanConfirmed: true,
      subjectHasAdded: true,
      isHaveFirstGiveMedicineDate: false,
      adjustVisible: false,
      confirmLoading: false,
      visit_model: { visible: false, title: '', width: '600px' },
      userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
      isConfirm: false,
      form: { TrialId: '', BlindBaseLineName: '', BlindFollowUpPrefix: '' },
      rules: {
        BlindBaseLineName: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }
        ],
        BlindFollowUpPrefix: [
          { required: true, message: this.$t('common:ruleMessage:specify'), trigger: 'blur' }
        ]
      },
      config_model: { visible: false, title: this.$t('trials:visitPlan:button:blindFlag') }, // '盲态标识'
      formLoading: false,
      isHaveGeneratedTask: false
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getVisitStageList(this.trialId)
        .then((res) => {
          this.listLoading = false
          this.list = res.Result.VisitPlanList
          this.visitPlanConfirmed = res.Result.VisitPlanConfirmed
          this.isHaveFirstGiveMedicineDate = res.Result.IsHaveFirstGiveMedicineDate
          this.isHaveGeneratedTask = res.Result.IsHaveGeneratedTask
          this.form.BlindBaseLineName = res.Result.BlindBaseLineName
          this.form.BlindFollowUpPrefix = res.Result.BlindFollowUpPrefix
          this.isConfirm = res.Result.VisitPlanList.some(item => { return item.IsConfirmed === false })
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    handleAdd() {
      this.row = { TrialId: this.trialId, Id: '', IsBaseLine: false, BlindName: '', VisitWindowLeft: 0, VisitWindowRight: 0, Description: '' }
      this.timer = new Date().getTime()
      if (this.list.length === 0) {
        this.row.VisitName = 'Baseline'
        this.row.VisitNum = 0
        this.row.VisitDay = 1
      } else if (this.list.length === 1) {
        this.row.VisitName = 'Visit ' + (this.list[0].VisitNum + 1)
        this.row.VisitNum = this.list[0].VisitNum + 1
      } else {
        console.log(1)
        this.row.VisitName = this.list[this.list.length - 1].VisitName.split(' ')[0] + ' ' + (this.list[this.list.length - 1].VisitNum + 1)
        this.row.VisitNum = this.list[this.list.length - 1].VisitNum + 1
        this.row.VisitDay = this.list[this.list.length - 1].VisitDay - this.list[this.list.length - 2].VisitDay + this.list[this.list.length - 1].VisitDay
      }
      this.visit_model.title = this.$t('common:button:add')
      this.visit_model.visible = true
    },
    handleEdit(row) {
      this.row = row
      this.visit_model.title = this.$t('common:button:edit')
      this.visit_model.visible = true
    },
    handleConfirm() {
      const msg = this.$t('trials:adjustRecord:message:confirm')
      this.$confirm(msg, {
        type: 'warning',
        distinguishCancelAndClose: true
      }).then(() => {
        this.confirmLoading = true
        confirmTrialVisitPlan(this.trialId).then((res) => {
          this.confirmLoading = false
          if (res.IsSuccess) {
            this.getList()
          }
        }).catch(() => { this.confirmLoading = false })
      }).catch(() => {})
    },
    closeDialog() {
      this.visit_model.visible = false
    },
    handleSaveBlindName() {
      this.$refs.blindNameForm.validate((valid) => {
        if (valid) {
          this.formLoading = true
          this.form.TrialId = this.trialId
          updateVisitBlindName(this.form).then((res) => {
            this.formLoading = false
            this.config_model.visible = false
            this.$message.success(this.$t('common:message:savedSuccessfully'))
          }).catch(() => {
            this.formLoading = false
          })
        }
      })
    },
    handleConfig() {
      this.config_model.visible = true
    }
  }
}
</script>
