<template>
  <div>
    <TopTitle title="派工单">
      <Button type="primary" @click="searchModal = true">查找</Button>
      <Button type="primary" @click="showModalTrue" style="margin-left: 20px"
        >栏目设置</Button
      >
    </TopTitle>
    <div class="content">
      <Table
        :data="tableData"
        :columns="tableColumns"
        border
        max-height="700"
        v-show="tableData.length != 0"
      >
        <template slot="set" slot-scope="{ row, index }">
          <a @click="delSelectData(row, index)">详情</a>
        </template>
      </Table>
      <div class="content_body_page">
        <Page
          :page-size-opts="[10, 20, 30, 40, 100]"
          @on-page-size-change="changeSize"
          @on-change="changePage"
          :current="pageIndex"
          show-total
          show-elevator
          :total="total"
          show-sizer
          :page-size="pageSize"
        />
      </div>
    </div>
    <ColumnSetup
      ref="child"
      :tableModalTableDataHeader="tableModalTableDataHeader"
      :formModalColumns="formModalColumns"
      :tableModalColumns="tableModalColumns"
      :tableModalTableData="tableModalTableData"
      :showModal="showModal"
      @event1="change($event)"
      @handleModalOk="handleModalOk"
    />
    <Modal
      v-model="searchModal"
      title="查找"
      @on-ok="searchModalOk"
      @on-cancel="searchModal = false"
      width="700"
    >
      <Form :model="formItem" :label-width="85">
        <Row
          style="
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #e8eaec;
            padding: 20px;
          "
        >
          <Col span="11">
            <Form-item label="选择器">
              <Select
                clearable
                v-model="formItem.select"
                placeholder="请选择"
                style="width: 200px"
              >
                <Option value="beijing">北京市</Option>
                <Option value="shanghai">上海市</Option>
                <Option value="shenzhen">深圳市</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="11">
            <Form-item label="日期控件">
              <Date-picker
                clearable
                :value="formItem.date"
                format="yyyy/MM/dd"
                type="daterange"
                placement="bottom-end"
                placeholder="选择日期"
                style="width: 200px"
              ></Date-picker>
            </Form-item>
          </Col>
        </Row>
        <div
          style="
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px;
            border-bottom: 1px solid #e8eaec;
          "
        >
          <Form-item label="订单编号">
            <Input
              clearable
              v-model="formItem.order_no"
              placeholder="请输入订单编号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="项目名称">
            <Input
              clearable
              v-model="formItem.project_name"
              placeholder="请输入项目名称"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="对方单号">
            <Input
              clearable
              v-model="formItem.adverse_odd"
              placeholder="请输入对方单号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="业务员">
            <Input
              clearable
              v-model="formItem.salesman"
              placeholder="请输入业务员"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="客户名称">
            <Select
              clearable
              v-model="formItem.customer_name"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="产品名称">
            <Input
              clearable
              v-model="formItem.product_name"
              placeholder="请输入产品名称"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="客户地区">
            <Select
              clearable
              v-model="formItem.client_area"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="楼层编号">
            <Input
              clearable
              v-model="formItem.floor_number"
              placeholder="请输入楼层编号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="审核状态">
            <Select
              clearable
              v-model="formItem.audit_status"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="通用产品码">
            <Input
              clearable
              v-model="formItem.universal_product_code"
              placeholder="请输入通用产品码 "
              style="width: 200px"
            ></Input>
          </Form-item>
        </div>
        <div>
          <Form-item label="">
            <Checkbox-group
              v-model="formItem.checkbox"
              style="padding-top: 20px"
            >
              <Checkbox style="width: 100px" label="尺寸确认"></Checkbox>
              <Checkbox style="width: 100px" label="发货"></Checkbox>
              <Checkbox style="width: 100px" label="分箱"></Checkbox>
              <Checkbox style="width: 100px" label="套料"></Checkbox>
              <Checkbox style="width: 100px" label="流程卡"></Checkbox>
              <Checkbox style="width: 100px" label="工艺"></Checkbox>
              <Checkbox style="width: 100px" label="收款"></Checkbox>
              <Checkbox style="width: 100px" label="已下达"></Checkbox>
              <Checkbox style="width: 100px" label="价格审核"></Checkbox>
              <Checkbox style="width: 100px" label="入库"></Checkbox>
              <Checkbox style="width: 100px" label="外协"></Checkbox>
            </Checkbox-group>
          </Form-item>
        </div>
      </Form>
    </Modal>
  </div>
</template>
<script>
import TopTitle from "../../components/TopTitle/index";
import ColumnSetup from "../../components/columnSetup/index.vue";
export default {
  components: {
    TopTitle,
    ColumnSetup,
  },
  data() {
    return {
      ifCheckAll: false,
      formItem: {},
      searchModal: false,
      showModal: false,
      selectData: [],
      searchData: {
        start_time: "",
        end_time: "",
      },
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      tableData: [],
      tableModalTableDataHeader: [
        {
          is_show: false,
          sortord: "1",
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          sortord: "2",
          key: "order_type",
          value: "订单类型",
          title: "项目名称",
        },
        {
          is_show: true,
          sortord: "1",
          key: "order_status",
          value: "订单状态",
          title: "订单状态",
        },
        {
          is_show: true,
          key: "salesman",
          sortord: "1",
          value: "业务员",
          title: "业务员  ",
        },
        {
          is_show: true,
          key: "warning_state",
          sortord: "1",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          sortord: "1",
          title: "订单创建时间",
        },
        {
          is_show: true,
          key: "project_name",
          value: "项目名称",
          sortord: "1",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "start_time",
          value: "订单开始日期",
          sortord: "1",
          title: "订单开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "订单交付日期",
          sortord: "1",
          title: "订单交付日期",
        },
        {
          is_show: true,
          key: "complete_rate",
          sortord: "1",
          value: "生产进度",
          title: "生产进度",
        },

        {
          is_show: true,
          key: "delivery_date",
          sortord: "1",
          value: "预估交付日期",
          title: "预估交付日期",
        },
        {
          is_show: true,
          key: "delivery_date",
          sortord: "1",
          value: "操作",
          title: "操作",
        },
      ],
      tableColumns: [
        {
          title: "自序",
          align: "center",
          minWidth: 100,
          type: "index",
          key: "",
        },
        {
          title: "锁定订单",
          align: "center",
          width: 100,

          key: "lockOrder",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.lockOrder == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "套料",
          align: "center",
          width: 80,

          key: "jacking",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.jacking == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "分架",
          align: "center",
          width: 80,
          key: "pointsPlane",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.pointsPlane == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "设备",
          align: "center",
          width: 90,

          key: "equipment",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.equipment == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "任务单号",
          align: "center",
          width: 120,
          key: "taskNo",
        },
        {
          title: "分厂",
          align: "center",
          width: 80,

          key: "branch",
        },
        {
          title: "客户名称",
          align: "center",
          width: 120,
          key: "customer_name",
        },
        {
          title: "项目ID",
          align: "center",
          width: 90,
          key: "project_id",
        },
        {
          title: "项目名称",
          align: "center",
          width: 100,
          key: "project_name",
        },
        {
          title: "成品名称",
          align: "center",
          minWidth: 100,
          key: "made_articles",
        },
        {
          title: "订单类型",
          align: "center",
          minWidth: 100,
          key: "order_type",
        },
        {
          title: "对方单号",
          align: "center",

          minWidth: 100,
          key: "adverse_odd",
        },
        {
          title: "工艺路线",

          align: "center",
          minWidth: 100,

          key: "process_route",
        },
        {
          title: "附件",
          align: "center",
          minWidth: 100,

          key: "accessory",
        },
        {
          title: "总面积",
          align: "center",
          minWidth: 100,
          key: "total_area",
        },
        {
          title: "总周长",
          align: "center",
          minWidth: 100,
          key: "total_perimeter",
        },
        {
          title: "批次",
          align: "center",
          minWidth: 100,
          key: "batch",
        },
        {
          title: "打印次数",
          align: "center",
          minWidth: 100,
          key: "printTime",
        },
        {
          title: "标签次数",
          align: "center",
          minWidth: 100,
          key: "labelTime",
        },
        {
          title: "队列",
          align: "center",
          minWidth: 100,
          key: "queue",
        },
        {
          title: "交货日期",
          align: "center",
          minWidth: 120,

          key: "deliveryDate",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.deliveryDate));
          },
        },
        {
          title: "计划开工",
          align: "center",
          minWidth: 120,

          key: "planWorking",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.planWorking));
          },
        },
        {
          title: "实际开工",
          align: "center",
          minWidth: 120,

          key: "practicalWorking",
          render: (h, params) => {
            const { row } = params;
            return h(
              "span",
              {},
              this.func.replaceDateNoHMS(row.practicalWorking)
            );
          },
        },
        {
          title: "实际完工",
          align: "center",
          minWidth: 120,

          key: "practicalCompletion",
          render: (h, params) => {
            const { row } = params;
            return h(
              "span",
              {},
              this.func.replaceDateNoHMS(row.practicalCompletion)
            );
          },
        },
        {
          title: "送货地址",
          align: "center",
          minWidth: 100,
          key: "deliveryAddress",
        },
        {
          title: "订单价格要求",
          align: "center",
          minWidth: 100,

          key: "order_processing_requirement",
        },
        {
          title: "订单备注",
          align: "center",
          minWidth: 100,

          key: "order_remarks",
        },
        {
          title: "操作",
          align: "center",
          minWidth: 100,
          slot: "set",
        },
      ],
      newTableColumns: [],
      formModalColumns: [
        {
          type: "selection",
          width: 55,
          align: "center",
        },
        {
          title: "全部字段",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          slot: "title",
        },
        {
          title: "排序方式",
          align: "center",
          key: "sortord",
          minWidth: 100,
          slot: "sortord",
        },
        {
          title: "排序优先级",
          align: "center",
          key: "priority",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "Select",
              {
                props: {
                  value: params.row.priority,
                },
                on: {
                  "on-change": (event) => {
                    this.formModalColumns[params.index][params.column.key] =
                      event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
                  },
                },
              },
              this.pointList.map(function (type) {
                return h(
                  "Option",
                  {
                    props: {
                      value: type.value,
                      key: type.label,
                    },
                  },
                  type.label
                );
              })
            );
          },
        },
      ],
      pointList: [
        {
          value: "1",
          label: "升序",
        },
        {
          value: "2",
          label: "降序",
        },
      ],
      tableModalTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "order_type",
          value: "订单类型",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "order_status",
          value: "订单状态",
          title: "订单状态",
        },
        {
          is_show: true,
          key: "salesman",
          value: "业务员",
          title: "业务员  ",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          title: "订单创建时间",
        },
        {
          is_show: true,
          key: "project_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "start_time",
          value: "订单开始日期",
          title: "订单开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "订单交付日期",
          title: "订单交付日期",
        },
        {
          is_show: true,
          key: "complete_rate",
          value: "生产进度",
          title: "生产进度",
        },

        {
          is_show: true,
          key: "delivery_date",
          value: "预估交付日期",
          title: "预估交付日期",
        },
      ],
      tableModalColumns: [
        {
          type: "selection",
          width: 55,
          align: "center",
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          slot: "screenTitle",
        },
      ],
      checkedList: [], //筛选项选择的
      checkedListHeader: [], //表头选择的
      ifCheckAll: false,
      ifCheckAllHeader: false,
    };
  },
  watch: {
    ifCheckAll(newValue) {
      console.log(newValue);
      this.$nextTick(() => {
        this.$refs.selection1.selectAll(newValue);
        console.log(this.$refs.selection1, "测试");
      });
    },
  },
  mounted() {
    this.tableData = [
      {
        lockOrder: 1,
        jacking: 0,
        pointsPlane: 0,
        equipment: 0, // 分箱
        taskNo: "任务单号", //已下达
        branch: "分厂", //流程卡
        customer_name: "客户名称", //入库
        project_id: "项目ID", //发货
        project_name: "项目名称", //收款
        made_articles: "成品名称", // 套料
        order_type: "订单类型", //价格审核
        adverse_odd: "对方单号", // 外协
        process_route: "工艺路线",
        accessory: "这是附件",
        total_area: "总面积", // 0 未审核 1 已审核
        total_perimeter: "总周长",
        batch: "批次",
        printTime: "打印次数",
        labelTime: "标签次数",
        queue: "队列",
        deliveryDate: "1653527527",
        planWorking: "1653527527",
        practicalWorking: "1653527527",
        practicalCompletion: "1653527527",
        deliveryAddress: "送货地址", //0 普通订单
        order_processing_requirement: "订单价格要求",
        order_remarks: "订单备注",
      },
    ];
    this.data();
  },
  methods: {
    data() {
      this.newTableColumns = [
        {
          title: "自序",
          align: "center",
          minWidth: 100,
          type: "index",
          key: "",
          ifShow: true,
          sort: 0,
        },
        {
          title: "锁定订单",
          align: "center",
          width: 100,
          sort: 1,
          ifShow: true,
          key: "lockOrder",
        },
        {
          title: "套料",
          align: "center",
          width: 80,
          ifShow: true,
          sort: 2,
          key: "jacking",
        },
        {
          title: "分架",
          align: "center",
          width: 80,
          sort: 2,
          ifShow: true,
          key: "pointsPlane",
        },
        {
          title: "设备",
          align: "center",
          width: 90,
          ifShow: true,
          sort: 2,
          key: "equipment",
        },
        {
          title: "任务单号",
          align: "center",
          sort: 2,
          ifShow: true,
          width: 90,
          key: "taskNo",
        },
        {
          title: "分厂",
          align: "center",
          width: 80,
          sort: 2,
          ifShow: true,
          key: "branch",
        },
        {
          title: "客户名称",
          align: "center",
          width: 80,
          sort: 2,
          ifShow: true,
          key: "customer_name",
        },
        {
          title: "项目ID",
          align: "center",
          width: 90,
          sort: 2,
          key: "project_id",
          ifShow: true,
        },
        {
          title: "成品名称",
          align: "center",
          width: 90,
          sort: 2,
          key: "made_articles",
          ifShow: true,
        },
        {
          title: "订单类型",
          align: "center",
          width: 100,
          sort: 2,
          key: "order_type",
          ifShow: true,
        },
        {
          title: "对方单号",
          align: "center",
          width: 90,
          sort: 2,
          key: "adverse_odd",
          ifShow: true,
        },
        {
          title: "工艺路线",
          align: "center",
          minWidth: 100,
          key: "process_route",
          sort: 2,
          ifShow: true,
        },
        {
          title: "附件",
          align: "center",
          minWidth: 100,
          key: "accessory",
          sort: 6,
          ifShow: true,
        },
        {
          title: "总面积",
          align: "center",
          sort: 2,
          ifShow: true,
          minWidth: 100,
          key: "total_area",
        },
        {
          title: "总周长",
          sort: 2,
          align: "center",
          minWidth: 100,
          ifShow: true,
          key: "total_perimeter",
        },
        {
          title: "批次",
          sort: 2,
          align: "center",
          minWidth: 100,
          ifShow: true,
          key: "batch",
        },
        {
          title: "打印次数",
          align: "center",
          minWidth: 100,
          key: "printTime",
          ifShow: true,
          sort: 2,
        },
        {
          title: "队列",
          align: "center",
          minWidth: 100,
          key: "queue",
          ifShow: true,
          sort: 2,
        },
        {
          title: "交货日期",
          align: "center",
          minWidth: 100,
          key: "deliveryDate",
          ifShow: true,
          sort: 2,
        },
        {
          title: "计划开工",
          align: "center",
          minWidth: 100,
          key: "planWorking",
          ifShow: true,
          sort: 2,
        },
        {
          title: "实际开工",
          align: "center",
          minWidth: 100,
          key: "practicalWorking",
          ifShow: true,
          sort: 2,
        },
        {
          title: "实际完工",
          align: "center",
          minWidth: 100,
          key: "practicalCompletion",
          ifShow: true,
          sort: 2,
        },
        {
          title: "送货地址",
          align: "center",
          minWidth: 100,
          ifShow: true,
          sort: 2,
          key: "deliveryAddress",
        },
        {
          title: "订单价格要求",
          align: "center",
          minWidth: 100,
          key: "order_processing_requirement",
          ifShow: true,
          sort: 2,
        },
        {
          title: "订单备注",
          align: "center",
          minWidth: 100,
          ifShow: true,
          sort: 2,
          key: "order_remarks",
        },
        {
          title: "操作",
          align: "center",
          ifShow: true,
          sort: 9,
          minWidth: 100,
          slot: "set",
        },
      ];
      let arr = [];
      this.tableColumns.forEach((e) => {
        this.newTableColumns.forEach((a) => {
          if (e.key == a.key) {
            if (a.ifShow == true) {
              arr.push(e);
            }
          }
        });
      });
      this.tableColumns = arr;
      this.tableColumns.sort((a, b) => {
        return a.sort - b.sort;
      });
    },
    change(data) {
      this.showModal = data;
    },
    handleModalOk(row1, row2) {
      console.log(row1, "这个是checkedListHeader");
      console.log(row2, "这是checkedList");
    },
    //点击栏目设置按钮
    showModalTrue() {
      this.showModal = true;
      this.$refs.child.showModalTrue();
    },
    changeSize() {},
    changePage() {},
    searchModalOk() {
      console.log("查找");
    },
    select(e) {
      this.selectData = e;
    },
    save() {
      if (this.selectData.length == 0) {
        return this.$Message.warning("请先选择数据！");
      }
      this.selectData.forEach((v, idx) => {
        v.index = idx + 1;
      });
      this.axios.post("/api/save", { data: this.selectData }).then((res) => {
        if (res.code == 200) {
          this.$Message.success(res.msg);
          this.searchData = { start_time: "", end_time: "" };
          this.tableData = [];
          this.selectData = [];
        }
      });
    },
    initData() {
      this.axios.post("/api/build_list", { ...this.searchData }).then((res) => {
        this.tableData = res.data;
        this.selectData = [];
      });
    },
    delSelectData(type) {
      this.$router.push({
        path: "/cms/workOrder/particulars",
        query: { type },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.form_item {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.content_body_page {
  text-align: center;
}
.content {
  height: 90%;
  overflow: auto;
}
.content_body_page {
  text-align: center;
  margin-top: 20px;
}
</style>