<template>
  <div>
    <!--<el-table :data="sysList" style="width: 100%" border highlight-current-row>-->
    <!--  <el-table-column label="序号" type="index"></el-table-column>-->
    <!--  <el-table-column label="第三方系统名称" prop="sysName" show-overflow-tooltip></el-table-column>-->
    <!--  <el-table-column label="第三方产品名称" prop="thirdName" show-overflow-tooltip></el-table-column>-->
    <!--  <el-table-column label="第三方产品ID" prop="thirdId" show-overflow-tooltip></el-table-column>-->
    <!--</el-table>-->

    <el-table v-loading="loading" :data="detailList" style="width: 100%; margin-top: 20px" border
              @current-change="handleDetail" border highlight-current-row
    >
      <el-table-column label="药品标识" prop="nameCode" show-overflow-tooltip></el-table-column>
      <el-table-column label="包装级别" prop="packLevel" show-overflow-tooltip></el-table-column>
      <el-table-column label="层级单位" prop="packUnit" show-overflow-tooltip></el-table-column>
      <el-table-column label="上级标识" prop="sjcpbm" show-overflow-tooltip></el-table-column>
      <el-table-column label="下级标识" prop="bhxjcpbm" show-overflow-tooltip></el-table-column>
      <el-table-column label="下级数量" prop="bhxjsl" show-overflow-tooltip></el-table-column>
    </el-table>


    <el-form :model="editQuery" :rules="rules" ref="editQuery" label-width="190px" style="margin-top: 20px">
      <!--<el-row>-->
      <!--  <el-col :span="12">-->
      <!--    <el-form-item label="药品通用名称" prop="cpmctymc">-->
      <!--      <el-input style="width: 90%" size="small" splaceholder="请输入物资名称" :disabled="true" v-model="editQuery.cpmctymc"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="药品标识" prop="nameCode">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入产品标识" v-model="editQuery.nameCode"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="规格型号" prop="ggxh">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.ggxh"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="产品类别" prop="cplb">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入产品类别" v-model="editQuery.cplb"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="分类编码" prop="flbm">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入分类编码" v-model="editQuery.flbm"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="商品条码" prop="sptm">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入商品条码" v-model="editQuery.sptm"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="医保编码" prop="ybbm">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入医保编码" v-model="editQuery.ybbm"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="医疗器械注册人" prop="ylqxzcrbarmc">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入医疗器械注册人" v-model="editQuery.ylqxzcrbarmc"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="注册人英文名称" prop="ylqxzcrbarywmc">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入注册人英文名称" v-model="editQuery.ylqxzcrbarywmc"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="统一社会信用号" prop="tyshxydm">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入统一社会信用号" v-model="editQuery.tyshxydm"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="注册证/备案号" prop="zczbhhzbapzbh">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入注册证/备案号" v-model="editQuery.zczbhhzbapzbh"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="上级产品编码" prop="sjcpbm">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入上级产品编码" v-model="editQuery.sjcpbm"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->

      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="包装级别" prop="packLevel">-->
      <!--      <el-input style="width: 90%" size="small" splaceholder="请输入包装级别" :disabled="true" v-model="editQuery.packLevel"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="包装层级" prop="bzcj">-->
      <!--      <el-input style="width: 90%" size="small" splaceholder="请输入包装层级" v-model="editQuery.bzcj" :disabled="true"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->

      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="包含下级包装数量" prop="bhxjsl">-->
      <!--      <el-input style="width: 90%" size="small" splaceholder="请输入包含下级包装数量" :disabled="true" v-model="editQuery.bhxjsl"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="包含下级产品编码" prop="bhxjcpbm">-->
      <!--      <el-input style="width: 90%" size="small" :disabled="true" splaceholder="请输入包含下级产品编码" v-model="editQuery.bhxjcpbm"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->

      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="包含最小销售包装数量" prop="bhzxxsbzsl">-->
      <!--      <el-input style="width: 90%" size="small" :disabled="true" splaceholder="请输入包含最小销售包装数量" v-model="editQuery.bhzxxsbzsl"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="是否包含批号" prop="scbssfbhph">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small"  v-model="editQuery.scbssfbhph"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="是否包含序列号" prop="scbssfbhxlh">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" v-model="editQuery.scbssfbhxlh" splaceholder="请输入内容"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="是否包含生产日期" prop="scbssfbhscrq">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" v-model="editQuery.scbssfbhscrq"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="是否包含失效日期" prop="scbssfbhsxrq">-->
      <!--      <el-input style="width: 90%" :disabled="true" v-model="editQuery.scbssfbhsxrq" ></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <!--<el-row>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="产品描述" prop="cpms">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small"  v-model="editQuery.cpms"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="计量单位" prop="measname">-->
      <!--      <el-input style="width: 90%" :disabled="true" size="small" splaceholder="请输入内容" v-model="editQuery.measname"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->
      <!--<el-row >-->
      <!--  <el-col :span="12" class="el-col">-->
      <!--    <el-form-item label="使用单元数量" prop="zxxsbzbhsydysl">-->
      <!--      <el-input style="width: 90%" :disabled="!checked" size="small" splaceholder="请输入内容" v-model="editQuery.zxxsbzbhsydysl"></el-input>-->
      <!--    </el-form-item>-->
      <!--  </el-col>-->
      <!--</el-row>-->

      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="药品通用名称:" prop="cpmctymc">
            <el-input style="width: 90%" size="small" placeholder="请输入药品通用名称"
                      disabled
                      v-model.trim="editQuery.cpmctymc"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="商品名称:" prop="spmc">
            <el-input style="width: 90%" size="small" placeholder="请输入商品名称"
                      disabled
                      v-model.trim="editQuery.spmc"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="包装规格:" prop="bzgg">
            <el-input style="width: 90%" size="small" placeholder="请输入包装规格"
                      disabled
                      v-model.trim="editQuery.bzgg"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="包装单位:" prop="packUnit">
            <el-input style="width: 90%" size="small" placeholder="请输入包装单位"
                      disabled
                      v-model.trim="editQuery.packUnit"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="制剂规格:" prop="prepnSpec">
            <el-input style="width: 90%" size="small" placeholder="请输入制剂规格"
                      disabled
                      v-model.trim="editQuery.prepnSpec"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="制剂单位:" prop="prepnUnit">
            <el-input style="width: 90%" size="small" placeholder="请输入制剂单位"
                      disabled
                      v-model.trim="editQuery.prepnUnit"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="包装材质:" prop="packMatrial">
            <el-input style="width: 90%" size="small" placeholder="请输入包装材质"
                      disabled
                      v-model.trim="editQuery.packMatrial"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="包装比例:" prop="packRatio">
            <el-input style="width: 90%" size="small" placeholder="请输入制剂单位"
                      disabled
                      v-model.trim="editQuery.packRatio"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="批准文号:" prop="zczbhhzbapzbh">
            <el-input style="width: 90%" size="small" placeholder="请输入批准文号"
                      disabled
                      v-model.trim="editQuery.zczbhhzbapzbh"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="生产企业:" prop="manufactory">
            <el-input style="width: 90%" size="small" placeholder="请输入生产企业"
                      disabled
                      v-model.trim="editQuery.manufactory"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="药品类型:" prop="physicType">
            <el-select v-model="editQuery.physicType" style="width: 90%" placeholder="选择药品类型" clearable disabled>
              <el-option label="特殊药品原料药" :value="1"></el-option>
              <el-option label="特殊药品制剂" :value="2"></el-option>
              <el-option label="普通药品" :value="3"></el-option>
              <el-option label="未分类" :value="9"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" type="flex">
          <el-form-item label="药品分类:" prop="majorType">
            <el-select v-model="editQuery.majorType" style="width: 90%" placeholder="选择药品分类" clearable disabled>
              <el-option label="中药" :value="1"></el-option>
              <el-option label="化学药" :value="2"></el-option>
              <el-option label="生物制品" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="医保编码:" prop="ybbm">
            <el-input style="width: 90%" size="small" placeholder="请输入医保编码"
                      disabled
                      v-model.trim="editQuery.ybbm"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="医保分类:" prop="medicareType">
            <el-select v-model="editQuery.medicareType" style="width: 90%" placeholder="选择医保分类"
                       clearable disabled
            >
              <el-option label="甲类" :value="1"></el-option>
              <el-option label="乙类" :value="2"></el-option>
              <el-option label="丙类" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="药品价格:" prop="productPrice">
            <el-input
              disabled
              style="width: 90%"
              size="small"
              placeholder="请输入药品价格"
              type="number"
              :precision="2"
              :min="0"
              v-model.number="editQuery.productPrice"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="有效期:" prop="indate">
            <el-date-picker
              disabled
              style="width: 90%"
              v-model="editQuery.indate"
              type="datetime"
              format="yyyy 年 MM 月 dd 日 HH 点 mm 分 ss 秒"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择有效期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="存储条件:" prop="ylqxzcrbarmc">
            <el-input style="width: 90%" size="small" placeholder="请输入存储条件"
                      disabled
                      v-model.trim="editQuery.storageCondition"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="运输条件:" prop="transportCondition">
            <el-input style="width: 90%" size="small" placeholder="请输入运输条件"
                      disabled
                      v-model.trim="editQuery.transportCondition"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="el-col">
          <el-form-item label="统一社会信用号:" prop="tyshxydm">
            <el-input style="width: 90%" size="small" placeholder="请输入统一社会信用号"
                      disabled
                      v-model.trim="editQuery.tyshxydm"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="药品状态:" prop="majorStatus">
            <el-select v-model="editQuery.majorStatus" style="width: 90%" placeholder="选择药品状态" clearable disabled>
              <el-option label="停用" :value="0"></el-option>
              <el-option label="在用" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import { thirdSysDetail } from '@/api/basic/udiRelevance'
import { filterByUuid } from '@/api/basic/udiInfo'

export default {
  name: 'UdiRlDetail',
  props: {
    editQuery: {
      type: Object,
      required: true
    },
    type: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      sysList: [],
      checked: false,
      detailList: [],
      loading: false,
      query: {
        uuid: '',
        id: ''
      }
    }
  },
  methods: {
    getThirdSysDetail() {
      if (this.type == 1) {
        this.query.id  = this.editQuery.rlId; // 如果 type 为 1，使用 relId
      } else {
        this.query.id = this.editQuery.id; // 否则使用 id
      }
      this.query.id =
      thirdSysDetail( this.query)
        .then((response) => {
          this.loading = false
          this.sysList = response.data.list || []
        })
        .catch(() => {
          this.loading = false
          this.sysList = []
        })
    },
    //获取层级标识
    getDetailList() {
      this.loading = true
      if (this.editQuery.uuid != null) {
          this.query.uuid =  this.editQuery.uuid
        //根据 type 的值决定 id 的来源
        if (this.type == 1) {
          this.query.id  = this.editQuery.rlId; // 如果 type 为 1，使用 relId
        } else {
          this.query.id = this.editQuery.id; // 否则使用 id
        }
        filterByUuid(this.query)
          .then((response) => {
            this.loading = false
            this.detailList = response.data || []
          })
          .catch(() => {
            this.loading = false
            this.detailList = []
          })
      }
    }
  },

  created() {
    if (this.editQuery.isUseDy == 1) {
      this.checked = true
    }
    let ttquery = {
      id: this.editQuery.id,
      page: 1,
      limit: 10
    }
    // this.getDetailList(ttquery)
    this.getDetailList();
    this.getThirdSysDetail()
  }
}
</script>

<style scoped>

</style>
