<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <!-- 搜索条件--产线 -->
      <div class="filter">
        <label>{{$t('900879')}}：</label>
        <Select v-model="lineid" label-in-value clearable class="searchSelect">
          <Option v-for="item in levels" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </div>
      <div class="searchBtn">
        <!-- 查询按钮  -->
        <Button type="primary" class="twoWord" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
        <!-- 保存按钮 -->
        <Button
          type="success"
          class="twoWord"
          icon="ios-create-outline"
          @click="save()"
        >{{$t('900306')}}</Button>
      </div>
    </div>
    <div class="divborder newTableDiv">
      <!-- 表格主体 -->
      <Table
        height="700"
        class="tableClass"
        highlight-row
        :data="tableData"
        :columns="tableColumns"
      ></Table>
    </div>
  </div>
</template>
<script>
import tool_queryVue from "../../tlm/circulation/tool_query.vue";
export default {
    data() {
        return {
            // 产线ID
            lineid: 0,
            // 产线下拉列表
            levels: [],
            // 表格主体数据
            tableData: [],
            // 表格字段
            tableColumns: [
                {
                    type: "index",
                    title: this.$t("1008"),
                    render: (h, params) => {
                        return h("span", params.index + 1);
                    },
                    width: "60px",
                },
                {
                    title: "产线名称",
                    key: "production_section_title",
                },
                {
                    title: this.$t("1026"),
                    key: "machine_section_title",
                },
                {
                    title: "横坐标",
                    key: "x",
                    render: (h, params) => {
                        let vm = this;
                        return h("input", {
                            domProps: {
                                value: params.row.x,
                            },
                            on: {
                                input: function (event) {
                                    params.row.x = event.target.value;
                                    vm.tableData[params.index] = params.row;
                                },
                            },
                        });
                    },
                },
                {
                    title: "纵坐标",
                    key: "y",
                    render: (h, params) => {
                        let vm = this;
                        return h("input", {
                            domProps: {
                                value: params.row.y,
                            },
                            on: {
                                input: function (event) {
                                    params.row.y = event.target.value;
                                    vm.tableData[params.index] = params.row;
                                },
                            },
                        });
                    },
                },
                {
                    title: "宽度百分比",
                    key: "w",
                    render: (h, params) => {
                        let vm = this;
                        return h("input", {
                            domProps: {
                                value: params.row.w,
                            },
                            on: {
                                input: function (event) {
                                    params.row.w = event.target.value;
                                    vm.tableData[params.index] = params.row;
                                },
                            },
                        });
                    },
                },
                {
                    title: "高度百分比",
                    key: "h",
                    render: (h, params) => {
                        let vm = this;
                        return h("input", {
                            domProps: {
                                value: params.row.h,
                            },
                            on: {
                                input: function (event) {
                                    params.row.h = event.target.value;
                                    vm.tableData[params.index] = params.row;
                                },
                            },
                        });
                    },
                },
                {
                    title: "方向",
                    key: "v",
                    render: (h, params) => {
                        let vm = this;
                        return h("input", {
                            domProps: {
                                value: params.row.v,
                            },
                            on: {
                                input: function (event) {
                                    params.row.v = event.target.value;
                                    vm.tableData[params.index] = params.row;
                                },
                            },
                        });
                    },
                },
            ],
        };
    },
    mounted() {
    // 拿到当前组件实例
        const _this = this;
        // 获取产线下拉列表数据
        _this.initLevels();
        // 格式化表格样式
        _this.tableColumns = _this.$time.initTableTitle(_this.tableColumns);
    },
    methods: {
    // 获取产线下拉列表数据
        initLevels() {
            // 拿到当前组件实例
            const _this = this;
            // 组装固定请求参数
            const params = {
                reverselevel: 2,
                parentid: 0,
            };
            _this.axios
                .request({
                    url: "/config/ProjectLevelSection/GetSectionSelect",
                    params,
                    method: "get",
                })
                .then((res) => {
                    let result = res.data;
                    if (result.ret == 1) {
                        _this.levels = result.data;
                        _this.lineid = result.data[0].id;
                        _this.search();
                    } else {
                        _this.$Message.error(_this.$t("" + result.msg));
                    }
                });
        },
        // 查询按钮
        search() {
            const _this = this;
            const { lineid } = this;
            const params = { lineid };
            _this.axios
                .request({
                    url: "/config/ProductionLocation/GetLocations",
                    params,
                    method: "get",
                })
                .then((res) => {
                    let result = res.data;
                    if (result.ret == 1) {
                        _this.handleTableData(result.data);
                    } else {
                        _this.$Message.error(_this.$t("" + result.msg));
                    }
                });
        },
        // 处理返回的数据
        handleTableData(tableList) {
            let tableData = [];
            tableList.forEach((item) => {
                if (item) {
                    tableData.push({
                        x: item.x,
                        y: item.y,
                        w: item.w,
                        h: item.h,
                        v: item.v,
                        machine_section_title: item.machine_section_title,
                        machine_section_id: item.machine_section_id,
                        machine_id: item.machine_id,
                        production_section_title: item.production_section_title,
                        production_section_id: item.production_section_id,
                    });
                }
            });
            this.tableData = tableData;
        },
        // 保存修改
        save() {
            // 拿到当前组件实例
            const _this = this;
            // 拿到表单必填验证函数
            const { formValid } = this;
            // 入参
            let locations = [];
            // 报错信息
            let errorMsg;
            _this.tableData.forEach(function (item) {
                if (
                    formValid(item.x) &&
          formValid(item.y) &&
          formValid(item.w) &&
          formValid(item.h) &&
          formValid(item.v)
                ) {
                    locations.push({
                        x: item.x,
                        y: item.y,
                        w: item.w,
                        h: item.h,
                        v: item.v,
                        machine_section_title: item.machine_section_title,
                        machine_section_id: item.machine_section_id,
                        machine_id: item.machine_id,
                        production_section_title: item.production_section_title,
                        production_section_id: item.production_section_id,
                    });
                } else {
                    errorMsg = "数值不能为空，请输入具体数值！";
                    return false;
                }
            });
            // 如果有报错信息，退出当前函数
            if (errorMsg) {
                _this.$Message.error(errorMsg);
                return false;
            }
            let data = {
                locations,
            };
            _this.axios
                .request({
                    url: "/config/ProductionLocation/SetLocations",
                    data,
                    method: "post",
                })
                .then((res) => {
                    let result = res.data;
                    if (result.ret == 1) {
                        _this.$Message.success(_this.$t("800223"));
                        _this.search();
                    } else {
                        _this.$Message.error(_this.$t("" + result.msg));
                    }
                });
        },
        // 表单必填验证
        formValid(field) {
            if (
                field === null ||
        field === undefined ||
        field === "" ||
        isNaN(parseFloat(field))
            ) {
                return false;
            }
            return true;
        },
    },
};
</script>
