<template>
  <el-dialog width="854px"
             :title="titles"
             :visible.sync="visible"
             :close-on-click-modal="isClose"
             :close-on-press-escape="isClose">

    <el-tabs v-model="activeName">
      <el-tab-pane label="基础数据" name="first">
        <div>
          <!--:rules="rules"-->
          <el-form :model="form" ref="form" :rules="rules" label-width="100px"
                   style="display: flex;flex-wrap: wrap;justify-content: space-between;">
            <el-form-item label="耗材名称 : " prop="good_name" style="width:100%">
              <el-input v-model="form.good_name" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="拼音 : " prop="pinyin" style="width:50%">
              <el-input v-model="form.pinyin" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="五笔 : " prop="wubi" style="width:50%">
              <el-input v-model="form.wubi" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="耗材种类 : " prop="good_kind">
              <el-select v-model="form.good_kind" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in getDictionaryDataConfig('system','good_kind')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="耗材类型 : " prop="good_type_id">
              <el-select v-model="form.good_type_id" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in form.goodType"
                  :key="index"
                  :label="item.type_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="医保等级 : " prop="medical_insurance_level">
              <el-select v-model="form.medical_insurance_level" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item, index in getDictionaryDataConfig('system','medical_insurance_level')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="规格型号 : " prop="specification_name" style="width:100%">
              <el-input v-model="form.specification_name" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="生产厂商 : " prop="manufacturer" style="width:100%">
              <el-select v-model="form.manufacturer" style="width:100%" placeholder="请选择">
                <el-option
                  v-for="item,index in form.manufacturers"
                  :key="index"
                  :label="item.manufacturer_name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位 : " prop="good_unit">
              <el-select v-model="form.good_unit" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in form.goodUnit"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="零价 : " prop="retail_price">
              <el-input v-model="form.retail_price" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="最新进价 : " prop="buy_price">
              <el-input v-model="form.buy_price" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="库存警戒 : " prop="stock_warn_count">
              <el-input v-model="form.stock_warn_count" style="width:160px;" placeholder="" maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="医保编码 : " prop="medical_insurance_number">
              <el-input v-model="form.medical_insurance_number" style="width:160px;" placeholder=""
                        maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="是否特病目录:" prop="is_special_diseases">
              <el-select v-model="form.is_special_diseases" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否备案:" prop="is_record">
              <el-select v-model="form.is_record" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="统计分类:" prop="statistics_category">
              <el-select v-model="form.statistics_category" style="width:160px;" placeholder="请选择">
                <el-option
                  v-for="item,index in getDictionaryDataConfig('system','statistics_category')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <!--<el-form-item label="代理商 : " prop="name" style="visibility: hidden;">-->
            <!--<el-input style="width:160px;" v-model="form.agent" placeholder="" maxlength="30"></el-input>-->
            <!--</el-form-item>-->


            <el-form-item label="状态 : " prop="good_status">
              <!--<el-radio-group v-model="form.good_status">-->
              <!--<el-radio :label="1">停用</el-radio>-->
              <!--<el-radio :label="2">收费</el-radio>-->
              <!--</el-radio-group>-->

              <el-checkbox-group v-model="good_status">
                <el-checkbox label="停用">停用</el-checkbox>
                <el-checkbox label="收费">收费</el-checkbox>
              </el-checkbox-group>
            </el-form-item>


            <el-form-item label="备注 : " prop="name" style="width:100%;">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="扩展数据" name="second">
        <el-form :model="form" label-width="120px"
                 style="display: flex;flex-wrap: wrap;justify-content: space-between;">
          <el-form-item label="默认使用数量:" prop="name">
            <el-input v-model="form.default_count" style="width:160px;" placeholder="" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="标签:" prop="sign">
            <el-select v-model="form.sign" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item,index in getDictionaryDataConfig('system','sign')"
                :key="index"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否默认:" prop="is_default">
            <el-select v-model="form.is_default" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否收费常用项:" prop="is_charge_use">
            <el-select v-model="form.is_charge_use" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否收费预估项:" prop="is_charge_predict">
            <el-select v-model="form.is_charge_predict" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否统计工作量:" prop="is_statistics_work">
            <el-select v-model="form.is_statistics_work" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收费项目排序:" prop="sort">
            <el-input v-model="form.sort" style="width:160px;" placeholder="" maxlength="30"></el-input>
          </el-form-item>
          <el-form-item label="是否常用医嘱:" prop="is_doctor_use">
            <el-select v-model="form.is_doctor_use" style="width:160px;" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="代理商:" prop="agent">
            <el-input v-model="form.agent" style="width:160px;" placeholder="" maxlength="30"></el-input>
          </el-form-item>
          <!--<el-form-item label="耗材编码:" prop="name">-->
          <!--<el-input v-model="form.name" style="width:160px;" placeholder="" maxlength="30"></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="耗材编号:" prop="good_number">
            <el-input v-model="form.good_number" style="width:160px;" placeholder="" maxlength="30"></el-input>
          </el-form-item>

        </el-form>
      </el-tab-pane>
    </el-tabs>


    <span slot="footer" class="dialog-footer">
    <el-button @click="cancle('form')">取 消</el-button>
    <el-button type="primary" @click="comfirm('form')">保 存</el-button>
  </span>
  </el-dialog>

</template>


<script>
  import { getDictionaryDataConfig } from '@/utils/data'

  export default {
    name: 'goodInfoDailog',
    data() {
      return {
        visible: false,
        formTitle: '',
        activeName: 'first',
        options: [{
          value: '1',
          label: '是'
        }, {
          value: '2',
          label: '否'
        }],
        good_unit: '',
        isClose: false,
        good_status: [],
        size: 11,
        visibility: false,
        form: {
          good_id: '',
          specification_name: '',
          buy_price: '',
          sell_price: '',
          remark: '',
          manufacturer: '',
          good_type_id: '',
          dealer: '',
          expiry_date_warn_day_count: '',
          stock_warn_count: '',
          is_reuse: '2',
          good_name: '',
          pinyin: '',
          wubi: '',
          good_kind: '',
          medical_insurance_level: '',
          good_unit: '',
          retail_price: '',
          medical_insurance_number: '',
          is_special_diseases: '',
          is_record: '',
          statistics_category: '',
          agent: '',
          good_status: '',
          default_count: '',
          sign: '',
          is_default: '',
          is_charge_use: '',
          is_charge_predict: '',
          is_statistics_work: '',
          sort: '',
          is_doctor_use: '',
          good_number: ''
        },

        rules: {
          specification_name: [
            { required: true, message: '请输入规格型号', trigger: 'blur' }
          ],
          good_type_id: [
            { required: true, message: '请选择商品类型', trigger: 'change' }
          ],
          good_name: [
            { required: true, message: '请输入耗材名称', trigger: 'blur' }
          ],
          pinyin: [
            { required: true, message: '请输入拼音', trigger: 'blur' }
          ],
          wubi: [
            { required: true, message: '请输入五笔', trigger: 'blur' }
          ],
          good_kind: [
            { required: true, message: '请选择耗材种类', trigger: 'change' }
          ],
          medical_insurance_level: [
            { required: true, message: '请输入医保等级', trigger: 'blur' }
          ],
          manufacturer: [
            { required: true, message: '请选择生产厂商', trigger: 'blur' }
          ], good_unit: [
            { required: true, message: '请选择单位', trigger: 'blur' }
          ], retail_price: [
            { required: true, message: '请输入零价', trigger: 'blur' }
          ], stock_warn_count: [
            { required: true, message: '请输入库存警戒', trigger: 'blur' }
          ]

        }
      }
    },
    props: {

      titles: {
        type: String,
        default: ''
      },
      formValue: {
        type: Object
      },
      isCreated: {
        type: Number,
        default: 1

      }

    },
    methods: {
      getDictionaryDataConfig(module, filed_name) {
        return getDictionaryDataConfig(module, filed_name)

      },
      show(id,form) {
        this.visible = true
        this.good_status =[]
        if (id == 0) {

          var tempform = {
              good_id: '',
              specification_name: '',
              buy_price: '',
              sell_price: '',
              remark: '',
              manufacturer: '',
              good_type_id: '',
              dealer: '',
              expiry_date_warn_day_count: '',
              stock_warn_count: '',
              is_reuse: '2',
              good_name: '',
              pinyin: '',
              wubi: '',
              good_kind: '',
              medical_insurance_level: '',
              good_unit: '',
              retail_price: '',
              medical_insurance_number: '',
              is_special_diseases: '',
              is_record: '',
              statistics_category: '',
              agent: '',
              good_status: '',
              default_count: '',
              sign: '',
              is_default: '',
              is_charge_use: '',
              is_charge_predict: '',
              is_statistics_work: '',
              sort: '',
              is_doctor_use: '',
              good_number: ''
            }
          this.good_status = []
          for (let key in tempform) {
            this.form[key] = tempform[key]
          }
        } else {
          for (let key in form) {
            this.form[key] = form[key]
          }
          if (this.form.good_status.length > 0) {
            for (let i = 0; i < this.form.good_status.split(",").length; i++) {
              this.good_status.push(this.form.good_status.split(',')[i])
            }
          }
        }

      }, hide() {
        this.visible = false
      },
      cancle: function(formName) {
        this.$emit('dialog-cancle', this.getValue())
      },
      comfirm: function(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$emit('dialog-comfirm', this.getValue())
          }
        })
      },
      getValue: function() {
        const form = {}
        form['specification_name'] = this.form.specification_name
        form['good_unit'] = this.form.good_unit
        form['buy_price'] = this.form.buy_price
        form['sell_price'] = this.form.sell_price
        form['remark'] = this.form.remark
        form['manufacturer'] = this.form.manufacturer
        form['dealer'] = this.form.dealer
        form['expiry_date_warn_day_count'] = this.form.expiry_date_warn_day_count
        form['stock_warn_count'] = this.form.stock_warn_count
        form['is_reuse'] = this.form.is_reuse
        form['isCreated'] = this.isCreated
        form['good_id'] = this.form.good_type_id
        form['good_name'] = this.form.good_name
        form['pinyin'] = this.form.pinyin
        form['wubi'] = this.form.wubi
        form['good_kind'] = this.form.good_kind
        form['medical_insurance_level'] = this.form.medical_insurance_level
        form['manufacturer'] = this.form.manufacturer
        form['retail_price'] = this.form.retail_price
        form['medical_insurance_number'] = this.form.medical_insurance_number
        form['is_special_diseases'] = this.form.is_special_diseases
        form['is_record'] = this.form.is_record
        form['statistics_category'] = this.form.statistics_category
        // form['good_status'] = this.form.good_status
        form['default_count'] = this.form.default_count
        form['sign'] = this.form.sign
        form['is_default'] = this.form.is_default
        form['is_charge_use'] = this.form.is_charge_use
        form['is_charge_predict'] = this.form.is_charge_predict
        form['is_statistics_work'] = this.form.is_statistics_work
        form['sort'] = this.form.sort
        form['is_doctor_use'] = this.form.is_doctor_use
        form['agent'] = this.form.agent
        form['good_number'] = this.form.good_number
        form['good_status'] = this.good_status.join(',')

        return form
      }, changeSelected: function(val) {
        console.log(val)
      }
    },
    watch: {
      visible(val) {
        this.form = this.formValue
        this.good_unit = this.formValue.good_unit
        if (this.isCreated == 1) {
          this.good_unit = ''
        }
      }
    }
  }

</script>

<style scoped>

</style>
