<!-- 
    filename: detail.vue
    author: liubin
    date: 2023-07-19 09:00:13
    description: 
-->

<template>
  <el-dialog
    class="dialog-with-menu"
    :visible="dialogVisible"
    :destroy-on-close="false"
    @close="handleClose"
    :close-on-click-modal="false">
    <!-- title  -->
    <div slot="title" class="dialog-title">
      <h1 class="">查看详情</h1>
    </div>

    <div class="dialog-body__inner relative">
      <!-- menu  -->
      <el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick">
        <el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :name="tab.name">
          <span class="slot" slot="label">
            <i
              :class="{
                'el-icon-edit': tab.key === 'info',
                'el-icon-s-data': tab.key === 'attr',
                'el-icon-folder-opened': tab.key === 'attachment',
              }"></i>
            {{ tab.name }}
          </span>

          <!-- 表单标签页 -->
          <div v-if="tab.key === 'info'" key="tech-info">
            <!-- form  -->
            <el-form ref="dataForm" :model="dataForm" v-loading="loading">
              <el-row :gutter="20">
                <el-col>
                  <el-form-item label="工艺编码" prop="code" :rules="rules.code">
                    <el-input v-model="dataForm.code" clearable disabled />
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="备注" prop="remark" :rules="rules.remark">
                    <el-input v-model="dataForm.remark" clearable disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <!-- 表格标签页 -->
          <div v-if="tab.key === 'attr'" key="attr-list">
            <BaseListTable
              :table-config="null"
              :column-config="techTableProps"
              :table-data="dataList"
              @operate-event="handleOperate"
              :current-page="page"
              :current-size="size"
              :refresh-layout-key="Math.random()"
              v-loading="loading" />

            <el-pagination
              style="text-align: left"
              background
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              :current-page.sync="page"
              :page-sizes="[10, 20, 50]"
              :page-size="size"
              :total="total"
              layout="total, sizes, prev, next"></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- sub dialog  -->
    <!-- <small-dialog
      :append-to-body="true"
      v-if="showSubDialog"
      ref="subDialog"
      :url="urls.subase"
      :configs="configs.subDialog"
      :related-id="dataForm.id"
      @refreshDataList="getSubList"></small-dialog> -->

    <!-- footer  -->
    <div slot="footer">
      <el-button @click="handleBtnClick('取消')">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import BaseListTable from "@/components/BaseListTable.vue";

export default {
  name: "BomTechAndFiringDetail",
  components: { BaseListTable },
  props: {},
  data() {
    return {
      dialogVisible: false,
      activeMenu: "烧成曲线",
      actualMenus: [
        { name: "烧成曲线", key: "info" },
        { name: "工艺参数", key: "attr", onlyEditMode: true },
      ],
      dataForm: {
        code: "",
        remark: "",
      },
      rules: {
        code: [],
        remark: [],
      },
      loading: false,
      page: 1,
      size: 20,
      total: 0,
      dataList: [],
      techTableProps: [
        { prop: "name", label: "参数名称" },
        { prop: "code", label: "参数编码" },
        { width: 80, prop: "value", label: "参数值" },
        { prop: "description", label: "描述" },
        // {
        //   prop: "operations",
        //   name: "操作",
        //   fixed: "right",
        //   width: 90,
        //   subcomponent: TableOperaionComponent,
        //   options: [
        //     { name: "edit", label: "编辑", icon: "edit-outline", permission: "" },
        //     // { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:blenderStepParam:delete" },
        //   ],
        // },
      ],
    };
  },
  computed: {},
  mounted() {},
  methods: {
    async init(techId) {
      this.techId = techId;
      this.dialogVisible = true;
      this.loading = true;
      await this.getTechDetailInfo();
      await this.getTechDetailList();
      this.loading = false;
    },

    async getTechDetailInfo() {
      console.log("[getTechDetailInfo] this.techId: ", this.techId);
      // 填充 dataForm
      try {
        const { data: res } = await this.$http.get(`/pms/equipmentTech/${this.techId}`);
        if (res.code == 0) {
          // console.log('[getTechDetailInfo] res.data: ', res.data)
          // return;
          this.$set(this.dataForm, "code", res.data.code);
          this.$set(this.dataForm, "remark", res.data.remark);
        }
      } catch (err) {
        this.$message.error(err);
      }
    },

    async getTechDetailList(params) {
      // 填充 dataList
      params = params
        ? { ...params, page: this.page, limit: this.size }
        : { key: "", techId: this.techId, page: this.page, limit: this.size };

      try {
        const { data: res } = await this.$http.get("/pms/equipmentTechParam/page", { params });
        if (res.code == 0) {
          console.log("[getTechDetailList] res.data: ", res.data);
          this.dataList = res.data.list;
          this.total = res.data.total;
        }
      } catch (err) {
        this.$message.error(err);
      }
    },

    handleTabClick(v) {
      //   console.log("handleTabClick: ", v);
    },

    handleOperate() {},

    /** 导航器的操作 */
    handleSizeChange(val) {
      // val 是新值
      this.page = 1;
      this.size = val;
      this.getTechDetailList();
    },

    handlePageChange(val) {
      // val 是新值
      this.getTechDetailList();
    },

    handleBtnClick(type) {
      if (type == "取消") {
        this.handleClose();
      }
    },

    handleClose(refresh = false) {
      this.dialogVisible = false;
      setTimeout(() => {
        this.$emit("destroy", refresh);
      }, 500);
    },
  },
};
</script>

<style scoped>
.el-menu {
  margin: 16px 0 !important;
}

.el-menu.el-menu--horizontal {
  border: none !important;
  /* background: #0f02 !important; */
}

/* .el-menu--horizontal > .el-menu-item.is-active { */
/* border-bottom-color: #0b58ff; */
/* } */

.dialog-with-menu >>> .el-dialog__body {
  /* padding-top: 16px !important;
  padding-bottom: 16px !important; */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.el-select,
.el-cascader {
  width: 100% !important;
}

.dialog-with-menu >>> .el-dialog__header {
  padding: 10px 20px 10px;
  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */
}

.relative {
  position: relative;
}

.at-right-top {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10000;
}

ul.file-list,
ul.file-list > li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.file-list {
  max-height: 20vh;
  overflow-y: auto;
  margin-top: 12px;
  /* width: 240px; */
  display: flex;
  flex-direction: column;
}

ul.file-list > li {
  border-radius: 4px;
  background-color: #edededd2;
  padding: 8px;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}

ul.file-list > li:hover {
  background-color: #ededed;
}

.file-operations {
  display: flex;
}

.file-icon {
  margin-right: 8px;
  font-size: 16px;
  line-height: 1;
  display: flex;
  place-content: center;
  width: 16px;
  height: 16px;
}

/* .image-preview-dialog {
} */

.force-disabled {
  margin-top: 42px;
}
</style>
