<template>
  <div>
    <el-card style="margin: 5px;margin-top: -20px">
      <el-form :model="formData" ref="dataForm" label-width="100px" style="margin-bottom: -15px">
        <el-button-group style="display: flex;margin: 0px 0 10px 80%; height: 35px">
          <el-button
            type="primary"
            @click.native="saveOrder()"
          >保存
          </el-button>
        </el-button-group>

        <el-row>
          <el-col :span="10">
            <el-form-item class="query-form-item" label="设备号:">
              <el-input v-model="formData.code"
                        auto-complete="off"
                        :disabled="true"
                        style="width: 90%"
                        clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="query-form-item" label="养护日期:">
              <el-input v-model="formData.createTime"
                        auto-complete="off"
                        :disabled="true"
                        style="width: 90%"
                        clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item class="query-form-item" label="领用部门:">
              <el-input v-model="formData.fromDeptName"
                        auto-complete="off"
                        :disabled="true"
                        style="width: 90%"
                        clearable
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item class="query-form-item" label="养护人:">
              <el-input v-model="formData.createUserName"
                        auto-complete="off"
                        :disabled="true"
                        style="width: 90%"
                        clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-table :data="detailList" style="width: 100%;margin-top: 20px;"
                  highlight-current-row
                  border max-height="300" height="300">
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column label="条码" width="180" prop="code" show-overflow-tooltip></el-table-column>
          <el-table-column width="150" label="产品通用名" prop="productName" show-overflow-tooltip></el-table-column>
          <el-table-column width="150" label="规格型号" prop="ggxh" show-overflow-tooltip></el-table-column>
          <el-table-column width="150" label="批次号" prop="batchNo"></el-table-column>
          <el-table-column width="150" label="养护数量" prop="count"></el-table-column>
          <el-table-column width="150" label="养护状态" prop="maStatus">
            <template slot-scope="scope">
              <el-radio :disabled="scope.$index !== currentIndex" v-model="scope.row.maStatus"
                        :label="0">未养护
              </el-radio>
              <el-radio :disabled="scope.$index !== currentIndex" v-model="scope.row.maStatus"
                        :label="1">已养护
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column width="150" label="设备状态" prop="deviceStatus">
            <template slot-scope="scope">
              <el-radio :disabled="scope.$index !== currentIndex" v-model="scope.row.deviceStatus" :label="1">
                正常
              </el-radio>
              <el-radio :disabled="scope.$index !== currentIndex" v-model="scope.row.deviceStatus" :label="0">
                异常
              </el-radio>
            </template>
          </el-table-column>
          <el-table-column width="200" label="养护备注" prop="remark">
            <template slot-scope="scope">
              <el-input :disabled="scope.$index !== currentIndex" v-model="scope.row.remark"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="生产日期(yyMMdd)" prop="produceDate"></el-table-column>
          <el-table-column label="失效日期(yyMMdd)" prop="expireDate"
                           show-overflow-tooltip></el-table-column>
          <el-table-column label="注册/备案凭证号" prop="zczbhhzbapzbh"
                           show-overflow-tooltip></el-table-column>
          <el-table-column label="生产企业" prop="ylqxzcrbarmc"
                           show-overflow-tooltip></el-table-column>
        </el-table>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import {addDeviceMAOrder, filterDetail} from "@/api/dev/deviceMAOrder";

export default {
  props: {
    deleteInvMAOrder: {
      type: Object,
      required: true
    },
    closeDialog: {
      type: Function,
      required: true
    },
    deviceMAOrder: {
      type: Object,
      required: true
    },
  },
  name: "DeviceMAOrderModify",
  data() {
    return {
      collectOrderList: [],
      collectOrderTotal: 0,
      formData: {
        code: null,
        createUser: null,
        createTime: null,
        fromDeptCode: null,
        fromDeptName: null,
        fromInvCode: null,
        fromInvName: null,
        fromInvSpaceCode: null,
        fromInvSpaceName: null,
        remark: null,
        maStatus: null,
        deviceStatus: null,
        receiveOrderId: null,
        createUserName: null,
      },
      detailList: []
    };
  },
  methods: {
    saveOrder() {
      if (this.detailList[0].maStatus === 0) {
        this.$message.error("请完成当前设备养护！");
        return;
      }
      this.formData.remark = this.detailList[0].remark;
      this.formData.maStatus = this.detailList[0].maStatus;
      this.formData.deviceStatus = this.detailList[0].deviceStatus;
      addDeviceMAOrder(this.formData).then((res) => {
        if (res.code === 20000) {
          this.closeDialog();
        } else {
          this.$message.error(res.message);
        }
      }).catch((error) => {
        this.$message.error(error.message);
      });
    },
    getMAOrderDetailList(code) {
      let params = {code: code};
      filterDetail(params).then((res) => {
        this.detailList.push(res.data);
      })
    }
  },
  mounted() {
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
  },
  created() {
    this.deviceMAOrder
    this.formData = {
      code: this.deviceMAOrder.code,
      createUser: this.$store.getters.adminId,
      createUserName: this.$store.getters.name,
      deptName: this.deviceMAOrder.deptName,
      createTime: this.deviceMAOrder.createTime,
      deptCode: this.deviceMAOrder.deptCode,
      collOrderId: this.deviceMAOrder.collOrderId
    };
    this.getMAOrderDetailList(this.deviceMAOrder.code);
  },
};
</script>

<style type="text/scss" lang="scss">
</style>

