<template>
  <div>
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 生产线 -->
      <div class="filter">
        <label>{{ $t("1025") }}：</label>
        <Select label-in-value class="searchSelect" v-model="lineId">
          <Option v-for="item in lineList" :value="item.id" :key="item.id">
            {{ item.title }}
          </Option>
        </Select>
      </div>
      <!-- 产品编号 -->
      <div class="filter">
        <label>{{ $t("100089") }}：</label>
        <Select
          clearable
          filterable
          label-in-value
          class="searchSelect"
          v-model="serial_number"
        >
          <Option v-for="item in numberList" :value="item.id" :key="item.id">
            {{ item.name }}({{ item.code }})
          </Option>
        </Select>
      </div>
      <!-- 物料编号 -->
      <div class="filter">
        <label>{{ $t("100390") }}：</label>
        <Select
          clearable
          filterable
          label-in-value
          class="searchSelect"
          v-model="parent_serial"
        >
          <Option v-for="item in materialList" :value="item.pn" :key="item.id">
            {{ item.pn }} {{ item.name }} ({{ item.spec }})
          </Option>
        </Select>
      </div>
      <!-- 工单 -->
      <div class="filter">
        <label>{{ $t("900053") }}：</label>
        <Input class="searchInput" type="text" v-model="orderNum" />
      </div>
      <!-- 按钮区域 -->
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="Search()"
          >{{ $t("1001") }}
        </Button>
        <Button
          type="success"
          class="twoWord"
          icon="md-add-circle"
          @click="add()"
          >{{ $t("1002") }}
        </Button>
        <Button
          type="warning"
          class="twoWord"
          icon="ios-create-outline"
          @click="edit()"
          >{{ $t("1003") }}
        </Button>
        <Button
          type="error"
          class="twoWord"
          icon="md-close-circle"
          @click="dele()"
          >{{ $t("1004") }}
        </Button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="divborder newTableDiv">
      <Table
        highlight-row
        class="tableClass"
        :data="tableData1"
        :columns="tableColumns1"
        @on-current-change="handleRowChange"
      ></Table>
      <!-- 分页区域 -->
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10, 20, 30, 40, 100]"
          ></Page>
        </div>
      </div>
    </div>

    <!-- 添加/ 修改弹框 -->
    <Modal
      :title="$t(1002)"
      v-model="addmodal"
      :styles="{ width: '650px' }"
      class="newModalClass"
    >
      <p slot="header">
        <span v-if="type == 1">{{ $t("1002") }}</span>
        <span v-if="type == 2">{{ $t("1003") }}</span>
      </p>
      <div class="modal_body">
        <!-- 生产线 -->
        <div class="filter">
          <label><i>*</i>{{ $t("1025") }}：</label>
          <Select label-in-value class="searchSelect" v-model="addobj.linelist">
            <Option v-for="item in lineList" :value="item.id" :key="item.id">
              {{ item.title }}
            </Option>
          </Select>
        </div>
        <!-- 产品编号 -->
        <div class="filter">
          <label><i>*</i>{{ $t("100089") }}：</label>
          <Select
            clearable
            filterable
            label-in-value
            class="searchSelect"
            v-model="addobj.number"
          >
            <Option
              v-for="item in numberList"
              :value="item.code"
              :key="item.code"
            >
              {{ item.code }}{{ item.name }}({{ item.drawingcode }})
            </Option>
          </Select>
        </div>
        <!-- 物料 -->
        <div class="filter">
          <label><i>*</i>{{ $t("920165") }}：</label>
          <Select
            clearable
            filterable
            label-in-value
            class="searchSelect"
            v-model="addobj.material"
          >
            <Option
              v-for="(item, index) in materialData"
              :value="item.pn"
              :key="index"
              >{{ item.name }}({{ item.pn }})
            </Option>
          </Select>
        </div>
        <!-- 数量 -->
        <div class="filter">
          <label><i>*</i>{{ $t("300084") }}：</label>
          <InputNumber
            type="text"
            class="searchInput"
            v-model="addobj.step"
            :min="0"
          />
        </div>
        <!-- 工单类型 -->
        <div class="filter">
          <label><i>*</i>{{ $t("900934") }}：</label>
          <Select
            clearable
            filterable
            label-in-value
            class="searchSelect"
            v-model="addobj.type"
          >
            <!-- <Option 
              v-for="(item, index) in typeList" 
              :value="item." 
              :key="index"
              >{{ item. }}({{ item. }})
            </Option> -->
          </Select>
        </div>
        <!-- 序号 -->
        <div class="filter">
          <label><i>*</i>{{ $t("是否自动生成序号") }}：</label>
          <RadioGroup v-model="phone">
            <Radio label="apple">
              <span>是</span>
            </Radio>
            <Radio label="android">
              <span>否</span>
            </Radio>
          </RadioGroup>
        </div>
        <!-- 工单 -->
        <div class="filter">
          <label><i>*</i>{{ $t("900053") }}：</label>
          <Input class="searchInput" type="text" v-model="addobj.order" />
        </div>
        <!-- 订单 -->
        <div class="filter">
           <label><i>*</i>{{ $t("订单") }}：</label>
        </div>
      </div>
      <div slot="footer" class="footer">
        <div>
          <Button
            type="text"
            size="large"
            @click="addmodal = false"
            v-text="$t(1033)"
            >{{ $t("1033") }}
          </Button>
          <Button
            type="primary"
            v-if="type == 1"
            size="large"
            @click="asyncConfirm(1)"
            class="myBtn"
            :loading="loading"
          >
            <span v-if="!loading">{{ $t(1011) }}</span>
            <span v-else>Loading...</span>
          </Button>
          <Button
            type="primary"
            v-if="type == 2"
            size="large"
            @click="asyncConfirm(2)"
            :loading="loading"
          >
            <span v-if="!loading">{{ $t(1003) }}</span>
            <span v-else>Loading...</span>
          </Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
export default {
  data() {
    return {
      phone: "apple",
      type: 0, // type 为 1 是添加操作 type 为 2 是修改操作
      addmodal: false, // 弹框隐藏
      loading: false,
      total: 0, // 总条数
      page: 1, // 当前页数
      pagesize: 10, // 每一页显示条数
      lineId: 0, // 生产线
      serial_number: 0, // 产品编号
      parent_serial: "", // 物料编号
      orderNum: "", // 工单
      lineList: [], // 生产线数据
      numberList: [], // 产品编号数据
      materialList: [], // 物料编号数据
      materialData: [], // 弹框
      tableData1: [], // table 表格数据
      typeList: [], // 工单类型
      detailobj: {}, // 点击表格数据
      // workordercategory: 0,
      addobj: {
        linelist: "",
        number: "",
        material: "",
        step: 0 // 顺序
      },
      tableColumns1: [
        {
          type: "sort",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "80px"
        },
        {
          title: this.$t("1025"), // 生产线
          key: "line_value"
        },
        {
          title: this.$t("100089"), // 产品编号
          key: "serial_number_value"
        },
        {
          title: this.$t("物料"), // 物料
          key: ""
        },
        {
          title: this.$t("工单"), // 工单
          key: ""
        },
        {
          title: this.$t("数量"), // 数量
          key: ""
        },
        {
          title: this.$t("工单类型"), // 工单类型
          key: ""
        },
        {
          title: this.$t("是否自动生成序号"), // 是否自动生成序号
          key: ""
        },
        {
          title: this.$t("订单"), // 订单
          key: ""
        },
        {
          title: this.$t("创建时间"), // 创建时间
          key: ""
        }
      ]
    };
  },
  created() {
    this.getLine(); // 生产线数据
    this.getFillOption(); // 产品编号数据
    this.GetMaterialList(); // 物料编号数据
    this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1); // 格式化表格样式
  },
  methods: {
    // 生产线数据
    getLine() {
      axios
        .request({
          url: "/acc/Position/GetLine",
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1&&result&&Array.isArray(result)&&result.length) {
            this.lineList = result;
          }else {
            this.lineList = []; 
          }
        });
    },
    // 产品编号数据
    getFillOption() {
      axios
        .request({
          url: "/config/ProjectProduct/GetProductsByCode",
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1&&result&&Array.isArray(result)&&result.length) {
            this.numberList = result;
          }else {
            this.numberList = []; 
          }
        });
    },
    // 物料编号数据
    GetMaterialList() {
      axios
        .request({
          url: "/config/Material/GetMaterialList",
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1 &&result&&Array.isArray(result)&&result.length) {
            this.materialList = result;
          }else {
            this.materialList = []; 
          }
        });
    },
    // 物料数据
    getMaterialList() {
      let data = {
        icol: "pn",
        tb: "siger_tr_materials",
        vcol: "name"
      };
      axios
        .request({
          url: "/config/Dict/FillOption",
          data,
          method: "post"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1 &&result&&Array.isArray(result)&&result.length) {
            this.materialData = res.data.data;
          }else {
            this.materialData = []; 
          }
        });
    },
    // 工单类型
    GetDictByCat() {
      // (有bug 待解决...)
      let params = { cat: workordercategory };
      axios
        .request({
          url: "/config/Dict/GetDictByCat",
          params,
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1&&result&&Array.isArray(result)&&result.length) {
            this.typeList = result;
          }else {
            this.typeList = []; 
          }
        });
    },
    // 搜索
    Search() {
      this.page = 1;
      this.pagesize = 10;
      this.tableSearch();
    },
    tableSearch() {
      this.detailobj = {};
      let params = {
        page: this.page,
        pagesize: this.pagesize,
        line: this.lineId, // 生产线
        product_serial: this.serial_number, // 产品编号
        materials_id: this.parent_serial, // 物料编号
        name: this.orderNum // 工单
      };
      axios
        .request({
          url: "/acc/WorkingOrder/getList",
          params,
          method: "get"
        })
        .then(res => {
          console.log(res);
          return false;
          if (res.data.ret === 1) {
            this.total = res.data.total;
            this.tableData1 = res.data.data;
            this.page = res.data.page;
          }
        });
    },
    // 添加
    add() {
      this.type = 1; // 设置 type 为 1 表示是添加操作
      this.getLine(); // 生产线数据
      this.getFillOption(); // 产品编号数据
      this.getMaterialList(); // 物料数据
      this.GetDictByCat(); // 工单类型
      this.addmodal = true; // 弹框显示
    },
    // 修改
    edit() {
      if (!this.detailobj.id) {
        this.$Message.error(this.$t(1043));
        return false;
      }
      this.type = 2; // type 为 2 表示修改
      this.addmodal = true;
    },
    // 删除
    dele() {},
    handleRowChange(cur) {
      this.detailobj = cur;
      console.log(this.detailobj);
    },
    // 页码改变的回调，返回改变后的页码
    changePage(value) {
      this.page = value;
      this.tableData1 = this.tableSearch(this.page, this.pagesize);
    },
    // 切换每页条数时的回调，返回切换后的每页条数
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData1 = this.tableSearch(this.page, this.pagesize);
    }
  }
};
</script>

<style lang="less" scoped>
</style>