<template>
  <!-- 工件返工页面 -->
  <div>
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 二维码 -->
      <div class="filter">
        <label>{{ $t("800008") }}：</label>
        <Input class="searchInput" clearable v-model="Qrcode" type="text" />
      </div>
      <!-- 日期范围 -->
      <div class="filter">
        <label>{{ $t("1036") }}：</label>
        <DatePicker
          id="日期"
          type="datetimerange"
          v-model="daterange"
          confirm
          placeholder=""
          class="searchInput MaxWidth"
          format="yyyy-MM-dd HH:mm:ss"
          @on-change="selectdate"
        >
        </DatePicker>
      </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>
      </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
            :tota="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>

      <!-- 添加弹框区域 -->
      <Modal
        :total="$t(1002)"
        v-model="addmodal"
        :styles="{ width: '650px' }"
        class="newModalClass"
      >
        <p slot="header">
          <span>{{ $t("1002") }}</span>
        </p>
        <div class="modal_body">
          <!-- 二维码 -->
          <div class="filter">
            <label><i>*</i>{{ $t("800008") }}：</label>
            <Input
              clearable
              class="searchInput"
              v-model="addobj.Qrcode1"
              type="text"
            />
          </div>
          <div class="filter">
            <label><i>*</i>{{ $t("950224") }}：</label>
            <Select
              clearable
              filterable
              label-in-value
              class="searchSelect"
              v-model="addobj.reworkStation"
            >
              <!-- <Option
              v-for="(item, index) in stationList"
              :value="item."
              :key="index"
              >{{ item. }}</Option
            > -->
            </Select>
          </div>
          <!-- 返工类型  -->
          <div class="filter">
            <label>{{ $t("950225") }}：</label>
            <RadioGroup v-model="phone">
              <Radio :label="1">
                <span>{{ $t("950226")}}</span>
              </Radio>
              <Radio :label="2">
                <span>{{ $t("950227")}}</span>
              </Radio>
            </RadioGroup>
          </div>
          <!-- 原因 -->
          <div class="filter">
            <label>{{ $t("950228") }}：</label>
            <Input
              clearable
              class="searchInput"
              v-model="addobj.reason"
              :rows="1"
              placeholder="请输入"
            />
          </div>
        </div>

        <div slot="footer" class="footer">
          <div>
            <Button
              type="text"
              size="large"
              @click="addmodal = false"
              v-text="$t(1033)"
              >{{ $t("1033") }}</Button
            >
            <Button
              size="large"
              class="myBtn"
              type="primary"
              @click="asyncConfirm()"
              :loading="loading"
            >
              <span v-if="!loading">{{ $t(1011) }}</span>
              <span v-else>Loading...</span>
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  </div>
</template>>

<script>
import axios from "@/libs/api.request";
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      addmodal: false,
      total: 0, // 总条数
      page: 1, // 当前条数
      pagesize: 10, // 每一页条数
      Qrcode: "", // 二维码
      daterange: [],
      dtStart: "",
      dtEnd: "",
      tableData1: [], // 表格数据
      detailobj: {}, // 点击表格对象
      // rework: singlePiece,
      phone: "apple",
      addobj: {
        Qrcode1: "",
        reworkStation: "",
        reason: ""
      },
      stationList: [], // 返工数据
      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("ID"), // ID
          key: ""
        },
        {
          title: this.$t("1008"), // 序号
          key: ""
        },
        {
          title: this.$t("100089"), // 产品编号
          key: ""
        },
        {
          title: this.$t("950219"), // 返工前工位
          key: ""
        },
        {
          title: this.$t("950220"), // 返工后工位
          key: ""
        },
        {
          title: this.$t("950221"), // 返工原因
          key: ""
        },
        {
          title: this.$t("950222"), // 操作人
          key: ""
        },
        {
          title: this.$t("950223"), // 操作时间
          key: ""
        }
      ]
    };
  },
  created() {},
  // 事件处理函数
  methods: {
    // 监听日期时间变化
    selectdate(e) {
      this.dtStart = e[0]; // 时间开始
      this.dtEnd = e[1]; // 时间结束
      let last_str = this.dtEnd.split(" ")[1];
      if (last_str === "00:00:00") {
        this.dtEnd = moment(this.dtEnd).format("YYYY-MM-DD") + "23:59:59";
        this.daterange = [this.dtStart, this.dtEnd];
      }
    },
    // 监听查询事件
    Search() {
      this.page = 1;
      this.pagesize = 10;
      this.tableSearch();
    },
    // (后端接口不存在, 待定...)
    tableSearch() {
      this.detailobj = {};
      var data = {
        page: this.page,
        pagesize: this.pagesize,
        number: this.Qrcode, // 二维码数据
        startDate: this.dtStart, // 开始时间
        endDate: this.dtEnd // 结束时间
      };
      axios
        .request({
          url: "/apis/acc/Rework/GetReworkData",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret === 1) {
            this.total = res.data.total;
            this.tableData1 = res.data.data;
            this.page = res.data.page;
          }
        });
    },
    // 返工工位数据  (后端接口不存在)
    getreworkData() {
      axios
        .request({
          url: "/apis/acc/StationBaseSetting/GetSectionData",
          method: "get"
        })
        .then(res => {
          let result = res.data.data;
          if (res.data.ret === 1&&result&&Array.isArray(result)&&result.length) {
            this.stationList = result;
          } else {
            this.stationList = [];
          }
        });
    },
    // 监听添加事件
    add() {
      this.addmodal = true;
      this.getreworkData();
    },
    // 弹框确定事件
    asyncConfirm() {
      if (!this.addobj.Qrcode1) {
        this.$Message.warning(this.$t(1000051));
        return false;
      }else if (!this.addobj.reworkStation) {
        this.$Message.warning(this.$t(1000052));
        return false;
      }
      // 组装请求参数 // 请求参数待定... 没有接口
      let data = {
        Qrcode: this.addobj.Qrcode1,
        station: this.addobj.reworkStation,
        type: this.phone,
        reason: this.addobj.reason
      };
      // 确定接口, 后端没有
      axios
        .request({
          url: '',
          data,
          method: "post"
        })
        .then((res)=> {
          if (res.data.ret ===1) {
          }
        })
    },
    // 表格点击事件
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    },
    // 页码改变的回调, 返回改变以后的页码值
    changePage(value) {
      this.page = value;
      // this.tableData1 = this.tableSearch(this.page, this.pagesize)
    },
    // 切换每一页条数时回调, 返回切换以后的每页条数
    handlePageSize(value) {
      this.pagesize = value;
      // this.pagesize = this.tableSearch(this.page, this.pagesize)
    }
  }
};
</script>

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