<template>
  <div>
    <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
      <el-form-item class="query-form-item">
        <el-input
          v-model="filterQuery.productName"
          placeholder="规格型号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            @click="onReset"
          ></el-button>
          <el-button type="primary" icon="search" @click="getList"
            >查询</el-button
          >
          <el-button
            type="primary"
            icon="search"
            @click.native="handleAddClick(null)"
            >新增规格型号</el-button
          >
        </el-button-group>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="list"
      border
      style="width: 100%; height: 100%"
    ><el-table-column
        prop="specification"
        label="规格型号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="UDI_StandAgency_FK"
        label="发码机构编码名称"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="primaryDeviceId"
        label="最小销售单元产品标识"
        width="100"
      >
      </el-table-column>
      <el-table-column prop="publishDate" label="产品标识发布日期 " width="100">
      </el-table-column>
      <el-table-column
        prop="pkgQuantity"
        label="最小销售单元中使用单元数量"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="useUnitDeviceId"
        label="使用单元产品标识 "
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="isSameRegDI"
        label="是否与注册/备案产品标识一致 "
        width="120"
      >
      </el-table-column>
      <el-table-column prop="registrationDI" label="注册/备案产品标识" width="140">
      </el-table-column>
      <el-table-column prop="isDirectMark" label="是否有本体直接标识 " width="120">
      </el-table-column>
      <el-table-column
        prop="isSameDeviceId"
        label="本体标识与最小销售单元标识是否一致"
        width="120"
      >
      </el-table-column>
      <el-table-column prop="directMarkDI" label="本体产品标识" width="120">
      </el-table-column>
      <el-table-column
        prop="isLotBatch"
        label="生产标识是否包含批号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="isSerialNumber"
        label="生产标识是否包含序列号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="isManufacturingDate"
        label="生产标识是否包含生产日期"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="isExpirationDate"
        label="生产标识是否包含失效日期"
        width="120"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleAddClick(scope.row)" type="text" size="small"
            >修改</el-button
          >
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="addDialogVisible"
      width="85%"
      v-if="addDialogVisible"
    >
      <modifyDi :productDetail="productDetail"></modifyDi>
    </el-dialog>

    <el-pagination
      :page-size="filterQuery.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {
  listDeviceId,
  addDeviceId,
  modifyDeviceId,
  deleteDeviceId,
} from "../../api/publish/udiSubProductID";
import store from "../../store/index";

import modifyDi from "./modifyDeviceId";

export default {
  data() {
    return {
      filterQuery: {
        specification: "",
        productId: "",
        page: 1,
        limit: 20,
        // customerId: store.getters.customerId,
      },
      editQuery: {
        productName: "",
        Text1: "",
        UDI_ProductOID: "",
      },
      formVisible: false,
      list: [],
      total: 0,
      formName: null,
      loading: false,
      formMap: {
        add: "新增产品信息",
        edit: "编辑产品信息",
      },
      productId: "",
      addDialogVisible: false,
      productDetail: {
        UDI_DeviceIdOID: "", //
        primaryDeviceId: "", //最小销售单元产品标识
        publishDate: "", //产品标识发布日期
        pkgQuantity: "", //最小销售单元中使用单元数量
        useUnitDeviceId: "", //使用单元产品标识
        deviceCarrier: "", //标识载体（可多选）
        isSameRegDI: "", //是否与注册/备案产品标识一致
        registrationDI: "", //注册/备案产品标识
        isDirectMark: "", //是否有本体直接标识
        isSameDeviceId: "", //本体标识与最小销售单元标识是否一致
        directMarkDI: "", //本体产品标识
        isLotBatch: "", //生产标识是否包含批号
        isSerialNumber: "", //   生产标识是否包含序列号
        isManufacturingDate: "", //生产标识是否包含生产日期
        isExpirationDate: "", //生产标识是否包含失效日期
        Status: "", //状态
        deviceRecordKey: "", //
        TYSHXYDM: "", //
        IndentCode: "", //厂商识别码
        UDI_SubProduct_FK: "", //子类信息外籍
        UDI_DeviceId_FK: "", //产品标识信息
        UDI_StandAgency_FK: "", //发码机构
        UDI_FacIdentCode_FK: "", //厂商识别码
        UDI_Product_FK: "", //产品信息
      },
      rules: {
        productName: [
          { required: true, message: "请输用户名称", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        specification: "",
        productId: this.productId,
        page: 1,
        limit: 20,
        // customerId: store.getters.customerId,
      };
      this.getList();
    },

    getList() {
      this.loading = true;
      listDeviceId(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    handleForm(row) {
      this.formVisible = true;
      this.formName = "add";

      if (row !== null) {
        this.formName = "edit";
        this.editQuery.productName = row.productName;
        this.editQuery.Text1 = row.Text1;
        this.editQuery.UDI_ProductOID = row.UDI_ProductOID;
        console.log(this.editQuery.UDI_ProductOID + "---" + row.udi_ProductOID);
      }
    },

    deleteOrders(data) {
      this.loading = true;
      let tquery = {
        id: data.UDI_DeviceIdOID + "",
      };

      deleteDeviceId(tquery)
        .then((response) => {
          if (response.code == 20000) {
            this.$message.success("删除成功！");
            this.getList();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {});
    },

    handleAddClick(row) {
      this.addDialogVisible = true;
      if (row == null) {
        this.productDetail = {
           UDI_DeviceIdOID: "", //
        primaryDeviceId: "", //最小销售单元产品标识
        publishDate: "", //产品标识发布日期
        pkgQuantity: "", //最小销售单元中使用单元数量
        useUnitDeviceId: "", //使用单元产品标识
        deviceCarrier: "", //标识载体（可多选）
        isSameRegDI: "", //是否与注册/备案产品标识一致
        registrationDI: "", //注册/备案产品标识
        isDirectMark: "", //是否有本体直接标识
        isSameDeviceId: "", //本体标识与最小销售单元标识是否一致
        directMarkDI: "", //本体产品标识
        isLotBatch: "", //生产标识是否包含批号
        isSerialNumber: "", //   生产标识是否包含序列号
        isManufacturingDate: "", //生产标识是否包含生产日期
        isExpirationDate: "", //生产标识是否包含失效日期
        Status: "", //状态
        deviceRecordKey: "", //
        TYSHXYDM: "", //
        IndentCode: "", //厂商识别码
        UDI_SubProduct_FK: "", //子类信息外籍
        UDI_DeviceId_FK: "", //产品标识信息
        UDI_StandAgency_FK: "", //发码机构
        UDI_FacIdentCode_FK: "", //厂商识别码
        UDI_Product_FK: "", //产品信息
        };
      } else this.productDetail = row;
    },

    onAddSubmit() {},

    cancelAdd() {
      this.addDialogVisible = false;
    },

    deleteDialog(rowId) {
      this.$confirm(
        "此操作将删除产品信息以及关联的子类信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteOrders(rowId);
        })
        .catch(() => {});
    },

    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },
  },
  mounted() {},
  components: {
    modifyDi,
  },
  created() {
    let query = this.$route.query;
    this.filterQuery.productId = query.id;
    this.productId = query.id;
    this.getList();
  },
};
</script>
<style>
.edit-text {
  width: 100%;
  font-size: 12px;
  margin-top: 12px;
  font-family: "Microsoft YaHei";
  color: #000000;
}
</style>