<template>
  <div>
    <el-form :model="editLogin" label-width="120px">
      <el-card>
        <el-row>
          <el-col :span="6">
            <div class="text item">
              <el-form-item label="产品名称" prop="unitId">
                <el-input v-model="editLogin.cpmctymc" placeholder="请输入产品名称" style="width: 100%"
                          size="small"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11" style="margin-left: 20px">
            <el-button type="primary" size="small" icon="search" @click="onModifySelect">查询</el-button>
          </el-col>
        </el-row>
        <el-divider style="margin: 15px"></el-divider>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" style="float: right;margin-bottom: 12px;margin-right: 20px" size="small"
                       icon="search" @click="selectProduct">选入产品
            </el-button>
          </el-col>
        </el-row>


        <el-table v-loading="loading" :data="list" border highlight-current-row style="width: 100%">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="产品DI" prop="nameCode" ></el-table-column>
          <el-table-column label="产品编码" prop="thirdId" ></el-table-column>
          <el-table-column label="产品名称" prop="cpmctymc" ></el-table-column>
          <el-table-column label="规格型号" prop="ggxh"></el-table-column>
          <el-table-column label="计量单位" prop="measname"></el-table-column>
          <el-table-column label="数量" prop="count">
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.count"
                        placeholder="请输入数量" style="width: 80%"
                        type='number'
                        :disabled="scope.row.index !== selectedIndex"
                        oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="生产企业" prop="ylqxzcrbarmc"></el-table-column>
          <el-table-column label="注册/备案号" prop="zczbhhzbapzbh"></el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button type="text" size="small" :disabled="scope.row.index === selectedIndex"
                         @click.native.stop="rowChange(scope.row)">编辑
              </el-button>
              <el-button type="text" size="small" :disabled="scope.row.index !== selectedIndex" @click.stop="true"
                         @click.native="tableCountChange(scope.row)">保存
              </el-button>
              <el-button type="text" size="small" @click.native.stop="delectModifyClick(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="editLogin.page"
        :limit.sync="editLogin.limit"
        @pagination="handleErpPageChange"

    ></pagination>

    <el-dialog
        title="选入产品详情"
        :visible.sync="selectFormVisible"
        append-to-body
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="80%"
        :before-close="closeProudDialog"
        v-if="selectFormVisible"
    >
      <destinySelectProduct
          :editQuery="editLogin"
          :closeDialog="closeProudDialog"
      ></destinySelectProduct>
    </el-dialog>

  </div>
</template>

<script>


import {
  addModeldestiny,
  editModeldestiny,
  filterDestinyDelect,
  delectModeldestinyProduct, uploadModeldestinyProduct
} from "@/api/basic/basicDestinyRel";
import {isBlank} from "@/utils/strUtil";
import destinySelectProduct from "@/views/basic/destiny/destinySelectProduct";
import {deleteCompanyCert} from "@/api/purchase/companyCert";
import {updateDetail} from "@/api/purchase/purApply";

export default {
  name: 'destinyModelSelectProduct',
  props: {
    closeDialog: {
      type: Function,
      required: true,
    },
    editQuery: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      editLogin: {
        id: null,
        cpmctymc: null,
        ids: [],
        page: 1,
        limit: 10,
      },
      total: 0,
      selectedIndex: '',
      loading: false,
      list: [],
      selectFormVisible: false
    };
  },
  methods: {
    selectProduct() {
      this.selectFormVisible = true;
    },
    closeProudDialog() {
      this.selectFormVisible = false;
      this.filterDestinyDelect();
    },
    filterDestinyDelect() {
      filterDestinyDelect(this.editLogin)
          .then((response) => {
            this.loading = false;
            if (response.code === 20000) {
              this.list = response.data.list || [];
              this.total = response.data.total || 0;
            } else {
              this.$message.error(response.message);
              this.list = [];
              this.total = 0;
            }
          })
          .catch(() => {
            this.loading = false;
            this.list = [];
            this.total = 0;
          });
    },
    onModifySelect() {
      this.filterDestinyDelect();
    },
    handleErpPageChange(val) {
      this.editLogin.page = val.page;
      this.filterDestinyDelect();
    },
    delectModifyClick(row) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        let tquery = {
          id: row.deId
        };
        delectModeldestinyProduct(tquery)
            .then((response) => {
              this.loading = false;
              if (response.code === 20000) {
                this.filterDestinyDelect();
                this.$message({
                  type: "success",
                  message: "删除成功！",
                });
              } else {
                this.$message.error(response.message);
              }
            })
            .catch(() => {
              this.certLoading = false;
            });
      }).catch(() => {
      });
    },
    rowChange(val) {
      this.selectedIndex = val.index
    },
    tableCountChange(row) {
      if (this.$isNotBlank(row)) {
        var query = {
          id: row.deId,
          count: row.count
        }
        uploadModeldestinyProduct(query);
        this.selectedIndex = null
      }
    },
  },
  components: {
    destinySelectProduct
  },
  created() {
    if (!isBlank(this.editQuery.id)) {
      this.editLogin.id = this.editQuery.id
      this.filterDestinyDelect();
    }
  }
};
</script>

<style scoped>

</style>
