<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">
                        <!-- :rules="{
                required: true,
                message: '保费不能为空',
                trigger: 'blur',
              }"
              label="选择配件：" -->
                        <el-form-item
                            :prop="'premiumList.' + index + '.partName'"
                            label="配件名称："
                        >
                            <el-input
                                v-model="domain.partName"
                                placeholder="请输入"
                                size="small"
                                maxlength="50"
                                style="width: 350px"
                            ></el-input>
                        </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
                            v-if="index == 0"
                            :prop="'premiumList.' + index + '.supplierId'"
                            label="选择厂家："
                            :rules="{
                                message: '请选择厂家',
                                required: true,
                                trigger: 'blur',
                            }"
                        >
                            <el-select
                                v-model="domain.supplierId"
                                placeholder="请选择"
                                size="small"
                                filterable
                                style="width: 350px"
                            >
                                <el-option
                                    v-for="dict in supplierSelectList"
                                    :key="dict.supplierId"
                                    :label="dict.supplier"
                                    :value="dict.supplierId"
                                />
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item
              :prop="'premiumList.' + index + '.partPrice'"
              label="配件单价(元)："
              label-width="120px"
              :rules="{
                required: false,
                validator: meneyIntegerValidator,
                trigger: 'blur',
              }"
            > -->
                        <el-form-item
                            v-if="domain.partType == 1"
                            :prop="'premiumList.' + index + '.partPrice'"
                            label="配件单价(元)："
                            label-width="120px"
                        >
                            <el-input
                                v-model="domain.partPrice"
                                placeholder="请输入"
                                size="small"
                                maxlength="10"
                                style="width: 330px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            :prop="'premiumList.' + index + '.partNum'"
                            label="配件数量："
                            :rules="{
                                required: false,
                                // validator: numberIntegerValidator,
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="domain.partNum"
                                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>
            </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">
                        <!-- :rules="{
                required: true,
                message: '保费不能为空',
                trigger: 'blur',
              }"
              label="选择配件：" -->
                        <el-form-item
                            :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 label="配件名称：">
                            <el-input
                                v-model="domain.partName"
                                placeholder="请输入"
                                size="small"
                                maxlength="50"
                                style="width: 350px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            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
                            v-if="index == 0"
                            :prop="'premiumListTwo.' + index + '.supplierId'"
                            label="选择厂家："
                            :rules="{
                                message: '请选择厂家',
                                required: true,
                                trigger: 'blur',
                            }"
                        >
                            <el-select
                                v-model="domain.supplierId"
                                placeholder="请选择"
                                size="small"
                                filterable
                                style="width: 350px"
                            >
                                <el-option
                                    v-for="dict in supplierSelectList"
                                    :key="dict.supplierId"
                                    :label="dict.supplier"
                                    :value="dict.supplierId"
                                />
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item
              :prop="'premiumListTwo.' + index + '.partPrice'"
              label="配件单价(元)："
              label-width="120px"
              :rules="{
                required: false,
                validator: meneyIntegerValidator,
                trigger: 'blur',
              }"
            > -->
                        <el-form-item
                            v-if="domain.partType == 1"
                            label="配件单价(元)："
                            label-width="120px"
                        >
                            <el-input
                                v-model="domain.partPrice"
                                placeholder="请输入"
                                size="small"
                                maxlength="10"
                                style="width: 330px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item
                            label="配件数量："
                            :rules="{
                                required: false,
                                validator: numberIntegerValidator,
                                trigger: 'blur',
                            }"
                        >
                            <el-input
                                v-model="domain.partNum"
                                placeholder="请输入"
                                size="small"
                                maxlength="10"
                                style="width: 350px"
                            ></el-input>
                        </el-form-item>

                        <el-form-item 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>

                    <!--          <el-button @click.prevent="removeDomain(domain, index)"-->
                    <!--            >删除-->
                    <!--          </el-button>-->
                    <!-- <div class="add_box">
            <el-button
              icon="el-icon-plus"
              size="mini"
              type="success"
              @click="addDomainTwo"
              >添加配件
            </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,
    getSupplierSelectApi,
} 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 {
            supplierSelectList: [],
            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: '',
                    },
                ],
            },

            userSelectList: [],
            companyId: '',
            taskId: '',
        }
    },
    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的数'))
            }
        },
        //正则校验配件数量--维修数量
        numberIntegerValidator(rule, value, callback) {
            const reg = /^\+?[1-9][0-9]*$/
            if (reg.test(value) && value <= this.rowObj.repairNum) {
                callback()
            } else {
                callback(new Error('请输入大于0的并且小于维修总量的正整数'))
            }
        },
        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()
            }
            getSupplierSelectApi().then((res) => {
                this.supplierSelectList = res.data
            })
        },

        // 取消按钮
        cancel() {
            this.dialogShowFlag = false
            // this.$refs["form"].resetFields();
            // this.dynamicValidateForm.premiumList = [];
        },
        addDomainOne() {
            // 选择配件 partId
            // 是否收费 partType
            // 配件数量 partNum
            // 配件费用 partCost
            // 维修内容 repairContent
            // 维修数量 repairNum
            this.dynamicValidateForm.premiumList.push({
                selected: 'N',
                partName: '',
                repairer: '',
                partType: '',
                partNum: '',
                partCost: '',
                repairContent: '',
                supplierId: '',
                partPrice: '',
                repairNum: 1,
                key: Date.now(),
            })
        },
        addDomainTwo() {
            this.dynamicValidateFormTwo.premiumListTwo.push({
                selected: 'N',
                partName: '',
                repairer: '',
                partType: '',
                partNum: '',
                partCost: '',
                repairContent: '',
                repairNum: '',
                key: Date.now(),
            })
        },
        submit() {
            this.$refs['dynamicValidateForm'].validate((valid) => {
                if (valid) {
                    this.dynamicValidateForm.premiumList.forEach((item) => {
                        item.partCost = item.partPrice
                    })
                    this.dynamicValidateForm.premiumList.forEach((e) => {
                        if (e.partType == 0) {
                            e.partCost = ''
                        }
                    })
                    // this.dynamicValidateForm.premiumList[0].partCost = this.dynamicValidateForm.premiumList[0].partPrice;
                    // 编码管理传递参数
                    console.log(
                        'this.dynamicValidateForm.premiumList1111)',
                        this.dynamicValidateForm.premiumList,
                    )

                    let params = {
                        taskId: this.rowObj.taskId,
                        maId: this.rowObj.maId,
                        typeId: this.rowObj.typeId,
                        id: this.rowObj.id,
                        repairType: 2,
                        companyId: this.companyId,
                        repairNum: 1,
                        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.$message.success('操作成功!')
                                this.$emit('domainChange', res.code)
                            }
                        })
                        .catch(() => {
                            this.fullscreenLoading = false
                        })
                } else {
                    return false
                }
            })
        },
        submitTwo() {
            this.$refs['dynamicValidateFormTwo'].validate((valid) => {
                if (valid) {
                    // this.dynamicValidateFormTwo.premiumListTwo[0].partCost = this.dynamicValidateFormTwo.premiumListTwo[0].partPrice;
                    this.dynamicValidateFormTwo.premiumListTwo.forEach(
                        (item) => {
                            item.partCost = item.partPrice
                        },
                    )

                    this.dynamicValidateFormTwo.premiumListTwo.forEach((e) => {
                        if (e.partType == 0) {
                            e.partCost = ''
                        }
                    })

                    console.log(
                        'this.dynamicValidateFormTwo.premiumListTwo2222',
                        this.dynamicValidateFormTwo.premiumListTwo,
                    )
                    // 数量管理传递参数
                    let params = {
                        taskId: this.rowObj.taskId,
                        maId: this.rowObj.maId,
                        typeId: this.rowObj.typeId,
                        id: this.rowObj.id,
                        repairType: 2,
                        companyId: this.companyId,
                        repairNum: 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.$message.success('操作成功!')
                                this.$emit('domainChange', res.code)
                            }
                        })
                        .catch(() => {
                            this.fullscreenLoading = false
                        })
                } else {
                    return 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>
