<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin: 0px">
      <!-- 搜索条件--产线层级 -->
      <div class="filter">
        <label>{{ $t(1132) }}：</label>
        <Cascader
          :data="datalevel"
          :value="leveldata"
          trigger="click"
          change-on-select
          class="searchSelect"
          @on-change="getlevel"
        ></Cascader>
      </div>
      <!-- 搜索条件--工单号 -->
      <div class="filter">
        <label>{{ $t(900939) }}</label>
        <Input class="searchInput" type="text" v-model="order_number" />
      </div>
      <!-- 搜索条件--工令号 -->
      <div class="filter">
        <label>{{ $t(900958) }}：</label>
        <Input class="searchInput" type="text" v-model="code" />
      </div>
      <!-- 搜索条件--产品名称 -->
      <div class="filter">
        <label>{{ $t(100088) }}：</label>
        <Input class="searchInput" type="text" v-model="productname" />
      </div>
      <!-- 次级搜索条件 -->
      <div v-show="!morecondition">
        <!-- 搜索条件--报工人员 -->
        <div class="filter">
          <label>{{ $t(900918) }}：</label>
          <Input class="searchInput" type="text" v-model="worker_name" />
        </div>
        <!-- 搜索条件--添加时间 -->
        <div class="filter">
          <label>{{ $t(500121) }}：</label>
          <DatePicker
            type="daterange"
            :value="dateTime"
            class="searchInput middleWidth"
            @on-change="selectdate"
          ></DatePicker>
        </div>
        <!-- 搜索条件--工单状态 -->
        <div class="filter">
          <label>{{ $t(200002) }}：</label>
          <Select v-model="state" clearable class="searchSelect">
            <Option :value="0">{{ $t(700096) }}</Option>
            <Option :value="1">{{ $t(950320) }}</Option>
            <Option :value="2">{{ $t(950321) }}</Option>
          </Select>
        </div>
      </div>
      <!-- 按钮组 -->
      <div class="searchBtn">
        <!-- 查询按钮 -->
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search-outline"
          @click="search()"
          >{{ $t(1001) }}</Button
        >
        <!-- 修改按钮 -->
        <Button
          type="warning"
          class="twoWord"
          icon="ios-create-outline"
          @click="edit()"
          >{{ $t(1003) }}</Button
        >
        <!-- 审核按钮 -->
        <Button
          type="success"
          class="twoWord intervalRight"
          icon="ios-close-circle-outline"
          @click="check()"
        >
          {{ $t(700119) }}
        </Button>
        <!-- 导出Excel -->
        <Button
          type="primary"
          class="fourWord"
          icon="ios-download-outline"
          @click="exportExcel()"
        >
          {{ $t(1007) }}
        </Button>
      </div>
      <!-- 次级搜索条件是否显示 -->
      <MoreConbtn
        @getCon="morecondition = !morecondition"
        :morecondition="morecondition"
      ></MoreConbtn>
    </div>
    <div class="divborder newTableDiv">
      <!-- 主体表格 -->
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData"
        @on-selection-change="handleSelectRow"
        :columns="tableColumns"
      ></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 class="newModalClass" v-model="dateModal" :width="450">
      <p slot="header">
        <span>{{ $t(1003) }}</span>
      </p>
      <div class="modal_body">
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(600588) }}：
          </label>
          <InputNumber
            :min="0"
            class="searchInput"
            v-model="okCount"
          ></InputNumber>
        </div>
        <div class="filter">
          <label>
            <i>*</i>
            {{ $t(600589) }}：
          </label>
          <InputNumber
            class="searchInput"
            :min="0"
            v-model="nokCount"
          ></InputNumber>
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="dateModal = false">取消</Button>
        <Button size="large" type="primary" @click="editPost()">提交</Button>
      </div>
    </Modal>
    <!-- 审核弹框 -->
    <Modal
      class="newModalClass"
      v-model="checkModal"
      :title="$t(700119)"
      width="450"
    >
      <div class="modal_body">
        <div class="filter">
          <label>{{ $t(700119) }}：</label>
          <RadioGroup v-model="checkstatus">
            <Radio :label="1">
              <span>{{ this.$t(700114) }}</span>
            </Radio>
            <Radio :label="2">
              <span>{{ this.$t(700115) }}</span>
            </Radio>
          </RadioGroup>
        </div>
      </div>
      <div slot="footer">
        <Button
          type="text"
          size="large"
          @click="checkModal = false"
          v-text="$t(1033)"
          >取消</Button
        >
        <Button
          type="primary"
          size="large"
          @click="checkPost()"
          v-text="$t(1011)"
          >提交</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from "@/libs/api.request";
import moment from "moment";

export default {
  inject: ["reload"],
  data() {
    return {
      // 数据总量
      total: 0,
      // 页码
      page: 1,
      // 页距
      pagesize: 10,
      // 是否展示次级搜索条件
      morecondition: false,
      // 搜索条件--产线层级
      leveldata: [],
      // 产线层级级联数据
      datalevel: [],
      // 搜索条件--添加时间
      dateTime: [],
      // 搜索条件--工令号
      code: "",
      // 搜索条件--工单号
      order_number: "",
      // 搜索条件--产品名称
      productname: "",
      // 搜索条件--报工人员
      worker_name: "",
      // 搜索条件--工单状态
      state: "",
      // 审核弹框是否显示
      checkModal: false,
      // 审核状态
      checkstatus: 1,
      // 表格多选框当前选中的所有数据 ID
      selectids: [],

      // 主体表格数据
      tableData: [],
      // 表格字段
      tableColumns: [
        {
          type: "sort",
          title: this.$t(1008),
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: 66,
        },
        {
          type: "selection",
          width: 50,
          align: "center",
        },
        {
          title: this.$t(100088),
          key: "product_name",
        },
        {
          title: this.$t(500006),
          key: "route_name",
        },
        {
          title: this.$t(200003),
          key: "machineLocation",
        },
        {
          title: this.$t(500106),
          key: "worker_name",
        },
        {
          title: this.$t(900337),
          key: "orderNumber",
        },
        {
          title: this.$t(900958),
          key: "code",
        },
        {
          title: this.$t(500108),
          key: "output",
        },
        {
          title: this.$t(600588),
          key: "actual_output",
        },
        {
          title: this.$t(600589),
          key: "nok_number",
        },
        {
          title: this.$t(500121),
          align: "center",
          width: 150,
          render: (h, params) => {
            let str = "";
            str =
              params.row.time == 0
                ? ""
                : moment(params.row.time * 1000).format("YYYY-MM-DD HH:mm:ss");
            return h("div", str);
          },
        },
        {
          title: this.$t(700100),
          key: "approval_username",
        },
        {
          title: this.$t(700101),
          align: "center",
          width: 150,
          render: (h, params) => {
            let str;
            str =
              params.row.approval_time == 0
                ? ""
                : moment(params.row.approval_time * 1000).format(
                    "YYYY-MM-DD HH:mm:ss"
                  );
            return h("div", str);
          },
        },
        {
          title: this.$t(200054),
          key: "status",
          render: (h, params) => {
            let status = "";
            if (params.row.approval_status == 0) {
              status = "待审核";
            } else if (params.row.approval_status == 1) {
              status = "审核通过";
            } else {
              status = "审核未通过";
            }
            return h("div", status);
          },
        },
        {
          title: this.$t(444433),
          key: "plantype",
          render: (h, params) => {
            let plantype = "";
            if (params.row.plan_type == 1) {
              plantype = "计划内";
            } else {
              plantype = "计划外";
            }
            return h("div", plantype);
          },
        },
      ],
      // 修改弹框是否显示
      dateModal: false,
      // OK 产量
      okCount: 0,
      // NOK 产量
      nokCount: 0,
      // 选中行
      detailobj: {},
    };
  },
  mounted() {
    // 获取产线层级级联数据
    this.initLevel();
    // 初始化报工时间
    this.initDateTime();
    // 初始化查询
    this.search();
    // 初始化表格字段
    this.tableColumns = this.$time.initTableTitle(this.tableColumns);
  },
  methods: {
    // 获取产线层级级联数据
    initLevel() {
      this.axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get",
        })
        .then((res) => {
          let arr = [];
          this.datalevel = res.data.data;
          arr.push(res.data.data[0].value);
          this.leveldata = arr;
        });
    },
    // 初始化报工时间
    initDateTime() {
      let end = new Date();
      let start = new Date(end.getTime() - 6 * 24 * 60 * 60 * 1000);
      this.dateTime = [
        moment(start).format("YYYY-MM-DD"),
        moment(end).format("YYYY-MM-DD"),
      ];
    },
    // 查询
    search(isExport) {
      let params = {
        sectionid: this.leveldata[this.leveldata.length - 1],
        starttime: this.dateTime[0],
        endtime: this.dateTime[1],
        product_name: this.productname,
        draw_number: "",
        code: this.code,
        order_number: this.order_number,
        worker_name: this.worker_name,
        state: this.state,
        page: this.page,
        pagesize: this.pagesize,
      };
      if (isExport) {
        params.toexel = 1;
      }
      this.axios
        .request({
          url: "/cnc/ProductReport/Getreportlist",
          params,
          method: "get",
        })
        .then((res) => {
          if (isExport) {
            window.location.href = this.axios.publicPath + res.data.data;
            return;
          }
          this.total = 0;
          this.tableData = [];
          if (res.data.ret == 1 && res.data.data.length) {
            this.total = res.data.total;
            this.tableData = res.data.data;
          }
        });
    },
    // 导出Excel
    exportExcel() {
      this.search(1);
    },
    // 监听添加时间变化
    selectdate(v) {
      this.dateTime = v;
    },
    // 监听产线层级级联选择器变化
    getlevel: function (data) {
      this.leveldata = data;
    },
    // 监听表格多选框变化
    handleSelectRow: function (data) {
      let ids = [];
      for (let i in data) {
        ids.push(data[i].id);
      }
      this.selectids = ids;
    },
    // 监听表格行选择
    handleRowChange(currentRow) {
      this.detailobj = currentRow;
    },
    // 改变页距
    handlePageSize(value) {
      this.pagesize = value;
      this.search();
    },
    // 改变页码
    changePage(value) {
      this.page = value;
      this.search();
    },
    // 点击修改按钮
    edit() {
      if (JSON.stringify(this.detailobj) == "{}") {
        this.$Message.error(this.$t(1017));
        return false;
      }

      this.okCount = this.detailobj.actual_output;
      this.nokCount = this.detailobj.nok_number;
      this.dateModal = true;
    },
    // 修改弹框提交
    editPost() {
      if (this.okCount === "") {
        this.$Message.error("请输入必填选项");
        return false;
      }
      if (this.nokCount === "") {
        this.$Message.error("请输入必填选项");
        return false;
      }
      let data = {
        id: this.detailobj.id,
        oknumber: this.okCount,
        noknumber: this.nokCount,
      };
      // 编辑提交
      this.axios
        .request({
          url: "/cnc/ProductReport/EditProduceReport",
          data,
          method: "post",
        })
        .then((res) => {
          if (res.data.ret == 1) {
            this.$Message.success("修改成功");
            this.dateModal = false;
            this.search();
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
    // 点击审核按钮
    check() {
      if (
        this.selectids === undefined ||
        this.selectids === "" ||
        this.selectids.length === 0 ||
        this.selectids.join() === ""
      ) {
        this.$Message.error(this.$t(1017));
        return false;
      }
      this.checkModal = true;
      this.checkstatus = 1;
    },
    // 审核弹框提交
    checkPost() {
      if (
        this.selectids === undefined ||
        this.selectids === "" ||
        this.selectids.length === 0 ||
        this.selectids.join() === ""
      ) {
        this.$Message.error(this.$t(1017));
        return false;
      }
      let data = {
        ids: this.selectids.join(),
        state: this.checkstatus,
      };
      this.axios
        .request({
          url: "/cnc/ProductReport/ApprovalReports",
          data,
          method: "post",
        })
        .then((res) => {
          if (res.data.ret == 1) {
            this.$Message.success(this.$t(1000031));
            this.checkModal = false;
            this.search();
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    },
  },
};
</script>
