<template>
  <el-form :model="newProductData" label-width="120px">
    <el-row type="flex">
      <el-col :span="11" class="el-col">
        <el-form-item label="产品名称:" prop="name">
          <el-input style="width: 90%" size="small" placeholder="请输入产品名称" v-model.trim="newProductData.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="11" class="el-col">
        <el-form-item label="收费项目编码:">
          <el-input
            style="width: 70%"
            size="small"
            placeholder="选择项目收费编码"
            v-model="newProductData.payFeeCode"
          ></el-input>
          <el-button type="primary" size="mini"  style="margin-left: 10px" @click="selectPayFeecode">选入</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="11" type="flex">
        <el-form-item label="耗材分类:" prop="hcType">
          <el-select v-model="newProductData.hcType" style="width: 90%" placeholder="选择耗材分类" clearable>
            <el-option label="高值耗材" :value="1"></el-option>
            <el-option label="普通耗材" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11" type="flex">
        <el-form-item label="产品属性:" prop="name">
          <el-select v-model="newProductData.attributeType" 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="spec">
          <el-input style="width: 90%" size="small" placeholder="请输入规格型号" v-model.trim="newProductData.spec"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="11" class="el-col">
        <el-form-item label="计量单位:" prop="measname">
          <el-input style="width: 90%" size="small" placeholder="请输入计量单位" v-model.trim="newProductData.measname"
          ></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="manufactory">
          <el-input style="width: 90%" size="small" placeholder="请输入生产企业" v-model.trim="newProductData.manufactory"
          ></el-input>
        </el-form-item>
      </el-col>
      <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-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.ylqxzcrbarmc"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="11" class="el-col">
        <el-form-item label="注册人英文名称:" prop="ylqxzcrbarywmc">
          <el-input style="width: 90%" size="small" placeholder="请输入注册人英文名称"
                    v-model.trim="newProductData.ylqxzcrbarywmc"
          ></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>
<!--          <el-input style="width: 90%" size="small" placeholder="请输入分类编码" v-model.trim="newProductData.flbm"></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="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="sptm">
          <el-input style="width: 90%" size="small" placeholder="请输入一级分类名称" v-model.trim="newProductData.catalogname1" disabled></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.catalogname2" disabled></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="sptm">
          <el-input style="width: 90%" size="small" placeholder="请输入三级分类名称" v-model.trim="newProductData.catalogname3" disabled></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.matrial" disabled></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="qxlb">
          <el-input style="width: 90%" size="small" placeholder="请输入器械类别" v-model.trim="newProductData.qxlb"></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>
    <div style="text-align: center; margin-bottom: 10px;">
      <el-button type="primary" @click="saveNewProduct" :loading="saveLoading">提交</el-button>
      <el-button type="primary" @click="closeAddDialog">取消</el-button>
    </div>
    <el-dialog
      title="收费项目选入"
      :visible.sync="tollProjectDialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="70%"
      v-if="tollProjectDialogVisible"
      append-to-body
    >
      <!--<product-single-edit-->
      <!--  :editQuery="editSingleFormat"-->
      <!--&gt;</product-single-edit>-->
      <selectmedicalSuppliesDialog
        :getData="getData"
      >
      </selectmedicalSuppliesDialog>
      <!--<div style="text-align: center;margin-top: 12px">-->
      <!--  <el-button type="primary" size="small" icon="search" @click="onAddSingleSubmit(false)" :loading="addLoading"-->
      <!--  >提交-->
      <!--  </el-button>-->
      <!--  <el-button type="primary" size="small" icon="search" @click="cancelDialog"-->
      <!--  >取消-->
      <!--  </el-button>-->
      <!--</div>-->
    </el-dialog>
  </el-form>



</template>

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

export default {
  name: 'productAdd',
  props: {
    closeUdi: {
      type: Function,
      required: true
    }
  },
  components: {selectmedicalSuppliesDialog},
  data() {
    return {
      ybHcflDetail:{},
      newProductData: {
        name: null,
        spec: null,
        code: null,
        measname: null,
        manufactory: null,
        registerNo: null,
        ylqxzcrbarmc: null,
        ylqxzcrbarywmc: null,
        cplb: null,
        flbm: null,
        sptm: null,
        ybbm: null,
        tyshxydm: null,
        qxlb: null,
        cpms: null,
        attributeType: null,
        hcType: null,
        requireScanCode: null,
      },
      thirdSys: [],
      classifyList: [],
      saveLoading: false,
      tollProjectDialogVisible: 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.$isBlank(this.newProductData.name)) {
        this.$message.warning('产品名称不能为空！')
        return
      }
      if (this.$isBlank(this.newProductData.hcType)) {
        this.$message.warning('耗材类型不能为空')
        return
      }
      if (this.$isBlank(this.newProductData.spec)) {
        this.$message.warning('规格型号不能为空')
        return
      }
      if (this.$isBlank(this.newProductData.measname)) {
        this.$message.warning('计量单位不能为空！')
        return
      }
      if (this.$isBlank(this.newProductData.manufactory)) {
        this.$message.warning('生产企业不能为空！')
        return
      }
      if (this.$isBlank(this.newProductData.registerNo)) {
        this.$message.warning('注册证号不能为空！')
        return
      }
      if (this.$isBlank(this.newProductData.attributeType)) {
        this.$message.warning('产品属性不能为空！')
        return
      }
      this.saveLoading = true
      this.newProductData.productsType = 1
      addProduct(this.newProductData).then((res) => {
        this.saveLoading = false
        if (res.code == 20000) {
          this.$message.success('添加成功')
          //清空弹窗数据
          this.$emit('closeUdi', true)
        } else {
          this.$message.error(res.message)
        }
      }).catch((error) => {
        this.saveLoading = false
        this.$message.error(error.message)
      })
    },
    closeAddDialog() {
      this.$emit('closeUdi', false)
    },
    /**
     * 选择收费项目
     */
    selectPayFeecode(){
      this.tollProjectDialogVisible = true
    },
    getData(data){
      this.tollProjectDialogVisible = false
      this.newProductData.payFeeCode = data.medCatalogCode
    }
  },
  created() {
  },
  directives: {
    'debounce-input': {
      inserted(el, binding) {
        let timeout
        el.addEventListener('input', () => {
          clearTimeout(timeout)
          timeout = setTimeout(() => {
            binding.value()
          }, parseInt(binding.arg) || 300)
        })
      }
    }
  }
}
</script>

<style scoped>
</style>
