<template>
  <div style="margin:20px;padding:20px;background-color: #fff;">
    <el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">

      <el-row>
        <el-col :span="24">
          <div class="table-tree tableswidth">
            <div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
              <div style="font-size: 18px;color: #303133;">短信模板</div>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item label="短信模板" prop="template_id">
            <el-select v-model="form.template_id" placeholder="请选择短信模板" style="width:100%">
              <el-option v-for="item in templateList" :key="item.value" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="table-tree tableswidth">
            <div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
              <div style="font-size: 18px;color: #303133;">联系人手机号</div>
              <Button type="primary" @click="mobileList.push({mobile:''})" size="small" style="margin-left: 10px;"
                ghost>新增</Button>
            </div>
            <el-table :data="mobileList" height="200" class="v-table" style="width: 100%;margin-bottom: 20px;">
              <el-table-column type="index" align="center">
              </el-table-column>
              <el-table-column prop="mobiles" label="手机号">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.mobile" placeholder="请填写接收短信联系人手机号" autocomplete="off"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120px" align="center">
                <template slot-scope="scope">
                  <!-- <el-input style="display: none;" type="hidden" v-model="scope.row.mobile"></el-input> -->
                  <Button type="error" @click="mobileList.splice(scope.$index,1)" size="small"
                    style="margin-left: 10px;" ghost>删除</Button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="table-tree tableswidth">
            <div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
              <div style="font-size: 18px;color: #303133;">信息模板内容</div>
            </div>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="name" label="活动/参观名称">
            <el-input v-model="paramesObj.name" placeholder="请填写活动/参观名称" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="time" label="活动/参观时间">
            <!-- <el-date-picker style="width:100%" v-model="form.parames.time" type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择活动/参观时间">
            </el-date-picker> -->
            <el-input v-model="paramesObj.time" placeholder="请填写活动/参观时间" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="address" label="活动/参观地址">
            <el-input v-model="paramesObj.address" placeholder="请填写活动/参观地址" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm('form')">取 消</el-button>
      <el-button type="primary" @click="submitForm('form')">发 送</el-button>
    </div>
  </div>
</template>

<script>
  import {
    sendMessage
  } from '@/api/order/message.js'
  export default {
    data() {
      return {
        form: {
          mobile: [],
          template_id: '',
          parames: {}
        },
        mobileList: [{
            mobile: '18936139616'
          },
          {
            mobile: '18936139616'
          },
          {
            mobile: '13913553385'
          },
          {
            mobile: '15606250566'
          },
          {
            mobile: '18936139616'
          },
          {
            mobile: '18936139616'
          },
          {
            mobile: '18896803717'
          },
          {
            mobile: '13862131217'
          },
          {
            mobile: '13771928980'
          },
          {
            mobile: '13806212507'
          },
          {
            mobile: '18012744431'
          },
          {
            mobile: '18012744431'
          },
          {
            mobile: '18012744431'
          },
          {
            mobile: '18051218702'
          },
          {
            mobile: '15850056828'
          },
          {
            mobile: '15850056828'
          },
          {
            mobile: '13915557940'
          },
          {
            mobile: '15995808679'
          },
          {
            mobile: '18626109888'
          },
          {
            mobile: '15250505058'
          },
          {
            mobile: '15250505058'
          },
          {
            mobile: '13776110523'
          },
          {
            mobile: '13776110523'
          },
          {
            mobile: '13776034799'
          },
          {
            mobile: '15895464925'
          },
          {
            mobile: '17715140912'
          },
          {
            mobile: '17751654868'
          },
          {
            mobile: '13913171771'
          },
          {
            mobile: '13913171771'
          },
          {
            mobile: '13913171771'
          },
          {
            mobile: '13664165211'
          },
          {
            mobile: '13915572008'
          },
          {
            mobile: '13915572008'
          },
          {
            mobile: '15895360418'
          },
          {
            mobile: '13861794258'
          },
          {
            mobile: '15006195598'
          },
          {
            mobile: '13814889016'
          },
          {
            mobile: '15995892928'
          },
          {
            mobile: '13913516430'
          },
          {
            mobile: '15370072868'
          },
          {
            mobile: '18852675993'
          },
          {
            mobile: '18251371032'
          },
          {
            mobile: '15962454958'
          },
          {
            mobile: '13915422122'
          },
          {
            mobile: '18896716581'
          },
          {
            mobile: '15962180796'
          },
          {
            mobile: '13913056555'
          },
          {
            mobile: '13906222159'
          },
          {
            mobile: '18915580967'
          }
        ],
        paramesObj: {
          name: "乐益大讲堂”第二讲《中国载人航天》",
          time: "5月2日(本周二)14:00-16:00",
          address: "中共苏州独立支部旧址(体育场路4号)一楼报告厅"
        },
        rules: {

        },
        formLabelWidth: '120px',
        templateList: [{
            id: "8S8Pq1",
            value: '活动短信0512-65166121'
          },
          {
            id: 'L3Ewb3',
            value: '活动短信0512-67701925'
          }
        ]

      }
    },
    methods: {
      submitForm(formName) {
        let that = this
        console.log(this.form)
        if (!this.form.template_id) {
          that.$message.error('请选择短信模版');
          return
        }
        if (this.mobileList.length < 1) {
          that.$message.error('请填写联系人手机号');
          return
        }
        for (var k of this.mobileList) {
          this.form.mobile.push(k.mobile)
        }
        this.form.parames = this.paramesObj
        console.log(this.form)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            sendMessage(that.form).then(response => {
              this.$Message.success('发送成功');
              that.resetForm('form')
            }).catch(error => {})

          } else {
            this.$Message.error('数据校验失败');
            return false;
          }
        });



      },
      resetForm(formName) {
        this.mobileList = []
        this.paramesObj = {}
        this.$refs[formName].resetFields();
      }
    },
  }
</script>

<style>
</style>