<template>
    <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
               <el-form-item label="我的客户" prop="customerIds"  >
                    <el-row>
                        <el-col >
                            <el-button plain  type="primary" icon="el-icon-plus" @click="handleAddCustomer">添加客户</el-button>
                        </el-col>
                    </el-row>
                    <el-table border width="100%" style="margin-top:5px;"  :data="customerList">
                            <el-table-column label="客户编码" width="100px" align="center" prop="customerCode" />
                            <el-table-column  label="客户名称"   align="center" prop="customerName" :show-overflow-tooltip="true">
                                <template slot-scope="scope">
                                    {{scope.row.customerName}}
                                   <!-- <el-link  :underline="false" type="primary" >{{scope.row.customerName}}</el-link> -->
                                </template>
                            </el-table-column>
                            <el-table-column  label="手机" width="120px"  align="center" prop="mobile"   >
                                <template slot-scope="scope">
                                {{scope.row.mobile}}
                                </template>
                            </el-table-column>
                            <el-table-column  label="跟进阶段"  align="center" prop="visitStatus">
                                <template slot-scope="scope">
                                    <el-tag prop="visitStatus" v-for="(item, index) in statusOptions"    v-if="scope.row.visitStatus==item.dictValue">{{item.dictLabel}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column  label="客户来源" align="center" prop="source">
                                <template slot-scope="scope">
                                    <el-tag prop="status" v-for="(item, index) in sourceOptions"    v-if="scope.row.source==item.dictValue">{{item.dictLabel}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column  label="客户类型"   align="center" prop="customerType">
                                <template slot-scope="scope">
                                    <el-tag prop="status" v-for="(item, index) in typeOptions"    v-if="scope.row.customerType==item.dictValue">{{item.dictLabel}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column  label="标签" align="center" prop="tags"   >
                                <template slot-scope="scope">
                                {{scope.row.tags}}
                                </template>
                            </el-table-column>
                            <!-- <el-table-column  label="备注" width="120px"  align="center" prop="remark"   >
                                <template slot-scope="scope">
                                {{scope.row.remark}}
                                <el-button   v-hasPermi="['crm:customer:addRemark']" type="text" size="mini" @click="handleAddRemark(scope.row)">修改备注</el-button>
                                </template>
                            </el-table-column> -->
                            <!-- <el-table-column label="进线客户详情" align="center" :show-overflow-tooltip="true" prop="registerDesc" />
                            <el-table-column label="领取时间" align="center" prop="startTime" />
                            <el-table-column label="进线客户提交日期" align="center" prop="registerSubmitTime" /> -->
                            <el-table-column label="创建时间" align="center" prop="customerCreateTime" width="180">
                            </el-table-column>

                            <el-table-column label="操作"   align="center" fixed="right" width="120px" class-name="small-padding fixed-width">
                                <template slot-scope="scope">
                                      <el-button
                                        size="mini"
                                        type="text"
                                        icon="el-icon-delete"
                                        @click="handleDelCustomer(scope.row)"
                                        >删除</el-button>   
                                </template>
                            </el-table-column>
                    </el-table>
                </el-form-item>

                <el-form-item label="模板库" prop="tempId">
                    <el-select @change="smsChange" v-model="form.tempId" placeholder="请选择" clearable size="small">
                        <el-option
                                v-for="item in smsTemps"
                                :key="item.tempId"
                                :label="item.title"
                                :value="item.tempId"
                            />
                    </el-select>
                </el-form-item>

                <el-form-item label="短信数量" >
                    {{smsCount}}
                </el-form-item>

                <!-- <el-form-item label="接收手机号" >
                    {{form.mobile}}
                </el-form-item> -->
                <el-form-item label="内容" prop="content">
                    <el-input :rows="5" v-model="form.content"  type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>

            <div  class="footer">
                <el-button type="primary" @click="submitForm">发送</el-button>
            </div>

    </div>
</template>
  
<script>
    import { getSmsTempList } from "@/api/company/companySmsTemp";
    import { getCompanySmsCount } from "@/api/company/companySms";
    import { sendCustomerBatchMsg } from "@/api/company/companyUserCard";
    export default {
        name: "addSms",
        data() {
            return {
                customerList:[],
                statusOptions:[],
                typeOptions:[],
                sourceOptions:[],
                sexOptions:[],
                tagsOptions:[],
                smsTemps:[],
                smsCount:0, 
                form: {
                    tempId:null,
                    tempCode:null,
                    customerIds:[],
                    content:null,
                    cardUrl:null,
                    type:1
                },
                 // 查询参数
                queryParams: {
                      customerName: null,
                      pageNum: 1,
                      pageSize: 10,
                },
                // 表单校验
                rules: {
                    customerIds: [
                        { required: true, message: "请选择客户" }
                    ],
                    tempId: [
                        { required: true, message: "请选择短信模版" }
                    ],
                     content: [
                        { required: true, message: "内容不能为空", trigger: "change" }
                    ],
                }
            };
        },
        created() {
            this.getDicts("crm_customer_user_status").then((response) => {
                  this.statusOptions = response.data;
            });
            this.getDicts("common_sex").then((response) => {
                  this.sexOptions = response.data;
            });
            this.getDicts("crm_customer_source").then((response) => {
                  this.sourceOptions = response.data;
            });
            this.getDicts("crm_customer_type").then((response) => {
                  this.typeOptions = response.data;
            });
            this.getDicts("crm_customer_tag").then((response) => {
                this.tagsOptions = response.data;
            });
            getSmsTempList().then(response => {
                this.smsTemps = response.data;
            });
            this.getCompanySmsCount()
            
        },
        methods: {
            selectCustomer(selectedRows){
                // console.log(row);
                // for(var i=0;i<this.customerList.length;i++){
                //     if(this.customerList[i].customerId==row.customerId){
                //        return;
                //     }
                // }
                // this.customerList.push(row);
                // const selectedRows = this.$refs.dataList.selection;
                // 遍历选中的数据，添加到 selectedList 列表
                const selectedList = selectedRows.selection;
                selectedList.forEach(row => {
                    // 判断 selectedData 中是否已存在该行数据
                    const index = this.customerList.findIndex(item => item.customerId === row.customerId)
                    if (index === -1) {
                    this.customerList.push(row)
                    }
                })
                this.$emit('handleAddCustomer1');
            },
           
            // handleAddCustomer1(){
            //     this.$emit('handleAddCustomer1');
            // },
            handleAddCustomer(){
                this.$emit('handleAddCustomer');
            },
            handleDelCustomer(row){
                this.customerList.splice(this.customerList.findIndex(item => item.customerId === row.idcustomerId), 1)
                //this.compute();
            },
            getCompanySmsCount(){
                getCompanySmsCount().then(response => {
                    if(response.data!=null){
                        this.smsCount = response.data.remainSmsCount;
                    }
                });
            },
            smsChange(e){
                var v=this.smsTemps.find(value=>value.tempId==e);
                console.log(v)
                this.form.content=v.content
                this.form.tempCode=v.tempCode
            },
            reset(shortUrl) {
                this.customerList=[];
                this.form.cardUrl=shortUrl;
                this.getCompanySmsCount()
            },
            submitForm() {
               this.form.customerIds=[];
               this.customerList.forEach((item) => {
                   this.form.customerIds.push(item.customerId)
               });
               this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.myloading = this.$loading({
                            lock: true,
                            text: '处理中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        sendCustomerBatchMsg(this.form).then(response => {
                            this.myloading.close()
                            if (response.code === 200) {
                                this.msgSuccess(response.msg);
                                this.$emit('close');
                            }
                            else{
                                this.myloading=false;
                                this.msgError(response.msg);
                            }
                        });
                    }
                });
            },
        }
    };
</script>
<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 20px;
        
}
.footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>



 