<template>
  <div class="testdiv">
    <!-- 查询条件 -->
    <div class="divborder newSearchDiv" style="margin: 0px">
      <div class="filter">
        <label>订单号：</label>
        <Input class="searchInput" v-model="orderNo" />
      </div>
      <div class="filter">
        <label>产品名称：</label>
        <Input class="searchInput" v-model="productName" />
      </div>
      <div class="filter">
        <label>变更日期范围：</label>
        <DatePicker
          type="daterange"
          :value="changeDateRange"
          class="searchInput middleWidth"
          @on-change="changeDateRangeChange"
        ></DatePicker>
      </div>
      <div class="filter">
        <label>变更状态：</label>
        <Select class="searchSelect" v-model="changeStatus" clearable>
          <Option :value="1">待审核</Option>
          <Option :value="2">已审核</Option>
          <Option :value="3">审核不通过</Option>
        </Select>
      </div>
      <!-- 按钮组 -->
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search"
          @click="search()"
          >查询</Button
        >
        <Button
          type="success"
          class="twoWord"
          icon="ios-create-outline"
          @click="audit()"
          >审核</Button
        >
      </div>
    </div>
    <!-- 数据展示 -->
    <div class="divborder newTableDiv">
      <!-- 主体表格 -->
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData"
        :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="modalShow"
      :styles="{ width: '600px' }"
    >
      <p slot="header">
        <span>审核</span>
      </p>
      <div class="modal_body">
        <div>
          <div class="filter">
            <label>
              <i>*</i>
              是否通过审核：
            </label>
            <Select class="searchSelect" v-model="auditResult">
              <Option :value="2">审核通过</Option>
              <Option :value="3">审核不通过</Option>
            </Select>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button size="large" @click="modalShow = false">取消</Button>
        <Button type="primary" size="large" @click="confirmAudit()"
          >确认</Button
        >
      </div>
    </Modal>
  </div>
</template>

<script>
import moment from "moment";

export default {
  inject: ["reload"],
  data() {
    return {
      // 订单号
      orderNo: "",
      // 产品名称
      productName: "",
      // 变更日期范围
      changeDateRange: [],
      // 变更状态
      changeStatus: "",
      // 表格数据
      tableData: [],
      // 表格列字段
      tableColumns: [
        {
          type: "sort",
          title: this.$t(1008),
          render: (h, params) => {
            return h(
              "span",
              params.index + (this.page - 1) * this.pagesize + 1
            );
          },
          width: 75,
        },
        {
          title: this.$t(300038),
          key: "orderNo",
        },
        {
          title: this.$t(900337),
          key: "jobNo",
        },
        {
          title: this.$t(100088),
          key: "productName",
        },
        {
          title: this.$t(100089),
          key: "productNo",
        },
        {
          title: this.$t(100090),
          key: "drawNo",
        },
        {
          title: this.$t(500099),
          key: "orderNum",
        },
        {
          title: this.$t(900924),
          key: "deliveryDate",
        },
        {
          title: this.$t(700157),
          key: "changeTime",
          align: "center",
          width: 150,
        },
        {
          title: this.$t(444427),
          key: "changeItem",
        },
        {
          title: this.$t(900625),
          key: "beforeChange",
        },
        {
          title: this.$t(900626),
          key: "afterChange",
        },
        {
          title: this.$t(200054),
          key: "status",
          align: "center",
          render: (h, params) => {
            let status, bg;
            switch (params.row.status) {
              case 1:
                status = "待审核";
                bg = "#2D8CF0";
                break;
              case 2:
                status = "已审核";
                bg = "#19BE6B";
                break;
              case 3:
                status = "审核不通过";
                bg = "#ED4014";
                break;
            }
            return h(
              "div",
              {
                style: {
                  backgroundColor: bg,
                  color: "#fff",
                  width: "100%",
                  height: "36px",
                  lineHeight: "36px",
                  textAlign: "center",
                },
              },
              status
            );
          },
        },
      ],
      // 返回的数据总数
      total: 0,
      // 页码
      page: 1,
      // 页距
      pagesize: 10,
      // 当前选中行
      row: {},
      // 审核弹框是否弹出
      modalShow: false,
      // 审核结果
      auditResult: 2,
    };
  },
  mounted() {
    const _this = this;
    _this.search();
    _this.tableColumns = _this.$time.initTableTitle(_this.tableColumns);
  },
  methods: {
    // 监听变更日期范围变化
    changeDateRangeChange(v) {
      this.changeDateRange = v;
    },
    // 查询
    search() {
      const _this = this;
      // 解构赋值
      let {
        page,
        pagesize,
        orderNo,
        productName,
        changeDateRange,
        changeStatus,
      } = this;
      let params = {
        ordernumber: orderNo,
        product_name: productName,
        startTime: changeDateRange[0] ? changeDateRange[0] : "",
        endTime: changeDateRange[1] ? changeDateRange[1] : "",
        audit_state: changeStatus,
        page,
        pagesize,
      };
      _this.axios
        .request({
          url: "cnc/ProductChange/GetDataList",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.total = result.total;
            _this.page = result.page;
            _this.pagesize = result.pagesize;
            let data = result.data;
            _this.tableData = [];
            if (Array.isArray(data) && data.length) {
              _this.initTableData(data);
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 审核
    audit() {
      const _this = this;
      let { row } = this;
      if (JSON.stringify(row) == "{}") {
        _this.$Message.error(_this.$t(1043));
        return false;
      }
      if (row.status != 1) {
        _this.$Message.error(_this.$t(444428));
        return false;
      }
      this.auditResult = 2;
      this.modalShow = true;
    },
    // 确认审核
    confirmAudit() {
      // 拿到当前组件实例
      const _this = this;
      // 表单必填项验证
      if (!_this.auditResult) {
        _this.$Message.error(_this.$t(444429));
        return false;
      }
      let params = {
        id: _this.row.id,
        audit_state: _this.auditResult,
      };
      _this.axios
        .request({
          url: "cnc/ProductChange/UpdateAuditState",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$Message.success(_this.$t(result.msg));
            _this.modalShow = false;
            _this.search();
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 监听选中表格行
    handleRowChange(currentRow) {
      this.row = currentRow;
    },
    // 跳转页数
    changePage(v) {
      this.page = v;
      this.search();
    },
    // 修改页距
    handlePageSize(v) {
      this.pagesize = v;
      this.search();
    },
    // 对返回的数据进行处理
    initTableData(tableList) {
      const _this = this;
      let tableData = [];
      if (!Array.isArray(tableList) || !tableList) {
        return false;
      }
      tableList.forEach((item) => {
        tableData.push({
          id: item.id,
          // 订单号
          orderNo: item.ordernumber,
          // 工单号
          jobNo: item.code,
          // 产品名称
          productName: item.product_name,
          // 产品编号
          productNo: item.product_code,
          // 图纸号
          drawNo: item.draw_number,
          // 订单数量
          orderNum: item.quantity,
          // 交货期
          deliveryDate: item.delivery_time,
          // 变更时间
          changeTime: moment(item.change_time * 1000).format(
            "YYYY-MM-DD HH:mm:ss"
          ),
          // 变更项目
          changeItem: item.change_project,
          // 变更前
          beforeChange: item.change_before,
          // 变更后
          afterChange: item.change_after,
          // 审核状态
          status: item.audit_state,
        });
      });
      _this.tableData = tableData;
    },
  },
};
</script>
