<template>
  <div>
    <el-card class="el-card">
      <el-form
        :inline="true"
        :model="subFilterQuery"
        style="display: flex"
        size="mini"
      >
        <el-form-item prop="productId">
          <el-autocomplete
            class="inline-input"
            v-model="prName"
            :fetch-suggestions="querySearch"
            placeholder="器械通用名称"
            @select="handleSelect"
            clearable
          ></el-autocomplete>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-input
            v-model="subFilterQuery.specification"
            placeholder="规格型号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="status">
          <el-select
            v-model="subFilterQuery.status"
            placeholder="请选择上传状态"
          >
            <el-option label="全部" value=""></el-option>
            <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-form-item>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onSubReset"
            ></el-button>
            <el-button type="primary" icon="search" @click="getSubList"
              >查询</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        @row-click="intentSubIdDetail"
        highlight-current-row
        :data="subList"
        border
        style="width: 100%"
      >
        <el-table-column label="序号" type="index"></el-table-column>

        <!-- <el-table-column prop="status" label="状态 " width="100">
          <template slot-scope="scope">
            <span>{{ postStatus[scope.row.status] }}</span>
          </template>
        </el-table-column> -->

        <el-table-column
          prop="mainProductName"
          :show-overflow-tooltip="true"
          label="器械通用名称 "
          width="100"
        >
        
        </el-table-column>

        <el-table-column
          prop="specification"
          label="规格型号"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="deviceDescription"
          label="产品描述"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="regcardCodes"
          label="注册证号/备案凭证号"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="注册/备案凭人名称"
          :show-overflow-tooltip="true"
        >
        </el-table-column>

        <el-table-column prop="deviceType" label="器械类别"> </el-table-column>
        <el-table-column prop="productCode" label="分类编码"> </el-table-column>
        <el-table-column prop="productType" label="产品类别"> </el-table-column>
        <el-table-column prop="SPTM" label="商品条码"> </el-table-column>
      </el-table>

      <el-pagination
        :page-size="subFilterQuery.limit"
        @current-change="handleSubCurrentChange"
        layout="prev, pager, next"
        :total="subTotal"
      ></el-pagination>
    </el-card>

    <el-card class="el-card">
      <div
        slot="header"
        style="font-weight: bold; justify-content: space-between; display: flex"
      >
        <span>产品标识信息</span>
        <el-button type="primary" size="small" @click="handleAddClick(null)"
          >添加</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="subIdList"
        border
        style="width: 100%; height: 100%"
      >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column prop="Status" label="状态 " width="100">
          <template slot-scope="scope">
            <span>{{ postStatus[scope.row.Status] }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="issuingAgency"
          label="发码机构编码名称"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="primaryDeviceId"
          label="最小销售单元产品标识"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="publishDate"
          label="产品标识发布日期 "
          :show-overflow-tooltip="true"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="pkgQuantity"
          label="最小销售单元中使用单元数量"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="useUnitDeviceId"
          label="使用单元产品标识 "
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="isSameRegDI"
          label="是否与注册/备案产品标识一致 "
          width="200"
        >
          <template slot-scope="scope">
            <span>{{ isTip[scope.row.isSameRegDI] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="registrationDI"
          label="注册/备案产品标识"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="isDirectMark"
          label="是否有本体直接标识 "
          width="140"
        >
          <template slot-scope="scope">
            <span>{{ isTip[scope.row.isDirectMark] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isSameDeviceId"
          label="本体标识与最小销售单元标识是否一致"
          width="240"
        >
          <template slot-scope="scope">
            <span>{{ isTip[scope.row.isSameDeviceId] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="directMarkDI" label="本体产品标识" width="120">
        </el-table-column>
        <el-table-column
          prop="isLotBatch"
          label="生产标识是否包含批号"
          width="150"
        >
          <template slot-scope="scope">
            <span>{{ isTip[scope.row.isLotBatch] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isSerialNumber"
          label="生产标识是否包含序列号"
          width="160"
          ><template slot-scope="scope">
            <span>{{ isTip[scope.row.isSerialNumber] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isManufacturingDate"
          label="生产标识是否包含生产日期"
          width="170"
          ><template slot-scope="scope">
            <span>{{ isTip[scope.row.isManufacturingDate] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="isExpirationDate"
          label="生产标识是否包含失效日期"
          width="170"
          ><template slot-scope="scope">
            <span>{{ isTip[scope.row.isExpirationDate] }}</span>
          </template>
        </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"
               v-bind:disabled="scope.row.Status != 1"
              @click.native.stop="deleteDialog(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        :title="formMap[formName]"
        :visible.sync="addDialogVisible"
        width="85%"
        v-if="addDialogVisible"
      >
        <modifyDi
          :productDetail="productDetail"
          v-on:closeModifyDi="closeModifyDi"
        ></modifyDi>
      </el-dialog>

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

<script>
import {
  listUdiProduct,
  allUdiProduct,
  addUdiProduct,
  modifyUdiProduct,
  deleteUdiProduct,
} from "../../api/publish/udiProduct";

import {
  listUdiSubProduct,
  addUdiSubProduct,
  modifyUdiSubProduct,
  deleteUdiSubProduct,
} from "../../api/publish/udiSubProduct";
import store from "../../store/index";

import {
  listDeviceId,
  addDeviceId,
  modifyDeviceId,
  deleteDeviceId,
} from "../../api/publish/udiSubProductID";
import modifyDi from "./modifyDeviceId";
export default {
  data() {
    return {
      filterQuery: {
        productName: "",
        page: 1,
        limit: 5,
        // customerId: store.getters.customerId,
      },

      subIdQuery: {
        subProductId: "",
        page: 1,
        limit: 20,
        // customerId: store.getters.customerId,
      },
      currentProductName: "",

      subFilterQuery: {
        specification: "",
        productId: "",
        page: 1,
        status: null,
        limit: 5,
        // customerId: store.getters.customerId,
      },

      formName: null,

      formMap: {
        add: "新增标识",
        edit: "标识维护",
      },

      formVisible: false,
      list: [],
      total: 0,
      prName: "",
      subList: [],
      subTotal: 0,

      subIdList: [],
      subIdTotal: 0,

      isTip: {
        2: "否",
        1: "是",
      },

      productId: "",
      mainProduct: "",
      addDialogVisible: false,
      currentProduct: "",
      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: "", //产品信息
        SPTM: "",
      },
      postStatus: {
        1: "未上传",
        2: "已上传未提交",
        3: "已上传已提交",
      },
    };
  },

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

    onSubReset() {
      this.subFilterQuery = {
        specification: "",
        productId: this.productId,
        page: 1,
        limit: 5,
        // customerId: store.getters.customerId,
      };
      // this.getSubList();
    },

    //获取产品列表
    getList() {
      this.loading = true;
      allUdiProduct()
        .then((response) => {
          this.loading = false;
          this.list = response.data;
          this.total = response.data.total || 0;
          // if (this.list != null && this.list.length > 0) {
          //   this.subFilterQuery.productId = this.list[0].value;
          //   this.mainProduct = this.list[0];
          //   this.getSubList();
          // }
          this.getSubList();
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },
    getSubList() {
      this.loading = true;
      if (this.prName == "") {
        this.subFilterQuery.productId = "";
      }
      // if (
      //   this.subFilterQuery.productId == "" ||
      //   this.subFilterQuery.productId == null
      // ) {
      //   this.$message.warning("请选择企业产品");
      //   this.loading = false;
      // } else {
      listUdiSubProduct(this.subFilterQuery)
        .then((response) => {
          this.loading = false;
          this.subList = response.data.list || [];
          this.subTotal = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.subList = [];
          this.subTotal = 0;
        });
      // }
    },
    getSubIdList() {
      this.loading = true;
      listDeviceId(this.subIdQuery)
        .then((response) => {
          this.loading = false;
          this.subIdList = response.data.list || [];
          this.subIdTotal = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.subIdList = [];
          this.subIdTotal = 0;
        });
    },
    //父类操作
    intentMainPrduct(value) {
      console.log(value);
      console.log(this.list);
      this.mainProduct = value
        ? this.list.find((ele) => ele.value === value)
        : "";
      console.log(this.mainProduct);
    },
    handleAddClick(row) {
      if (row == null) {
        this.formName = "add";
        if (this.currentProduct.UDI_SubProductOID == null) {
          this.$message.warning("请先选择产品");
          return;
        }
        this.productDetail = {
          UDI_DeviceIdOID: "", //
          primaryDeviceId: "", //最小销售单元产品标识
          publishDate: "", //产品标识发布日期
          pkgQuantity: "1", //最小销售单元中使用单元数量
          useUnitDeviceId: "", //使用单元产品标识
          deviceCarrier: "", //标识载体（可多选）
          isSameRegDI: "1", //是否与注册/备案产品标识一致
          registrationDI: "", //注册/备案产品标识
          isDirectMark: "2", //是否有本体直接标识
          isSameDeviceId: "2", //本体标识与最小销售单元标识是否一致
          directMarkDI: "", //本体产品标识
          isLotBatch: "1", //生产标识是否包含批号
          isSerialNumber: "1", //   生产标识是否包含序列号
          isManufacturingDate: "1", //生产标识是否包含生产日期
          isExpirationDate: "1", //生产标识是否包含失效日期
          Status: "", //状态
          deviceRecordKey: "", //
          TYSHXYDM: "", //
          IndentCode: "", //厂商识别码
          UDI_SubProduct_FK: "", //子类信息外籍
          UDI_DeviceId_FK: "", //产品标识信息
          UDI_StandAgency_FK: "", //发码机构
          UDI_FacIdentCode_FK: "", //厂商识别码
          UDI_Product_FK: "", //产品信息
        };
        this.productDetail.UDI_SubProduct_FK = this.currentProduct.UDI_SubProductOID;
        this.productDetail.UDI_Product_FK = this.currentProduct.UDI_Product_FK;
      } else {
        this.formName = "edit";
        this.productDetail = row;
      }
      this.productDetail.SPTM = this.currentProduct.SPTM;
      this.addDialogVisible = true;
    },

    onAddSubmit() {},

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

    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getSubIdList();
    },

    intentSubIdDetail(row) {
      this.subIdQuery.subProductId = row.UDI_SubProductOID;
      this.getSubIdList();

      this.currentProduct = row;
    },

    handleSubCurrentChange(val) {
      this.subFilterQuery.page = val;
      this.getSubList();
    },
    change() {},
    querySearch(queryString, cb) {
      console.log(queryString);
      var restaurants = this.list;
      console.log(this.list);
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据

      var data = [];
      for (var i = 0; i < results.length; i++) {
        let query = {
          value: results[i].label,
        };
        data.push(query);
      }
      console.log(data);
      cb(data);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.label.indexOf(queryString) === 0;
      };
    },
    handleSelect(item) {
      console.log(item);
      this.mainProduct = item
        ? this.list.find((ele) => ele.label === item.value)
        : "";
      console.log(item);
      this.subFilterQuery.productId = item
        ? this.list.find((ele) => ele.label === item.value).value
        : "";
      console.log(this.subFilterQuery.productId);
    },
    closeModifyDi(val) {
      this.addDialogVisible = false;
      if (val) {
        this.$message.success("保存成功！");
        this.getSubIdList();
      } else if (val == null) {
      } else {
        this.$message.error("保存失败！");
      }
    },
    deleteDialog(row) {
      this.$confirm("此操作将删除该产品标识信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          let tquery = {
            id: row.UDI_DeviceIdOID + "",
          };
          console.log(tquery.id);
          deleteDeviceId(tquery)
            .then((response) => {
              if (response.code == 20000) {
                this.$message.success("删除成功！");
                this.getSubIdList();
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
  },
  mounted() {},
  components: {
    modifyDi,
  },
  created() {
    this.getList();
  },
};
</script>
<style>
.edit-text {
  width: 100%;
  font-size: 12px;
  margin-top: 12px;
  font-family: "Microsoft YaHei";
  color: #000000;
}
</style>