<template>
    <fullscreen :fullscreen.sync="fullscreen" class="container">
        <div class="container-box">
            <toolList @iconCli="iconCli" :tooltit="tooltit"></toolList>
            <div class="search">
                <mySearch
                    :searchList="searchList"
                    @searchInfo="searchInfo"
                ></mySearch>
                <el-button
                    class="btn-check"
                    size="medium"
                    type="primary"
                    @click="dialogCheck(3)" v-if="userInfo.loginNo=='rensiying'"
                    >添加
                </el-button>
            </div>
            <div class="tabbox">
                <el-table
                    height="calc(100% - 40px)"
                    class="com-table"
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    size="small"
                    border
                    style="width: 100%"
                    v-loading="loading"
                >
                    <el-table-column prop="sceneName" label="场景">
                    </el-table-column>
                    <el-table-column prop="proviceFlagName" label="下单模式">
                    </el-table-column>
                    <!-- <el-table-column prop="metirialType" label="细分类型">
					</el-table-column> -->

                    <el-table-column prop="metirialType" label="类别">
                    </el-table-column>
                    <el-table-column prop="isAsic" label="基础数据">
                    </el-table-column>
                    <el-table-column
                        prop="metirialCode"
                        label="物料编码"
                        show-overflow-tooltip
                    >
                    </el-table-column>
                    <el-table-column prop="metirialName" label="物料名称">
                    </el-table-column>
                    <!--<el-table-column prop="quality" label="材质" width="200" show-overflow-tooltip>
					</el-table-column> -->
                    <!-- <el-table-column prop="size" label="规格" show-overflow-tooltip>
					</el-table-column> -->
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                    <el-table-column prop="price" label="不含税单价">
                    </el-table-column>
                    <!-- <el-table-column prop="proviceFlagName" label="申请权限">
					</el-table-column> -->

                    <el-table-column label="操作" width="160px" align="center">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="dialogCheck(1, scope.row)"
                                >查看</el-button
                            >
                            <el-button
                                size="mini"
                                type="primary"
                                @click="dialogCheck(2, scope.row)" v-if="userInfo.loginNo=='rensiying'"
                                >修改</el-button
                            >
                            <el-button
                                size="mini"
                                type="danger"
                                @click="delLine(scope.row)" v-if="userInfo.loginNo=='rensiying'"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    class="pageBox"
                    @current-change="currchange"
                    layout="prev, pager, next"
                    background
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <el-dialog
            :title="titname + '物料类型'"
            :visible.sync="dialogStatus"
            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"
                    style="height: 50vh;overflow-y: scroll;"
                >
                    <div class="info-line">
                        <el-form-item prop="sceneName">
                            <span>使用场景</span>
                            <el-select
                                :disabled="disableStatus"
                                :popper-append-to-body="false"
                                multiple
                                v-model="infolist.sceneName"
                                placeholder="使用场景"
                                @change="usePlance"
                            >
                                <el-option
                                    v-for="item in sceneopt"
                                    :key="item.dataName"
                                    :label="item.dataName"
                                    :value="item.dataName"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="proviceFlag">
                            <span>下单模式</span>
                            <el-select
                                :disabled="disableStatus"
                                :popper-append-to-body="false"
                                v-model="infolist.proviceFlag"
                                placeholder="下单模式"
                            >
                                <el-option
                                    v-for="item in proviceopt"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="metirialType">
                            <span>物料类别</span>
                            <el-select
                                :disabled="disableStatus"
                                :popper-append-to-body="false"
                                v-model="infolist.metirialType"
                                placeholder="物料类别"
                            >
                                <el-option
                                    v-for="(item, index) in metirialTypeopt"
                                    :key="index"
                                    :label="item.dataName"
                                    :value="item.dataName"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="isAsic">
                            <span>基础数据</span>
                            <el-select
                                :disabled="disableStatus"
                                :popper-append-to-body="false"
                                v-model="infolist.isAsic"
                                placeholder="基础数据"
                            >
                                <el-option
                                    v-for="item in isAsicopt"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <!-- <el-form-item prop="metirialType">
							<span>细分类型</span>
							<el-input v-model="infolist.metirialType" placeholder="细分类型" :disabled="disableStatus">
							</el-input>
						</el-form-item> -->

                        <el-form-item prop="metirialCode">
                            <span>物料编码</span>
                            <el-input
                                v-model="infolist.metirialCode"
                                placeholder="物料编码"
                                :disabled="metirialCodeDisableStatus"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="metirialName">
                            <span>物料名称</span>
                            <!-- <el-select :disabled="disableStatus" :popper-append-to-body="false"
								v-model="infolist.metirialName" placeholder="物料名称">
								<el-option v-for="item in nameopt" :key="item.dataCode" :label="item.dataName"
									:value="item.dataName">
								</el-option>
							</el-select> -->
                            <el-input
                                v-model="infolist.metirialName"
                                placeholder="物料名称"
                                :disabled="disableStatus"
                            >
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="supplierCode">
                            <span>供应商</span>
                            <el-select
                                :disabled="disableStatus"
                                :popper-append-to-body="false"
                                v-model="infolist.supplierCode"
                                placeholder="供应商"
                                @change="verifall"
                            >
                                <el-option
                                    v-for="item in suppOpt"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="size">
                            <span>规格尺寸</span>
                            <el-input
                                v-model="infolist.size"
                                placeholder="规格尺寸"
                                :disabled="disableStatus"
                            ></el-input>
                        </el-form-item>
                        <el-form-item prop="coefficient">
                            <span>勾选后系数</span>
                            <el-select
                                :disabled="disableStatus"
                                :popper-append-to-body="false"
                                v-model="infolist.coefficient"
                                placeholder="勾选后系数"
                            >
                                <el-option
                                    v-for="item in coefficientopt"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="unit">
                            <span>单位</span>
                            <!-- <el-input v-model="infolist.unit" placeholder="单位" :disabled="disableStatus"></el-input> -->
                            <el-select
                                :disabled="disableStatus"
                                :popper-append-to-body="false"
                                v-model="infolist.unit"
                                placeholder="单位"
                            >
                                <el-option
                                    v-for="item in unitopt"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="price">
                            <span>不含税单价</span>
                            <el-input
                                type="number"
                                v-model="infolist.price"
                                placeholder="不含税单价"
                                :disabled="disableStatus"
                            ></el-input>
                        </el-form-item>
                        <!-- <el-form-item>
							<span>税率</span>
							<el-input v-model="infolist.tax" placeholder="税率" :disabled="disableStatus"></el-input>
						</el-form-item> -->
                        <!-- <el-form-item>
							<span>安装</span>
							<el-input v-model="infolist.install" placeholder="是否需要安装" :disabled="disableStatus"></el-input>
						</el-form-item> -->
                    </div>
                    <!-- <el-form-item class="info-line online" prop="quality">
						<span>物料材质</span>
						<el-input v-model="infolist.quality" placeholder="物料材质" :disabled="disableStatus"
							type="textarea" :rows="4"></el-input>
					</el-form-item> -->
                </el-form>

                <div slot="footer" class="dialog-footer myfooter">
                    <el-button
                        type="primary"
                        @click="dialogCli(2)"
                        v-if="titname !== '查看'"
                        >确 定</el-button
                    >
                    <el-button @click="dialogCli(1)" v-if="titname === '查看'"
                        >确 定</el-button
                    >
                    <el-button @click="dialogCli(1)">取 消</el-button>
                </div>
            </div>
        </el-dialog>

        <myMessage
            :messTit="messTit"
            @closeMessage="closeMessage"
            :centerDialogVisible="centerDialogVisible"
            v-if="centerDialogVisible"
        ></myMessage>
    </fullscreen>
</template>
<script>
import mySearch from "../../../components/search.vue";
import myMessage from "../../../components/myMessage.vue";
import toolList from "../../../components/toolList";

export default {
    components: {
        mySearch,
        myMessage,
        toolList
    },
    data() {
        const sceneName = (rule, value, callback) => {
            if (!this.infolist.sceneName) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const metirialName = (rule, value, callback) => {
            if (!this.infolist.metirialName) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const metirialType = (rule, value, callback) => {
            if (!this.infolist.metirialType) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const isAsic = (rule, value, callback) => {
            if (!this.infolist.isAsic) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const metirialCode = (rule, value, callback) => {
            if (!this.infolist.metirialCode) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const proviceFlag = (rule, value, callback) => {
            if (!this.infolist.proviceFlag) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const proviceFlagName = (rule, value, callback) => {
            if (!this.infolist.proviceFlagName) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };

        const supplierCode = (rule, value, callback) => {
            if (!this.infolist.supplierCode) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const size = (rule, value, callback) => {
            if (!this.infolist.size) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const coefficient = (rule, value, callback) => {
            if (!this.infolist.coefficient) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        const unit = (rule, value, callback) => {
            if (!this.infolist.unit) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };

        const price = (rule, value, callback) => {
            if (!this.infolist.price) {
                callback(new Error("不能为空"));
            } else if (parseFloat(this.infolist.price) > 999999.99) {
                callback(new Error("数量过大"));
            } else {
                callback();
            }
        };
        const quality = (rule, value, callback) => {
            if (!this.infolist.quality) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        return {
            rules: {
                sceneName: [
                    {
                        required: true,
                        trigger: "change",
                        validator: sceneName
                    }
                ],
                metirialName: [
                    {
                        required: true,
                        trigger: "change",
                        validator: metirialName
                    }
                ],
                metirialType: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: metirialType
                    }
                ],
                isAsic: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: isAsic
                    }
                ],

                metirialCode: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: metirialCode
                    }
                ],
                proviceFlag: [
                    {
                        required: true,
                        trigger: "change",
                        validator: proviceFlag
                    }
                ],
                proviceFlagName: [
                    {
                        required: true,
                        trigger: "change",
                        validator: proviceFlagName
                    }
                ],

                supplierCode: [
                    {
                        required: true,
                        trigger: "change",
                        validator: supplierCode
                    }
                ],
                size: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: size
                    }
                ],
                coefficient: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: coefficient
                    }
                ],

                unit: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: unit
                    }
                ],
                price: [
                    {
                        required: true,
                        trigger: "change",
                        validator: price
                    }
                ],
                quality: [
                    {
                        required: true,
                        trigger: "change",
                        validator: quality
                    }
                ]
            },
            searchList: [
                {
                    type: "sel",
                    tit: "使用场景",
                    value: "",
                    width: "31%",
                    options: [
                        {
                            dataCode: "营业厅- VI改造",
                            dataName: "营业厅- VI改造"
                        },
                        {
                            dataCode: "营业厅-基础物料",
                            dataName: "营业厅-基础物料"
                        },
                        {
                            dataCode: "小区",
                            dataName: "小区"
                        },
                        {
                            dataCode: "校园",
                            dataName: "校园"
                        },
                        {
                            dataCode: "政企",
                            dataName: "政企"
                        }
                    ]
                },
                {
                    type: "sel",
                    tit: "下单模式",
                    value: "",
                    width: "31%",
                    options: [
                        {
                            dataCode: "省公司",
                            dataName: "省公司"
                        },
                        {
                            dataCode: "地市公司",
                            dataName: "地市公司"
                        },

                        {
                            dataCode: "省+地市",
                            dataName: "省+地市"
                        }
                    ]
                },
                { type: "input", tit: "物料名称", value: "", width: "31%" }
            ],
            tooltit: "二采物料类型建档",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [],
            dialogStatus: false,
            disableStatus: false,
            titname: "",
            infolist: {},
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: "",
            delid: "",
            loading: false,
            loadinged: false,
            //下单模式
            proviceopt: [
                {
                    id: "0",
                    name: "省公司"
                },
                {
                    id: "1",
                    name: "地市公司"
                },
                {
                    id: "2",
                    name: "省+地市"
                }
            ],
            //使用场景
            sceneopt: [
                {
                    dataCode: "1",
                    dataName: "小区"
                },
                {
                    dataCode: "2",
                    dataName: "校园"
                },
                {
                    dataCode: "3",
                    dataName: "营业厅- VI改造"
                },
                {
                    dataCode: "4",
                    dataName: "营业厅-基础物料"
                },
                {
                    dataCode: "5",
                    dataName: "政企"
                }
            ],
            // 基础数据
            isAsicopt: [
                {
                    id: "0",
                    name: "是"
                },
                {
                    id: "1",
                    name: "否"
                }
            ],
            coefficientopt: [
                {
                    id: "0",
                    name: "按需录入"
                },
                {
                    id: "1",
                    name: "1"
                }
            ],
            //单位
            unitopt: [
                {
                    id: "0",
                    name: "平方米"
                },
                {
                    id: "1",
                    name: "个"
                },
                {
                    id: "2",
                    name: "延长米"
                },
                {
                    id: "3",
                    name: "套"
                },
                {
                    id: "4",
                    name: "组"
                }
            ],
            //物料名称
            nameopt: [],
            //供应商
            suppOpt: [],
            usePlanceArr: [],
            metirialTypeopt: [],
            metirialCodeDisableStatus: false,
            // scene:[]
        };
    },
    methods: {
        //处理所需数据
        verifall(v) {
            // for (let j = 0; j < this.suppOpt.length; j++) {
            //     if (this.suppOpt[j].code == v) {
            //         this.infolist.supplierName = this.suppOpt[j].name;
            //     }
            // }
        },
        usePlance(v) {
            this.usePlanceArr = v;

            // 	let value = ''
            // 	if(v == '1'){
            // 		value = 'house';
            // 	}else if(v == '2'){
            // 		value = 'school';
            // 	}else if(v == '3'){
            // 		value = 'serviceHall';
            // 	}
            // 	this.$http({
            // 	    url: "/market/cfgDataDict/queryList",
            // 	    method: "post",
            // 	    headers: {
            // 	        "Content-Type": "application/json",
            // 	    },
            // 	    data: {
            // 	        dictCode: value
            // 	    },
            // 	}).then((res) => {
            // 	    this.nameopt = res.data;
            // 	});
        },
        closedia() {
            this.infolist = {};
            this.dialogStatus = false;
        },
        //搜索数据
        searchInfo(v) {
            this.params = {};
            v[0] ? (this.params.sceneName = v[0]) : "";
            v[1] ? (this.params.proviceFlagName = v[1]) : "";
            v[2] ? (this.params.metirialName = v[2]) : "";
            this.getList(this.params, this.pageSize);
        },
        //获取列表
        getList(v, n) {
            this.pageSize = n;
            let _this = this;
            this.loading = true;
            this.tableData = [];
            this.$http({
                url: "/market/cadvSecbuyMetirial/queryPage",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: v
            }).then(res => {
                res.data.data.forEach(item => {
                    for (let i = 0; i < this.sceneopt.length; i++) {
                        if (this.sceneopt[i].dataCode == item.sceneName) {
                            item.sceneName = this.sceneopt[i].dataName;
                        }
                    }
                });
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },

        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList(this.params, this.pageSize);
        },
        //申请
        dialogCheck(v, n) {
            this.dialogStatus = true;
            this.infolist = Object.assign({}, n);
            if (v === 1) {
                this.titname = "查看";
                this.disableStatus = true;
                this.metirialCodeDisableStatus = true;
                this.infolist.sceneName = this.infolist.sceneName.split("/");
                return;
            } else if (v === 2) {
                this.titname = "修改";
                this.disableStatus = false;
                this.metirialCodeDisableStatus = true;
                this.infolist.sceneName = this.infolist.sceneName.split("/");
                // this.usePlance(n.scene);
            } else if (v === 3) {
                this.titname = "添加";
                this.disableStatus = false;
            }
            this.infolist.opNo = this.userInfo.loginNo;
            this.infolist.opName = this.userInfo.loginName;
        },
        //添加
        dialogCli(v) {
            if (v === 1) {
                this.infolist = {};
                this.dialogStatus = false;
                return;
            } else {
                this.infolist.opTime = this.$formatDate(
                    new Date(),
                    "YYYY-MM-DD"
                );
                this.infolist.sts = "0";
                this.infolist.stsDesc = "在用";
                // this.infolist.proviceFlagName = this.infolist.proviceFlag
                // this.infolist.proviceFlagName = this.infolist.proviceFlag == "0"?'省公司':'地市公司';
                if (this.infolist.proviceFlag == 0) {
                    this.infolist.proviceFlagName = "省公司";
                } else if (this.infolist.proviceFlag == 1) {
                    this.infolist.proviceFlagName = "地市公司";
                } else if (this.infolist.proviceFlag == 2) {
                    this.infolist.proviceFlagName = "省+地市";
                }

                if (this.titname === "添加") {
                    this.submitInfo("/market/cadvSecbuyMetirial/add");
                } else if (this.titname === "修改") {
                    this.submitInfo("/market/cadvSecbuyMetirial/update", v);
                }
            }
        },
        submitInfo(u) {
            this.infolist.price = parseFloat(this.infolist.price).toFixed(2);
            let _this = this;
            this.$refs.infolist.validate(valid => {
                if (valid) {
                    this.loadinged = true;
                    let scene = "";
                    this.infolist.sceneName.forEach((item, index) => {
                        scene += item;
                        if (index != this.infolist.sceneName.length - 1) {
                            scene += "/";
                        }
                    });
                    this.infolist.sceneName = scene;
                    this.$http({
                        url: u,
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: this.infolist
                    }).then(res => {
                        this.loadinged = false;
                        if (res.data.result === 1) {
                            this.infolist.sceneName = this.infolist.sceneName.split(
                                "/"
                            );
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else if (res.data.result === -1) {
                            this.infolist.sceneName = this.infolist.sceneName.split(
                                "/"
                            );
                            _this.$message({
                                message: res.data.desc,
                                type: "fail"
                            });
                        } else {
                            _this.$message({
                                message: "成功",
                                type: "success"
                            });
                            _this.infolist = {};
                            _this.dialogStatus = false;
                            _this.getList({}, _this.pageSize);
                        }
                    });
                }
            });
        },
        closeMessage(v) {
            this.centerDialogVisible = false;
            let _this = this;
            if (v === 1) {
                _this
                    .$http({
                        url: "/market/cadvSecbuyMetirial/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 if (res.data.result === -1) {
                            _this.$message({
                                message: res.data.desc,
                                type: "fail"
                            });
                        } else {
                            _this.$message({
                                message: "删除成功",
                                type: "success"
                            });
                            _this.getList(this.params, this.pageSize);
                        }
                    });
            }
        },
        //删除
        delLine(v) {
            this.centerDialogVisible = true;
            this.messTit = "即将删除此条数据, 是否删除?";
            this.delid = v.id;
        },
        //文件返回值
        uploadBack(v) {
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList(this.params, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen;
            }
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            this.$http({
                url: "/market/cadvSupplier/queryValidSupplierList",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                // data: { buyTypeCode: "2" }
                data: {}
            }).then(res => {
                this.suppOpt = res.data;
            });
        }
    },
    mounted() {
        this.getList({}, 1);
        this.getUser();

        this.$http({
            url: "/sysmgr/cfgDataDicts/queryMap",
            method: "post",
            headers: {
                "Content-Type": "application/json"
            },
            data: {
                dictCodePks: "metirialType"
            }
        }).then(res => {
            this.metirialTypeopt = res.data.body.metirialType;
            // this.stypeList = res.data.body.materType;
        });
    },
    created() {}
};
</script>
<style scoped lang="scss">
.onetab {
    margin-bottom: 20px;
    padding: 0 20px;
}

.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);
    }
}

.online {
    width: 100%;

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

    span {
        vertical-align: top;
    }

    .el-textarea {
        width: calc(100% - 100px);
    }
}
</style>
