<template>
    <el-dialog
        v-dialogDrag
        v-loading.fullscreen.lock="fullscreenLoading"
        :before-close="cancel"
        :title="dialogTitle"
        :visible.sync="dialogShowFlag"
        append-to-body
        width="600px"
    >
        <div class="form_box_one">
            <el-form
                ref="dynamicValidateForm"
                :model="dynamicValidateForm"
                class="demo-dynamic"
                label-width="100px"
            >
                <div
                    v-for="(domain, index) in dynamicValidateForm.premiumList"
                    :key="domain.key"
                    class="bor_box"
                >
                    <p class="form_box_title">编码管理设备</p>
                    <div class="form_box_line"></div>
                    <div class="form_box_item">
                        <el-form-item
                            :prop="'premiumList.' + index + '.partId'"
                            label="选择配件："
                        >
                            <treeselect
                                v-model="domain.partId"
                                style="width: 350px"
                                :options="deptList"
                                :normalizer="normalizer"
                                noChildrenText="没有数据了"
                                noOptionsText="没有数据"
                                noResultsText="没有搜索结果"
                                placeholder="请选择配件"
                                :disable-branch-nodes="true"
                                @input="handleSelectTree($event, index)"
                            />
                        </el-form-item>
                        <el-form-item
                            v-if="index == 0"
                            :prop="'premiumListTwo.' + index + '.repairer'"
                            label="维修人："
                        >
                            <el-select
                                v-model="domain.repairer"
                                placeholder="请选择"
                                size="small"
                                filterable
                                style="width: 350px"
                            >
                                <el-option
                                    v-for="dict in userSelectList"
                                    :key="dict.userId"
                                    :label="dict.userName"
                                    :value="dict.userId"
                                />
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item
                            :prop="'premiumList.' + index + '.partType'"
                            label="是否收费："
                            required
                            :rules="{
                                required: true,
                                message: '请选择是否收费',
                                trigger: 'blur',
                            }"
                        >
                            <el-radio-group
                                style="width: 350px"
                                v-model="domain.partType"
                            >
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item> -->

                        <el-form-item
                            :prop="'premiumList.' + index + '.partNum'"
                            label="配件数量："
                            :rules="{
                                required: isRequired,
                                validator: numberIntegerValidator,
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="domain.partNum"
                                placeholder="请输入"
                                size="small"
                                maxlength="10"
                                style="width: 350px"
                                :disabled="!isRequired"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            v-if="domain.partType == 1"
                            :prop="'premiumList.' + index + '.partCost'"
                            label="配件单价："
                            :rules="{
                                required: false,
                                validator: meneyIntegerValidator,
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="domain.partCost"
                                placeholder="请输入"
                                size="small"
                                maxlength="10"
                                style="width: 350px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            :prop="'premiumList.' + index + '.repairContent'"
                            label="维修内容："
                        >
                            <el-input
                                v-model="domain.repairContent"
                                maxlength="100"
                                placeholder="请输入"
                                show-word-limit
                                size="small"
                                style="width: 350px"
                                type="textarea"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="add_box">
                        <el-button
                            icon="el-icon-plus"
                            size="mini"
                            type="success"
                            @click="addDomainOne"
                            >添加配件
                        </el-button>
                        <el-button
                            size="mini"
                            icon="el-icon-delete"
                            @click="delDomain(domain, 1)"
                            v-show="index > 0"
                            >删除</el-button
                        >
                    </div>
                </div>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
                v-if="rowObj.code !== null && rowObj.code !== ''"
            >
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </div>
        </div>
        <div class="form_box_two">
            <el-form
                ref="dynamicValidateFormTwo"
                :model="dynamicValidateFormTwo"
                class="demo-dynamic"
                label-width="100px"
            >
                <div
                    v-for="(
                        domain, index
                    ) in dynamicValidateFormTwo.premiumListTwo"
                    :key="domain.key"
                    class="bor_box"
                >
                    <p class="form_box_title">数量管理设备</p>
                    <div class="form_box_line"></div>
                    <div class="form_box_item">
                        <el-form-item
                            v-if="index == 0"
                            :prop="'premiumListTwo.' + index + '.repairNum'"
                            label="维修数量："
                            :rules="{
                                required: true,
                                validator: numberIntegerValidator,
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="domain.repairNum"
                                placeholder="请输入"
                                size="small"
                                maxlength="10"
                                style="width: 350px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            v-if="index == 0"
                            :prop="'premiumListTwo.' + index + '.repairer'"
                            label="维修人："
                        >
                            <el-select
                                v-model="domain.repairer"
                                placeholder="请选择"
                                size="small"
                                filterable
                                style="width: 350px"
                            >
                                <el-option
                                    v-for="dict in userSelectList"
                                    :key="dict.userId"
                                    :label="dict.userName"
                                    :value="dict.userId"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            :prop="'premiumList.' + index + '.partId'"
                            label="选择配件："
                        >
                            <treeselect
                                style="width: 350px"
                                v-model="domain.partId"
                                :options="deptList"
                                :normalizer="normalizer"
                                noChildrenText="没有数据了"
                                noOptionsText="没有数据"
                                noResultsText="没有搜索结果"
                                placeholder="选择上级"
                                :disable-branch-nodes="true"
                                @input="handleSelectTree($event, index)"
                            />
                        </el-form-item>
                        <!-- <el-form-item
                            :prop="'premiumListTwo.' + index + '.partType'"
                            label="是否收费："
                            required
                            :rules="{
                                required: true,
                                message: '请选择是否收费',
                                trigger: 'blur',
                            }"
                        >
                            <el-radio-group
                                style="width: 350px"
                                v-model="domain.partType"
                            >
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item> -->
                        <el-form-item
                            :prop="'premiumListTwo.' + index + '.partNum'"
                            label="配件数量："
                            :rules="{
                                required: isRequired,
                                validator: numberIntegerValidator,
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="domain.partNum"
                                placeholder="请输入"
                                size="small"
                                maxlength="10"
                                style="width: 350px"
                                :disabled="!isRequired"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            v-if="domain.partType == 1"
                            :prop="'premiumListTwo.' + index + '.partCost'"
                            label="配件单价："
                            :rules="{
                                required: false,
                                validator: meneyIntegerValidator,
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="domain.partCost"
                                placeholder="请输入"
                                size="small"
                                maxlength="10"
                                style="width: 350px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            :prop="'premiumListTwo.' + index + '.repairContent'"
                            label="维修内容："
                        >
                            <el-input
                                v-model="domain.repairContent"
                                maxlength="100"
                                placeholder="请输入"
                                show-word-limit
                                size="small"
                                style="width: 350px"
                                type="textarea"
                            ></el-input>
                        </el-form-item>
                    </div>
                    <div class="add_box">
                        <el-button
                            icon="el-icon-plus"
                            size="mini"
                            type="success"
                            @click="addDomainTwo"
                            >添加配件
                        </el-button>
                        <el-button
                            size="mini"
                            icon="el-icon-delete"
                            @click="delDomain(domain, 2)"
                            v-show="index > 0"
                            >删除</el-button
                        >
                    </div>
                </div>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
                v-if="rowObj.code == null || rowObj.code == ''"
            >
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitTwo">保存</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import {
    submitRepairApplyApi,
    getUserSelectApi,
    getRepairMaTypeListApi,
    listPartType,
} from '@/api/repairTest/repair'
// import { listPartType, } from "@/api/store/tools";
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getInfo } from '@/api/login'
export default {
    components: { Treeselect },
    props: {
        // 弹窗是否显示
        isShowFlag: {
            type: Boolean,
            default: false,
        },
        // 对应操作数据键值
        priKey: {
            type: [String, Number],
            default: '',
        },
        //弹窗标题
        dialogTitle: {
            type: String,
            default: '',
        },
        //弹窗标题
        rowObj: {
            type: Object,
            default: {},
        },
    },
    watch: {
        isShowFlag(val) {
            if (val) {
                this.init()
            }
        },
    },
    computed: {
        dialogShowFlag: {
            get() {
                return this.isShowFlag
            },
            set(v) {
                this.$emit('update:isShowFlag', v)
            },
        },
    },
    data() {
        return {
            fullscreenLoading: false,
            dynamicValidateForm: {
                premiumList: [
                    {
                        selected: 'Y',
                        premium: undefined,
                        rate: undefined,
                        feeRate: undefined,
                        fee: undefined,
                        baofei1_unit: '',
                        shangyoufeiyonge_unit: '',
                        downRate: undefined,
                        downFee: undefined,
                        xiayoufeiyonge_unit: '',
                    },
                ],
            },
            dynamicValidateFormTwo: {
                premiumListTwo: [
                    {
                        selected: 'Y',
                        premium: undefined,
                        rate: undefined,
                        feeRate: undefined,
                        fee: undefined,
                        baofei1_unit: '',
                        shangyoufeiyonge_unit: '',
                        downRate: undefined,
                        downFee: undefined,
                        xiayoufeiyonge_unit: '',
                    },
                ],
            },
            deptList: [],
            userSelectList: [],
            companyId: '',
            taskId: '',
            isRequired: false,
        }
    },
    mounted() {
        this.$eventBus.$on('taskId', (taskId) => {
            this.taskId = taskId
        })
        this.getTree()
    },
    methods: {
        //正则校验配件费用
        meneyIntegerValidator(rule, value, callback) {
            const reg =
                /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
            if (value === '' || reg.test(value)) {
                callback()
            } else {
                callback(new Error('请输入大于0的数,最多2为小数'))
            }
        },
        //正则校验配件数量--维修数量
        numberIntegerValidator(rule, value, callback) {
            const reg = /^\+?[1-9][0-9]*$/
            // if ((value === '' || reg.test(value)) && value <= this.rowObj.repairNum) {
            //   callback()
            // } else {
            //   callback(new Error('请输入大于0的并且小于维修总量的正整数'))
            // }

            if (this.isRequired && (value === '' || !reg.test(value))) {
                callback(new Error('请输入大于0的正整数'))
            } else {
                callback()
            }
        },
        getTree() {
            listPartType().then((response) => {
                this.deptList = this.handleTree(response.data, 'paId')
            })
        },
        /** 转换部门数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.paId,
                label: node.paName,
                children: node.children,
            }
        },
        getList() {
            let params = {
                taskId: this.taskId,
            }
            this.loading = true
            getRepairMaTypeListApi(params).then((res) => {
                if (res.code == 200) {
                    this.repairList = res.rows
                    this.total = res.total
                    this.loading = false
                }
            })
        },
        init() {
            if (this.rowObj.code !== null && this.rowObj.code !== '') {
                this.dynamicValidateForm.premiumList = []
                this.dynamicValidateFormTwo.premiumListTwo = []
                this.addDomainOne()
            } else {
                this.dynamicValidateForm.premiumList = []
                this.dynamicValidateFormTwo.premiumListTwo = []
                this.addDomainTwo()
            }
            getUserSelectApi({ roleIds: [133] }).then((response) => {
                this.userSelectList = response.data
            })
            getInfo().then((res) => {
                this.companyId = res.user.companyId
            })
        },
        // 取消按钮
        cancel() {
            this.dialogShowFlag = false
            // this.$refs["form"].resetFields();
            // this.dynamicValidateForm.premiumList = [];
        },
        addDomainOne() {
            // 选择配件 partId
            // 是否收费 partType
            // 配件数量 partNum
            // 配件费用 partCost
            // 维修内容 repairContent
            // 维修数量 repairNum
            this.dynamicValidateForm.premiumList.push({
                selected: 'N',
                // partId: '',
                repairer: '',
                partType: '',
                partNum: '',
                partCost: '',
                repairContent: '',
                repairNum: 1,
                key: Date.now(),
            })
        },
        delDomain(domain, type) {
            if (type == 1) {
                this.dynamicValidateForm.premiumList =
                    this.dynamicValidateForm.premiumList.filter(
                        (item) => item.key != domain.key,
                    )
            } else {
                this.dynamicValidateFormTwo.premiumListTwo =
                    this.dynamicValidateFormTwo.premiumListTwo.filter(
                        (item) => item.key != domain.key,
                    )
            }
        },
        addDomainTwo() {
            this.dynamicValidateFormTwo.premiumListTwo.push({
                selected: 'N',
                // partId: '',
                repairer: '',
                partType: '',
                partNum: '',
                partCost: '',
                repairContent: '',
                repairNum: '',
                key: Date.now(),
            })
        },
        submit() {
            this.$refs['dynamicValidateForm'].validate((valid) => {
                if (valid) {
                    // 编码管理传递参数
                    console.log(
                        'this.dynamicValidateForm.premiumList1111)',
                        this.dynamicValidateForm.premiumList,
                    )

                    this.dynamicValidateForm.premiumList.forEach((e) => {
                        if (e.partType == 0) {
                            e.partCost = ''
                        }
                    })
                    let params = {
                        taskId: this.rowObj.taskId,
                        maId: this.rowObj.maId,
                        typeId: this.rowObj.typeId,
                        id: this.rowObj.id,
                        repairType: 1,
                        companyId: this.companyId,
                        partStrList: JSON.stringify(
                            this.dynamicValidateForm.premiumList,
                        ),
                    }
                    this.fullscreenLoading = true
                    submitRepairApplyApi(params)
                        .then((res) => {
                            if (res.code == 200) {
                                this.getList()
                                this.fullscreenLoading = false
                                this.dialogShowFlag = false
                                this.index = null
                                this.$message.success('操作成功!')
                                this.$emit('domainChange', res.code)
                            }
                        })
                        .catch(() => {
                            this.index = null
                            this.fullscreenLoading = false
                        })
                } else {
                    return false
                }
            })
        },
        submitTwo() {
            this.$refs['dynamicValidateFormTwo'].validate((valid) => {
                if (valid) {
                    this.dynamicValidateFormTwo.premiumListTwo.forEach((e) => {
                        if (e.partType == 0) {
                            e.partCost = ''
                        }
                    })
                    // 数量管理传递参数
                    let params = {
                        taskId: this.rowObj.taskId,
                        maId: this.rowObj.maId,
                        typeId: this.rowObj.typeId,
                        id: this.rowObj.id,
                        companyId: this.companyId,
                        repairType: 1,
                        partStrList: JSON.stringify(
                            this.dynamicValidateFormTwo.premiumListTwo,
                        ),
                    }
                    this.fullscreenLoading = true
                    submitRepairApplyApi(params)
                        .then((res) => {
                            if (res.code == 200) {
                                this.getList()
                                this.fullscreenLoading = false
                                this.dialogShowFlag = false
                                this.index = null
                                this.$message.success('操作成功!')
                                this.$emit('domainChange', res.code)
                            }
                        })
                        .catch(() => {
                            this.index = null
                            this.fullscreenLoading = false
                        })
                } else {
                    return false
                }
            })
        },
        handleSelectTree(value, index) {
            if (value) {
                this.isRequired = true
            } else {
                this.$refs['dynamicValidateForm'].clearValidate()
                this.$refs['dynamicValidateFormTwo'].clearValidate()
                this.isRequired = false
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.form_box_one {
    width: 100%;
    display: flex;
    flex-direction: column;

    .form_box_title {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 12px;
    }

    .form_box_line {
        margin: 8px 0;
        width: 100%;
        border-bottom: 2px solid #1a1c22;
    }

    .form_box_item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .add_box {
        display: flex;
        justify-content: flex-end;
        margin-right: 3%;
    }
}

.form_box_two {
    display: flex;
    flex-direction: column;

    .form_box_title {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        font-size: 12px;
    }

    .form_box_line {
        margin: 8px 0;
        width: 100%;
        border-bottom: 2px solid #1a1c22;
    }

    .form_box_item {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .add_box {
        display: flex;
        justify-content: flex-end;
        margin-right: 3%;
    }
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 3%;
    margin-top: 10px;
}
</style>
