<template>
  <div>
    <el-form :model="newProductData" :rules="formRules" label-width="120px" ref="dataForm">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template slot="title">
            <p class="form-title">药品层级</p>
          </template>
          <el-table
            v-loading="loading"
            :data="detailList"
            style="width: 100%;"
            border
            key="3"
            @current-change="handleDetail"
          >
            <el-table-column label="药品标识" prop="nameCode" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input v-model="productData.nameCode"
                          placeholder="请输入药品标识" style="width: 100%"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="包装级别" prop="packLevel" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input v-model="productData.packLevel"
                          placeholder="请输入包装级别" style="width: 100%"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="包装单位" prop="packUnit" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input v-model="productData.packUnit"
                          placeholder="请输入包装单位" style="width: 100%"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="包含下级数量" prop="bhxjsl" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-input v-model="productData.bhxjsl"
                          type="number"
                          placeholder="请输入包含下级数量" style="width: 100%"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180px">
              <template slot-scope="scope">
                <el-button type="text" @click.native="save(productData)">保存</el-button>
                <el-button type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <p class="form-title">基本信息</p>
          </template>
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="药品通用名称:" prop="cpmctymc">
                <el-input style="width: 90%" size="small" placeholder="请输入药品通用名称"
                          v-model.trim="newProductData.cpmctymc"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="商品名称:" prop="spmc">
                <el-input style="width: 90%" size="small" placeholder="请输入商品名称"
                          v-model.trim="newProductData.spmc"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="包装规格:" prop="bzgg">
                <el-input style="width: 90%" size="small" placeholder="请输入包装规格"
                          v-model.trim="newProductData.bzgg"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="包装单位:" prop="packUnit">
                <el-input style="width: 90%" size="small" placeholder="请输入包装单位"
                          v-model.trim="newProductData.packUnit"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="制剂规格:" prop="prepnSpec">
                <el-input style="width: 90%" size="small" placeholder="请输入制剂规格"
                          v-model.trim="newProductData.prepnSpec"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="制剂单位:" prop="prepnUnit">
                <el-input style="width: 90%" size="small" placeholder="请输入制剂单位"
                          v-model.trim="newProductData.prepnUnit"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="包装材质:" prop="packMatrial">
                <el-input style="width: 90%" size="small" placeholder="请输入包装材质"
                          v-model.trim="newProductData.packMatrial"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="包装比例:" prop="packRatio">
                <el-input style="width: 90%" size="small" placeholder="请输入制剂单位"
                          v-model.trim="newProductData.packRatio"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="批准文号:" prop="registerNo">
                <el-input style="width: 90%" size="small" placeholder="请输入批准文号"
                          v-model.trim="newProductData.registerNo"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="生产企业:" prop="manufactory">
                <el-input style="width: 90%" size="small" placeholder="请输入生产企业"
                          v-model.trim="newProductData.manufactory"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="药品类型:" prop="physicType">
                <el-select v-model="newProductData.physicType" style="width: 90%" placeholder="选择药品类型" clearable>
                  <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="11" type="flex">
              <el-form-item label="药品分类:" prop="majorType">
                <el-select v-model="newProductData.majorType" style="width: 90%" placeholder="选择药品分类" clearable>
                  <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 type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="医保编码:" prop="ybbm">
                <el-input style="width: 90%" size="small" placeholder="请输入医保编码"
                          v-model.trim="newProductData.ybbm"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="医保分类:" prop="medicareType">
                <el-select v-model="newProductData.medicareType" style="width: 90%" placeholder="选择医保分类"
                           clearable
                >
                  <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 type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="药品价格:" prop="price">
                <el-input
                  style="width: 90%"
                  size="small"
                  placeholder="请输入药品价格"
                  type="number"
                  :precision="2"
                  :min="0"
                  v-model.number="newProductData.price"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="有效期:" prop="indate">
                <el-date-picker
                  style="width: 90%"
                  v-model="newProductData.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 type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="存储条件:" prop="ylqxzcrbarmc">
                <el-input style="width: 90%" size="small" placeholder="请输入存储条件"
                          v-model.trim="newProductData.storageCondition"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="运输条件:" prop="transportCondition">
                <el-input style="width: 90%" size="small" placeholder="请输入运输条件"
                          v-model.trim="newProductData.transportCondition"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--    <el-row type="flex">-->
          <!--      <el-col :span="11" class="el-col">-->
          <!--        <el-form-item label="产品类别:" prop="cplb">-->
          <!--          <el-input style="width: 90%" size="small" placeholder="请输入产品类别" v-model.trim="newProductData.cplb"></el-input>-->
          <!--        </el-form-item>-->
          <!--      </el-col>-->
          <!--      <el-col :span="11" class="el-col">-->
          <!--        <el-form-item label="分类编码:" prop="flbm">-->
          <!--          <el-select-->
          <!--            size="small"-->
          <!--            v-model="newProductData.flbm"-->
          <!--            filterable-->
          <!--            remote-->
          <!--            clearable="true"-->
          <!--            style="width: 90%"-->
          <!--            reserve-keyword-->
          <!--            placeholder="请选择"-->
          <!--            :loading="loading"-->
          <!--            @change="classifyChange()"-->
          <!--          >-->
          <!--            <el-option-->
          <!--              v-for="item in classifyList"-->
          <!--              :key="item.code"-->
          <!--              :label="item.name"-->
          <!--              :value="item.code">-->
          <!--              <span>{{ item.code }}</span>-->
          <!--              <span>{{ item.name }}</span>-->
          <!--            </el-option>-->
          <!--          </el-select>-->
          <!--&lt;!&ndash;          <el-input style="width: 90%" size="small" placeholder="请输入分类编码" v-model.trim="newProductData.flbm"></el-input>&ndash;&gt;-->
          <!--        </el-form-item>-->
          <!--      </el-col>-->
          <!--    </el-row>-->
          <!--<el-row type="flex">-->
          <!--  <el-col :span="11" class="el-col">-->
          <!--    <el-form-item label="商品条码:" prop="sptm">-->
          <!--      <el-input style="width: 90%" size="small" placeholder="请输入商品条码" v-model.trim="newProductData.sptm"></el-input>-->
          <!--    </el-form-item>-->
          <!--  </el-col>-->
          <!--  <el-col :span="11" class="el-col">-->
          <!--    <el-form-item label="医保编码:" prop="ybbm">-->
          <!--      <el-input style="width: 90%" size="small" placeholder="请输入医保编码" v-model.trim="newProductData.ybbm" v-debounce-input:500ms="getYbHcData" ></el-input>-->
          <!--    </el-form-item>-->
          <!--  </el-col>-->
          <!--</el-row>-->
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <el-form-item label="统一社会信用号:" prop="tyshxydm">
                <el-input style="width: 90%" size="small" placeholder="请输入统一社会信用号"
                          v-model.trim="newProductData.tyshxydm"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" class="el-col">
              <el-form-item label="药品状态:" prop="majorStatus">
                <el-select v-model="newProductData.majorStatus" style="width: 90%" placeholder="选择药品状态" clearable>
                  <el-option label="停用" :value="0"></el-option>
                  <el-option label="在用" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--<el-col :span="11" class="el-col">-->
            <!--  <el-form-item label="产品描述:" prop="cpms">-->
            <!--    <el-input style="width: 90%" type="textarea" size="mini" rows="1" placeholder="请输入产品描述"-->
            <!--              v-model.trim="newProductData.cpms"-->
            <!--    ></el-input>-->
            <!--  </el-form-item>-->
            <!--</el-col>-->
          </el-row>

          <el-row type="flex">
            <el-col :span="23" class="el-col">
              <el-form-item label="产品描述:" prop="cpms">
                <el-input style="width: 92%" type="textarea" size="mini" rows="3" placeholder="请输入产品描述"
                          v-model.trim="newProductData.cpms"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>

        <el-collapse-item name="3">
          <template slot="title">
            <p class="form-title">高级设置</p>
          </template>
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <span>参数</span>
            </el-col>
            <el-divider direction="vertical"></el-divider>
            <el-col :span="11" class="el-col">
              <span>设置</span>
            </el-col>
            <el-divider direction="vertical"></el-divider>
            <el-col :span="11" class="el-col">
              <span>参数设置说明</span>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="11" class="el-col">
              <span class="sptext">是否禁用</span>
            </el-col>
            <el-divider direction="vertical"></el-divider>
            <el-col :span="11" class="el-col">
              <!--<el-select v-model="newProductData.status" style="width: 65%" placeholder="状态" clearable>-->
              <!--  <el-option label="是" :value=1></el-option>-->
              <!--  <el-option label="否" :value=0></el-option>-->
              <!--</el-select>-->
              <el-switch
                v-model="status"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-col>
            <el-divider direction="vertical"></el-divider>
            <el-col :span="11" class="el-col">
              <span class="sptext">禁用后该药品将无法扫码使用</span>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div style="text-align: center; margin-top: 20px;">
      <el-button type="primary" @click="saveNewProduct" :loading="saveLoading">提交</el-button>
      <el-button type="primary" @click="closeAddDialog">取消</el-button>
    </div>
  </div>
</template>

<script>
import { getYbHcflDetail, addProduct, addDrug, updatetDrug } from '@/api/basic/product/udiRelevance'
import { filterClassify } from '@/api/purchase/classifyCode'

export default {
  name: 'drugAdd',
  props: {
    closeDialog: {
      type: Function,
      required: true
    },
    rowData: {
      type: Object,
      required: false
    },
    type: {
      type: Object,
      required: false
    }
  },
  data() {
    return {
      ybHcflDetail: {},
      productData: {},
      newProductData: {
        cpmctymc: null,
        bzgg: null,
        spmc: null,
        measname: null,
        manufactory: null,
        ybbm: null,
        cpms: null,

        productsType: 2,
        //高级设置默认开启扫码
        status: false
      },
      thirdSys: [],
      classifyList: [],
      saveLoading: false,
      activeNames: ['1', '2'],
      formRules: {
        cpmctymc: [
          { required: true, message: '请输入药品通用名', trigger: 'blur' }
        ],
        prepnSpec: [
          { required: true, message: '请输入制剂规格', trigger: 'blur' }
        ],
        packUnit: [
          { required: true, message: '请输入包装单位', trigger: 'blur' }
        ],
        prepnUnit: [
          { required: true, message: '请输入制剂单位', trigger: 'blur' }
        ],
        packRatio: [
          { required: true, message: '请输入包装比例', trigger: 'blur' }
        ],
        packMatrial: [
          { required: true, message: '请输入包装材质', trigger: 'blur' }
        ],
        registerNo: [
          { required: true, message: '请输入批准文号', trigger: 'blur' }
        ],
        manufactory: [
          { required: true, message: '生产企业不能为空', trigger: 'blur' }
        ],
        physicType: [
          { required: true, message: '药品类型不能为空', trigger: 'blur' }
        ],
        ybbm: [
          { required: true, message: '医保编码不能为空', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '药品价格不能为空', trigger: 'blur' }
        ]
      },
      detailList: [{}],
      status: false
    }

  },
  methods: {
    classifyChange() {
      this.classifyChange(this.newProductData.flbm)
      let item = this.classifyList.find(item => item.code == this.newProductData.flbm)
      if (item != null) this.newProductData.requireScanCode = item.requireScanCode
    },
    classifySearch(key) {
      let query = {
        key: key
      }
      filterClassify(query)
        .then(response => {
          this.loading = false
          this.classifyList = response.data.list || []
        })
        .catch(() => {
          this.loading = false
          this.classifyList = []
        })
    },
    getYbHcData() {
      let query = {
        specificationCode: this.newProductData.ybbm
      }
      getYbHcflDetail(query).then((response) => {
        if (response.code == 20000) {
          this.ybHcflDetail = response.data
          this.newProductData.catalogname1 = this.ybHcflDetail.catalogname1
          this.newProductData.catalogname2 = this.ybHcflDetail.catalogname2
          this.newProductData.catalogname3 = this.ybHcflDetail.catalogname3
          this.newProductData.matrial = this.ybHcflDetail.matrial
          this.$forceUpdate()
        } else {
          this.newProductData.catalogname1 = ''
          this.newProductData.catalogname2 = ''
          this.newProductData.catalogname3 = ''
          this.newProductData.matrial = ''
          this.$forceUpdate()
        }
      }).catch(() => {
      })

    },
    saveNewProduct() {
      this.addProductDialogVisible = false
      if (this.type == 1) {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.status) {
              this.newProductData.requireScanCode = 1
            } else {
              this.newProductData.requireScanCode = 0
            }
            this.saveLoading = true
            addDrug(this.newProductData).then((res) => {
              this.saveLoading = false
              if (res.code == 20000) {
                this.$message.success('添加成功')
                //清空弹窗数据
                this.closeDialog()
              } else {
                this.$message.error(res.message)
              }
            }).catch((error) => {
              this.saveLoading = false
              this.$message.error(error.message)
            })
          }
        })
      } else {
        if (this.status) {
          this.newProductData.requireScanCode = 1
        } else {
          this.newProductData.requireScanCode = 0
        }
        this.newProductData.uuid = this.rowData.uuid
        this.newProductData.nameCode = this.rowData.nameCode
        updatetDrug(this.newProductData).then(res => {
          this.saveLoading = false
          if (res.code == 20000) {
            //清空弹窗数据
            this.closeDialog()
            this.$message.success('成功')
          } else {
            this.$message.error('失败')
          }
        })
      }

    },
    closeAddDialog() {
      this.closeDialog()
    },
    save(row) {

    }
  },
  created() {
    if (this.rowData != null) {
      this.newProductData = this.rowData
      this.newProductData.cpmctymc = this.rowData.cpmctymc
      this.newProductData.registerNo = this.rowData.zczbhhzbapzbh
      if (this.rowData.requireScanCode == 1) {
        this.status = true
      } else {
        this.status = false
      }
    }
  },
  directives: {
    'debounce-input': {
      inserted(el, binding) {
        let timeout
        el.addEventListener('input', () => {
          clearTimeout(timeout)
          timeout = setTimeout(() => {
            binding.value()
          }, parseInt(binding.arg) || 300)
        })
      }
    }
  }
}
</script>

<style scoped>
.form-title {
  font-size: 16px;
  font-family: Noto Sans SC;
  font-weight: bold;
  color: #303133;
  padding-bottom: 17px;
  padding-top: 17px;
}

</style>
