<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form
      style="display: flex; align-items: center; justify-content: right;"
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="getDataList()"
    >
      <el-form-item>
        <el-input size="small" v-model="dataForm.name" clearable placeholder="请输入名称查询" />
      </el-form-item>
      <el-form-item>
        <el-input size="small" v-model="dataForm.code" clearable placeholder="请输入编码查询" />
      </el-form-item>
      <el-form-item>
        <el-select
          size="small"
          v-model="dataForm.product_type_id"
          placeholder="请选择产品类型"
          style="width:150px"
          clearable
        >
          <el-option
            v-for="(item, index) in productTypeArr"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          size="small"
          v-model="dataForm.inspection_stage"
          placeholder="请选择检验阶段"
          style="width:150px"
          clearable
        >
          <el-option
            v-for="(item, index) in inspectionStageOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="getDataList()">
          <svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
          查询
        </el-button>
        <el-button size="small" type="primary" @click="addOrUpdateHandle()">
          <svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
          新增
        </el-button>
        <el-button size="small" type="primary" @click="exportHandle('产品列表')">
          <svg class="icon-svg">
            <use xlink:href="#导出"></use>
          </svg>
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      :stripe="true"
      :header-cell-style="{
        background: '#eef1f6',
        color: '#606266',
        height: '56px',
      }"
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column
        fixed="left"
        type="index"
        header-align="center"
        align="center"
        label="序号"
        width="50"
      >
      </el-table-column>
      <el-table-column prop="name" align="center" label="名称" fixed="left"> </el-table-column>
      <el-table-column prop="code" align="center" label="编码" fixed="left"> </el-table-column>
      <el-table-column prop="specifications" align="center" label="规格"> </el-table-column>
      <el-table-column prop="drawing" align="center" label="图纸"> </el-table-column>
      <el-table-column prop="productType" align="center" label="产品类型"> </el-table-column>
      <el-table-column prop="descs" align="center" label="描述"> </el-table-column>
      <el-table-column prop="remark" align="center" label="备注"> </el-table-column>
      <el-table-column prop="inspectionStandard" align="center" label="检验标准"> </el-table-column>
      <el-table-column prop="inspectionStage" align="center" label="检验阶段">
        <template slot-scope="scope">
          <div style="pointer-events: none;">
            <el-checkbox-group :value="scope.row.inspectionStage.split(',')">
              <el-checkbox label="1">进货检验</el-checkbox>
              <el-checkbox label="2">过程检验</el-checkbox>
              <el-checkbox label="3">成品检验</el-checkbox>
              <el-checkbox label="4">出货检验</el-checkbox>
            </el-checkbox-group>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="status" header-align="center" align="center" label="状态" width="80">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">{{
            scope.row.status === 0 ? "不可用" : "可用"
          }}</el-tag>
        </template>
      </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>
        </template>
      </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-popover placement="top" width="160" trigger="click" :ref="`popover-${scope.row.id}`">
            <p>确定要改变状态吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button type="text" size="mini" @click="cancel(scope.row.id)">取消</el-button>
              <el-button type="primary" size="mini" @click="changeStatus(scope.row.id)"
                >确定</el-button
              >
            </div>
            <el-button type="text" size="small" slot="reference">
              <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-popover>
          <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>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
  </el-card>
</template>

<script>
import AddOrUpdate from "./components/productList-add";
import basicPage from "@/mixins/basic-page";
export default {
  mixins: [basicPage],
  data() {
    return {
      urlOptions: {
        getDataListURL: "/basic/product/page",
        deleteURL: "/basic/product/delete",
        statusUrl: "/basic/product/status",
        exportUrl: "/basic/product/export",
      },
      productTypeArr: [],
      inspectionStageOptions: [
        {
          label: "进货检验",
          value: "1",
        },
        {
          label: "过程检验",
          value: "2",
        },
        {
          label: "成品检验",
          value: "3",
        },
        {
          label: "出货检验",
          value: "4",
        },
      ],
    };
  },
  components: {
    AddOrUpdate,
  },
  created() {
    this.getArr();
  },
  methods: {
    getArr() {
      this.$http
        .get("/basic/productType/page", {
          params: {
            page: 1,
            limit: 500,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.productTypeArr = [];
            return this.$message.error(res.msg);
          }
          this.productTypeArr = res.data.list;
        })
        .catch(() => {});
    },
  },
};
</script>
