<template>
  <BaseContainer>
    <!-- 顶部搜索条件 -->
    <template slot="search-container">
      <el-form :inline="true">
        <!-- 项目编号 -->
        <el-form-item :label="$t('trials:trials-list:table:trialId')">
          <el-input :maxLength="$inputMax"
            v-model="searchData.Code"
            style="width:100px;"
            clearable
          />
        </el-form-item>
        <!-- 研究方案号 -->
<!--        <el-form-item :label="$t('trials:trials-list:table:researchNumber')">-->
<!--          <el-input :maxLength="$inputMax"-->
<!--            v-model="searchData.ResearchProgramNo"-->
<!--            style="width:100px;"-->
<!--            clearable-->
<!--          />-->
<!--        </el-form-item>-->
        <!-- 试验名称 -->
        <el-form-item :label="$t('trials:trials-list:table:experimentName')">
          <el-input :maxLength="$inputMax"
            v-model="searchData.ExperimentName"
            style="width:100px;"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('trials:trials-list:form:pi')">
          <el-input :maxLength="10"
            v-model="searchData.HeadPI"
            style="width:100px;"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('trials:trials-list:form:indication')">
          <el-input :maxLength="$inputMax"
            v-model="searchData.Indication"
            style="width:100px;"
            clearable
          />
        </el-form-item>
        <el-form-item :label="$t('trials:trials-list:table:status')">
          <el-select v-model="searchData.TrialStatusStr" clearable >
            <el-option
              v-for="item of $d.TrialStatusEnum"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- Sponsor -->
<!--        <el-form-item :label="$t('trials:trials-list:table:sponsor')">-->
<!--          <el-select-->
<!--            v-model="searchData.SponsorId"-->
<!--            style="width:150px;"-->
<!--            clearable-->
<!--          >-->
<!--            <el-option-->
<!--              v-for="(item) in sponsorList"-->
<!--              :key="item.Id"-->
<!--              :label="item.SponsorName"-->
<!--              :value="item.Id"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <!-- 分配时间 -->
        <el-form-item style="margin-bottom:10px" :label="$t('trials:trials-list:table:createDate')">
          <el-date-picker
            v-model="timeList"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            @change="changeTimeList"
          />
        </el-form-item>
<!--        <el-form-item :label="$t('trials:uploadClinicalData:table:beginDate')">-->
<!--          <el-date-picker-->
<!--            v-model="searchData.BeginDate"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            format="yyyy-MM-dd"-->
<!--            type="date"-->
<!--            :picker-options="beginPickerOption"-->
<!--            :clearable="false"-->
<!--            style="width:100%;"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item :label="$t('trials:uploadClinicalData:table:endDate')">-->
<!--          <el-date-picker-->
<!--            v-model="searchData.EndDate"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            format="yyyy-MM-dd"-->
<!--            type="date"-->
<!--            :picker-options="endpickerOption"-->
<!--            :clearable="false"-->
<!--            style="width:100%;"-->
<!--          />-->
<!--        </el-form-item>-->

        <el-form-item>
          <!-- <el-button type="text" @click="isShow = !isShow">More</el-button> -->
          <!-- Search -->
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">
            {{ $t('common:button:search') }}
          </el-button>
          <!-- Reset -->
          <el-button type="primary" icon="el-icon-refresh-left" @click="handleReset">
            {{ $t('common:button:reset') }}
          </el-button>
          <!-- Export -->
<!--          <el-button-->
<!--            v-hasPermi="['trials:trials-list:export']"-->
<!--            type="primary"-->
<!--            icon="el-icon-download"-->
<!--            :disabled="!(selectArr.length>0)"-->
<!--            @click="handleExportTrial"-->
<!--          >-->
<!--            {{ $t('common:button:export') }}-->
<!--          </el-button>-->

        </el-form-item>
      </el-form>
      <span style="margin-left:auto;">
        <!-- New -->
        <el-button
          v-hasPermi="['trials:trials-list:new']"
          icon="el-icon-plus"
          type="primary"
          @click="handleNew"
        >
          {{ $t('common:button:new') }}
        </el-button>
      </span>
    </template>

    <!-- 更多搜索条件 -->
    <el-drawer
      :visible.sync="isShow"
      :with-header="false"
      size="390px"
    >
      <div style="padding:10px;">
        <el-form label-width="140px">
          <el-form-item label="Trial ID">
            <el-input :maxLength="$inputMax"
              v-model="searchData.Code"
              placeholder="Trial ID"
              style="width:100%;"
              clearable
            />
          </el-form-item>
          <el-form-item label="Indication">
            <el-input :maxLength="$inputMax"
              v-model="searchData.Indication"
              placeholder="Indication"
              style="width:100%;"
              clearable
            />
          </el-form-item>
          <el-form-item label="Assessment Criteria">
            <el-select
              v-model="searchData.CriterionIds"
              placeholder="Assessment Criteria"
              style="width:100%;"
              clearable
              multiple
            >
              <!-- <el-option
                v-for="(key,value) of dictionaryList.ReadingStandard"
                :key="key"
                :label="key"
                :value="value"
              /> -->
              <el-option
                v-for="item of dict.type.ReadingStandard"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="Sponsor">
            <el-select
              v-model="searchData.SponsorId"
              placeholder="Sponsor"
              style="width:100%;"
              clearable
            >
              <el-option
                v-for="(item) in sponsorList"
                :key="item.Id"
                :label="item.SponsorName"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="CRO">
            <el-select v-model="searchData.CROId" placeholder="CRO" style="width:100%;" clearable>
              <el-option
                v-for="(item) of croList"
                :key="item.Id"
                :label="item.CROName"
                :value="item.Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="Phase">
            <el-select
              v-model="searchData.Phase"
              placeholder="Phase"
              style="width:100%;"
              clearable
            >
              <el-option
                v-for="item in phaseOptions"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="ReviewType">
            <el-select
              v-model="searchData.ReviewTypeIds"
              placeholder="ReviewType"
              style="width:100%;"
              clearable
              multiple
            >
              <!-- <el-option
                v-for="(key,value) of dictionaryList.ReviewType"
                :key="key"
                :label="key"
                :value="value"
              /> -->
              <el-option
                v-for="item of dict.type.ReviewType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="Modality">
            <el-select
              v-model="searchData.ModalityIds"
              multiple
              placeholder="Modality"
              style="width:100%;"
              clearable
            >
              <!-- <el-option
                v-for="(key,value) of dictionaryList.ReadingType"
                :key="key"
                :label="key"
                :value="value"
              /> -->
              <el-option
                v-for="item of dict.type.ReadingType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="Expedited: ">
            <el-select v-model="searchData.Expedited" value-key="value" clearable style="width:100%;">
              <el-option
                v-for="item in expeditedOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="BeginDate: ">
            <el-date-picker
              v-model="searchData.BeginDate"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              type="date"
              :picker-options="beginPickerOption"
              :clearable="false"
              style="width:100%;"
            />
          </el-form-item>
          <el-form-item label="EndDate: ">
            <el-date-picker
              v-model="searchData.EndDate"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              type="date"
              :picker-options="endpickerOption"
              :clearable="false"
              style="width:100%;"
            />
          </el-form-item>

          <el-form-item label="Attended Reviewer Type:">
            <el-select
              v-model="searchData.AttendedReviewerType"
              placeholder="Attended Reviewer Type"
              style="width:100%;"
              clearable
            >
              <el-option v-for="item of $d.AttendedReviewerType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSelectSearch">Search</el-button>
            <el-button type="primary" @click="handleReset">Reset</el-button>
            <el-button type="primary" @click="isShow=false">Back</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <!-- 项目列表 -->
    <template slot="main-container">
      <el-table
        v-adaptive="{bottomOffset:60}"
        v-loading="listLoading"
        :data="list"
        stripe
        height="100"
        @selection-change="handleSelectChange"
        @sort-change="handleSortChange"
      >
        <el-table-column type="selection" align="left" width="45" />
        <el-table-column type="index" width="40" align="left" />
        <el-table-column
          prop="TrialCode"
          :label="$t('trials:trials-list:table:trialId')"
          show-overflow-tooltip
          sortable="custom"
        />
<!--        <el-table-column-->
<!--          prop="ResearchProgramNo"-->
<!--          :label="$t('trials:trials-list:table:researchNumber')"-->
<!--          show-overflow-tooltip-->
<!--          sortable="custom"-->
<!--        />-->

        <el-table-column
          prop="ExperimentName"
          :label="$t('trials:trials-list:table:experimentName')"
          show-overflow-tooltip
          sortable="custom"
        />

        <el-table-column
          prop="HeadPI"
          :label="$t('trials:trials-list:form:pi')"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          prop="Indication"
          :label="$t('trials:trials-list:form:indication')"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          prop="ModalityList"
          :label="$t('trials:trials-list:form:modality')"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{scope.row.ModalityList.toString()}}
          </template>
        </el-table-column>
        <el-table-column
          prop="TrialStatusStr"
          :label="$t('trials:trials-list:table:status')"
          show-overflow-tooltip
          sortable="custom"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.TrialStatusStr === 'Initializing'" type="info">{{ $fd('TrialStatusEnum', scope.row.TrialStatusStr) }}</el-tag>
            <el-tag v-if="scope.row.TrialStatusStr === 'Ongoing'" type="primary">{{ $fd('TrialStatusEnum', scope.row.TrialStatusStr) }}</el-tag>
            <el-tag v-if="scope.row.TrialStatusStr === 'Completed'" type="warning">{{ $fd('TrialStatusEnum', scope.row.TrialStatusStr) }}</el-tag>
            <el-tag v-if="scope.row.TrialStatusStr === 'Stopped'" type="danger">{{ $fd('TrialStatusEnum', scope.row.TrialStatusStr) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="CreateTime"
          :label="$t('trials:trials-list:table:createDate')"
          show-overflow-tooltip
          sortable="custom"
        />
        <el-table-column
          label=""
          width="250"
          align="left"
          fixed="right"
        >
          <template slot-scope="scope">
            <!-- 详情 -->
            <el-button
              v-hasPermi="['trials:trials-list:panel']"
              circle
              icon="el-icon-info"
              :disabled="(scope.row.TrialStatusStr === 'Initializing' && !hasPermi(['role:pm'])) || scope.row.IsDeleted"
              :title="$t('trials:trials-list:action:panel')"
              @click="handleDetail(scope.row)"
            />
            <!-- 编辑项目基本信息 -->
            <el-button
              v-hasPermi="['trials:trials-list:edit']"
              circle
              icon="el-icon-edit-outline"
              :disabled="scope.row.IsDeleted"
              :title="$t('trials:trials-list:action:edit')"
              @click="handleEdit(scope.row)"
            />
            <!-- 修改项目状态 -->
            <el-button
              v-hasPermi="['trials:trials-list:status']"
              circle
              icon="el-icon-edit"
              :disabled="scope.row.IsDeleted"
              :title="$t('trials:trials-list:action:status')"
              @click="handleStatus(scope.row)"
            />
            <!-- 废除项目 -->
            <el-button
              v-hasPermi="['trials:trials-list:abolish']"
              circle
              icon="el-icon-delete"
              :disabled="scope.row.IsDeleted || scope.row.TrialStatusStr !== 'Initializing'"
              :title="$t('trials:trials-list:action:abolition')"
              @click="handleAbandon(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <pagination
        class="page"
        :total="total"
        :page.sync="searchData.PageIndex"
        :limit.sync="searchData.PageSize"
        @pagination="getList"
      />
    </template>

    <!-- 新增/编辑项目 -->
    <el-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      :title="title"
      :fullscreen="true"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <TrialForm :trial-id="currentId" @getList="getList" @closeDialog="closeDialog" />
    </el-dialog>

    <!-- 修改项目状态 -->
    <el-dialog
      v-if="statusVisible"
      :visible.sync="statusVisible"
      :close-on-click-modal="false"
      :title="$t('trials:trials-list:dialogTitle:changeStatus')"
      width="700px"
      custom-class="base-dialog-wrapper"
      append-to-body
    >
      <TrialStatusForm :data="currentRow" @closeDialog="closeStatusDialog" @getList="getList" />
    </el-dialog>
  </BaseContainer>
</template>
<script>
import { getTrialList, abandonTrial, ifTrialCanOngoing } from '@/api/trials'
import store from '@/store'
import { mapGetters } from 'vuex'
import Excel from 'exceljs'
import BaseContainer from '@/components/BaseContainer'
import Pagination from '@/components/Pagination'
import TrialForm from './components/TrialForm'
import TrialStatusForm from './components/TrialStatusForm'
const searchDataDefault = () => {
  return {
    Code: '',
    CriterionIds: [],
    SponsorId: '',
    ReviewTypeIds: [],
    CROId: '',
    Expedited: '',
    Indication: '',
    Phase: '',
    ModalityIds: [],
    BeginDate: '',
    EndDate: '',
    AttendedReviewerType: '',
    ResearchProgramNo: '',
    ExperimentName: '',
    PageIndex: 1,
    PageSize: 20,
    Asc: false,
    SortField: ''
  }
}
export default {
  name: 'Trials',
  components: { Pagination, BaseContainer, TrialForm, TrialStatusForm },
  dicts: ['ReadingStandard', 'ReviewType', 'ReadingType'],
  data() {
    return {
      timeList: [],
      userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
      selectArr: [],
      searchData: searchDataDefault(),
      list: [],
      listLoading: false,
      total: 0,
      isShow: false,
      dialogVisible: false,
      title: '',
      currentId: '',
      statusVisible: false,
      currentRow: {},
      currentUser: zzSessionStorage.getItem('userName'),
      phaseOptions: [
        { value: 'I' },
        { value: 'II' },
        { value: 'III' },
        { value: 'IV' }
      ],
      expeditedOption: this.$d.TrialExpeditedState,
      beginPickerOption: {
        disabledDate: time => {
          if (this.searchData.EndDate) {
            return time.getTime() > new Date(this.searchData.EndDate).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endpickerOption: {
        disabledDate: time => {
          if (this.searchData.BeginDate) {
            return time.getTime() > Date.now() || time.getTime() <= new Date(this.searchData.BeginDate).getTime()
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    }
  },
  computed: {
    ...mapGetters(['sponsorList', 'croList'])
  },
  created() {
    this.initPage()
  },
  methods: {
    changeTimeList() {
      if (this.timeList) {
        this.searchData.BeginDate = this.timeList[0]
        this.searchData.EndDate = this.timeList[1]
      } else {
        this.searchData.BeginDate = null
        this.searchData.EndDate = null
      }
    },
    initPage() {
      this.getList()
      store.dispatch('global/getSponsorList')
      store.dispatch('global/getCROList')
    },
    // 获取项目列表信息
    getList() {
      this.listLoading = true
      getTrialList(this.searchData)
        .then(res => {
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },

    // 查询
    handleSearch() {
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 查询
    handleSelectSearch() {
      this.searchData.PageIndex = 1
      this.getList()
      this.isShow = false
    },
    // 重置
    handleReset() {
      this.searchData = searchDataDefault()
      this.timeList = []
      this.getList()
    },
    // 新增项目
    handleNew() {
      // this.$router.push({ name: 'CreateTrial' })
      this.title = this.$t('trials:trials-list:dialogTitle:new')
      this.currentId = ''
      this.dialogVisible = true
    },
    // 编辑项目
    handleEdit(row) {
      this.title = this.$t('trials:trials-list:dialogTitle:edit')
      this.currentId = row.Id
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
    },
    // 状态
    handleStatus(row) {
      if (row.TrialStatusStr === 'Initializing') {
        this.listLoading = true
        ifTrialCanOngoing(row.Id).then(res => {
          this.listLoading = false
          if (res.Result) {
            this.currentRow = { ...row }
            this.statusVisible = true
          } else {
            this.$confirm(res.ErrorMessage, {
              type: 'warning',
              showCancelButton: false,
              callback: action => {}
            })
          }
        }).catch(() => { this.listLoading = false })
      } else {
        this.currentRow = { ...row }
        this.statusVisible = true
      }
    },
    closeStatusDialog() {
      this.statusVisible = false
    },
    // 废除
    handleAbandon(row) {
      this.$confirm(this.$t('trials:trials-list:message:abolition'), {
        type: 'warning',
        distinguishCancelAndClose: true
      }).then(() => {
        this.currentRow = { ...row }
        this.abandonTrial()
      }).catch(() => {})
    },
    // 废除项目
    abandonTrial() {
      this.listLoading = true
      abandonTrial(this.currentRow.Id, true)
        .then(res => {
          this.listLoading = false
          if (res.IsSuccess) {
            this.getList()
            this.$message.success(this.$t('trials:trials-list:message:abolitionSuccessfully'))
          }
        }).catch(() => { this.listLoading = false })
    },
    // panel
    handleDetail(row) {
      this.$router.push({ path: `/trials/trials-panel?trialId=${row.Id}&trialCode=${row.TrialCode}&researchProgramNo=${row.ResearchProgramNo}` })
    },
    // 获取已勾选行数据
    handleSelectChange(val) {
      const arr = []
      for (let index = 0; index < val.length; index++) {
        arr.push(val[index])
      }
      this.selectArr = arr
    },
    // 排序
    handleSortChange(column) {
      if (column.order === 'ascending') {
        this.searchData.Asc = true
      } else {
        this.searchData.Asc = false
      } if (column.prop === 'Criterion') {
        this.searchData.SortField = 'CriterionId'
      } else {
        this.searchData.SortField = column.prop
      }
      this.searchData.PageIndex = 1
      this.getList()
    },
    // 导出Excel表格
    handleExportTrial() {
      this.selectArr.forEach((element, index) => {
        // element.ExpeditedStr = element.Expedited === 0 ? 'No' : element.Expedited === 1 ? '24H' : '48H'
        // element.ModalityListStr = element.ModalityList.join(', ')
        // element.CreateTimeStr = element.CreateTime
        // element.Criterion = element.CriterionList.join(', ')
        element.Deleted = element.IsDeleted ? 'Yes' : 'No'
        element.Index = (index + 1)
      })
      var workbook = new Excel.Workbook()
      var sheet = workbook.addWorksheet('Trials')

      sheet.properties.defaultRowHeight = 22
      // sheet.columns = [
      //   { key: 'Index', width: 5 },
      //   { key: 'Code', width: 15 },
      //   { key: 'ExpeditedStr', width: 13 },
      //   { key: 'TrialStatusStr', width: 10 },
      //   { key: 'Indication', width: 25 },
      //   { key: 'Phase', width: 10 },
      //   { key: 'ReviewType', width: 20 },
      //   { key: 'Criterion', width: 15 },
      //   { key: 'ModalityListStr', width: 30 },
      //   { key: 'CRO', width: 10 },
      //   { key: 'Sponsor', width: 20 },
      //   { key: 'CreateTimeStr', width: 18 }
      // ]
      sheet.columns = [
        { key: 'Index', width: 5 },
        { key: 'TrialCode', width: 25 },
        { key: 'ExperimentName', width: 25 },
        { key: 'ResearchProgramNo', width: 25 },
        { key: 'Sponsor', width: 25 },
        { key: 'Deleted', width: 10 },
        { key: 'CreateTime', width: 25 }
      ]

      // 处理标题
      sheet.mergeCells('A1', 'G2')
      sheet.getCell('A1').value = 'Trials'
      sheet.getCell('A1').alignment = {
        vertical: 'middle',
        horizontal: 'center'
      }
      sheet.getCell('A1').font = {
        name: 'SimSun',
        family: 4,
        size: 13,
        bold: true
      }
      sheet.mergeCells('A3', 'G3')
      var now = new Date()
      sheet.getCell('A3').value = now.toLocaleDateString()
      sheet.getCell('A3').alignment = {
        vertical: 'middle',
        horizontal: 'right'
      }

      sheet.getRow(4).values = [
        'NO.',
        'Trial ID',
        '试验名称',
        '研究方案号',
        '申办方',
        '是否废除',
        'Date Created'
      ]
      sheet.getRow(4).font = {
        name: 'SimSun',
        family: 4,
        size: 11,
        bold: true
      }
      sheet.getRow(4).alignment = { vertical: 'middle', horizontal: 'left' }

      sheet.addRows(this.selectArr)

      sheet.eachRow((row, number) => {
        if (number > 3) {
          row.eachCell((cell, rowNumber) => {
            cell.alignment = { vertical: 'center', horizontal: 'left' }
            cell.border = {
              top: { style: 'thin' },
              left: { style: 'thin' },
              bottom: { style: 'thin' },
              right: { style: 'thin' }
            }
          })
        }
      })

      workbook.xlsx
        .writeBuffer({
          base64: true
        })
        .then(function(xls64) {
          var data = new Blob([xls64], {
            type:
              'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          })

          if ('msSaveOrOpenBlob' in navigator) {
            // ie使用的下载方式
            window.navigator.msSaveOrOpenBlob(
              data,
              'Trials' + '.xlsx'
            )
          } else {
            var a = document.createElement('a')

            var url = URL.createObjectURL(data)
            a.href = url
            a.download =
                'Trials' + '.xlsx'
            document.body.appendChild(a)
            a.click()
            setTimeout(function() {
              document.body.removeChild(a)
              window.URL.revokeObjectURL(url)
            }, 0)
          }
        })
    }

  }
}
</script>
