<template>
    <div>
        <div class="container">
            <el-form
                :model="infolist"
                ref="infolist"
                :rules="rules"
                class="container-box"
                label-width="80px"
            >
                <h2 style="display: block;margin-bottom: 20px;">申请信息</h2>
                <div style="height: calc(100% - 160px);overflow:auto;">
                    <el-row :gutter="10">
                        <el-col :span="8" style="width: 450px">
                            <el-form-item
                                prop="terminalTypeName"
                                label="业务名称"
                            >
                                <el-input
                                    v-model="infolist.tit"
                                    placeholder="业务名称"
                                    :disabled="disableStatus"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" style="width: 450px">
                            <el-form-item label="下单周期" prop="orderCycleArr">
                                <el-date-picker
                                    v-model="infolist.orderCycleArr"
                                    type="daterange"
                                    range-separator="-"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions0"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" style="width: 450px">
                            <el-form-item label="需求编号">
                                <el-input
                                    v-model="reqCode"
                                    placeholder="需求编号"
                                    disabled
                                ></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <h2 style="display: block;margin-bottom: 20px;">
                        填写下单信息
                    </h2>
                    <div class="section2">
                        <el-button
                            type="primary"
                            @click="gettypests"
                            style="width: 80px;margin-right: 20px;margin-bottom: 20px;"
                            >选择</el-button
                        >
                        <h3>预计总金额: {{ amountsum }}</h3>
                        <h3>总数: {{ countsum }}</h3>
                    </div>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item class="info-line online">
                                <el-table
                                    :data="infomaterType"
                                    style="width: 100%;"
                                    height="240px"
                                    border
                                    size="mini"
                                    @selection-change="tableSelectionChange"
                                >
                                    <el-table-column
                                        type="selection"
                                        width="55"
                                        fixed="left"
                                    >
                                    </el-table-column>
                                    <el-table-column prop="id" label="物料ID">
                                    </el-table-column>
                                    <el-table-column
                                        prop="regionName"
                                        label="地市公司"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="countyName"
                                        label="区县名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="channelCode"
                                        label="渠道编码"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="channelName"
                                        label="渠道名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="sceneName"
                                        label="场景"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="metirialType"
                                        label="物料类别"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="metirialCode"
                                        label="物料编码"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="metirialName"
                                        label="物料名称"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="unit"
                                        label="物料单位"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="size"
                                        label="规格尺寸"
                                    >
                                    </el-table-column>
                                    <el-table-column prop="length" label="长">
                                    </el-table-column>
                                    <el-table-column prop="width" label="宽">
                                    </el-table-column>
                                    <el-table-column
                                        prop="direction"
                                        label="横竖"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        prop="coefficient"
                                        label="系数"
                                    >
                                    </el-table-column>
                                    <el-table-column prop="price" label="单价">
                                    </el-table-column>
                                    <el-table-column
                                        prop="quantity"
                                        label="数量"
                                        width="100"
                                    >
                                        <template slot-scope="scope">
                                            <el-input
                                                v-model="scope.row.quantity"
                                                :disabled="disableStatus"
                                                style="width: 100%!important;"
                                            >
                                            </el-input>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        prop="priority"
                                        label="优先级"
                                    >
                                    </el-table-column>
                                    <el-table-column
                                        label="结算金额"
                                        width="140px"
                                    >
                                        <template slot-scope="scope">
                                            <div>
                                                {{
                                                    scope.row.settlementAmount = scope.row.quantity *
                                                        scope.row.price *
                                                        scope.row.coefficient
                                                }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        label="操作"
                                        width="160px"
                                        align="center"
                                        fixed="right"
                                    >
                                        <template slot-scope="scope">
                                            <el-button
                                                size="mini"
                                                type="danger"
                                                @click="delLine(scope.row)"
                                                >删除</el-button
                                            >
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <div style="width: 100%">
                        <div>
                            <myUpload
                                @uploadBack="uploadBack"
                                :fileInfo="fileInfo"
                                :fileList="fileInfo.fileList"
                            >
                            </myUpload>
                        </div>
                    </div>
                </div>

                <div class="t-footer">
                    <el-button type="primary" @click="dialogCli(2)"
                        >提 交</el-button
                    >
                    <el-button type="primary" @click="dialogCliadd(3)"
                        >保 存</el-button
                    >
                    <el-button @click="dialogCli(1)">取 消</el-button>
                </div>
            </el-form>
        </div>

        <el-dialog
            title="下单信息"
            :visible.sync="typests"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <el-form
                :model="infolist"
                ref="infolist"
                :rules="rules"
                style="height: 30vh;overflow-y: scroll;"
                v-loading="loadinged"
            >
                <div class="info-line">
                    <el-form-item prop="sceneName">
                        <span>使用场景</span>
                        <el-select
                            @change="changeSearch(1)"
                            clearable
                            v-model="infolist.sceneName"
                            placeholder="使用场景"
                        >
                            <el-option
                                v-for="(items, index) in sceneNameopt"
                                :key="index"
                                :label="items.sceneName"
                                :value="items.sceneName"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="metirialType">
                        <span>物料类别</span>
                        <el-select
                            @change="changeSearch(2)"
                            clearable
                            v-model="infolist.metirialType"
                            placeholder="物料类别"
                        >
                            <el-option
                                v-for="(items, index) in metirialTypeOpt"
                                :key="index"
                                :label="items.metirialType"
                                :value="items.metirialType"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="metirialName">
                        <span>物料名称</span>
                        <el-select
                            @change="changeSearch(3, $event)"
                            clearable
                            v-model="infolist.metirialCode"
                            placeholder="物料名称"
                        >
                            <el-option
                                v-for="(items, index) in metirialOpt"
                                :key="index"
                                :label="items.metirialName"
                                :value="items.metirialCode"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="regionCode">
                        <span>地市名称</span>
                        <el-select
                            @change="verifcheck(1, $event)"
                            clearable
                            multiple
                            v-model="infolist.regionCode"
                            placeholder="地市名称"
                        >   
                            <!-- <el-option
                                label="全选"
                                value="selAllCity"
                            >
                            </el-option> -->
                            <el-checkbox v-model="isSelAllCity" @change='selectAllCity' class="checkboxStyle">全选</el-checkbox>
                            <el-option
                                v-for="item in regionOpt"
                                :key="item.compId"
                                :label="item.compName"
                                :value="item.compId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="countyCode">
                        <span>区县名称</span>
                        <el-select
                            :popper-append-to-body="false"
                            v-model="infolist.countyCode"
                            placeholder="区县名称"
                            multiple
                            @change="verifcheck(2, $event)"
                        >
                            <!-- <el-option
                                label="全选"
                                value="selAllCounty"
                            >
                            </el-option> -->
                            <el-checkbox v-model="isSelAllCounty" @change='selectAllCounty' class="checkboxStyle">全选</el-checkbox>
                            <el-option
                                v-for="item in countyOpt"
                                :key="item.compId"
                                :label="item.compName"
                                :value="item.compId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="channelCode">
                        <span>渠道名称</span>
                        <el-select
                            clearable
                            multiple
                            v-model="infolist.channelCode"
                            placeholder="渠道名称"
                        >
                            <el-checkbox v-model="isSelAllChannel" @change='selectAllChannel' class="checkboxStyle">全选</el-checkbox>
                            <el-option
                                v-for="(items, index) in channelOpt"
                                :key="index"
                                :label="items.channel_name"
                                :value="items.channel_code"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>

            <div class="t-footer">
                <el-button type="primary" @click="typestscheck"
                    >确 定</el-button
                >
                <el-button @click="closedia">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 选择固定审批人 -->
        <el-dialog
            title="选择审批人"
            :visible.sync="fixedDialogStatus"
            width="30%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <div v-loading="loadinged">
                <el-form
                    :model="infolist"
                    ref="infolist"
                    :rules="rules"
                    style="height: 30vh;"
                    v-loading="loadinged"
                >
                    <div class="info-line">
                        <el-form-item prop="" style="width: 100%">
                            <span>审批人员</span>
                            <el-select
                                @change="changeSearch(4)"
                                clearable
                                v-model="infolist.loginNameStr"
                                placeholder="审批人员"
                                :disabled="disableStatus"
                            >
                                <el-option
                                    v-for="(items, index) in userListOpt"
                                    :key="index"
                                    :label="items.loginNameStr"
                                    :value="items.loginNameStr"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-form>

                <div class="t-footer">
                    <el-button type="primary" @click="dialogCliadd(1)"
                        >确 定</el-button
                    >
                    <el-button @click="fixedDialogStatus = false"
                        >取 消</el-button
                    >
                </div>
            </div>
        </el-dialog>
        <!-- 选择审批人1 -->
        <el-dialog
            title="选择审批人"
            :visible.sync="checkexa"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :before-close="closedia"
        >
            <div v-loading="loadinged">
                <el-form :model="infolist" ref="infolist" :rules="rules">
                    <!-- <el-form-item
                        class="info-line online"
                        v-if="companyFlag == 1"
                    >   
                        <el-radio-group v-model="approvalDirection">
                            <el-radio :label="1">区县市场部主任，区县总经理</el-radio>
                            <el-radio :label="2">需求部门领导</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    <el-form-item prop="visiblec" class="info-line online">
                        <span>审批人员</span>
                        <deptTreeOnly
                            class="tree"
                            @treeCheck="treeCheckonly"
                            :defaultList="defaultList"
                            :type="depttype"
                            :closeList="closeList"
                        ></deptTreeOnly>
                        <div class="tree treeUser">
                            <p>
                                {{ treeListonly.leaderAuditName }}
                                <i
                                    v-if="treeListonly.leaderAuditName"
                                    @click="deletes()"
                                    class="el-icon-error"
                                ></i>
                            </p>
                        </div>
                    </el-form-item>
                    
                    
                </el-form>

                <div
                    slot="footer"
                    style="text-align: right;padding-bottom: 20px;"
                >
                    <el-button type="primary" @click="dialogCliadd(2)"
                        >确 定</el-button
                    >
                    <el-button @click="closedia">取 消</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- <myMessage
            :messTit="messTit"
            @closeMessage="closeMessage(1)"
            :centerDialogVisible="centerDialogVisible"
            v-if="centerDialogVisible"
        ></myMessage> -->
    </div>
</template>
<script>
import mySearch from "../../../components/search.vue";
import myUpload from "../../../components/upload.vue";
import deptTreeOnly from "../../../components/deptTreeOnly.vue";
import myMessage from "../../../components/myMessage.vue";
import { MessageBox } from "element-ui";

export default {
    components: {
        mySearch,
        myMessage,
        myUpload,
        deptTreeOnly,
        MessageBox
    },
    data() {
        const terminalTypeName = (rule, value, callback) => {
            if (!this.infolist.tit) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        // const orderCycleArr = (rule, value, callback) => {
        //     if (this.infolist.orderCycleArr &&
        //         this.infolist.orderCycleArr.length == 0) {
        //         callback(new Error("不能为空"));
        //     } else {
        //         callback();
        //     }
        // };
        const sceneName = (rule, value, callback) => {
            if (!this.infolist.sceneName) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const metirialType = (rule, value, callback) => {
            if (!this.infolist.metirialType) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const metirialCode = (rule, value, callback) => {
            if (!this.infolist.metirialCode) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        // const regionCode = (rule, value, callback) => {
        //     if (
        //         this.infolist.regionCode &&
        //         this.infolist.regionCode.length == 0
        //     ) {
        //         callback(new Error("不能为空"));
        //     } else {
        //         callback();
        //     }
        // };
        // const countyCode = (rule, value, callback) => {
        //     if (
        //         this.infolist.countyCode &&
        //         this.infolist.countyCode.length == 0
        //     ) {
        //         callback(new Error("不能为空"));
        //     } else {
        //         callback();
        //     }
        // };
        // const channelCode = (rule, value, callback) => {
        //     if (
        //         this.infolist.channelCode &&
        //         this.infolist.channelCode.length == 0
        //     ) {
        //         callback(new Error("不能为空"));
        //     } else {
        //         callback();
        //     }
        // };

        return {
            rules: {
                terminalTypeName: [
                    {
                        required: true,
                        trigger: "change",
                        validator: terminalTypeName
                    }
                ],
                // orderCycleArr: [
                //     {
                //         type: "array",
                //         required: true,
                //         trigger: "blur",
                //         // validator: orderCycleArr
                //         message: "不能为空"
                //     }
                // ],
                sceneName: [
                    {
                        required: true,
                        trigger: "change",
                        validator: sceneName
                    }
                ],
                metirialType: [
                    {
                        required: true,
                        trigger: "change",
                        validator: metirialType
                    }
                ],
                metirialCode: [
                    {
                        required: true,
                        trigger: "change",
                        validator: metirialCode
                    }
                ],
                regionCode: [
                    {
                        type: "array",
                        required: true,
                        trigger: "blur",
                        message: "不能为空"
                    }
                ],
                countyCode: [
                    {
                        type: "array",
                        required: true,
                        trigger: "blur",
                        message: "不能为空"
                    }
                ],
                channelCode: [
                    {
                        type: "array",
                        required: true,
                        trigger: "blur",
                        message: "不能为空"
                    }
                ]
            },
            fullscreen: false,
            tableData: [{}],
            disableStatus: false,
            infolist: {},
            reqCode: "",
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
                }
            },
            terminal: "758639528378826752",
            userInfo: {},
            params: {},

            loadinged: false,
            options: [],
            countyOpt: [],
            overtime: "",
            materType: "",
            scene: "",
            metirialTypeOpt: [],
            sceneNameopt: [],
            metirialOpt: [],
            typests: false,
            suppliersts: false,
            matersts: false,
            typelist: [],
            suppList: [],
            materList: [],
            stypeList: [],
            radio: "",
            radios: "",
            objcenter: [],
            regionOpt: [],
            preAccount: 0,
            attList: [],
            fileInfo: {
                // type: "img",
                limit: 50,
                url: "/market/cadvBusiMetirialWo/upload",
                fileList: []
            },
            infotype: "01",
            // checkList: [],
            infomaterType: [],
            multipleSelection: [],
            centerDialogVisible: false,
            delid: "",
            uploadstatus: false,
            channelOpt: [],
            // 树形弹窗
            checkexa: false,
            treeListonly: {},
            defaultList: [],
            closeList: false,
            visionchonly: false,
            depttype: 0,
            // 固定审批人员
            fixedDialogStatus: false,
            userListOpt: [],
            list: {},
            companyFlag: "",
            // approvalDirection: 1,
            //地市,区县,渠道 是否全选
            isSelAllCity: false,
            isSelAllCounty: false,
            isSelAllChannel: false
        };
    },
    computed: {
        amountsum: {
            set() {},
            get() {
                var sum = 0;
                this.multipleSelection.forEach(item => {
                    sum += parseFloat(
                        item.price * item.quantity * item.coefficient
                    );
                });
                this.settlementAmount = sum;
                this.settlementAmount.toFixed(2);
                return sum.toFixed(2);
            }
        },
        countsum: {
            set() {},
            get() {
                var sum = 0;
                this.multipleSelection.forEach(item => {
                    sum += parseFloat(item.quantity);
                });
                // this.settlementAmount=sum;
                return sum;
            }
        }
    },
    methods: {
        tableSelectionChange(val) {
            this.multipleSelection = val;
        },
        //物料筛选条件
        changeSearch(v, event) {
            if (v == 1) {
                //获取物料类别
                this.infolist.metirialType = "";
                this.infolist.metirialCode = "";
                // this.metirialTypeOpt = this.sceneNameopt.filter(item => {
                //     return item.sceneName == this.infolist.sceneName;
                // });
                this.$http({
                    url: "/market/cadvBusiMetirial/queryMetirialTypeList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: {
                        sceneName: this.infolist.sceneName
                    }
                }).then(res => {
                    this.metirialTypeOpt = res.data;
                    // this.infolist.metirialType = this.metirialTypeOpt[0].metirialType;
                });
            } else if (v == 2) {
                //获取物料名称
                this.infolist.metirialCode = "";

                // this.metirialOpt = this.metirialTypeOpt.filter(item => {
                //     return item.metirialType == this.infolist.metirialType;
                // });
                this.$http({
                    url: "/market/cadvBusiMetirial/queryMetirialCodeList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: {
                        metirialType: this.infolist.metirialType
                    }
                }).then(res => {
                    this.metirialOpt = res.data;
                });
            } else if (v == 3) {
                this.infolist.metirialCode = event;
                this.$forceUpdate();
            }
        },
        deletes() {
            this.treeListonly = {};
            this.closeList = !this.closeList;
        },
        treeCheckonly(v) {
            this.treeListonly = v;
        },
        //物料筛选条件-地市
        // changeRegion(v) {
        //     if (v == 1) {
        //         //获取区县
        //         // this.infolist.dsmc
        //         this.infolist.countyName = "";
        //         this.infolist.channelName = "";
        //     } else if (v == 2) {
        //         //获取渠道
        //         // this.infolist.dsmc
        //         // this.infolist.qxmc
        //         this.infolist.channelName = "";
        //     }
        // },
        selectAllCity(){
            this.infolist.regionCode = []
            if(this.isSelAllCity){
                this.regionOpt.map(item=>{
                    this.infolist.regionCode.push(item.compId)
                })
                let countyOpt2 = [];
                for (let i = 0; i < this.regionOpt.length; i++) {
                    for (let j = 0; j < this.infolist.regionCode.length; j++) {
                        if (
                            this.regionOpt[i].compId ===
                            this.infolist.regionCode[j]
                        ) {
                            this.infolist.regionName = this.regionOpt[i].compName;
                            this.$http({
                                url: "/sysmgr/regionComp/queryList",
                                method: "post",
                                headers: {
                                    "Content-Type": "application/json"
                                },
                                data: {
                                    parentCompId: this.regionOpt[i].compId
                                }
                            }).then(res => {
                                countyOpt2 = countyOpt2.concat(res.data);
                                this.countyOpt = countyOpt2;
                                
                            });
                        }
                    }
                }
            }else{
                this.infolist.regionCode = []
                this.countyOpt = [];
            }
        },
        selectAllCounty(){
            this.infolist.countyCode = []
            if(this.isSelAllCounty){
                this.countyOpt.map(item=>{
                    this.infolist.countyCode.push(item.compId)
                })
                this.$http({
                    url: "/market/cadvBusiMetirial/queryChannel",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: this.infolist.countyCode
                }).then(res => {
                    this.channelOpt = res.data;
                });
            }else{
                this.infolist.countyCode = []
                this.channelOpt = [];
            }
        },
        selectAllChannel(){
            this.infolist.channelCode = []
            if(this.isSelAllChannel){
                this.channelOpt.map(item=>{
                    this.infolist.channelCode.push(item.channel_code)
                })
            }else{
                this.infolist.channelCode = []
            }
        },
        verifcheck(v, ev) {
           if (v == 2) {
                if(ev.length === this.countyOpt.length){
                    this.isSelAllCounty = true
                }else{
                    this.isSelAllCounty = false
                    
                }
                this.$http({
                    url: "/market/cadvBusiMetirial/queryChannel",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: this.infolist.countyCode
                }).then(res => {
                    this.channelOpt = res.data;
                });
            } else {

                this.infolist.countyCode = [];
                
                if(ev.length === this.regionOpt.length){
                    this.isSelAllCity = true
                }else{
                    this.isSelAllCity = false
                    this.countyOpt = [];
                }
                let countyOpt2 = [];
                for (let i = 0; i < this.regionOpt.length; i++) {
                    for (let j = 0; j < this.infolist.regionCode.length; j++) {
                        if (
                            this.regionOpt[i].compId ===
                            this.infolist.regionCode[j]
                        ) {
                            this.infolist.regionName = this.regionOpt[i].compName;
                            this.$http({
                                url: "/sysmgr/regionComp/queryList",
                                method: "post",
                                headers: {
                                    "Content-Type": "application/json"
                                },
                                data: {
                                    parentCompId: this.regionOpt[i].compId
                                }
                            }).then(res => {
                                countyOpt2 = countyOpt2.concat(res.data);
                                this.countyOpt = countyOpt2;
                                
                            });
                        }
                    }
                }
                
                
            }
        },
        //获取物料类型
        gettypests() {
            this.typests = true;
            this.getRegion();
            this.getMetirialInfo();
        },
        //下单信息, 获取地市
        getRegion() {
            this.$http({
                url: "/sysmgr/regionComp/queryList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {
                    parentCompId: "0"
                }
            }).then(res => {
                this.regionOpt = res.data;
            });
        },
        //获取素材
        getmater(v) {
            if (!this.matersts) {
                this.$http({
                    url: "/sysmgr/cfgDataDicts/queryMap",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: {
                        dictCodePks: "materType"
                    }
                }).then(res => {
                    this.stypeList = res.data.body.materType;
                });
                this.matersts = true;
            }
            v = v == "08" ? "" : v;
            this.$http({
                url: "/market/cadvMaterial/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + 1 + '","pageSize":"1000"}'
                },
                data: {
                    advType: v
                }
            }).then(res => {
                this.materList = [];
                res.data.data.forEach(item => {
                    item.checked = false;
                    this.materList.push(item);
                });
            });
        },
        // handleSelectionChange(v) {
        //     this.objcenter = v;
        // },
        //选择类型 填写下单信息
        typestscheck() {
            this.$refs.infolist.validate(valid => {
                if (valid) {
                    let info = {};
                    info.reqCode = this.infolist.reqCode;
                    info.sceneName = this.infolist.sceneName;
                    info.metirialType = this.infolist.metirialType;
                    info.metirialCode = this.infolist.metirialCode;

                    info.channelCodePks = this.infolist.channelCode.join(",");
                    info.regionCodePks = this.infolist.regionCode.join(",");
                    info.countyCodePks = this.infolist.countyCode.join(",");

                    this.$http({
                        url: "/market/advBusiMetirial/queryList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        // data: {
                        //     // metirialCode: this.objcenter.metirialCode,
                        //     regionCode: this.infolist.regionCode
                        // }
                        // data: { mkAdvBusiMetirial: this.infolist }
                        data: info
                    }).then(res => {
                        // if (this.regionsts) {
                        //     let opt = {
                        //         ys: res.data[0].allProv,
                        //         sy: res.data[1].allProv
                        //     };
                        //     this.infomaterType = opt;
                        // } else {
                            this.infomaterType = res.data;

                            this.infomaterType.forEach(item => {
                                this.amountsum += parseFloat(
                                    item.settlementAmount
                                );
                            });
                        // }
                    });
                    this.typests = false;
                }
            });
        },
        //添加
        dialogCli(v) {
            this.$refs.infolist.validate(valid => {
                if (valid) {
                    if (v === 1) {
                        this.fileInfo.fileList = [];
                        this.infolist = {};
                        return;
                    } else if (v === 2) {
                        if(this.infolist.orderCycleArr== undefined || this.infolist.orderCycleArr.length == 0){
                            MessageBox.alert("请填写下单周期", "温馨提示", {
                                confirmButtonText: "确定"
                            });
                        }  else if(this.infolist.tit == null){
                            MessageBox.alert("请填写业务名称", "温馨提示", {
                                confirmButtonText: "确定"
                            });
                        } else if ((this.companyFlag == "1"||this.companyFlag == "2") && this.attList.length == 0) {
                            MessageBox.alert("请上传附件", "温馨提示", {
                                confirmButtonText: "确定"
                            });
                        } else if (this.multipleSelection.length == 0) {
                            MessageBox.alert(
                                "提交前请至少选择一条物料",
                                "温馨提示",
                                {
                                    confirmButtonText: "确定"
                                }
                            );
                        }else {
                            if (this.userListOpt == null) {
                                // 树形审批人
                                this.checkexa = true;
                            } else {
                                // 固定审批人弹窗
                                this.fixedDialogStatus = true;
                            }
                        }
                    }
                }
            });
        },
        dialogCliadd(v) {
            let _this = this;
            // this.$refs.infolist.validate(valid => {
            //     if (valid) {
            // let list = {};
            this.list.bizName = this.infolist.tit;
            this.list.code = this.reqCode;

            this.list.orderCycle =
                this.$formatDate(this.infolist.orderCycleArr[0], "YYYY-MM-DD") +
                " - " +
                this.$formatDate(this.infolist.orderCycleArr[1], "YYYY-MM-DD");
            let info = [];
            this.multipleSelection.forEach(item => {
                info.push(item);
            });
            this.list.mkAdvBusiMetirialWoInfoList = info;
            if (this.companyFlag == "1" || this.companyFlag == "2") {
                let fileList = [];
                this.attList.forEach(item => {
                    fileList.push({
                        id: item.fileCode,
                        fileCode: item.fileCode,
                        fileName: item.fileName
                    });
                });
                this.list.fileUrl = JSON.stringify(fileList);
            }

            if (v === 1) {
                let userListSingle = "";
                userListSingle = _this.userListOpt.filter(item => {
                    return item.loginNameStr == _this.infolist.loginNameStr;
                });

                this.list.nextOpNo = userListSingle[0].loginNoStr;
                this.list.nextOpName = userListSingle[0].loginNameStr;
                this.fixedDialogStatus = false;

                this.submitInfo("/market/cadvBusiMetirialWo/add", this.list);
            } else if (v === 2) {

                this.list.nextOpNo = this.treeListonly.leaderAuditNo;
                this.list.nextOpName = this.treeListonly.leaderAuditName;
                // this.list.typeNum = this.approvalDirection;

                this.checkexa = false;
                this.submitInfo("/market/cadvBusiMetirialWo/add", this.list);
            } else if (v === 3) {
                this.submitInfo("/market/cadvBusiMetirialWo/save", this.list);
            }
            //     }
            // });
        },
        submitInfo(u, v) {
            let _this = this;
            this.$refs.infolist.validate(valid => {
                if (valid) {
                    this.loadinged = true;
                    this.$http({
                        url: u,
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: v
                    }).then(res => {
                        
                        if (res.data.result === 2) {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else {
                            _this.$message({
                                message: "成功",
                                type: "success"
                            });
                            _this.getList();
                            this.infomaterType = [];
                            //         this.list.bizName = this.infolist.tit;
                            // this.list.code = this.infolist.reqCode;
                            this.infolist = {};
                            this.attList = [];
                            this.fileInfo.fileList = [];
                        }
                        this.loadinged = false;
                    });
                }
            });
        },
        closedia() {
            this.infolist = {};
            this.fixedDialogStatus = false;
            this.checkexa = false;
            this.treeListonly = {};
            this.closeList = !this.closeList;
            this.attList = [];
            this.typests = false;
            // if(this.$refs[n] !== undefined){
            //     this.$refs[n].resetFields();
            // }
        },
        //流程
        getTermianl() {
            this.$http({
                url: "/bpm/api/queryBpmProcList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + 1 + '","pageSize":"100"}'
                },
                data: {}
            }).then(res => {
                this.options = res.data.data;
            });
        },
        //删除
        delLine(v) {
            // this.centerDialogVisible = true;
            // this.messTit = "即将删除此条数据, 是否删除?";
            // this.delid = v.id;

            MessageBox.confirm(
                "确定删除选中项?","温馨提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: '取消'
                }).then(() => {
                    this.infomaterType = this.infomaterType.filter(item=>{
                        return item.id != v.id
                    })
                    this.$message({
                        type: 'info',
                        message: '删除成功'
                    })
                })
                .catch(action => {
                    // this.$message({
                    // type: 'info',
                    // message: '取消按钮点击'
                    // })
                });
                
        },
        // closeMessage(v) {
        //     this.centerDialogVisible = false;
        //     let _this = this;
        //     if (v === 1) {
        //         _this
        //             .$http({
        //                 url: "/market/advBusiMetirial/del",
        //                 method: "post",
        //                 headers: {
        //                     "Content-Type": "application/json"
        //                 },
        //                 data: {
        //                     id: this.delid
        //                 }
        //             })
        //             .then(res => {
        //                 if (res.data.result === 1) {
        //                     _this.$message({
        //                         message: res.data.desc,
        //                         type: "error"
        //                     });
        //                 } else {
        //                     _this.$message({
        //                         message: "删除成功",
        //                         type: "success"
        //                     });
        //                     _this.getList();
        //                 }
        //             });
        //     }
        // },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
        },
        uploadBack(v) {
            this.attList = v;
        },
        // verifcheck() {
        //     for (let i = 0; i < this.regionOpt.length; i++) {
        //         if (this.regionOpt[i].compId === this.infolist.regionCode) {
        //             this.infolist.regionName = this.regionOpt[i].compName;
        //             this.$http({
        //                 url: "/market/cadvContract/queryPage",
        //                 method: "post",
        //                 headers: {
        //                     "Content-Type": "application/json",
        //                     page: '{"pageNo":"' + 1 + '","pageSize":"10"}'
        //                 },
        //                 data: {
        //                     regionName: this.infolist.regionName
        //                 }
        //             }).then(res => {
        //                 this.preAccount = res.data.data[0]
        //                     ? res.data.data[0].preAccount
        //                     : 0;
        //             });
        //         }
        //     }
        // },
        //下单信息, 获取物料信息
        getMetirialInfo() {
            this.$http({
                url: "/market/cadvBusiMetirial/querySceneNameList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {
                    dictCodePks: "metirialType"
                }
            }).then(res => {
                this.sceneNameopt = res.data;
            });
        },
        //获取需求编号(时间戳)
        getList() {
            this.$http({
                url: "/market/cadvBusiMetirialWo/getInitiateInitialization",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {}
            }).then(res => {
                if (res.data.body.wo) {
                    this.infolist.tit = res.data.body.wo.bizName;
                    this.infolist.orderCycleArr = res.data.body.wo.orderCycle.split(
                        " - "
                    );
                    this.reqCode = res.data.body.wo.code;
                    this.infomaterType = res.data.body.infomaterType;
                    this.infomaterType.forEach(item => {
                        this.amountsum += parseFloat(item.settlementAmount);
                    });
                    if (res.data.body.wo.fileUrl != null) {
                        let fileList = JSON.parse(res.data.body.wo.fileUrl);
                        fileList.forEach(item => {
                            this.fileInfo.fileList.push({
                                fileCode: item.fileCode,
                                fileName: item.fileName,
                                name: item.fileName,
                                id: item.id
                            });
                            this.attList.push({
                                fileCode: item.fileCode,
                                fileName: item.fileName,
                                id: item.id
                            });
                        });
                    }
                } else {
                    this.reqCode = res.data.body.timestamp;
                }
                this.userListOpt = res.data.body.queryNext.userList;
                this.companyFlag = res.data.body.companyFlag;
                // this.companyFlag = "1";
            });
        }
    },
    mounted() {
        this.getTermianl();
        this.getUser();
        this.getList();

        // let info = {};
        // info.sceneName = '营业厅-常规物料';
        // info.metirialType = '侧翼灯箱';
        // info.metirialCode = 'A07' ;

        // info.channelCodePks = "232344,23323,wgeg,qw";
        // info.regionCodePks = "304422,304423";
        // info.countyCodePks = "00440022002100000000,00440023002100000000";
        
        // this.$http({
        //     url: "/market/advBusiMetirial/queryList",
        //     method: "post",
        //     headers: {
        //         "Content-Type": "application/json"
        //     },
        //     data: info
        // }).then(res => {
        //         this.infomaterType = res.data;
        //         this.infomaterType.forEach(item => {
        //             this.amountsum += parseFloat(
        //                 item.settlementAmount
        //             );
        //         });
        //     // }
        // });
    },
    created() {}
};
</script>
<style scoped lang="scss">
.img-box {
    height: calc(100vh - 240px);
    overflow-y: scroll;

    .boximg {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        div {
            display: inline-block;
            width: 18%;
            margin-right: 2%;
            margin-bottom: 20px;
            overflow: hidden;
            border: 1px solid #ddd;
            border-radius: 3px;
            background: #fff;
            position: relative;
            height: 100px;

            img {
                width: 100%;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                // height: 100%;
            }
        }
    }
}

.boximgc {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 80px) !important;
    margin-left: 80px;

    div {
        display: inline-block;
        width: 18% !important;
        margin-right: 2%;
        margin-bottom: 20px;
        overflow: hidden;
        border: 1px solid #ddd;
        border-radius: 3px;
        background: #fff;
        position: relative;
        height: 100px;

        img {
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            // height: 100%;
        }
    }
}

.typebox {
    div {
        border: 1px solid #ddd;
        border-top: transparent;

        span {
            display: inline-block;
            width: 20%;
            line-height: 30px;
            padding: 10px;
            vertical-align: top;
        }

        .big {
            width: 35%;
            // background: #f4f4f4;
        }

        .small {
            width: 5%;
            text-align: center;
            // border-right: 1px solid #ddd;
        }

        .gys {
            width: 40%;
        }
    }
}

.t-footer {
    text-align: center;
    padding-right: 20px;
    margin-top: 20px;
}

.onetab {
    padding: 20px;
    height: calc(100% - 180px);
}

.titbox {
    div {
        float: right;

        i {
            font-size: 22px;
            margin-left: 20px;
            cursor: pointer;
        }
    }
}

.tabbox {
    margin-top: 15px;
}

.pageBox {
    text-align: right;
    margin-top: 10px;
}

.info-line {
    width: 100%;
    display: block;
    // padding-left: 20px;

    div {
        width: 50%;
        display: inline-block;
    }

    span {
        width: 80px;
        display: inline-block;
        text-align: left;

        i {
            color: red;
            display: inline-block;
            padding-right: 5px;
        }
    }

    .el-select,
    .el-input {
        width: calc(100% - 100px);
    }

    .el-checkbox-group {
        border: 1px solid #ddd;
        padding-left: 20px;
        height: 40px;
        width: calc(100% - 100px);
        border-radius: 5px;
    }
}

.online {
    width: 100%;

    .el-select {
        width: calc(100% - 100px);
    }

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }
}

.section2 {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    button {
        margin-bottom: 0 !important;
    }
    h3 {
        margin-right: 40px;
    }
}
::v-deep.online .el-form-item__content {
    width: 98%;
    margin-left: 0 !important;
}

::v-deep.el-upload {
    width: 98% !important;
    padding: 0 !important;
}
.el-row {
    margin: 0 !important;
}
.tree {
    width: calc(50% - 60px) !important;
    display: inline-block;
    margin-right: 20px;
    height: 300px;
    overflow-y: scroll;

    .el-icon-error {
        float: right;
        font-size: 20px;
        margin-top: 9px;
        cursor: pointer;
    }
}

.treeUser {
    margin: 0;
    border: 1px solid #ddd;

    p {
        background: #f4f4f4;
        padding: 0 20px;
        margin-bottom: 5px;
    }
}

.treeUserb {
    width: calc(100% - 100px);
    border: 1px solid #ddd;
    background: #f4f4f4;
    border-radius: 3px;
    height: auto;
    overflow: hidden;

    p {
        display: inline-block;
        padding: 0 20px;
        margin-bottom: 5px;
    }
}
.checkboxStyle{
    padding: 0 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>
