<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-04-10 15:29:25
 * @Description:
-->
<template>
  <div class="baseTable">
    <div style="margin-bottom:20px">
      <el-tooltip content="选择工序,新增到表格" placement="top">
        <el-select
          size="small"
          v-model="processId"
          @change="addProcess"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option v-for="item in processArr" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-tooltip>
    </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="workingProcedureName" align="center" label="工序名称"> </el-table-column>
      <el-table-column prop="workingProcedureCode" 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"
            style="color:red"
            size="small"
            @click="deleteHandle(scope.row.id, scope.row.workingProcedureName)"
          >
            <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:#57e1ff"
            :disabled="scope.$index === 0"
            size="small"
            @click="setSequence(scope.$index + 1, true)"
          >
            <el-tooltip class="item" effect="dark" content="上移" placement="top">
              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#上箭头"></use></svg>
            </el-tooltip>
          </el-button>
          <el-button
            type="text"
            style="color:#57e1ff"
            size="small"
            :disabled="scope.$index === dataList.length - 1"
            @click="setSequence(scope.$index + 1, false)"
          >
            <el-tooltip class="item" effect="dark" content="下移" placement="top">
              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#下箭头"></use></svg>
            </el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    productId: {
      type: String,
    },
  },
  data() {
    return {
      dataListLoading: false,
      dataList: [],
      processArr: [],
      processId: "",
    };
  },
  methods: {
    getArr() {
      this.$http
        .get("/basic/workingProcedure/page", {
          params: {
            page: 1,
            limit: 500,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.processArr = res.data.list;
        })
        .catch(() => {});
    },
    getList() {
      this.dataListLoading = true;
      this.$http
        .get(
          `/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${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;
        });
    },
    init() {
      this.getArr();
      this.dataListLoading = false;
      this.$nextTick(() => {
        this.processId = "";
        if (this.productId) {
          this.getList();
        } else {
          this.dataList = [];
        }
      });
    },
    addProcess() {
      if (this.processId) {
        this.$confirm(`确定新增此工序?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$http
            .post("/basic/productWorkingprocedureRelation/save", {
              workingProcedureId: this.processId,
              productId: this.productId,
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.getList();
                },
              });
            })
            .catch(() => {});
        });
      }
    },
    setSequence(index, isUp) {
      var url = "";
      if (isUp) {
        url = "/basic/productWorkingprocedureRelation/sequenceUp";
      } else {
        url = "/basic/productWorkingprocedureRelation/sequenceDown";
      }
      this.$http
        .put(url, {
          index: index,
          productId: this.productId,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              this.getList();
            },
          });
        })
        .catch(() => {});
    },
    // 删除
    deleteHandle(id, name) {
      this.$confirm(`确定对[名称=${name}]进行删除操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete("/basic/productWorkingprocedureRelation", { data: [id] })
            .then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getList();
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
        })
        .catch(() => {});
    },
  },
};
</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>