<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-04-10 15:46:38
 * @Description:
-->
<template>
  <div class="baseTable">
    <div style="float:right;margin-bottom:10px">
      <el-button size="small" type="primary" @click="addOrUpdateHandle()">
        新增
      </el-button>
    </div>
    <el-table
      :data="dataList"
      :header-cell-style="{
        background: '#F2F4F9',
        color: '#606266'
      }"
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column type="index" header-align="center" align="center" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="code" align="center" label="编号"> </el-table-column>
      <el-table-column prop="name" align="center" label="名称"></el-table-column>
      <el-table-column prop="type" align="center" label="特性类型">
        <template slot-scope="scope">
          <span>{{ scope.row.type === 2 ? "计数" : "计量" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="defectLevel" align="center" label="缺陷等级">
        <template slot-scope="scope">
          <span>{{
            scope.row.defectLevel === 1
              ? "致命缺陷"
              : scope.row.defectLevel === 2
              ? "严重缺陷"
              : "轻微缺陷"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="measureToolName" align="center" label="量具"></el-table-column>
      <el-table-column prop="unitName" align="center" label="单位"></el-table-column>
      <el-table-column prop="specifications" align="center" label="规格"></el-table-column>
      <el-table-column prop="lsl" align="center" label="LSL"></el-table-column>
      <el-table-column prop="sl" align="center" label="SL"></el-table-column>
      <el-table-column prop="usl" align="center" label="USL"></el-table-column>
      <el-table-column prop="remark" align="center" label="备注"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-编辑"></use></svg>
            </el-tooltip>
          </el-button>
          <el-button
            type="text"
            style="color:red"
            size="small"
            @click="deleteHandle(scope.row.id, scope.row.name)"
          >
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-删除"></use></svg>
            </el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <three-add-or-update
      v-if="threeAddOrUpdateVisible"
      ref="threeAddOrUpdate"
      @refreshThreeDataList="getThreeDataList"
    ></three-add-or-update>
  </div>
</template>

<script>
import threeAddOrUpdate from "./productList-three-add";
export default {
  props: {
    productId: {
      type: String,
    },
  },
  data() {
    return {
      dataListLoading: false,
      threeAddOrUpdateVisible: false,
      dataList: [],
    };
  },
  components: {
    threeAddOrUpdate,
  },
  methods: {
    init() {
      this.dataListLoading = false;
      this.$nextTick(() => {
        if (this.productId) {
          this.getThreeDataList();
        }
      });
    },
    getThreeDataList() {
      this.dataListLoading = true;
      this.$http
        .post("/basic/productFeatures/getProductFeaturesByProductId", {
          id: this.productId,
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.dataList = [];
            return this.$message.error(res.msg);
          }
          this.dataList = res.data;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.threeAddOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.threeAddOrUpdate.init(id, this.productId);
      });
    },
    // 删除
    deleteHandle(id, name) {
      this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete("/basic/productFeatures", { data: [id] }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getThreeDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmit() {
      this.$emit("nextStep");
    },
  },
};
</script>

<style>
.baseTable .el-table__body tr.current-row>td.el-table__cell {
    background-color: #EAF1FC;
}
.baseTable .el-table .el-table__cell {
  padding: 0;
  height: 35px;
}
</style>