<template>
    <div>
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-form-item label="模板库" >
                    <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="个人名片" v-if="showPickCard"  prop="cards">
                        <el-row :gutter="10" class="mb8">
                            <el-col :span="1.5">
                                <el-button @click="handleCardSelect">添加名片</el-button>
                            </el-col>
                        </el-row>
                        <el-table border  :data="cards" >
                            <!-- <el-table-column type="selection" width="55" align="center" /> -->
                            <el-table-column width="55" label="Id" align="center" prop="id" />
                            <el-table-column width="70" label="用户ID" align="center" prop="userId" />
                            <el-table-column label="名片标题" align="center" prop="title" />
                                <el-table-column label="名片图片" align="center" width="120">
                                    <template slot-scope="scope">
                                    <el-popover
                                        placement="right"
                                        title=""
                                        trigger="hover">
                                        <img slot="reference" :src="scope.row.imageUrl" width="100">
                                        <img :src="scope.row.imageUrl" style="max-width: 150px;">
                                    </el-popover>
                                    </template>
                                </el-table-column>
                            
                            <el-table-column label="名片短链接" width="100" align="center" prop="shortUrl" />
                            <el-table-column label="创建时间" width="100" align="center" prop="createTime" />
                            <el-table-column  label="名片类型"  align="center" prop="type">
                                <template slot-scope="scope">
                                <el-tag prop="type" v-for="(item, index) in typeOptions"    v-if="scope.row.type==item.dictValue">{{item.dictLabel}}</el-tag>
                                </template>
                            </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"
                                    @click="handleRemoveCard(scope.row.$index)"
                                    >删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                </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>

              <el-dialog :title="cardSelect.title" :visible.sync="cardSelect.open" width="900px" append-to-body>
                 <card-select  ref="cardSelects" @selectCard="selectCard"  />
             </el-dialog>
    </div>
</template>
  
<script>
    import { getSmsTempList } from "@/api/company/companySmsTemp";
    import { sendCustomerMsg,getCompanySmsCount,sendStoreOrderMsg,sendPackageOrderMsg } from "@/api/company/companySms";
    import cardSelect from '../../company/components/cardSelect.vue';
    export default {
        name: "visit",
        components: { cardSelect },
        data() {
            return {
                smsTemps:[],
                type:null,
                smsCount:0,
                form: {
                    tempId:null,
                    customerId:null,
                    content:null,
                    mobile:null,
                    cardUrl:"",
                },
                // 表单校验
                rules: {
                    content: [
                        { required: true, message: "内容不能为空", trigger: "change" }
                    ],
                },
                typeOptions:[],
                cards:[],
                cardSelect:{
                    title:"选择名片",
                    open:false,
                },
                showPickCard:false,
            };
        },
        created() {
             this.getDicts("company_user_card_type").then((response) => {
                  this.typeOptions = response.data;
             });
            getSmsTempList().then(response => {
                this.smsTemps = response.data;
            });
            this.getCompanySmsCount()
        },
        methods: {
            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;
                 if(v.content.indexOf('sms.cardUrl')!=-1){
					this.showPickCard=true;
				}else{
                    this.showPickCard=false;
                }
            },
            reset(customerId,mobile,type) {
                this.form.customerId=customerId;
                this.form.mobile=mobile;
                this.type = type
                this.getCompanySmsCount()       
            },
            getOrderId(orderId,mobile,type) {
                this.form.orderId=orderId;
                this.form.mobile=mobile;
                this.type = type
                this.getCompanySmsCount()
            },
            getPackageOrderId(orderId,mobile,type) {
                this.form.orderId=orderId;
                this.form.mobile=mobile;
                this.type = type
                this.getCompanySmsCount()
            },
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        this.form.cardUrl="";
                        if(this.showPickCard){
                            if(this.cards.length==0){
                                this.msgError("请选择名片");
                                return;
                            }else{
                                 var card=this.cards[0];
                                 this.form.cardUrl=card.shortUrl;
                            }
                        }
                        this.myloading = this.$loading({
                            lock: true,
                            text: '处理中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        });
                        if(this.type==1){
                            sendCustomerMsg(this.form).then(response => {
                                this.myloading.close()
                                if (response.code === 200) {
                                    this.msgSuccess(response.msg);
                                    
                                    this.$emit('close');
                                }
                                else{
                                    this.msgError(response.msg);
                                }
                            });
                        }
                        if(this.type == 2){
                            sendStoreOrderMsg(this.form).then(response => {
                                this.myloading.close()
                                if (response.code === 200) {
                                    this.msgSuccess(response.msg);
                                    
                                    this.$emit('close');
                                }
                                else{
                                    this.msgError(response.msg);
                                }
                            });
                        }
                        if(this.type == 3){
                            sendPackageOrderMsg(this.form).then(response => {
                                this.myloading.close()
                                if (response.code === 200) {
                                    this.msgSuccess(response.msg);
                                    
                                    this.$emit('close');
                                }
                                else{
                                    this.msgError(response.msg);
                                }
                            });
                        }
                    }
                });
            },
            handleCardSelect(){
                var that=this;
                this.cardSelect.open=true;
                setTimeout(() => {
                    that.$refs.cardSelects.getList();
                }, 500);
            },
            selectCard(data){
                this.cards=data;
                console.log(JSON.stringify(data));
                this.cardSelect.open=false;
            },
            handleRemoveCard(index){
                this.cards.splice(index,1);
                this.$refs.cardSelects.delCard(index);
            },
        }
    };
</script>
<style lang="scss" scoped>
.contents{
    height: 100%;
    background-color: #fff;
    padding: 20px;
        
}
.footer{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>



 