<template>
  <div>
    <el-table v-loading="loading" style="width: 100%" :data="list" stripe>
      <el-table-column prop="" label="" width="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <!-- 字典表名 -->
      <el-table-column prop="Code" :label="$t('trials:readingUnit:baseDataCfg:title:dictTbl')" show-overflow-tooltip />
      <!-- 描述 -->
      <el-table-column prop="Description" :label="$t('trials:readingUnit:baseDataCfg:title:Description')"
        show-overflow-tooltip />
      <!-- 子项数量 -->
      <el-table-column prop="Count" :label="$t('trials:readingUnit:baseDataCfg:title:dictChildCount')"
        show-overflow-tooltip />
      <!-- 排序 -->
      <el-table-column prop="ShowOrder" :label="$t('trials:readingUnit:baseDataCfg:title:dictOrder')"
        show-overflow-tooltip />
      <el-table-column prop="Description" :label="$t('common:action:action')" show-overflow-tooltip>
        <template slot-scope="scope">
          <!-- 查看 -->
          <el-button size="small" type="primary" @click="openChildren(scope.row)">
            {{ $t('trials:readingUnit:baseDataCfg:title:dictView') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer :title="drawer_cfg.title" :append-to-body="true" :modal-append-to-body="false"
      :visible.sync="drawer_cfg.drawerChild" direction="rtl" size="80%">
      <CriterionDictionaryConfig v-if="drawer_cfg.drawerChild" :criterion-id="criterionId"
        :parent-code="drawer_cfg.title" @getList="getList" />
    </el-drawer>
  </div>
</template>

<script>
import { getTrialCriterionDictionaryList, getCriterionDictionaryList, getBasicConfigSelect, addSystemCriterionDictionaryCode, deleteSystemCriterionDictionary } from '@/api/dictionary'
import CriterionDictionaryConfig from './CriterionDictionaryConfig'
export default {
  components: {
    CriterionDictionaryConfig
  },
  props: {
    criterionId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      loading: false,
      rowData: {},
      activeName: '0',
      drawer_cfg: { drawerChild: false, parentId: '', title: '' },
      selectedList: [],
      dicList: []
    }
  },
  mounted() {
    this.getList()
    this.getBasicConfigSelect()
  },
  methods: {
    getBasicConfigSelect() {
      getBasicConfigSelect('Reading_eCRF_Criterion').then(res => {
        this.dicList = res.Result
      })
    },
    openChildren(row) {
      this.drawer_cfg = { drawerChild: true, title: row.Code, parent: row }
    },
    getList() {
      this.loading = true
      getTrialCriterionDictionaryList({
        TrialCriterionId: this.criterionId
      }).then(res => {
        this.loading = false
        this.list = res.Result
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-form-item__content {
  width: calc(100% - 110px);
}
</style>
