<template>
    <div>
        <Row class="search-row">
            <i-col span="24" class="search-col">
                <Row class="row-style">
                    <i-input placeholder="搜索零售公司编码/名称" class="left-15 search-select" @on-enter="onEnterLister" v-model="searchContent"/>
                    <span class="search-span">大区</span>
                    <Select filterable placeholder="请选择大区" v-model="regionId" @on-change="regionSelect" class="search-select">
                        <Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                    <Button type="primary" @click="onClickGetDataLister" class="search-btn">查询</Button>
                    <div class="search-div-btn">
                        <Button type="primary" @click="open(0,null)">添加</Button>
                    </div>
                </Row>
            </i-col>
        </Row>


        <Table :loading="loading" ref="table" :columns="columns1" :data="data1" class="table-margin-top"
               size="small">
            <template slot-scope="{row}" slot="action">
                <Button
                        ghost
                        type="primary"
                        size="small"
                        style="border: 0px;color:#2074E2"
                        @click="open(1,row)"
                >修改
                </Button>
                <Button
                        ghost
                        type="error"
                        size="small"
                        style="border: 0px"
                        @click="remove(row)"
                >删除</Button>
            </template>

        </Table>
        <Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
              placement="top" @on-change="handlePage" class-name="ks-page"></Page>

        <!-- 添加/修改 零售公司 -->
        <Modal v-model="isShow" :footer-hide="true">
            <div slot="header">{{type === 0 ? '添加' : '修改'}}大区</div>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="公司简称" prop="name">
                    <i-input type="text" v-model="formValidate.name" placeholder="请输入零售公司简称"></i-input>
                </FormItem>
                <FormItem label="公司编码" prop="code">
                    <i-input v-model="formValidate.code"
                            placeholder="请输入零售公司编码">
                    </i-input>
                </FormItem>
                <FormItem label="公司全称" prop="detailName">
                    <i-input
                            v-model="formValidate.detailName"
                            placeholder="请输入零售公司全称"

                    ></i-input>
                </FormItem>
                <FormItem label="所属大区" prop="parentId">
                    <Select v-model="formValidate.parentId"
                            placeholder="选择大区">
                        <Option v-for="item in regionList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem style="text-align: left;">
                    <Button :loading="btnLoading" type="primary" @click="handleSubmit(formValidate)">{{type === 0 ? '保存' : '修改'}}</Button>
                    <Button @click="handleReset('formValidate')" style="margin-left: 10px">取消</Button>
                </FormItem>
            </Form>
        </Modal>

        <Modal v-model="isModelShow" title="删除提示" align="center">
            <p style="margin-top: 20px;margin-bottom: 20px">
                确定要删除此公司吗？删除后不可恢复
            </p>
            <div slot="footer"
                 style="text-align: center;margin-bottom: 10px;margin-top: 10px">
                <Button style="width: 100px;" @click="isModelShow = false">取消</Button>
                <Button :loading="btnLoading" type="error" style="width: 100px;margin-left: 20px" @click="deleteRegion">确认</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import service from '../../services/organization/OrganizationService'
    import zeroExtend from "../../services/customer/zeroExtend";

    export default {
        name: "OrganizationCompany",
        data() {
            return {
                userId: "",
                loading: false,
                btnLoading: false,// 添加修改加载中
                columns1: [
                    {
                        title: '序号',
                        key: 'index'
                    },
                    {
                        title: '零售公司',
                        key: 'name'
                    },
                    {
                        title: '编码',
                        key: 'code'
                    },
                    {
                        title: '所属大区',
                        key: 'parentName'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: '200px'
                    }
                ],
                data1: [
                ],
                //分页内容
                totalSize: 0,
                pageNum: 1,
                pageSize: 10,
                isShow: false,
                type: 0, // 0添加 1修改
                formValidate: {
                    name: '',
                    code: '',
                    detailName: '',
                    parentId: null
                },
                ruleValidate: {
                    name: [
                        {required: true, message: '公司简称不能为空', trigger: 'blur'}
                    ],
                    code: [
                        {required: true, message: '公司编码不能为空', trigger: 'blur'}
                    ],
                    detailName: [
                        {required: true, message: '公司全称不能为空', trigger: 'blur'}
                    ],
                    parentId: [
                        { required: true, type: 'number', message: '请选择大区', trigger: 'change' }
                    ]
                },
                isModelShow: false,
                currentId: 0, // 当前记录ID
                selectedCompany: null,// 大区下拉选择
                regionList: [], // 大区数据
                searchContent: '', // 搜索内容
                regionId: 0
            }
        },
        created() {
            this.userId = JSON.parse(sessionStorage.getItem("loginInfo")).userId;
            this.getSelectList();
            this.getData();
        },
        methods: {
            remove: function (row) {
                this.isModelShow = true;
                this.currentId = row.id;
            },
            open: function (type, item) {
                this.isShow = true;
                this.type = type;
                if(type === 0){
                    // 添加
                    this.formValidate =  {
                        name: "",
                        code: '',
                        detailName: '',
                        parentId: null
                    }

                }else{
                    this.formValidate =  {
                        id: item.id,
                        name: item.name,
                        code: item.code,
                        detailName: item.detailName,
                        parentId: item.parentId
                    }
                }

            },
            show: function (index) {
                this.isShow = true;
            },
            hide: function () {
                this.isShow = false;
            },
            handleSubmit(value) {
                if (value) {
                    if(!value.parentId){
                        this.$Message.info('请输入表单内容');
                        return;
                    }
                    if(this.type === 0){
                        // 添加
                        this.addCompany(value);
                    }else{
                        // 调用修改接口
                        this.modifyCompany(value);
                    }
                } else {
                    this.$Message.info('请输入表单内容');
                }
            },
            handleReset(name) {
                this.$refs[name].resetFields();
                this.isShow = false;
            },
            /**
             * 切页处理
             */
            handlePage: function (value) {
                this.pageNum = value;
                this.getData();
            },
            deleteRegion: function () {
                // 删除大区
                let that = this;
                if(that.currentId === 0){
                    return;
                }
                that.btnLoading = true;
                let request = {
                    id: that.currentId
                };
                service.postOrganizationRemoveId(request, function (res) {
                    that.btnLoading = false;
                    let data = res.data;
                    if(data.code === "0000"){
                        that.$Message.success("删除成功");
                        that.isModelShow = false;
                        that.getData();
                    }else{
                        that.$Message.error("删除失败");
                    }
                }, function () {
                    that.btnLoading = false;
                });

            },
            /**
             * 查询列表
             */
            getData: function () {
                let that = this;
                that.loading = true;

                let request = {
                    userId: that.userId,
                    searchVal: that.searchContent,
                    parentId: that.regionId,
                    pageNum: that.pageNum,
                    pageSize: that.pageSize
                };
                service.postOrganizationCompanyList(request, function (res) {
                    that.loading = false;
                    let data = res.data;

                    that.data1 = [];
                    for (let i=0;i<data.results.records.length;i++) {
                        let item = data.results.records[i];
                        item.index = i+ that.pageNum * that.pageSize;
                        that.data1.push(item);
                    }

                    that.totalSize = data.results.total;
                }, function () {
                    that.loading = false;
                });
            },
            /**
             * 添加零售公司
             */
            addCompany: function (val) {
                let that = this;
                let request = {
                    name: val.name,
                    code: val.code,
                    detailName: val.detailName,
                    parentId: val.parentId
                };
                that.btnLoading = true;
                service.postOrganizationCompanyAdd(request, function (res) {
                    that.btnLoading = false;
                    let data = res.data;
                    if(data.code === "0000"){
                        that.$Message.success("添加成功");
                        that.hide();
                        that.getData();
                    }else{
                        that.$Message.error("添加失败");
                    }
                }, function () {
                    that.btnLoading = false;
                });
            },
            /**
             * 修改零售公司
             */
            modifyCompany: function (val) {
                let that = this;
                let request = {
                    id: val.id,
                    name: val.name,
                    code: val.code,
                    detailName: val.detailName,
                    parentId: val.parentId
                };
                service.postOrganizationRegionModify(request, function (res) {
                    that.btnLoading = false;
                    let data = res.data;
                    if(data.code === "0000"){
                        that.$Message.success("修改成功");
                        that.hide();
                        that.getData();
                    }else{
                        that.$Message.error("修改失败");
                    }
                }, function () {
                    that.btnLoading = false;
                });
            },
            /**
             * 回车事件
             */
            onEnterLister: function () {
                this.pageNum = 1;
                this.getData();
            },
            /**
             * 大区选择改变事件
             */
            regionSelect: function(){
                let regionId = this.regionId;
                if(regionId === 0){
                    this.companyList = this.organizationalList.filter(item => item.level === 2);
                    this.customerList = this.organizationalList.filter(item => item.level === 3);
                }else{
                    this.companyList = this.organizationalList.filter(item => item.parentId === regionId && item.level === 2);
                    let companyIds = this.companyList.map(item => item.id);
                    this.customerList = this.organizationalList.filter(item => companyIds.indexOf(item.parentId) !== -1 && item.level === 3);
                }
            },
            /**基础数据：区域list、零售公司list、客户list*/
            getSelectList:function(){
                let that = this;
                let request = {
                    userId: this.userId
                };
                zeroExtend.getSelectListRequest(request,function (data) {
                    if(data.data.code !== "0000"){
                        that.$Message.error("系统异常");
                    }
                    data = data.data.results;
                    if(data){
                        that.organizationalList = data;
                        that.regionList = that.organizationalList.filter(item => item.level === 1);
                    }
                    //插入全部选项
                    // that.insertAllOption();
                });
            },
            /**
             * 点击查询按钮事件
             */
            onClickGetDataLister: function () {
                this.pageNum = 1;
                this.getData();
            }
        }
    }
</script>

<style scoped>

</style>
