<template>
  <div>
    <div class="search-form" style="display:flex;justify-content: space-between;">
      <div>
      </div>
      <div>
        <!-- 配置 -->
        <el-button
          size="mini"
          type="primary"
          :disabled="isCompleteConfig"
          @click="handleAdd"
          style="margin-right: 10px;"
        >
          {{ $t('dictionary:template:criterionDictionary:button:config') }}
        </el-button>
      </div>
    </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('dictionary:template:criterionDictionary:table:code')"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- 描述 -->
      <el-table-column
        prop="Description"
        :label="$t('dictionary:template:criterionDictionary:table:description')"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- 子项数量 -->
      <el-table-column
        prop="Count"
        :label="$t('dictionary:template:criterionDictionary:table:count')"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- 排序 -->
      <el-table-column
        prop="ShowOrder"
        :label="$t('dictionary:template:criterionDictionary:table:showOrder')"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        prop="Description"
        :label="$t('common:action:action')"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <!-- 配置 -->
          <el-button :disabled="isCompleteConfig" type="text" @click="openChildren(scope.row)">
            {{ $t('dictionary:template:criterionDictionary:button:config') }}
          </el-button>
          <!-- 删除 -->
          <el-button
            type="text"
            :disabled="isCompleteConfig"
            @click="handleDelete(scope.row)"
          >
            {{ $t('common:button:delete') }}
          </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" @getList="getList" :criterionId="criterionId" :parentCode="drawer_cfg.title"></CriterionDictionaryConfig>
    </el-drawer>
    <el-drawer
      :title="drawer_cfg2.title"
      :append-to-body="true"
      :modal-append-to-body="false"
      :visible.sync="drawer_cfg2.drawerChild"
      direction="rtl"
      size="80%"
    >
      <div style="text-align: right;">
        <el-button
          size="mini"
          type="primary"
          @click="handleSave"
          v-loading="loading"
        >
          {{ $t('common:button:save')}}
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        v-adaptive="{bottomOffset:0}"
        height="100"
        ref="multipleTable"
        style="width: 100%"
        :data="dicList"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          width="55">
          <template slot-scope="scope">
            {{ scope.$index + 1}}
          </template>
        </el-table-column>
        <!-- 字典表名 -->
        <el-table-column
          prop="Code"
          :label="$t('dictionary:template:criterionDictionary:table:code')"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 描述 -->
        <el-table-column
          prop="Description"
          :label="$t('dictionary:template:criterionDictionary:table:description')"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 排序 -->
        <el-table-column
          prop="ShowOrder"
          :label="$t('dictionary:template:criterionDictionary:table:showOrder')"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import { getAssessType, setAssessType, getCriterionDictionaryList, getBasicConfigSelect, addSystemCriterionDictionaryCode, deleteSystemCriterionDictionary } from '@/api/dictionary'
import CriterionDictionaryConfig from './CriterionDictionaryConfig'
export default {
  props: {
    criterionId: {
      type: String,
      required: true
    },
    isCompleteConfig: {
      type: Boolean,
      required: true
    }
  },
  components: {
    CriterionDictionaryConfig
  },
  data() {
    return {
      list: [],
      total: 0,
      loading: false,
      rowData: {},
      activeName: '0',
      addOrEdit: { visible: false, title: '' },
      config: { visible: false, title: '全局配置' },
      drawer_cfg: { drawerChild: false, parentId: '', title: '' },
      drawer_cfg2: { 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 }
    },
    toggleSelection(rows) {
      console.log(this.$refs.multipleTable)
      this.$refs.multipleTable.clearSelection();
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {

      }
    },
    handleSelectionChange(val) {
      this.selectedList = val
    },
    getList() {
      this.loading = true
      getCriterionDictionaryList({
        CriterionId: this.criterionId,
        SystemCriterionId: this.criterionId
      }).then(res => {
        this.loading = false
        this.list = res.Result
      })
    },
    handleAdd() {
      // 选择标准字典
      this.drawer_cfg2 = { drawerChild: true, title: this.$t('template:criterionDictionary:title:selectDictionary') }
      this.config.visible = true
      this.$nextTick(() => {
        var a = this.dicList.filter(v => {
          return !!this.list.find(v1 => {
            return v1.Code === v.Code
          })
        })
        console.log(a)
        this.toggleSelection(a)
      })
    },
    handleSave() {
      this.loading = true
      var params = {
        SystemCriterionId: this.criterionId,
        CodeList: this.selectedList.map(v => v.Code) ? this.selectedList.map(v => v.Code) : null,
      }
      addSystemCriterionDictionaryCode(params).then(res => {
        this.$message.success(this.$t('common:message:savedSuccessfully'))
        this.drawer_cfg2.drawerChild = false
        this.loading = false
        this.getList()
      })
      // setAssessType(params).then(res => {
      //   this.loading = false
      //   this.$message.success(this.$t('common:message:savedSuccessfully'))
      //   this.config.visible = false
      //   this.selectedList = []
      //   this.getList()
      // }).catch(() => {
      // })
    },
    handleDelete(row) {
      this.loading = true
      // 是否确认删除
      this.$confirm(this.$t('template:criterionDictionary:message:msg1')).then(() => {
        deleteSystemCriterionDictionary({Id: row.Id}).then(res => {
          this.$message.success(this.$t('common:message:deletedSuccessfully'))
          this.loading = false
          this.getList()
        }).catch(() => { this.loading = false })
      })

    }
  }
}
</script>

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