<!-- 骨髓收集记录表 -->
<template>
  <div>
    <div class="detail-container">
      <div class="detail-title">
        <img src="@/assets/images/detail-title.png" />{{ formData.bdmc
        }}<img src="@/assets/images/detail-title.png" />
      </div>
      <div class="detail-content">
        <div class="content">
          <BaseInfoFormPackage
            fieldItemLabel="template.common.baseInfo"
            label="template.common.baseInfo"
            :ref="refConf.base"
            :formConfig="baseInfoFormConfig"
            :formData="formData"
          />

          <LineLabel label="template.dl.dl010.sysj" />
          <CustomTable
            :columns="sysjColumns"
            :ref="refConf.sysj"
            :showOperation="fillType === 'actFill'"
            :showAddRow="fillType === 'actFill'"
            :formData="formData"
            :prefixKey="`sysjTable`"
          >
            <template slot="operation" slot-scope="{ row, rowIndex, columns }">
              <TableOpertaionDelete
                :row="row"
                :rowIndex="rowIndex"
                :columns="columns"
                @deleteRow="() => deleteTableRow(rowIndex, 'sysjTableRef')"
              ></TableOpertaionDelete>
            </template>
          </CustomTable>

          <LineLabel label="template.dl.dl007.yqsyxx" />
          <CustomTable
            :columns="yqsyColumns"
            :ref="refConf.yqsy"
            @onRegentSubmit="(e) => onRegentSubmit(e)"
            :showOperation="fillType === 'actFill'"
            :showAddRow="fillType === 'actFill'"
            :formData="formData"
            :prefixKey="`yqsyTable`"
          >
            <template slot="operation" slot-scope="{ row, rowIndex, columns }">
              <TableOpertaionDelete
                :row="row"
                :rowIndex="rowIndex"
                :columns="columns"
                @deleteRow="() => deleteTableRow(rowIndex, 'yqsyTableRef')"
              ></TableOpertaionDelete>
            </template>
          </CustomTable>

          <LineLabel label="template.dl.dl010.sjxx" />
          <div class="sj-operation-btns">
            <el-button size="small" type="primary">{{
              $t('template.dl.dl010.xzmb')
            }}</el-button>
            <el-button size="small" type="success">{{
              $t('template.dl.dl010.dr')
            }}</el-button>
          </div>
          <CustomTable
            :columns="sjxxColumns"
            :ref="refConf.sjxx"
            :showOperation="fillType === 'actFill'"
            :showAddRow="fillType === 'actFill'"
            :formData="formData"
            :prefixKey="`sjxxTable`"
          >
            <template slot="operation" slot-scope="{ row, rowIndex, columns }">
              <TableOpertaionDelete
                :row="row"
                :rowIndex="rowIndex"
                :columns="columns"
                @deleteRow="() => deleteTableRow(rowIndex, 'sjxxTableRef')"
              ></TableOpertaionDelete>
            </template>
          </CustomTable>

          <BaseInfoFormPackage
            fieldItemLabel="template.dl.dl007.bz"
            label="template.dl.dl007.bz"
            :ref="refConf.remark"
            :formConfig="remarkConfig"
            :formData="formData"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseInfoFormPackage from '@/components/Template/BaseInfoFormPackage'
import TableOpertaionDelete from '@/components/Template/operation/TableOpertaionDelete.vue'
import CustomTable from '@/components/Template/CustomTable.vue'
import LineLabel from '@/components/Template/LineLabel'
import TableList from '@/components/Template/Table'
import Step from '@/components/Template/Step'
import templateMixin from '../../mixins/templateMixin'
import moment from 'moment'

const refConf = {
  base: 'baseInfoRef',
  sysj: 'sysjTableRef',
  yqsy: 'yqsyTableRef',
  sjxx: 'sjxxTableRef',
  remark: 'remarkRef'
}
const refNames = Object.values(refConf)

export default {
  name: 'DL010',
  components: {
    BaseInfoFormPackage,
    LineLabel,
    TableList,
    Step,
    CustomTable,
    TableOpertaionDelete
  },
  mixins: [templateMixin],
  props: {
    fillType: {
      type: String,
      default: 'preFill'
    }
  },
  computed: {
    // 备注表单配置
    remarkConfig() {
      return [
        {
          type: 'cellItem',
          config: {
            remark: {
              label: '',
              type: 'textarea',
              fillType: 'actFill',
              span: 1,
              placeholder: 'template.common.remarkPlaceholder',
              maxlength: 1000,
              rows: 5
            }
          }
        }
      ]
    },
    // 试验基本信息表单配置
    baseInfoFormConfig() {
      return [
        {
          type: 'cardItem',
          config: {
            studyMc: {
              label: 'template.common.testName',
              type: 'input',
              disabled: true
            },
            studySn: {
              label: 'template.common.testNumber',
              type: 'input',
              disabled: true
            }
          }
        },
        {
          type: 'conditionItem',
          label: 'template.dl.dl010.dwzs',
          config: {
            dwzs: {
              span: 1,
              label: 'template.dl.dl010.dwzs',
              type: 'select',
              options: this.getDictOptions('business_dwzs'),
              fillType: 'preFill',
              otherCode: 'dwzsOther'
            }
          }
        },
        {
          type: 'cellItem',
          label: 'template.dl.dl010.cjdd',
          config: {
            cjdd: {
              label: 'template.dl.dl010.cjdd',
              type: 'input',
              fillType: 'actFill',
              maxlength: 200
            }
          }
        },
        {
          type: 'cellItem',
          label: 'template.dl.dl010.zpdd',
          config: {
            zpdd: {
              label: 'template.dl.dl010.zpdd',
              type: 'input',
              fillType: 'actFill',
              maxlength: 200
            }
          }
        },
        {
          type: 'conditionItem',
          label: 'template.dl.dl010.cjbw',
          config: {
            cjbw: {
              span: 1,
              label: 'template.dl.dl010.cjbw',
              type: 'select',
              options: this.getDictOptions('business_cjbw'),
              fillType: 'preFill',
              otherCode: 'cjbwOther'
            }
          }
        },
        {
          type: 'cellItem',
          label: 'template.dl.dl010.jprq',
          config: {
            jprqKssj: {
              label: 'template.dl.dl010.jprqKssj',
              type: 'input',
              disabled: true
            },
            jprqJssj: {
              label: 'template.dl.dl010.jprqJssj',
              type: 'input',
              fillType: 'actFill',
              maxlength: 200
            }
          }
        }
      ]
    },
    // 试验试剂信息
    sysjColumns() {
      return [
        {
          label: 'template.dl.dl010.sjmc',
          prop: 'sjmc',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.bh',
          prop: 'bh',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.ph',
          prop: 'ph',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.ndhlcd',
          prop: 'ndhlcd',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.ly',
          prop: 'ly',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.sxr',
          prop: 'sxr',
          bodyType: 'input',
          bodyFillType: 'actFill'
        }
      ]
    },
    // 仪器使用信息
    yqsyColumns() {
      return [
        {
          label: 'template.dl.dl010.yqsybh',
          prop: 'yqbh',
          bodyType: 'yq',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.mc',
          prop: 'mc',
          bodyType: 'input',
          bodyDisabled: true,
          bodyFillType: 'actFill',
          disabled: true
        },
        {
          label: 'template.dl.dl010.bh',
          prop: 'bh',
          bodyType: 'input',
          bodyDisabled: true,
          bodyFillType: 'actFill',
          disabled: true
        },
        {
          label: 'template.dl.dl010.zcqk',
          prop: 'zcqk',
          bodyType: 'input',
          bodyDisabled: true,
          bodyFillType: 'actFill',
          disabled: true
        },
        {
          label: 'template.dl.dl010.bz',
          prop: 'bz',
          bodyType: 'input',
          bodyFillType: 'actFill'
        }
      ]
    },
    // 受集信息列表
    sjxxColumns() {
      return [
        {
          label: 'template.dl.dl010.dwbh',
          prop: 'dwbh',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.dwxb',
          prop: 'dwxb',
          bodyType: 'select',
          bodyFillType: 'actFill',
          options: this.getDictOptions('sys_user_sex')
        },
        {
          label: 'template.dl.dl010.dwzl',
          prop: 'dwzl',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.xcqkxzjd',
          prop: 'xcqk',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.bz',
          prop: 'bz',
          bodyType: 'input',
          bodyFillType: 'actFill'
        },
        {
          label: 'template.dl.dl010.sjsj',
          prop: 'sjsj',
          bodyType: 'input',
          bodyFillType: 'actFill'
        }
      ]
    }
  },
  data() {
    return {
      formData: {},
      refConf
    }
  },
  methods: {
    // 删除表格行
    deleteTableRow(rowIndex, refName) {
      this.$refs[refName].deleteRow(rowIndex)
    },
    // 获取已填写的表单数据
    getFilledFormData() {
      return this.getFilledFormDataByRefs(refNames)
    },
    // 获取填写完成的表单数据
    async getFormData() {
      return await this.validFormFields(refNames)
    },
    // 只做校验
    async validFields() {
      return await this.validFormFields(refNames)
    },
    getResource() {
      const sysjStepResource = this.$refs.sysjTableRef.getStepResource()
      const yqsyStepResource = this.$refs.yqsyTableRef.getStepResource()
      // 使用的试剂、仪器
      this.resourceTmp = [
        ...(sysjStepResource.sjResource || []),
        ...(yqsyStepResource.sjResource || [])
      ]
      this.yqResourceTmp = yqsyStepResource.yqResource || []
      return this.resourceTmp
    },
    onRegentSubmit(e) {
      const { selectInfo, key, rowIndex } = e
      const { row } = selectInfo

      if (key === 'yqbh') {
        const params = {
          mc: row.mc,
          bh: row.xh,
          zcqk: row.jzrq
        }
        this.$refs.yqsyTableRef.updateDataSourceByRowIndex(rowIndex, params)
      }
    },
    // 保存
    async onSave() {
      const formData = this.getStepResource()
      console.log(formData, 'formData')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.sj-operation-btns {
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.print-btn {
  margin-bottom: 20px;
}
.config-header-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 16px;
  color: #303133;
}
</style>
