<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>
                <div>
                    <el-button
                        class="btn-check"
                        size="medium"
                        type="primary"
                        @click="jumpadd"
                        v-if="isFuncBtnShow"
                    >新建
                    </el-button>
                    <!-- <el-button class="btn-check" size="medium" type="primary"
                               @click="getTemple"
                    >下载模板
                    </el-button> -->
                </div>
            </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="woName" label="模板名称">
                    </el-table-column>
                    <el-table-column prop="opTime" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="sts" label="状态">
                        <template slot-scope="scope">
                            {{ stsArr[scope.row.sts] }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="reCode" label="分发范围">
                    </el-table-column>
                    <!-- <el-table-column prop="opName" label="分发范围">
                        <template slot-scope="scope">
                            <span
                                :style="{color:'#606266'}"
                                style="cursor:pointer"
                                v-for="(item, index) in scope.row.groupNameList"
                                :key="index"
                            >
                              {{
                                    item + ","
                                }}
                            </span>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="操作" width="300px" align="center">
                        <template slot-scope="scope">
                            <!-- <el-button
                                size="mini"
                                type="primary"
                                @click="jump(2, scope.row)"
                                >查看</el-button
                            > -->
                            <el-button
                                size="mini"
                                type="primary"
                                @click="jump(1, scope.row)"
                                >{{
                                    scope.row.fillFlag == 1 ? "处理" : "查看"
                                }}</el-button
                            >
                            <el-button
                                size="mini"
                                type="primary"
                                @click="jump(2, scope.row)"
                                v-if="scope.row.fillFlag == 0"
                                >办结</el-button
                            >
                            <!-- <el-button size="mini" type="primary" @click="jump(3, scope.row)" v-if="(loginNoStr == scope.row.nextOpNo && ((scope.row.provinceCity == 1 && scope.row.nextStep ==7) || (scope.row.provinceCity == 1 && scope.row.nextStep ==11) || (scope.row.provinceCity == 2 && scope.row.nextStep == 9) || (scope.row.provinceCity == 3 && scope.row.nextStep == 10))) && (scope.row.sts != 3)">子任务列表</el-button>
                            <el-button size="mini" type="danger" @click="delLine(scope.row)" v-if="(loginNoStr == scope.row.opNo && ((scope.row.provinceCity == 1 && scope.row.nextStep <= 7) || (scope.row.provinceCity == 2 && scope.row.nextStep <= 10) || (scope.row.provinceCity == 3 && scope.row.nextStep <= 11)) && (scope.row.sts != 3))">删除</el-button>
                            <el-button size="mini" type="primary" @click="jump(4, scope.row)" v-if="((scope.row.provinceCity == 1 && scope.row.nextStep == 12) || (scope.row.provinceCity == 2 && scope.row.nextStep == 10) || (scope.row.provinceCity == 3 && scope.row.nextStep == 11)) && (scope.row.countrySts == 0 || scope.row.countrySts == 2)">验收</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="添加"
            :visible.sync="dialogStatus"
            width="50%"
            :destroy-on-close="true"
            :modal-append-to-body="false"
            :close-on-click-modal="false"
            :fullscreen="true"
        >
            <el-form
                :model="infolist"
                ref="infolist"
                :rules="rules"
                style="height: calc(100vh - 180px);"
            >
                <el-form-item prop="woName" class="info-line online">
                    <span>模板名称</span>
                    <el-input
                        v-model="infolist.woName"
                        placeholder="模板名称"
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item prop="opTime" class="info-line online" v-if="regionFlag != '1'">
                    <span>创建时间</span>
                    <el-input
                        v-model="infolist.opTime"
                        placeholder="创建时间"
                    ></el-input>
                </el-form-item> -->
                <!-- <el-form-item prop="modelName" class="info-line online"  v-if="regionFlag == '1'"> -->
                <!-- 20220523功能取消 -->
                <!-- <el-form-item prop="modelName" class="info-line online"  v-if="regionFlag == '1'">
                    <span>模板选择</span>
                    <el-select
                        clearable
                        v-model="infolist.modelName"
                        placeholder="模板选择"
                    >
                        <el-option
                            v-for="item in modelList"
                            :key="item.woNo"
                            :label="item.woName"
                            :value="item.woNo"
                        >
                        </el-option>
                    </el-select>
                </el-form-item> -->

                <!-- <el-form-item prop="time" class="info-line online">
                    <span>统计周期</span>
                    <el-date-picker
                        v-model="infolist.time"
                        type="daterange"
                    ></el-date-picker>
                </el-form-item> -->

                <!-- <el-form-item class="info-line online">
                    <span>填报人</span>
                    <deptTree
                        v-if="!disableStatus"
                        :closeList="closeList"
                        class="tree"
                        @treeCheck="treeCheck"
                    >
                    </deptTree>
                    <div
                        :class="
                            !disableStatus ? 'tree treeUser' : 'tree treeUserb'
                        "
                    >
                        <p v-for="(item, index) in treeList" :key="index">
                            {{ item.receiveName }}
                            <i
                                @click="deletess(item, index)"
                                class="el-icon-error"
                            ></i>
                        </p>
                    </div>
                </el-form-item> -->
                <!-- 20220523修改-取消功能 -->
                <!-- <el-form-item class="info-line online" v-loading="loadinged">
                    <span>地市选择</span>
                    <div
                        class="tree treeUser"
                        style="width: 30%;margin-right: 1%;"
                    >
                        <p
                            v-for="(item, index) in deptList"
                            :key="index"
                            @click="choseDepta(item)"
                        >
                            {{ item.ou }}
                        </p>
                    </div>
                    <div
                        :class="
                            !disableStatus ? 'tree treeUser' : 'tree treeUserb'
                        "
                        style="width: 30%;"
                    >
                        <p v-for="(item, index) in treeListp" :key="index">
                            <span>{{ item.ou }}</span>
                            <i
                                @click="deletes(item, index)"
                                class="el-icon-error"
                            ></i>
                        </p>
                    </div>
                </el-form-item> -->
            </el-form>
            <div style="text-align: right;margin-top: 20px">
                <el-button @click="dialogCli(1)" type="primary"
                    >确 定</el-button
                >
                <el-button @click="dialogCli(2)">取 消</el-button>
            </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";
import myUpload from "../../../components/upload";
import deptTree from "../../../components/deptTreeUser.vue";
import deptTreep from "../../../components/deptTreeP.vue";

export default {
    components: {
        mySearch,
        myMessage,
        toolList,
        myUpload,
        deptTree,
        deptTreep
    },
    data() {
        const woName = (rule, value, callback) => {
            if (!this.infolist.woName) {
                callback(new Error("不能为空"));
            } else {
                callback();
            }
        };
        // const time = (rule, value, callback) => {
        //     if (!this.infolist.time) {
        //         callback(new Error("不能为空"));
        //     } else {
        //         callback();
        //     }
        // };
        return {
            rules: {
                woName: [
                    {
                        required: true,
                        trigger: "blur",
                        validator: woName
                    }
                ]

            },
            searchList: [

                {
                    type: "sel",
                    tit: "状态",
                    value: "",
                    width: "100%",
                    options: [
                        {
                            dataCode: "0",
                            dataName: "待上传模板"
                        },
                        {
                            dataCode: "1",
                            dataName: "填写中"
                        },
                        {
                            dataCode: "2",
                            dataName: "已锁定"
                        },
                        {
                            dataCode: "3",
                            dataName: "已办结"
                        }
                    ]
                }

            ],
            tooltit: "存量运营策略征集",
            fullscreen: false,
            total: 0,
            pageSize: 1,
            tableData: [],
            dialogStatus: false,
            disableStatus: false,
            titname: "",
            infolist: {},
            // treeList: [],
            treeListp: [],
            treeListponly: [],
            closeList: [],
            defaultList: [],
            depttype: 0,
            fadept: {},
            deptList: [],
            userInfo: {},
            params: {},
            centerDialogVisible: false,
            messTit: "",
            delid: "",
            loading: false,
            loadinged: false,

            stsArr: ["待上传模板", "填写中", "已锁定","已办结"],
            provinceCityArr: ["省", "地市", "区县"],
            loginNoStr: "",
            cityWoId: "",
            menus: JSON.parse(window.sessionStorage.childrenMenus),
            isFuncBtnShow: false,
            countyFlag: "0",
            regionList: [],
            currentData: {},
            regionFlag: "", //地区 0 省 1 地市 2 区
            modelList: [], //模板列表
            modelName: "", //模板名称
        };
    },

    methods: {
        jumpadd() {
            this.dialogStatus = true;
            this.getModelList();
            this.advadd();
        },
        jump(v, n) {
            if (v === 1) {
                this.$router.push({

                    path: "/stockHandle",
                    query: {
                        strategyId: n.woNo,
                        usrName: n.fillName,
                        sts: n.sts,
                        countyFlag: this.countyFlag,
                        fillFlag: n.fillFlag,
                        regionName:'',
                        woName: n.woName
                    }
                });
            } else if (v === 2) {
                this.centerDialogVisible = true;
                this.messTit = "是否确定办结?";
                this.currentData = n;
            }
        },
        jumpjd(v, item) {
            this.$router.push({
                path: "/stockOperateCityList",
                query: {
                    regionCode: item,
                    parentWoNo: v.woNo,
                    woName: v.woName
                }
            });
            // this.setabList("进度跟踪", "/stockOperateCityList?groupName=" + v.receiverGroupName);
        },
        dialogCli(v) {
            let _this = this;
            if (v === 1) {
                let param = {};
                param.mkStrategyBic = { fillName: this.userInfo.loginName };
                param.mkStrategyBic.woName = this.infolist.woName;

                if(this.regionFlag == '0'){
                    param.mkStrategyBic.groupName = this.userInfo.areaName
                }else if(this.regionFlag == '1'){
                    param.mkStrategyBic.groupName = this.userInfo.cityName
                }
                param.mkStrategyBic.parentWoNo = this.infolist.modelName;
                // 20220523取消功能
                // param.regionList = [];
                // for (let i = 0; i < this.treeListp.length; i++) {
                //     param.regionList.push(
                //         // dutyNo: this.treeListp[i].loginNoStr,
                //         // dutyName: this.treeListp[i].loginNameStr,
                //         // groupId: this.treeListp[i].o,
                //         // groupName: this.treeListp[i].ou
                //         this.treeListp[i].ou
                //     );
                // }
                param.countyFlag = this.countyFlag;
                this.$refs.infolist.validate(valid => {
                    if (valid) {
                        this.$http({
                            url: "/market/cStrategyBic/add",
                            method: "post",
                            headers: {
                                "Content-Type": "application/json"
                            },
                            data: param
                        }).then(res => {
                            if (res.data.result === 1) {
                                _this.$message({
                                    message: res.data.desc,
                                    type: "error"
                                });
                            } else {
                                _this.$message({
                                    message: "成功",
                                    type: "success"
                                });
                                _this.infolist = {};
                                // _this.treeList = [];
                                _this.treeListp = [];
                                _this.dialogStatus = false;
                                this.getList({}, 1);
                                // location.reload();
                            }
                        });
                    }
                });
            } else if (v === 2) {
                this.infolist = {};
                // this.treeList = [];
                this.treeListp = [];
                this.dialogStatus = false;
            }
        },

        deletes(val, index) {
            this.treeListp.splice(index, 1);
        },
        choseDepta(v) {
            let x = "no";
            for (let i = 0; i < this.treeListp.length; i++) {
                if (this.treeListp[i].o == v.o) {
                    x = i;
                }
            }
            if (x != "no") {
                this.treeListp.splice(x, 1);
            } else {
                this.treeListp.push(v);
            }
        },
        advadd() {
            this.dialogStatus = true;
            this.loadinged = true;
            if (
                this.userInfo.cityName != null &&
                this.userInfo.countyName == null
            ) {
                //地市
                this.$http({
                    url: "/sysmgr/csysdept/queryListByoO",
                    method: "post",
                    async: false,
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: {
                        o: this.userInfo.groupId
                    }
                }).then(res => {
                    // this.loadinged = false;
                    // this.deptList = res.data;
                    this.$http({
                        url: "/sysmgr/csysdept/queryListByParent",
                        method: "post",
                        async: false,
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: {
                            parentorgid: res.data[0].parentorgid
                        }
                    }).then(res => {
                        this.loadinged = false;
                        this.deptList = res.data;
                    });
                });
            } else if (
                this.userInfo.cityName == null &&
                this.userInfo.countyName == null
            ) {
                this.$http({
                    url: "/sysmgr/csysdept/queryRegionDeptList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: {}
                }).then(res => {
                    this.loadinged = false;
                    this.deptList = res.data[0].children;
                });
            } else {
                this.isFuncBtnShow = false;
            }
        },
        setabList(n, p) {
            let params = {
                children: "",
                name: n,
                rountPath: p,
                target: "_self"
            };
            for (let i = 0; i < this.$store.state.tabList.length; i++) {
                if (this.$store.state.tabList[i].name === params.name) {
                    this.$store.state.tabList[i] = params;
                }
            }
            let set = new Set([...this.$store.state.tabList, params]);
            set.add(params);
            this.$store.commit("setDefaultActive", params.rountPath);
            this.$store.commit("setTabList", Array.from(set));
        },
        closedia() {
            this.infolist = {};
            this.dialogStatus = false;
        },
        //搜索数据
        searchInfo(v) {
            this.params = {};
            v[0] ? (this.params.sts = v[0]) : "";

            this.getList(this.params, this.pageSize);
        },
        //获取列表
        getList(v, n) {
            this.pageSize = n;
            let _this = this;
            this.loading = true;
            // let regionList = [];

            if (
                this.userInfo.cityName != null &&
                this.userInfo.countyName == null
            ) {
                //地市
                this.regionList.push(this.userInfo.cityName);
            } else if (this.userInfo.countyName != null) {
                this.regionList.push(this.userInfo.countyName);
            }

            this.tableData = [];
            this.$http({
                url: "/market/cStrategyBic/queryMemeberWoInfo",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                    page: '{"pageNo":"' + n + '","pageSize":"10"}'
                },
                data: {
                    mkStrategyBic: {
                        fillName: this.userInfo.loginName, //登陆用户名
                        sts: v.sts
                    },
                    regionList: this.regionList //用户区域
                }
            }).then(res => {
                this.tableData = res.data.data;
                this.total = res.data.totalRecord;
                this.loading = false;
            });
        },
        getModelList() {
            this.loading = true;
            this.$http({
                url: "/market/cStrategyBic/queryByRegionCode",
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                data: {
                    param: { regionCode: this.userInfo.cityName }
                }
            }).then(res => {
                this.modelList = res.data;
                this.loading = false;
            });
        },
        // 分页
        currchange(v) {
            this.pageSize = v;
            this.getList({}, this.pageSize);
        },

        closeMessage(v) {
            this.centerDialogVisible = false;
            let _this = this;
            if (v === 1) {
                _this
                    .$http({
                        url: "/market/cStrategyBic/update",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        data: {
                            fillName: this.userInfo.loginName,
                            woNo: this.currentData.woNo,
                            sts: 3
                        }
                    })
                    .then(res => {
                        if (res.data.result === 1) {
                            _this.$message({
                                message: res.data.desc,
                                type: "error"
                            });
                        } else {
                            _this.$message({
                                message: "办结成功",
                                type: "success"
                            });
                            _this.getList({}, this.pageSize);
                        }
                    });
            }
        },
        //删除
        delLine(v) {
            this.centerDialogVisible = true;
            this.messTit = "即将删除此条数据, 是否删除?";
            this.delid = v.id;
        },
        //文件返回值
        uploadBack(v) {
            console.log(v);
        },
        //功能栏
        iconCli(v) {
            if (v === 1) {
                this.getList({}, this.pageSize);
            }
            if (v === 2) {
                this.fullscreen = !this.fullscreen;
            }
        },
        getUser() {
            this.userInfo = JSON.parse(window.sessionStorage.userInfo);
            this.loginNoStr = this.userInfo.loginNoStr;
        },
        getTemple() {
            let param = new FormData();
            param.append("type", 'channel');
            this.$http({
                url: '/market/cAdvStrategy/downTemple',
                method: "post",
                responseType: 'blob',
                headers: {
                    "Content-Type": "application/json",
                },
                data: param,
            }).then((response) => {
                if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                    let blob = new Blob([response.data], {
                        type: response.data.type
                    });
                    window.navigator.msSaveOrOpenBlob(blob, '存量运营策略征集模板.xlsx');
                } else {
                    /* 火狐谷歌的文件下载方式 */
                    var blob = new Blob([response.data])
                    var downloadElement = document.createElement('a')
                    var href = window.URL.createObjectURL(blob);
                    downloadElement.href = href;
                    downloadElement.download = '存量运营策略征集模板.xlsx';
                    document.body.appendChild(downloadElement);
                    downloadElement.click();
                    document.body.removeChild(downloadElement);
                    window.URL.revokeObjectURL(href);
                }
            })
        }
    },
    mounted() {
        this.getUser();
        this.getList({}, 1);
        for (var i = 0; i < this.menus.length; i++) {
            if (this.menus[i].jspUrl == "/stockOperate") {
                this.isFuncBtnShow = true;
                break;
            }
        }

        if (this.userInfo.countyName != null) {
            this.countyFlag = "0";
            this.isFuncBtnShow = false;
            this.regionFlag = "2";
        } else if (
            this.userInfo.cityName != null &&
            this.userInfo.countyName == null
        ) {
            this.countyFlag = "1";
            this.isFuncBtnShow = true;
            this.regionFlag = "1";
        } else if (
            this.userInfo.cityName == null &&
            this.userInfo.countyName == null
        ) {
            this.countyFlag = "1";
            this.isFuncBtnShow = true;
            this.regionFlag = "0";
        }
        this.userInfo.countyName != null
            ? (this.countyFlag = "0")
            : (this.countyFlag = "1");
    },

    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::v-deep {
    width: 100%;

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

    span {
        // vertical-align: top;
    }

    .el-textarea,
    .el-date-editor {
        width: calc(100% - 100px);
        display: inline-flex;
    }
    .el-form-item__content {
        display: flex;
    }
}
.adv-type {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // border: 1px solid #ddd;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    div {
        width: 33%;
        text-align: center;
        height: 80px;
        overflow: hidden;
        min-width: 100px;
        cursor: pointer;
        padding-top: 10px;
        margin: 10px 0;
    }
    div:hover {
        background: #cfe8fc;
        border-radius: 5px;
    }
    span {
        width: 100%;
        display: inline-block;
        height: 40px;
        // line-height: 40px;
        i {
            color: #0074d9;
            font-size: 36px;
        }
    }
}

.boximgc {
    display: flex;
    flex-wrap: wrap;
    width: 100% !important;
    margin-top: 20px;

    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%;
        }
    }
}
.tree {
    width: calc(50% - 60px);
    display: inline-block;
    margin-right: 20px;
    height: 300px;
    overflow-y: scroll;
    flex: 1;
    p {
        overflow: hidden;
        display: flex;
        justify-content: space-between;
    }
    .p-btn {
        width: 50px !important;
        cursor: pointer;
        color: #0074da;
    }
    span {
        display: inline-block;
        width: calc(100% - 100px);
    }

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

.treeUserp {
    p {
        padding: 5px;
    }
    p:hover {
        background: #01bef0;
        color: #fff;
        cursor: pointer;
    }
}
</style>
