<template>
  <!-- 系统问题 -->
  <box-content v-loading="loading">
    <!-- 搜索框 -->
    <div class="search">
      <el-form :inline="true" size="mini" class="base-search-form">
        <!-- 审核问题 -->
        <el-form-item :label="$t('trials:emailManageCfg:title:businessScenario')">
          <el-select v-model="searchData.BusinessScenarioEnum" style="width: 150px">
            <el-option v-for="item of $d.Email_BusinessScenario" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 10px" :label="$t('trials:emailManageCfg:table:BusinessModuleEnum')">
          <el-select v-model="searchData.BusinessModuleEnum" clearable style="width: 120px">
            <el-option v-for="item of $d.BusinessModule" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="isDistinguishCriteria" style="margin-bottom: 10px"
          :label="$t('trials:reviewTrack:table:criterionName')">
          <el-select v-model="searchData.CriterionTypeEnum" clearable style="width: 120px">
            <el-option v-for="item of $d.CriterionType" :key="item.id" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('trials:emailManageCfg:title:toUserTypeList')" prop="ToUserTypeList">
          <el-select v-model="searchData.ToUserType" clearable class="mr">
            <el-option v-for="item of UserTypeList" :key="`ToUserTypeList${item.label}`" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('trials:emailManageCfg:table:EmailUrgentEnum')" prop="EmailUrgentEnum"
          v-if="!isDistinguishCriteria">
          <el-select v-model="searchData.EmailUrgentEnum" clearable class="mr">
            <el-option v-for="item of $d.EmailUrgent" :key="`ToUserTypeList${item.label}`" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">{{
            $t('common:button:search')
          }}</el-button>
          <el-button type="primary" @click="handleReset">{{
            $t('common:button:reset')
          }}</el-button>
          <el-button type="primary" @click="handleAdd" class="el-icon-plus" v-if="!isDistinguishCriteria && isShow">{{
            $t('trials:reviewTrack:button:addDefault') }}</el-button>
        </el-form-item>
      </el-form>
      <span style="margin-left: auto">
        <el-button type="primary" size="mini" :disabled="selectArr.length <= 0" @click="handleSubmit">
          {{ $t('common:button:submit') }}
        </el-button>
      </span>
    </div>

    <el-table :data="list" stripe size="small" height="400" @selection-change="handleSelectChange">
      <el-table-column type="selection" align="left" :selectable="selectable" width="45" />
      <el-table-column type="index" width="40" />
      <!-- Code -->
      <!-- <el-table-column
        prop="Code"
        :label="$t('trials:emailManageCfg:title:code')"
        sortable="custom"
        show-overflow-tooltip
        width="100"
      /> -->
      <el-table-column v-if="isDistinguishCriteria" prop="CriterionTypeList"
        :label="$t('trials:reviewTrack:table:criterionName')" show-overflow-tooltip sortable="custom" width="120">
        <template slot-scope="scope">
          {{scope.row.CriterionTypeList && scope.row.CriterionTypeList.length > 0 ?
            scope.row.CriterionTypeList.map(item => { return $fd('CriterionType', item) }
            ).join(', ') : ''}}
        </template>
      </el-table-column>
      <el-table-column v-if="$i18n.locale === 'zh'" prop="EmailTopicCN"
        :label="$t('trials:emailManageCfg:table:EmailTopicCN')" sortable="custom" show-overflow-tooltip width="160" />
      <el-table-column v-else prop="EmailTopic" :label="$t('trials:emailManageCfg:table:EmailTopic')" sortable="custom"
        show-overflow-tooltip width="160" />
      <el-table-column prop="BusinessModuleEnum" :label="$t('trials:emailManageCfg:table:BusinessModuleEnum')"
        sortable="custom" show-overflow-tooltip width="100">
        <template slot-scope="scope">
          {{ $fd('BusinessModule', scope.row.BusinessModuleEnum) }}
        </template>
      </el-table-column>
      <el-table-column prop="BusinessScenarioEnum" :label="$t('trials:emailManageCfg:table:BusinessScenarioEnum')"
        sortable="custom" show-overflow-tooltip width="130">
        <template slot-scope="scope">
          {{ $fd('Email_BusinessScenario', scope.row.BusinessScenarioEnum) }}
        </template>
      </el-table-column>
      <!-- 收件人 -->
      <el-table-column prop="ToUserTypeList" :label="$t('trials:emailManageCfg:title:toUserTypeList')"
        show-overflow-tooltip width="100">
        <template slot-scope="scope">
          {{
            scope.row.ToUserTypeList.length > 0
              ? scope.row.ToUserTypeList.map((v) => $fd('UserType', v)).join(
                '、'
              )
              : ''
          }}
        </template>
      </el-table-column>
      <!-- 抄送人 -->
      <el-table-column prop="CopyUserTypeList" :label="$t('trials:emailManageCfg:title:copyUserTypeList')"
        show-overflow-tooltip width="100">
        <template slot-scope="scope">
          {{
            scope.row.CopyUserTypeList.length > 0
              ? scope.row.CopyUserTypeList.map((v) => $fd('UserType', v)).join(
                '、'
              )
              : ''
          }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('trials:emailManageCfg:table:EmailUrgentEnum')" sortable="custom"
        show-overflow-tooltip width="100">
        <template slot-scope="scope">
          {{ $fd('EmailUrgent', scope.row.EmailUrgentEnum) }}
        </template>
      </el-table-column>
      <el-table-column prop="EmailCron" :label="$t('trials:emailManageCfg:table:EmailCron')" sortable="custom"
        show-overflow-tooltip width="160">
        <template slot-scope="scope">
          <span>{{ getEmailCron(scope.row.EmailCron) }}</span>
        </template>
      </el-table-column>
      <!-- 附件 -->
      <el-table-column v-if="$i18n.locale === 'zh'" prop="AttachNameCN"
        :label="$t('trials:emailManageCfg:title:fileName')" show-overflow-tooltip width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.AttachCNPath" type="text" @click="handlePreview(scope.row.AttachCNPath)">
            {{ scope.row.AttachNameCN }}
          </el-button>
        </template>
      </el-table-column>
      <!-- 附件 -->
      <el-table-column v-else prop="AttachName" :label="$t('trials:emailManageCfg:title:fileName')"
        show-overflow-tooltip width="100">
        <template slot-scope="scope">
          <el-button v-if="scope.row.AttachPath" type="text" @click="handlePreview(scope.row.AttachPath)">
            {{ scope.row.AttachName }}
          </el-button>
        </template>
      </el-table-column>
      <!-- 是否需要回执 -->
      <el-table-column prop="IsReturnRequired" :label="$t('trials:emailManageCfg:title:isReturnRequired')"
        show-overflow-tooltip sortable="custom" width="140">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.IsReturnRequired" type="danger">
            {{ $fd('YesOrNo', scope.row.IsReturnRequired) }}
          </el-tag>
          <el-tag v-else type="primary">{{
            $fd('YesOrNo', scope.row.IsReturnRequired)
          }}</el-tag>
        </template>
      </el-table-column>
      <!-- 是否自动发送 -->
      <el-table-column prop="IsAutoSend" :label="$t('trials:emailManageCfg:title:isAutoSend')" show-overflow-tooltip
        sortable="custom" width="160">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.IsAutoSend" type="danger">
            {{ $fd('YesOrNo', scope.row.IsAutoSend) }}
          </el-tag>
          <el-tag v-else type="primary">{{
            $fd('YesOrNo', scope.row.IsAutoSend)
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="IsEnable" :label="$t('trials:emailManageCfg:table:IsEnable')" show-overflow-tooltip
        sortable="custom" width="160">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.IsEnable" type="danger">
            {{ $fd('YesOrNo', scope.row.IsEnable) }}
          </el-tag>
          <el-tag v-else type="primary">{{
            $fd('YesOrNo', scope.row.IsEnable)
          }}</el-tag>
        </template>
      </el-table-column>
      <!-- 更新时间 -->
      <el-table-column prop="UpdateTime" :label="$t('trials:emailManageCfg:title:updateTime')" show-overflow-tooltip
        sortable="custom" width="160" />
      <!-- 创建时间 -->
      <el-table-column prop="CreateTime" :label="$t('trials:emailManageCfg:title:createTime')" show-overflow-tooltip
        sortable="custom" width="160" />
    </el-table>
    <Pagination class="page" :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize"
      @pagination="getList" />
  </box-content>
</template>
<script>
import {
  getSysEmailNoticeConfigList,
  batchAddSysEmailConfig,
  batchAddEnrollOrPdEmailConfig,
} from '@/api/dictionary'
import Pagination from '@/components/Pagination'
// import { addTrialDataFromSystem } from '@/api/trials'
import BoxContent from '@/components/BoxContent'
const searchDataDefault = () => {
  return {
    PageIndex: 1,
    PageSize: 20,
    BusinessScenarioEnum: null,
    CriterionTypeEnum: null,
    ToUserType: null,
    EmailUrgentEnum: null,
  }
}
export default {
  name: 'AddDefaultQS',
  components: { BoxContent, Pagination },
  props: {
    trialReadingCriterionId: {
      type: String,
      default() {
        return ''
      },
    },
    currentCriterionType: {
      type: Number,
      default() {
        return 0
      },
    },
    isDistinguishCriteria: {
      type: Boolean,
      default() {
        return false
      },
    },
    isShow: {
      type: Boolean,
      default() {
        return false
      },
    },
    UserTypeList: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      trialId: '',
      searchData: searchDataDefault(),
      list: [],
      loading: false,
      selectArr: [],
      total: 0,
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.searchData.TrialId = this.trialId
      this.searchData.CurrentCriterionType = this.CurrentCriterionType
      this.searchData.IsDistinguishCriteria = this.isDistinguishCriteria
      getSysEmailNoticeConfigList(this.searchData)
        .then((res) => {
          this.loading = false
          this.list = res.Result.CurrentPageData
          this.total = res.Result.TotalCount
        })
        .catch(() => {
          this.loading = false
        })
    },
    getEmailCron(str) {
      let a = str.split(' ')
      if (a[3] && a[3].indexOf('/') > -1) {
        return a[3].split('/')[1]
      }
      return ''
    },
    async handleAdd() {
      try {
        let data = {
          TrialId: this.$route.query.trialId,
        }
        let res = await batchAddEnrollOrPdEmailConfig(data)
        if (res.IsSuccess) {
          this.$message.success(this.$t('common:message:addedSuccessfully'))
          this.getList()
          this.$emit('getList')
        }
      } catch (err) {
        console.log(err)
      }
    },
    handleSelectChange(val) {
      // console.log(val)
      // const arr = []
      // for (let index = 0; index < val.length; index++) {
      //   arr.push(val[index].Id)
      // }
      // console.log(arr)
      this.selectArr = val
    },
    handleSubmit() {
      this.loading = true
      this.selectArr.map((v) => {
        v.TrialId = this.trialId
        return v
      })
      batchAddSysEmailConfig(this.selectArr)
        .then((res) => {
          this.loading = false
          if (res.IsSuccess) {
            this.$message.success(this.$t('common:message:savedSuccessfully'))
            this.$emit('getList')
            this.$emit('close')
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 查询
    handleSearch() {
      this.getList()
    },
    selectable(row) {
      console.log(row)
      if (!row.IsHaveSelected) {
        return true
      } else {
        return false
      }
    },
    // 重置
    handleReset() {
      this.searchData = searchDataDefault()
      this.getList()
    },
  },
}
</script>
