<template>
  <div>
    <el-form
      :inline="true"
      :model="subFilterQuery"
      style="display: flex; margin-top: 15px"
      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 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-input
          v-model="subFilterQuery.specification"
          placeholder="规格型号"
        ></el-input>
      </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="getSubIdList"
            >查询</el-button
          >

          <el-button
            type="primary"
            icon="search"
            @click="postAdd"
            :loading="postLoading"
            >新增上传</el-button
          >
          <el-button
            type="primary"
            icon="search"
            @click="postModify"
            :loading="modifyLoading"
            >修改上传</el-button
          >
          <el-button
            type="primary"
            icon="search"
            @click="postChange"
            :loading="changeLoading"
            >变更上传</el-button
          >

          <el-button type="primary" icon="search" @click="postSumit"
            >提交等待发布</el-button
          >
          <!-- <el-button type="primary" icon="search">立即发布</el-button> -->
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-dialog
      title="变更说明"
      :visible.sync="formVisible"
      width="35%"
      top="5vh"
    >
      <el-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入内容"
        v-model="bgsm"
      >
      </el-input>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click.native="onPostSubmit()"
          >变更上传</el-button
        >
        <el-button @click.native="cancelAdd" size="small">取消</el-button>
      </div>
    </el-dialog>
    <el-table
      v-loading="loading"
      :data="subList"
      border
      @selection-change="handleSelectionChange"
      style="width: 100%; height: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <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="productName"
        label="器械通用名称"
        width="200"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
      <el-table-column
        prop="specification"
        label="规格型号"
        width="200"
        :show-overflow-tooltip="true"
      >
      </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="产品标识发布日期 " width="180">
      </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>
    <el-pagination
      :page-size="subFilterQuery.limit"
      @current-change="handleSubCurrentChange"
      layout="prev, pager, next"
      :total="subTotal"
    ></el-pagination>
  </div>
</template>

<script>
import { allUdiProduct } from "../../api/publish/udiProduct";
import { postIdentify, postKeyIdentify } from "../../api/publish/postIdentify";
import store from "../../store/index";

import {
  listDeviceId,
  addDeviceId,
  modifyDeviceId,
  deleteDeviceId,
} from "../../api/publish/udiSubProductID";
import modifyDi from "./modifyDeviceId";
export default {
  data() {
    return {
      currentProductName: "",

      subFilterQuery: {
        specification: "",
        Status: null,
        productId: "",
        page: 1,
        limit: 10,
        // customerId: store.getters.customerId,
      },
      postLoading: false,
      modifyLoading: false,
      changeLoading: false,
      formVisible: false,
      list: [],
      total: 0,
      multipleSelection: [],
      subList: [],
      subTotal: 0,
      bgsm: "",
      subIdList: [],
      subIdTotal: 0,
      prName: "",
      isTip: {
        2: "否",
        1: "是",
      },

      postStatus: {
        1: "未上传",
        2: "已上传未提交",
        3: "已上传已提交",
      },

      productId: "",
      addDialogVisible: false,
      currentProduct: "",
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });

      // this.getList();
    },

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

    //获取产品列表
    getList() {
      this.loading = true;
      allUdiProduct()
        .then((response) => {
          this.loading = false;
          this.list = response.data;
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    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.subFilterQuery.productId = item
        ? this.list.find((ele) => ele.label === item.value).value
        : "";
      console.log(this.subFilterQuery.productId);
    },

    //获取标识列表
    getSubIdList() {
      this.loading = true;
      if (this.prName == "") {
        this.subFilterQuery.productId = "";
      }
      listDeviceId(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;
        });
    },

    postAdd() {
      this.postLoading = true;
      this.postDraft("add");
    },
    postModify() {
      this.modifyLoading = true;
      this.postDraft("modify");
    },
    postChange() {
      this.formVisible = true;
     
    },
    onPostSubmit() {
       if (this.bgsm == null || this.bgsm == "") {
        this.$message.warning("请输入变更说明！");
        this.hideLoading();
        return;
      }
      this.changeLoading = true;
      this.postDraft("change");
    },
    hideLoading() {
      this.postLoading = false;
      this.modifyLoading = false;
      this.changeLoading = false;
    },
    //草稿上传
    postDraft(addType) {
      let ids = [];
      for (var item of this.multipleSelection) {
        // item代表数组里面的元素
        console.log(item); // 1, 2, 3
        ids.push(item.UDI_DeviceIdOID);
      }
      if (ids.length < 1) {
        this.$message.warning("请选择要上传的标识");
        this.hideLoading();
        return;
      }
     
      let tquery = {
        ids: ids,
        uploadType: addType,
        bgsm: this.bgsm,
      };
      postIdentify(tquery)
        .then((response) => {
          this.hideLoading();
          if (response.code == 20000) {
            this.$message.success("已提交草稿上传！");
            this.getSubIdList();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.hideLoading();
        });
    },

    //上传提交
    postSumit() {
      this.loading = true;
      let ids = [];
      for (var item of this.multipleSelection) {
        // item代表数组里面的元素
        console.log(item); // 1, 2, 3
        ids.push(item.UDI_DeviceIdOID);
        if (this.multipleSelection.Status == 1) {
          this.$message.warning("所选标识包含未草稿上传");
        }
      }
      if (ids.length < 1) {
        this.$message.warning("请选择要上传的标识");
        return;
      }
      let tquery = {
        ids: ids,
      };
      postKeyIdentify(tquery)
        .then((response) => {
          this.loading = false;
          if (response.code == 20000) {
            this.$message.success("上传成功");
            this.getSubIdList();
          } else {
            this.$message.error(response.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    //列表选中
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },

    handleAddClick(row) {
      if (row == null) {
        if (this.currentProduct.UDI_SubProductOID == null) {
          this.$message.warning("请先选择产品");
          return;
        }
        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: "", //产品信息
        };
        this.productDetail.UDI_SubProduct_FK = this.currentProduct.UDI_SubProductOID;
        this.productDetail.UDI_Product_FK = this.currentProduct.UDI_Product_FK;
      } else this.productDetail = row;

      this.addDialogVisible = true;
    },

    onAddSubmit() {},

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

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

    intentDetail(row) {
      this.subFilterQuery.productId = row.UDI_ProductOID;
      this.currentProductName = row.productName;
      this.getSubIdList();
    },

    intentSubIdDetail(row) {
      this.subIdQuery.productId = row.UDI_SubProductOID;
      this.getSubIdList();
      this.currentProduct = row;
    },

    handleSubCurrentChange(val) {
      this.subFilterQuery.page = val;
      this.getSubIdList();
    },
  },
  mounted() {},
  components: {
    modifyDi,
  },
  created() {
    this.getList();
    this.getSubIdList();
  },
};
</script>
<style>
.edit-text {
  width: 100%;
  font-size: 12px;
  margin-top: 12px;
  font-family: "Microsoft YaHei";
  color: #000000;
}
</style>