<template>
  <div>
    <el-form :model="formData" style="width: 100%;" ref="dataForm" :rules="formRules"
             label-width="auto"
    >
      <el-row :gutter="24">
        <el-col :span="12" class="el-col">
          <el-form-item label="槽位编码:" prop="code" class="query-form-item">
            <el-input
              v-model="formData.code" style="width: 80%"
              auto-complete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="槽位名称:" class="query-form-item">
            <el-input
              v-model="formData.name" style="width: 80%"
              auto-complete="off"
              placeholder="请输入槽位名称"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12" class="el-col">
          <el-form-item label="槽位高度:" prop="queueHeight" class="query-form-item">
            <!--<el-input-->
            <!--  v-model="formData.queueHeight" style="width: 80%"-->
            <!--  auto-complete="off"-->
            <!--  placeholder="请输入槽位高度"-->
            <!--&gt;</el-input>-->
            <el-input-number :min="0" v-model="formData.queueHeight" style="width: 80%"
                             placeholder="请输入槽位高度" :disabled="type == 2"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="最大存药数:" prop="maxDrugCount" class="query-form-item">
            <!--<el-input-->
            <!--  v-model="formData.maxDrugCount" style="width: 80%"-->
            <!--  auto-complete="off"-->
            <!--  placeholder="请输入最大存药数"-->
            <!--&gt;</el-input>-->
            <el-input-number :min="0" v-model="formData.maxDrugCount" style="width: 80%"
                             placeholder="请输入最大存药数" :disabled="type == 2"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12" class="el-col">
          <el-form-item label="所属货架编码:" prop="freightCode" class="query-form-item">
            <el-input
              v-model="formData.freightCode" style="width: 80%"
              auto-complete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="所属摆货层编码:" prop="layerCode" class="query-form-item">
            <el-input
              v-model="formData.layerCode" style="width: 80%"
              auto-complete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12" class="el-col">
          <el-form-item label="所属灯组标签:" prop="mac" class="query-form-item">
            <el-input
              v-model="formData.mac" style="width: 80%"
              auto-complete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="是否特殊槽位:" prop="specialQueue" class="query-form-item">
            <el-select v-model="formData.specialQueue" style="width: 80%" placeholder="是否特殊槽位" :disabled="type == 2">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="el-row">
        <el-col class="el-col">
          <el-form-item label="备注:" prop="remark" class="query-form-item">
            <el-input
              v-model="formData.remark"
              style="width: 91.3%"
              auto-complete="off"
              :disabled="type == 2"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider  ></el-divider>
      <el-row :gutter="24">
        <el-col :span="12" class="el-col">
          <el-form-item label="是否开启库存预警:" prop="enableRemind" class="query-form-item">
            <el-select v-model="formData.enableRemind" style="width: 80%" placeholder="是否开启库存预警" :disabled="type == 2">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="el-col">
          <el-form-item label="库存预警数量:" prop="remindCount" class="query-form-item" >
            <el-input-number :min="0" v-model="formData.remindCount" style="width: 80%"
                             placeholder="请输入预警数量" :disabled="type == 2"
            ></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-collapse v-model="activeNames">
        <el-collapse-item name="0" v-if="type != 1">
          <template slot="title">
            <p class="form-title">药品信息</p>
          </template>
          <el-table :data="productList" style="width: 100%;   margin-bottom: 8px" key="2" border>
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="药品标识" prop="nameCode" show-overflow-tooltip></el-table-column>
            <el-table-column label="药品名称" prop="cpmctymc" show-overflow-tooltip></el-table-column>
            <el-table-column label="医保编码" prop="ybbm" show-overflow-tooltip></el-table-column>
            <el-table-column label="包装规格" prop="bzgg" show-overflow-tooltip></el-table-column>
            <el-table-column label="批准文号" prop="zczbhhzbapzbh" show-overflow-tooltip></el-table-column>
            <el-table-column label="制剂规格" prop="prepnSpec" show-overflow-tooltip></el-table-column>
            <el-table-column label="生产企业" prop="manufactory" show-overflow-tooltip></el-table-column>
            <!--<el-table-column label="操作">-->
            <!--  <template slot-scope="scope">-->
            <!--    <el-button type="text" @click="addSelectErp(scope.row)" :disabled="scope.row.thirdId==rowData.nameCode">-->
            <!--      关联-->
            <!--    </el-button>-->
            <!--    <el-button type="text" @click.native.stop="removeErp(scope.row)"-->
            <!--               :disabled=" scope.row.thirdId==null || scope.row.thirdId==''"-->
            <!--    >解绑-->
            <!--    </el-button>-->
            <!--  </template>-->
            <!--</el-table-column>-->
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="1" v-if="type != 1">
          <template slot="title">
            <p class="form-title">灯组信息</p>
          </template>
          <el-table :data="ledList" style="width: 100%;   margin-bottom: 8px" key="2" border>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="灯组标签" prop="mac" ></el-table-column>
            <el-table-column label="led灯编号" prop="ledNum" ></el-table-column>
            <el-table-column label="红灯状态" prop="red">
              <template slot-scope="scope">
                <span v-if="scope.row.red === 0"><el-tag type="info">关闭</el-tag></span>
                <span v-else><el-tag type="success">开启</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column label="黄灯状态" prop="orange" >
              <template slot-scope="scope">
                <span v-if="scope.row.orange === 0"><el-tag type="info">关闭</el-tag></span>
                <span v-else><el-tag type="success">开启</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column label="蓝灯状态" prop="blue" >
              <template slot-scope="scope">
                <span v-if="scope.row.blue === 0"><el-tag type="info">关闭</el-tag></span>
                <span v-else><el-tag type="success">开启</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column label="绿灯状态" prop="green" >
              <template slot-scope="scope">
                <span v-if="scope.row.green === 0"><el-tag type="info">关闭</el-tag></span>
                <span v-else><el-tag type="success">开启</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark"></el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin-top: 50px" v-if="type == 1">
      <el-button @click.native="hideForm">取消</el-button>
      <el-button
        type="primary"
        @click.native="formSubmit()"
      >提交
      </el-button
      >
    </div>
  </div>
</template>

<script>
import { updateQueue} from '@/api/basic/workPlace/SysWorkplaceQueue'
import { getUdiInfos } from '@/api/basic/product/udiRelevance'
import { isBlank } from '@/utils/strUtil'
import { getLeds } from '@/api/collect/collectLedGroup'

export default {
  props: {
    closeDialog: {
      type: Function,
      required: true
    },
    rowData: {
      type: Object,
      required: true
    },
    type: {
      type: Object,
      required: true
    },

  },
  data() {
    return {
      formData: {
        code: '',
        name: '',
        remark: '',
        workPlaceIdFk: '',
        queueHeight: null,
        maxDrugCount:null,
        freightCode:"",
        layerCode: "",
        mac: "",
        specialQueue: null,
        remindCount:null,
        enableRemind: null,
      },
      freightData: null,
      workPlaces: [],
      formRules: {
        queueHeight: [
          { required: true, message: '请输入槽位高度', trigger: 'blur' }
        ],
        maxDrugCount: [
          { required: true, message: '请输入最大存药数量', trigger: 'blur' }
        ],
        specialQueue: [
          { required: true, message: '请选择是否特殊药品', trigger: 'blur' }
        ],
        remindCount: [
          { required: true, message: '请输入预警数量', trigger: 'blur' }
        ],
        enableRemind: [
          { required: true, message: '请是否开启预警警告', trigger: 'blur' }
        ],
      },
      activeNames: ['0', '1'],
      productList:[],
      drugQuery: {
        productsType: 2,
        page: 1,
        limit: 20,
        nameCode: ""
      },
      ledQuery:{
        page: 1,
        limit: 10,
        mac:"",
        isBind: 0,
      },
      ledList:[]
    }
  },
  methods: {
    formSubmit(){
      this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            updateQueue(this.formData).then(res => {
              if (res.code == 20000){
                this.$message.success("更新成功")
              }else {
                this.$message.error("更新失败")
              }
              this.closeDialog()
            })
          }
      })
    },
    hideForm(){
      this.closeDialog()
    },
    getDrugList() {
      this.drugQuery.nameCode = this.rowData.nameCode
      getUdiInfos(this.drugQuery)
        .then((response) => {
          this.productList = response.data.list || []
        })
        .catch(() => {
        })
    },
    getLedList(){
      this.ledQuery.mac = this.rowData.mac
      getLeds(this.ledQuery).then(res => {
        if (res.code == 20000){
          this.ledList = res.data.list || []
        }else {
          this.ledList = []
        }
      })
    },
  },
  created() {
    if (this.rowData != null){
      this.formData = this.rowData
    }
    if (!isBlank(this.rowData.nameCode)){
      this.getDrugList()
    }
    if (!isBlank(this.rowData.mac)){
      this.getLedList()
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
}

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