<template>
    <div>
        <fullscreen :fullscreen.sync="fullscreen" class="container structure-l" style="margin: 0;width: calc(75% - 15px);">
            <div class="container-box">
                <toolList @iconCli='iconCli' :tooltit='tooltit'></toolList>
                <div class="info-form">
                    <el-form :model="infolist" ref="infolist" :rules="rules">
                        <div class="info-line">
                            <el-form-item prop="violationCate">
                                <span><i>*</i>类别</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.violationCate" placeholder="类别" @change="verifcheck(1)">
                                    <el-option v-for="item in options1" :key="item.orderNumber" :label="item.dataName"
                                        :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="provinceCode">
                                <span><i>*</i>地域</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.provinceCode" placeholder="省份" @change="verifcheck(2)">
                                    <el-option v-for="item in options2" :key="item.orderNumber" :label="item.dataName"
                                        :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item prop="operatorCode">
                                <span><i>*</i>运营商</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.operatorCode" placeholder="运营商" @change="verifcheck(3)">
                                    <el-option v-for="item in options3" :key="item.orderNumber" :label="item.dataName"
                                        :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="violationItem">
                                <span><i>*</i>违规项目</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.violationItem" placeholder="违规项目" @change="verifcheck(4)">
                                    <el-option v-for="item in options4" :key="item.orderNumber" :label="item.dataName"
                                        :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item prop="tariffName">
                                <span><i>*</i>资费名称</span>
                                <el-input v-model="infolist.tariffName" placeholder="资费名称"></el-input>
                            </el-form-item>
                            <el-form-item prop="recordRegionCode" class="info-line tea-r">
                                <span><i>*</i>违规地市</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.recordRegionCode" placeholder="违规地市" @change="verifcheck(5)">
                                    <el-option v-for="item in options5" :key="item.dataCode" :label="item.dataName"
                                        :value="item.dataCode">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item>
                                <span>月费(元)</span>
                                <el-input v-model="infolist.monthFee" placeholder="月费"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span>预存款(元)</span>
                                <el-input v-model="infolist.preFee" placeholder="预存款"></el-input>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item>
                                <span>酬金</span>
                                <el-input v-model="infolist.remFee" placeholder="酬金"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span>销售渠道</span>
                                <el-select :popper-append-to-body="false" v-model="infolist.saleChnl" placeholder="请选择销售渠道">
                                    <el-option v-for="item in saleChnlopt" :key="item.dataName" :label="item.dataName"
                                        :value="item.dataName">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item prop="saleScope">
                                <span><i>*</i>销售范围</span>
                                <el-input v-model="infolist.saleScope" placeholder="销售范围"></el-input>
                            </el-form-item>
                            <el-form-item prop="monthSale">
                                <span><i>*</i>月销量</span>
                                <el-input v-model="infolist.monthSale" placeholder="月销量"></el-input>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item>
                                <span>解决结果</span>
                                <el-select v-model="infolist.fixFlag" placeholder="解决结果">
                                    <el-option v-for="item in ifoption" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <span>反馈总部</span>
                                <el-select v-model="infolist.groupFlag" placeholder="是否反馈总部">
                                    <el-option v-for="item in ifoption" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="info-line">
                            <el-form-item>
                                <span>返回竞合</span>
                                <el-select v-model="infolist.wwFlag" placeholder="是否返回竞合">
                                    <el-option v-for="item in ifoption" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <span>反馈总局</span>
                                <el-select v-model="infolist.admFlag" placeholder="是否反馈总局">
                                    <el-option v-for="item in ifoption" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <div class="info-line">
                            <el-form-item prop="opName">
                                <span><i>*</i>上报人</span>
                                <el-input v-model="infolist.opName" placeholder="销售范围"></el-input>
                            </el-form-item>
                            <el-form-item prop="contactPhone">
                                <span><i>*</i>联系电话</span>
                                <el-input v-model="infolist.contactPhone" placeholder="月销量"></el-input>
                            </el-form-item>
                        </div> -->
                        <el-form-item prop="taffiffContent" class="info-line online">
                            <span><i>*</i>资费内容</span>
                            <el-input v-model="infolist.taffiffContent" placeholder="资费内容" type="textarea" :rows="3"></el-input>
                        </el-form-item>
                        <el-form-item prop="violationContent" class="info-line online">
                            <span><i>*</i>违规内容</span>
                            <el-input v-model="infolist.violationContent" placeholder="违规内容" type="textarea" :rows="3"></el-input>
                        </el-form-item>
                        <div style="padding-left: 60px">
                            <myUpload @uploadBack="uploadBack" :fileInfo="fileInfo" :fileList="fileInfo.fileList"></myUpload>
                        </div>
                    </el-form>
                </div>
                <div class="titbtn-box">
                    <el-button type="primary" plain @click="submitList(1)">取消</el-button>
                    <el-button type="primary" @click="submitList">提交</el-button>
                </div>
            </div>

        </fullscreen>
        <competeRight></competeRight>
    </div>
</template>
<script>
    import competeRight from "../../../components/competeRight";
    import myUpload from "../../../components/upload";
    import toolList from "../../../components/toolList";

    export default {
        components: {
            competeRight,
            myUpload,
            toolList
        },
        data() {
            const fileLists = (rule, value, callback) => {
                if (!this.fileLists.length > 0) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const opName = (rule, value, callback) => {
                if (!this.infolist.opName) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const contactPhone = (rule, value, callback) => {
                let x = this.infolist.contactPhone * 1;
                if (!(/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/.test(x))) {
                    callback(new Error('请输入正确的电话号码'))
                } else {
                    callback()
                }
            }
            const violationCate = (rule, value, callback) => {
                if (!this.infolist.violationCate) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const provinceCode = (rule, value, callback) => {
                if (!this.infolist.provinceCode) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const operatorCode = (rule, value, callback) => {
                if (!this.infolist.operatorCode) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const recordRegionCode = (rule, value, callback) => {
                if (!this.infolist.recordRegionCode) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const violationItem = (rule, value, callback) => {
                if (!this.infolist.violationItem) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const tariffName = (rule, value, callback) => {
                if (!this.infolist.tariffName) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const monthFee = (rule, value, callback) => {
                let x = isNaN(this.infolist.monthFee);
                if (x) {
                    callback(new Error('请输入数字'))
                } else {
                    callback()
                }
            }
            const preFee = (rule, value, callback) => {
                let x = isNaN(this.infolist.preFee);
                if (x) {
                    callback(new Error('请输入数字'))
                } else {
                    callback()
                }
            }
            const remFee = (rule, value, callback) => {
                if (!this.infolist.remFee) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const saleChnl = (rule, value, callback) => {
                if (!this.infolist.saleChnl) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const saleScope = (rule, value, callback) => {
                if (!this.infolist.saleScope) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const monthSale = (rule, value, callback) => {
                if (!this.infolist.monthSale) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const validateUsername = (rule, value, callback) => {
                if (!this.infolist.violationContent) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            const taffiffContent = (rule, value, callback) => {
                if (!this.infolist.taffiffContent) {
                    callback(new Error('不能为空'))
                } else {
                    callback()
                }
            }
            return {
                rules: {
                    fileLists: [{
                        required: true,
                        trigger: 'change',
                        validator: fileLists
                    }],
                    recordRegionCode: [{
                        required: true,
                        trigger: 'change',
                        validator: recordRegionCode
                    }],
                    opName: [{
                        required: true,
                        trigger: 'blur',
                        validator: opName
                    }],
                    contactPhone: [{
                        required: true,
                        trigger: 'blur',
                        validator: contactPhone
                    }],
                    violationCate: [{
                        required: true,
                        trigger: 'change',
                        validator: violationCate
                    }],
                    provinceCode: [{
                        required: true,
                        trigger: 'change',
                        validator: provinceCode
                    }],
                    operatorCode: [{
                        required: true,
                        trigger: 'change',
                        validator: operatorCode
                    }],
                    violationItem: [{
                        required: true,
                        trigger: 'change',
                        validator: violationItem
                    }],
                    tariffName: [{
                        required: true,
                        trigger: 'blur',
                        validator: tariffName
                    }],
                    monthFee: [{
                        required: true,
                        trigger: 'blur',
                        validator: monthFee
                    }],
                    preFee: [{
                        required: true,
                        trigger: 'blur',
                        validator: preFee
                    }],
                    remFee: [{
                        required: true,
                        trigger: 'blur',
                        validator: remFee
                    }],
                    saleChnl: [{
                        required: true,
                        trigger: 'change',
                        validator: saleChnl
                    }],
                    monthSale: [{
                        required: true,
                        trigger: 'blur',
                        validator: monthSale
                    }],
                    saleScope: [{
                        required: true,
                        trigger: 'blur',
                        validator: saleScope
                    }],
                    violationContent: [{
                        required: true,
                        trigger: 'blur',
                        validator: validateUsername
                    }],
                    taffiffContent: [{
                        required: true,
                        trigger: 'blur',
                        validator: taffiffContent
                    }],
                },
                tooltit: '修改竞争对手信息',
                infolist: {
                    roomname: '0'
                },
                options1: [],
                options2: [],
                options3: [],
                options4: [],
                options5: [],
                saleChnlopt: [],
                fullscreen: false,
                fileList: [],
                fileLists: [],
                attList: [],
                fileInfo: {
                    limit: 5,
                    url: '/market/compatt/upload',
                    fileList: []
                },
                ifoption: [{
                        id: '0',
                        name: '是'
                    },
                    {
                        id: '1',
                        name: '否'
                    }
                ]
            }
        },
        methods: {
            //获取详情
            getInfo(v) {
                let _this = this;
                this.$http({
                    url: "/market/cwcompetitor/queryInfo",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        id: v
                    },
                }).then((res) => {
                    _this.infolist = res.data;
                    this.attList = [];
                    this.fileInfo.fileList = [];
                    res.data.attList.forEach(item => {
                        this.fileInfo.fileList.push({
                            name: item.fileName,
                            url: '',
                            id: item.id,
                            fileName: item.fileName
                        });
                        this.attList.push({
                            name: item.fileName,
                            url: '',
                            id: item.id,
                            fileName: item.fileName
                        });
                    })
                    if (this.infolist.provinceCode === 'hlj') {
                        this.getListyys(1);
                    } else {
                        this.getListyys();
                    }
                });
            },
            //功能栏
            iconCli(v) {
                if (v === 1) {

                }
                if (v === 2) {
                    this.fullscreen = !this.fullscreen
                }
            },
            //查询字典
            getListwglb() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: 'wglb'
                    },
                }).then((res) => {
                    this.options1 = res.data;
                });
            },
            getListsf() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: 'sf'
                    },
                }).then((res) => {
                    this.options2 = res.data;
                });
            },
            getListyys(v) {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: 'yys'
                    },
                }).then((res) => {
                    if (v === 1) {
                        this.options3 = [];
                        res.data.forEach(item => {
                            if (item.dataName !== '移动') {
                                this.options3.push(item)
                            }
                        })
                    } else {
                        this.options3 = res.data;
                    }
                });
            },
            getListwgxx() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: 'wgxx'
                    },
                }).then((res) => {
                    this.options4 = res.data;
                });
            },
            getListregion() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: 'region'
                    },
                }).then((res) => {
                    this.options5 = res.data;
                });
            },
			getsaleChnl() {
			    this.$http({
			        url: "/market/cfgDataDict/queryList",
			        method: "post",
			        headers: {
			            "Content-Type": "application/json",
			        },
			        data: {
			            dictCode: 'saleChnl'
			        },
			    }).then((res) => {
			        this.saleChnlopt = res.data;
			    });
			},
            //添加、取消
            submitList(v) {
                if (v === 1) {
                    this.$router.push("/competitor");
                    return
                }
                let _this = this;
                let attList = [];
                for (let i = 0; i < this.attList.length; i++) {
                    attList.push({
                        id: this.attList[i].id
                    });
                }
                this.infolist.fixFlag === '1' ? this.infolist.fixFlagDesc = '否' : this.infolist.fixFlagDesc = '是';
                this.infolist.groupFlag === '1' ? this.infolist.groupFlagDesc = '否' : this.infolist.groupFlagDesc = '是';
                this.infolist.wwFlag === '1' ? this.infolist.wwFlagDesc = '否' : this.infolist.wwFlagDesc = '是';
                this.infolist.admFlag === '1' ? this.infolist.admFlagDesc = '否' : this.infolist.admFlagDesc = '是';
                this.$refs.infolist.validate(valid => {
                    if (valid) {
                        let nowdata = _this.$formatDate(new Date(), "YYYY-MM-DD");
                        this.infolist.opTime = nowdata;
                        this.infolist.sts = 0;
                        this.infolist.stsDesc = '未审核';
                        this.$http({
                            url: "/market/cwcompetitor/update",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json",
                            },
                            data: {
                                wCompetitor: this.infolist,
                                attList: attList
                            },
                        }).then((res) => {
                            if (res.data.result === 1) {
                                _this.$message({
                                    message: res.data.desc,
                                    type: 'error'
                                });
                            } else {
                                _this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                _this.$router.push("/competitor");
                            }
                        });
                    }
                })
            },
            //处理所需数据
            verifcheck(v) {
                if (v === 1) {
                    for (let i = 0; i < this.options1.length; i++) {
                        if (this.options1[i].dataCode === this.infolist.violationCate) {
                            this.infolist.violationCateName = this.options1[i].dataName
                        }
                    }
                }
                if (v === 2) {
                    if (this.infolist.provinceCode === 'hlj') {
                        this.getListyys(1);
                        if (this.infolist.operatorCode === 'mobile') {
                            this.infolist.operatorCode = '';
                        }
                    } else {
                        this.getListyys();
                    }
                    for (let i = 0; i < this.options2.length; i++) {
                        if (this.options2[i].dataCode === this.infolist.provinceCode) {
                            this.infolist.provinceName = this.options2[i].dataName
                        }
                    }
                }
                if (v === 3) {
                    for (let i = 0; i < this.options3.length; i++) {
                        if (this.options3[i].dataCode === this.infolist.operatorCode) {
                            this.infolist.operatorName = this.options3[i].dataName
                        }
                    }
                }
                if (v === 4) {
                    for (let i = 0; i < this.options4.length; i++) {
                        if (this.options4[i].dataCode === this.infolist.violationItem) {
                            this.infolist.violationItemName = this.options4[i].dataName
                        }
                    }
                }
                if (v === 5) {
                    for (let i = 0; i < this.options5.length; i++) {
                        if (this.options5[i].dataCode === this.infolist.recordRegionCode) {
                            this.infolist.recordRegionName = this.options5[i].dataName
                        }
                    }
                }
            },
            uploadBack(v) {
                this.attList = v;
            }
        },
        mounted() {

        },
        created() {
            this.getListwglb();
            this.getListyys();
            this.getListsf();
            this.getListwgxx();
            this.getListregion();
            this.getsaleChnl();
            this.getInfo(this.$route.query.id);
        }
    }
</script>
<style scoped lang="scss">
    .fileline {
        color: #666;
        font-size: 14px;
        overflow: hidden;
        padding: 0 10px;
        height: 28px;
        line-height: 28px;
        border-radius: 3px;

        span {}

        i {
            float: right;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
        }
    }

    .fileline:hover {
        background: #f4f4f4;
    }

    .titbox {
        div {
            float: right;
            margin-top: 20px;

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

    .info-form {
        margin-top: 30px;
        height: calc(100% - 150px);
        overflow-y: scroll;

        .info-line {
            width: 100%;
            display: block;

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

        .tea-r {
            /*text-align: right;*/
        }

        .online {
            width: 100%;

            span {
                vertical-align: top;
            }

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

    .titbtn-box {
        text-align: right;
        margin: 15px 20px;

        button {
            width: 120px;
        }
    }
</style>
