<template>
    <div>
       <el-form ref="assignForm" :model="assignForm" :rules="assignRules" label-width="120px">
        <el-form-item label="未分配客户" >
           <!-- <el-tag v-for="customer in assignForm.customers">{{customer.customerName}}</el-tag> -->
           <!-- {{assignForm.customers.length}} -->
           {{  noAssignCount }}个
        </el-form-item>

         <el-form-item label="已分配客户" >
           {{ assignCount  }}个
        </el-form-item>

        <el-form-item label="分配公司" prop="companyId">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button @click="handleCompanySelect">添加公司</el-button>
                    </el-col>
                </el-row>
                <el-table border  :data="companys" >
                    <el-table-column label="ID" align="center" prop="companyId" />
                    <el-table-column width="200px" label="公司名称" align="center" prop="companyName" />
                    <el-table-column label="公司联系人" align="center" prop="linkName" />
                    <el-table-column label="公司电话" align="center" prop="companyMobile" v-if="false"/>
                    <!-- <el-table-column label="公司地址" align="center" prop="companyAddress" width="120" /> -->
                    <el-table-column label="今日分配数" align="center" prop="nowDayCustomerCount"   />
                    <el-table-column label="分配数量" align="center"  prop="count" width="150px" >
                        <template slot-scope="scope">
                        <div>
                            <el-input-number ref="stepTxtNum" :min="0" v-model="scope.row.count"  @change="changeVal(scope.row)"   size="mini"></el-input-number>
                        </div>
                    </template>
                    </el-table-column>
                    <el-table-column label="操作"   align="center"  class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="text"
                        @click="handleRemoveCompany(scope.row.$index)"
                        >删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="footer">
        <el-button type="primary" @click="submitAssignForm">确 定</el-button>
        <el-button @click="assign.open=false">取 消</el-button>
      </div>

     <el-dialog :title="companySelect.title" :visible.sync="companySelect.open" width="1000px" append-to-body>
        <company-select ref="companySelects" @selectCompany="selectCompany"  ></company-select>
     </el-dialog>


    </div>
</template>


<script>

    import { assignCrmToCompany } from "@/api/crm/customer";
    import companySelect from '../../company/components/companySelect.vue';
    export default {
        components: {companySelect },
        name: "visit",
        data() {
            return {
                type:null,
                noAssignCount:0,
                assignCount:0,
                customerIds:[],
                companySelect:{
                    title:"选择公司",
                    open:false,
                },
                assignForm: {
                },
                // 表单校验
                assignRules: {

                },
                companys:[],

            };
        },
        created() {

        },
        methods: {
            init(customerIds){
                this.customerIds =  customerIds;
                this.assignCount=0;
                this.noAssignCount=this.customerIds.length;
                this.companys=[];
            },
            changeVal(row) {
                this.$forceUpdate();//解决点击计数器失效问题
                this.computeCount();
                if(this.assignCount>this.customerIds.length){
                    this.$nextTick(() => {
                         row.count=0;
                         this.computeCount();
                    });

                }
            },
            handleRemoveCompany(index){
                this.companys.splice(index,1);
                this.computeCount();
                this.$refs.companySelects.delCompany(index);
            },
            selectCompany(data){
                var companys=[];
                var number=parseInt(this.customerIds.length/data.length);
                data.forEach(element => {
                    var company={
                        companyId:element.companyId,
                        companyName:element.companyName,
                        linkName:element.linkName,
                        nowDayCustomerCount:element.nowDayCustomerCount,
                        companyMobile:element.companyMobile,
                        count:number,
                    }
                    companys.push(company)
                });
                this.companys=companys;
                this.companySelect.open=false;
                this.computeCount()
            },
            computeCount(){
                this.assignCount=0;
                var that=this;
                this.companys.forEach(element => {
                    that.assignCount+=element.count;
                });
                this.noAssignCount=this.customerIds.length-this.assignCount
            },
            handleCompanySelect(){
                var that=this;
                this.companySelect.open=true;
                setTimeout(() => {
                    that.$refs.companySelects.getList();
                }, 500);
            },
            init(customerIds,type){
                this.type=type,
                this.customerIds =  customerIds;
                this.assignCount=0;
                this.noAssignCount=this.customerIds.length;
                this.companys=[];
            },
            /** 提交按钮 */
            submitAssignForm() {
                var that=this;
                this.$refs["assignForm"].validate(valid => {
                    if (valid) {
                        var companys=[];
                        var customerIds=[];
                        var idIndex=0;
                        var totalAssignCount=0;
                        console.log("qxj companys",JSON.stringify(this.companys));
                        this.companys.forEach(element => {
                            if(element.count>0){
                                var ids=that.customerIds.slice(idIndex,idIndex+element.count)
                                console.log("qxj customerIds:"+that.customerIds+" count:"+element.count);
                                console.log("qxj ids:"+ids);
                                customerIds=customerIds.concat(ids);
                                idIndex=idIndex+element.count;
                                var data={companyId:element.companyId,count:element.count};
                                companys.push(data);
                                totalAssignCount+=element.count;
                            }
                        });
                        if(companys.length==0){
                            this.msgError("请选择公司");
                            return;
                        }
                        if(totalAssignCount>(this.assignCount+this.noAssignCount)){
                            this.msgError("分配数量有误");
                            return;
                        }
                        this.myloading = this.$loading({
                            lock: true,
                            text: '处理中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        var data={customerIds:customerIds,companys:companys }
                        console.log("qxj data:",JSON.stringify(data));
                        assignCrmToCompany(data).then(response => {
                            this.myloading.close()
                            if (response.code === 200) {
                                this.msgSuccess("操作成功");
                                this.$emit('close');
                            }
                        });
                    }
                });
            },
            closeAction(){
                //this.$refs.companySelects.companys=[];
            }
        }
    };
</script>

<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 20px;

}
.footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
}
</style>
