<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="work_code" />
        </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 class="filter">
          <label>{{ $t("500030") }}：</label>
          <DatePicker
            type="daterange"
            :value="dateTime"
            placeholder=""
            class="searchInput middleWidth"
            @on-change="selectdate"
          ></DatePicker>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="tosearch()"
          >{{ $t("1001") }}</Button
        >
        <!--按钮颜色 -->
        <Button
          type="warning"
          class="twoWord"
          icon="ios-create-outline"
          @click="edit()"
          >{{ $t("1003") }}</Button
        >
        <Button
          type="success"
          class="twoWord"
          icon="md-close-circle"
          @click="check()"
          >{{ $t("audit") }}</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"
      :title="$t('1003')"
      width="450"
    >
      <div class="modal_body">
        <div class="filter">
          <label><i>*</i>{{ $t("1049") }}：</label>
          <DatePicker
            v-model="edit_starttime"
            type="datetime"
            class="searchInput middleWidth"
          ></DatePicker>
        </div>
        <div class="filter">
          <label><i>*</i>{{ $t("1050") }}：</label>
          <DatePicker
            v-model="edit_endtime"
            type="datetime"
            class="searchInput middleWidth"
          ></DatePicker>
        </div>
        <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
          type="text"
          size="large"
          @click="dateModal = false"
          v-text="$t('1033')"
          >取消</Button
        >
        <Button
          type="primary"
          size="large"
          @click="editPost"
          v-text="$t('1011')"
          >提交</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 {
  data() {
    return {
      morecondition: false, // 条件
      leveldata: [], // 产线层级集合
      levelid: 0, // 产线层级id
      datalevel: [],
      dateTime: "",
      total: 0,
      page: 1,
      pagesize: 10,
      // -----
      code: "",
      order_number: "",
      productname: "",
      work_code: "",
      state: "",
      starttime: "",
      endtime: "",

      edit_starttime: "",
      edit_endtime: "",
      // ----
      checkModal: false,
      checkstatus: 1,
      selectids: "",
      tableData: [],
      dateModal: false,
      okCount: 0,
      nokCount: 0,
      detailobj: "", //
      tableColumns: [
        {
          type: "index2",
          title: this.$t("1008"),
          key: "xuhao",
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: "60px"
        },
        {
          type: "selection",
          width: 50,
          align: "center"
        },
        {
          title: this.$t("200003"),
          key: "machineLocation"
        },
        {
          title: this.$t("500006"),
          key: "route_name"
        },
        {
          title: this.$t("1049"),
          key: "start_time",
          width: 200,
          render: (h, params) => {
            let str = "";
            str =
              params.row.start_time == 0
                ? ""
                : moment
                    .unix(params.row.start_time)
                    .format("YYYY-MM-DD HH:mm:ss");
            return h("div", str);
          }
        },
        {
          title: this.$t("1050"),
          key: "end_time",
          width: 200,
          render: (h, params) => {
            let str = "";
            str =
              params.row.end_time == 0
                ? ""
                : moment
                    .unix(params.row.end_time)
                    .format("YYYY-MM-DD HH:mm:ss");
            return h("div", str);
          }
        },
        {
          title: this.$t("900337"),
          key: "orderNumber"
        },
        {
          title: this.$t("500108"),
          key: "output"
        },
        {
          title: this.$t("600588"),
          key: "actual_output"
        },
        {
          title: this.$t("600589"),
          key: "nok_number"
        },
        {
          title: this.$t("900958"),
          key: "code"
        },

        {
          title: this.$t("100088"),
          key: "product_name"
        },
        {
          title: this.$t("900579"),
          key: "produced_program_number"
        },
        {
          title: this.$t("500106"),
          key: "worker_name"
        },
        {
          title: this.$t("500121"),
          key: "time",
          render: (h, params) => {
            let str = "";
            str =
              params.row.time == 0
                ? ""
                : moment(params.row.time * 1000).format("yyyy-MM-DD");
            return h("div", str);
          }
        },
        {
          title: this.$t("700100"),
          key: "approval_username"
        },
        {
          title: "审核时间",
          key: "approval_datetime"
        },
        {
          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: "报工类型",
          key: "plantype",
          render: (h, params) => {
            let plantype = "";
            if (params.row.plan_type === 1) {
              plantype = "计划内";
            } else {
              plantype = "计划外";
            }
            return h("div", plantype);
          }
        }
      ]
    };
  },
  created() {
    this.initlevel();
    this.inittime();
    this.tosearch();
    this.tableColumns = this.$time.initTableTitle(this.tableColumns);
  },
  methods: {
    timechange() {
      var time = this.$time.changetime(this.date1).split(" - ");
      this.dateTime = [time[0], time[1]];
    },
    inittime() {
      // 时间赋值
      var date = new Date();
      var start = this.$time.timestampToTime(
        date.getTime() - 3600 * 1000 * 24 * 30
      );
      var end = this.$time.timestampToTime(date.getTime() - 3600 * 1000 * 24);
      // this.dateTime = [start, end]
    },
    selectdate(e) {
      this.dateTime = [e[0], e[1]];
    },
    // 产线层级
    initlevel() {
      axios
        .request({
          url: "/config/ProjectLevelSection/GetSectionTree",
          method: "get"
        })
        .then(res => {
          // console.log(res);
          const arr = [];
          this.datalevel = res.data.data;
          arr.push(res.data.data[0].value);
          this.leveldata = arr;
        });
    },
    selectdate(e) {
      this.dateTime = [e[0], e[1]];
      this.starttime = this.dateTime[e[0]];
      this.endtime = this.dateTime[e[1]];
    },
    tosearch() {
      this.page = 1;
      this.pagesize = 10;
      this.search();
    },
    search() {
      var 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,
        work_code: this.work_code,
        state: this.state,
        page: this.page,
        pagesize: this.pagesize
      };
      axios
        .request({
          url: "/cnc/ProductReport/Getreportlist",
          params,
          method: "get"
        })
        .then(res => {
          this.total = 0;
          this.tableData = [];
          if (res.data.ret === 1 && res.data.data.length > 0) {
            this.total = res.data.total;
            this.tableData = res.data.data;
          }
        });
    },
    // 产线层级选择
    getlevel: function(data) {
      this.leveldata = data;
      this.levelid = data[data.length - 1];
    },
    handleSelectRow: function(data) {
      var ids = [];
      for (var i in data) {
        ids.push(data[i].id);
      }
      this.selectids = ids;
    },
    handleRowChange(currentRow, oldCurrentRow) {
      this.detailobj = currentRow;
    },
    handlePageSize(value) {
      this.pagesize = value;
      this.tableData = this.search();
    },
    changePage(value) {
      this.page = value;
      this.tableData = this.search();
    },
    // 修改
    edit() {
      if (
        this.detailobj === "" ||
        this.detailobj === undefined ||
        this.detailobj.id === undefined
      ) {
        this.$Message.error(this.$t("1017"));
        return false;
      }
      this.edit_starttime = moment
        .unix(this.detailobj.start_time)
        .format("YYYY-MM-DD HH:mm:ss");
      this.edit_endtime = moment
        .unix(this.detailobj.end_time)
        .format("YYYY-MM-DD HH:mm:ss");
      this.okCount = this.detailobj.actual_output;
      this.nokCount = this.detailobj.nok_number;
      this.dateModal = true;
    },
    editPost() {
      // 存在开始时间及结束时间时
      if (this.edit_starttime != "" && this.edit_endtime != "") {
        if (this.edit_starttime > this.edit_endtime) {
          this.$Message.error("结束时间必须大于开始时间");
          return false;
        }
      } else {
        this.$Message.error("请输入必填选项");
        return false;
      }

      if (this.okCount === "") {
        this.$Message.error("请输入必填选项");
        return false;
      }
      if (this.nokCount === "") {
        this.$Message.error("请输入必填选项");
        return false;
      }

      var data = {
        id: this.detailobj.id,
        starttime: this.edit_starttime,
        endtime: this.edit_endtime,
        oknumber: this.okCount,
        noknumber: this.nokCount
      };
      // 编辑提交
      axios
        .request({
          url: "/cnc/ProductReport/EditProduceReport",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret == 1) {
            this.$Message.success("修改成功");
            this.page = 1;
            this.pagesize = 10;
            this.search();
            this.dateModal = false;
            this.detailobj = "";
            this.selectids = "";
          } 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;
      }
      var data = {
        ids: this.selectids.join(),
        state: this.checkstatus
      };
      axios
        .request({
          url: "/cnc/ProductReport/ApprovalReports",
          data,
          method: "post"
        })
        .then(res => {
          if (res.data.ret == 1) {
            this.$Message.success(this.$t("1000031"));
            this.page = 1;
            this.pagesize = 10;
            this.search();
            this.checkModal = false;
            this.detailobj = "";
            this.selectids = "";
          } else {
            this.$Message.error(this.$t(res.data.msg));
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 560px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
