<template>
    <!-- 新增工机具 -->
    <div>
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="100px"
        >
            <el-form-item label="机具类型" prop="equipmentId">
                <treeselect
                    v-model="queryParams.equipmentId"
                    default-expand-all
                    :options="equipmentTypeList"
                    placeholder="请选择机具类型"
                    @select="select"
                    :disable-branch-nodes="true"
                    style="width: 240px"
                    noChildrenText="没有数据了"
                    noOptionsText="没有数据"
                    noResultsText="没有搜索结果"
                />
            </el-form-item>

            <el-form-item label="出厂日期">
                <el-date-picker
                    v-model="queryParams.productionTime"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="出厂日期"
                    @change="changeTime"
                ></el-date-picker>
            </el-form-item>

            <el-form-item label="机具厂家" prop="supplierId">
                <el-select
                    v-model="queryParams.supplierId"
                    placeholder="机具厂家"
                    clearable
                    filterable
                    style="width: 240px"
                    @change="changeSupplier"
                >
                    <el-option
                        v-for="item in supplierList"
                        :key="item.supplierId"
                        :label="item.supplier"
                        :value="item.supplierId"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <el-form
            :model="maForm"
            ref="maForm"
            :rules="rules"
            size="small"
            :inline="true"
            label-width="100px"
        >
            <el-form-item label="采购日期" prop="purchaseTime">
                <el-date-picker
                    v-model="maForm.purchaseTime"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="请选择采购日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="到货日期" prop="arrivalTime">
                <el-date-picker
                    v-model="maForm.arrivalTime"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    type="date"
                    placeholder="请选择到货日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="采购员" prop="purchaser">
                <el-select
                    v-model="maForm.purchaser"
                    filterable
                    placeholder="请选择采购员"
                    style="width: 240px"
                >
                    <el-option
                        v-for="item in userList"
                        :key="item.userId"
                        :label="item.userName"
                        :value="item.userId"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input
                    v-model="maForm.remark"
                    placeholder="请输入备注"
                    clearable
                    maxlength="150"
                    type="textarea"
                    style="width: 240px"
                    rows="1"
                />
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleSave"
                    >保存</el-button
                >
            </el-col>
        </el-row>

        <el-table
            v-loading="loading"
            :data="equipmentList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" type="index" width="55" />
            <el-table-column
                label="机具类型"
                prop="machineTypeName"
                :show-overflow-tooltip="true"
                width="200"
            ></el-table-column>
            <el-table-column
                label="规格型号"
                prop="specificationType"
                :show-overflow-tooltip="true"
                width="200"
            />
            <el-table-column label="单位" prop="unitName" width="100" />
            <el-table-column
                label="购置单价(元)"
                prop="purchasePrice"
                align="center"
                width="150"
            >
                <template slot-scope="scope">
                    <el-input-number
                        v-model="scope.row.purchasePrice"
                        controls-position="right"
                        style="width: 100%"
                        :min="0"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column
                label="采购数量"
                prop="purchaseNum"
                width="150"
                type="number"
                maxlength="10"
            >
                <template slot-scope="scope">
                    <el-input-number
                        v-model="scope.row.purchaseNum"
                        controls-position="right"
                        style="width: 100%"
                        :min="1"
                    ></el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="机具厂家" prop="supplierId" width="200">
                <template slot-scope="scope">
                    <el-select
                        v-model="scope.row.supplierId"
                        placeholder="机具厂家"
                        filterable
                        clearable
                        style="width: 180px"
                    >
                        <el-option
                            v-for="item in supplierList"
                            :key="item.supplierId"
                            :label="item.supplier"
                            :value="item.supplierId"
                        />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                label="出厂日期"
                align="center"
                prop="productionTime"
                width="200"
            >
                <template slot-scope="scope">
                    <el-date-picker
                        v-model="scope.row.productionTime"
                        style="width: 180px"
                        value-format="yyyy-MM-dd"
                        type="date"
                        range-separator="-"
                        placeholder="出厂日期"
                    ></el-date-picker>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-document"
                        v-if="scope.row.manageType == 2"
                        @click="handleDetail(scope.row)"
                        >明细</el-button
                    >
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        style="color: red"
                        @click="handleDelete(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <holdingpole-dialog
            :dialog-class="'my-custom-dialog'"
            :initial-visible="showDialog"
            :holdingpoleData="holdingpoleData"
            @close="onDialogClose"
        ></holdingpole-dialog>
    </div>
</template>

<script>
import {
    addPurchaseCheckInfo,
    getPurchaseCheckInfo,
    updatePurchaseCheckInfo,
} from '@/api/store/newBuy'
import { getUserByRoleList } from '@/api/system/user'
import { equipmentTypeTree, supplierInfoList } from '@/api/store/tools'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import HoldingpoleDialog from '@/components/HoldingpoleDialog/index.vue'

import {} from '@/api/store/newBuy'

export default {
    name: 'NewDevicesArrival',
    dicts: ['sys_normal_disable'],
    components: { Treeselect, HoldingpoleDialog },
    props: {
        isEdit: {
            type: Boolean,
            default: () => {
                return false
            },
        },
        editTaskId: {
            type: [String, Number],
            default: () => {
                return ''
            },
        },
    },
    data() {
        return {
            taskId: '',
            // isEdit: false,
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            //机具厂家（供应商管理）
            supplierList: [],
            //机具类型
            equipmentTypeList: [],
            // 用户数据
            userList: [],
            // 角色表格数据
            equipmentList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 是否显示弹出层（数据权限）
            openDataScope: false,
            menuExpand: false,
            menuNodeAll: false,
            deptExpand: true,
            deptNodeAll: false,
            showDialog: false,
            holdingpoleData: {},
            // 日期范围
            dateRange: [],
            // 数据范围选项
            dataScopeOptions: [
                {
                    value: '1',
                    label: '全部数据权限',
                },
                {
                    value: '2',
                    label: '自定数据权限',
                },
                {
                    value: '3',
                    label: '本部门数据权限',
                },
                {
                    value: '4',
                    label: '本部门及以下数据权限',
                },
                {
                    value: '5',
                    label: '仅本人数据权限',
                },
            ],
            // 菜单列表
            menuOptions: [],
            // 部门列表
            deptOptions: [],
            // 查询参数
            queryParams: {
                equipmentId: undefined,
                productionTime: '',
                supplierId: '',
            },
            maForm: {
                purchaseTime: '',
                arrivalTime: '',
                purchaser: '',
                remark: '',
            },
            // 表单参数
            form: {},
            defaultProps: {
                children: 'children',
                label: 'label',
            },
            // 表单校验
            rules: {
                purchaseTime: [
                    {
                        required: true,
                        message: '采购日期不能为空',
                        trigger: 'blur',
                    },
                ],
                arrivalTime: [
                    {
                        required: true,
                        message: '到货日期不能为空',
                        trigger: 'blur',
                    },
                ],
                // purchaser: [
                //   { required: true, message: "采购员不能为空", trigger: "blur" }
                // ]
            },
        }
    },
    computed: {
        pickerOptions() {
            return {
                disabledDate(time) {
                    const currentDate = new Date()
                    currentDate.setHours(0, 0, 0, 0)
                    return time.getTime() < currentDate.getTime()
                },
            }
        },
    },
    watch: {
        'maForm.purchaseTime'() {
            if (this.maForm.purchaseTime != '') {
                this.maForm.arrivalTime = ''
            }
        },
    },
    mounted() {
        // const taskId = this.$route.query && this.$route.query.taskId
        // this.taskId = taskId
        // if (this.taskId == '' || !this.taskId) {
        //     this.isEdit = false
        // } else if (this.taskId != '') {
        //     this.isEdit = true
        //     this.getTaskInfo()
        // }

        if (this.isEdit) {
            this.taskId = this.editTaskId
            this.getTaskInfo()
        }

        this.getUserList()
        // this.getList();
        this.equipmentType()
        this.supplierInfoList()
    },
    methods: {
        /** 查询用户列表--采购员 */
        getUserList() {
            getUserByRoleList({ roleId: '104' }).then((response) => {
                this.userList = response.data
            })
        },
        /** 机具厂家 */
        supplierInfoList() {
            supplierInfoList().then((response) => {
                this.supplierList = response.rows
            })
        },
        /** 机具类型 */
        equipmentType() {
            equipmentTypeTree().then((response) => {
                this.equipmentTypeList = response.data
                this.equipmentTypeList.forEach((item, index) => {
                    if (item.children && item.children.length > 0) {
                        item.children.forEach((item2, index2) => {
                            if (item2.children && item2.children.length > 0) {
                                item2.children.forEach((item3) => {
                                    if (
                                        item3.children &&
                                        item3.children.length > 0
                                    ) {
                                        item3.children.forEach((item4) => {
                                            item4.machineTypeName =
                                                item3.typeName
                                            item4.specificationType =
                                                item4.typeName
                                            this.$set(item4, 'purchasePrice', 0)
                                            this.$set(item4, 'purchaseNum', 1)
                                        })
                                    }
                                })
                            }
                        })
                    }
                })
            })
        },
        //添加机具类型
        select(row) {
            console.log(row)
            if (row.level == 4) {
                for (let i = 0; i < this.equipmentList.length; i++) {
                    if (this.equipmentList[i].typeId == row.typeId) {
                        this.equipmentList.splice(i, 1)
                        break
                    }
                }
                this.$set(row, 'createTime', null)
                this.$set(row, 'productionTime', '')
                this.$set(row, 'supplierId', '')
                this.$set(row, 'purchasePrice', 0)
                this.$set(row, 'purchaseNum', 1)
                this.equipmentList.unshift(row)
            }
        },
        //选择机具厂家
        changeSupplier(supplierId) {
            this.equipmentList.forEach((item) => {
                this.$set(item, 'supplierId', supplierId)
            })
        },
        //选择出厂日期
        changeTime(time) {
            console.log(time)
            this.equipmentList.forEach((item) => {
                this.$set(item, 'productionTime', time)
            })
        },

        //获取任务详情--- 编辑回显数据
        getTaskInfo() {
            // this.loading = true;
            getPurchaseCheckInfo({
                taskId: this.taskId,
                keyWord: this.queryParams.keyWord,
            }).then((response) => {
                // this.taskInfo = response.data
                this.maForm.purchaseTime = response.data.purchaseTime
                this.maForm.arrivalTime = response.data.arrivalTime
                this.maForm.purchaser = response.data.purchaser
                this.maForm.remark = response.data.remark
                this.equipmentList = response.data.checkDetailsList
                // this.loading = false;
            })
        },

        /** 查询右侧列表 */
        getList() {
            // this.loading = true;
            // listRole().then(response => {
            //       this.equipmentList = response.rows;
            //       this.total = response.total;
            //       this.loading = false;
            //     }
            // );
        },
        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },
        // 取消按钮（数据权限）
        cancelDataScope() {
            this.openDataScope = false
            this.reset()
        },
        // 表单重置
        reset() {
            if (this.$refs.menu != undefined) {
                this.$refs.menu.setCheckedKeys([])
            }
            ;(this.menuExpand = false),
                (this.menuNodeAll = false),
                (this.deptExpand = true),
                (this.deptNodeAll = false),
                (this.form = {
                    roleId: undefined,
                    roleName: undefined,
                    roleKey: undefined,
                    roleSort: 0,
                    status: '0',
                    menuIds: [],
                    deptIds: [],
                    menuCheckStrictly: true,
                    deptCheckStrictly: true,
                    remark: undefined,
                })
            this.resetForm('form')
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.roleId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },

        /** 新增按钮操作 */
        handleSave() {
            if (this.equipmentList.length > 0) {
                this.$refs['maForm'].validate((valid) => {
                    if (valid) {
                        // console.log(this.maForm,'maForm')
                        // console.log(this.equipmentList,'equipmentList')
                        let isEmpty = true
                        this.equipmentList.forEach((item) => {
                            if (item.purchaseNum == '' || !item.purchaseNum) {
                                isEmpty = false
                            }
                        })
                        // console.log(this.taskId)

                        this.maForm.taskId = this.taskId
                        this.maForm.checkDetailsList = this.equipmentList
                        // console.log(this.maForm)
                        if (isEmpty) {
                            if (this.equipmentList.length > 0) {
                                this.$modal
                                    .confirm('是否确认保存当前页面')
                                    .then(function () {})
                                    .then(() => {
                                        if (this.isEdit) {
                                            console.log('编辑')
                                            this.loading = true
                                            updatePurchaseCheckInfo(
                                                this.maForm,
                                            ).then((response) => {
                                                if (response.code == 200) {
                                                    this.$modal.msgSuccess(
                                                        '编辑成功',
                                                    )
                                                    // this.$tab.closeOpenPage({
                                                    //     path: '/store/newBuy/newDevicesList',
                                                    // })

                                                    this.$emit(
                                                        'addToolsSuccess',
                                                    )
                                                }
                                                this.loading = false
                                            })
                                        } else if (!this.isEdit) {
                                            console.log('新增')
                                            this.loading = true
                                            addPurchaseCheckInfo(
                                                this.maForm,
                                            ).then((response) => {
                                                if (response.code == 200) {
                                                    this.$modal.msgSuccess(
                                                        '新增成功',
                                                    )
                                                    // this.$tab.closeOpenPage({
                                                    //     path: '/store/newBuy/newDevicesList',
                                                    // })

                                                    this.$emit(
                                                        'addToolsSuccess',
                                                    )
                                                }
                                                this.loading = false
                                            })
                                        }
                                    })
                                    .catch(() => {})
                            } else {
                                this.$modal.msgError(
                                    '请先选择并添加机具类型！！！',
                                )
                            }
                        } else {
                            this.$modal.msgError('请填写采购数量！！！')
                        }
                    }
                })
            } else {
                this.$modal.msgError('请先添加机具类型')
            }
        },
        jumpList() {
            const obj = { path: '/store/newBuy/newDevicesList' }
            this.$tab.closeOpenPage(obj)
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            // this.reset();
            //   this.form = response.data;
            //   this.open = true;
        },
        /** 明细按钮操作 */
        handleDetail(row) {
            this.holdingpoleData = row
            this.showDialog = true
        },
        onDialogClose() {
            console.log('弹窗已关闭')
            this.showDialog = false
            // 在这里执行关闭后的相关操作
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            console.log(row.id)
            this.$modal
                .confirm('是否确认删除所选择的数据项？')
                .then(() => {
                    this.equipmentList.forEach((item, index) => {
                        if (item.id == row.id) {
                            this.equipmentList.splice(index, 1)
                        }
                    })
                })
                .catch(() => {})

            // const roleIds = row.roleId || this.ids;
            // this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
            //   return delRole(roleIds);
            // }).then(() => {
            //   this.getList();
            //   this.$modal.msgSuccess("删除成功");
            // }).catch(() => {});
        },
        /** 导出按钮操作 */
        handleExport() {
            // this.download('system/role/export', {
            //   ...this.queryParams
            // }, `role_${new Date().getTime()}.xlsx`)
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}

::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
}
</style>