<!--
  @description: 发送短信
  @Modifier: haofengxian
  @routerPath:/SMS/sendSMS-add
  @date: 2020-11-24-13:53
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />发送短信
    </div>
    <div class="p0-16">
      <el-form
        ref="form"
        label-width="140px"
        :model="selectSmsSendTemplateVo"
        label-position="left"
        :inline-message="true"
        :rules="rules"
      >
        <div class="page-title">
          模板信息
        </div>
        <table class="from_table">
          <tr class="singleRow">
            <td>
              <el-form-item label="模板名称" prop="templateName" />
            </td>
            <td colspan="3">
              <el-input v-model="selectSmsSendTemplateVo.templateName" style="width:220px" disabled />
              <el-button type="primary" @click="selectTemplate">
                选择模板
              </el-button>
            </td>
          </tr>
          <tr class="singleRow">
            <td>
              <el-form-item label="模板内容" prop="templateContent" />
            </td>
            <td colspan="3">
              <el-input
                v-model="selectSmsSendTemplateVo.templateContent"
                disabled
                type="textarea"
              />
            </td>
          </tr>
          <tr v-for="(item,index) in selectSmsSendTemplateVo.templateParamsData" :key="index" class="singleRow">
            <td>
              <el-form-item :label="item.labelTitle" />
            </td>
            <td>
              <el-input
                v-model="item[item.labelTitle]"
                style="width:220px"
              />
            </td>
          </tr>
        </table>
        <div class="page-title">
          发送号码
          <el-button type="primary" @click="addListPhoneNumbers">
            添 加
          </el-button>
        </div>
        <el-table
          ref="smallTable"
          :data="phoneNumberInfoList"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <el-table-column
            header-align="center"
            prop="phoneNumbers"
            label="发送号码"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-form-item :prop="scope.row.phoneNumbers" label-width="0px">
                <gx-input
                  v-model.trim="scope.row.phoneNumbers"
                  gx-maxlength="varchar20"
                  size="mini"
                  style="width: 300px"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click.stop="removePhoneNumberInfo(scope.$index)">
                [移除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div class="but_footer">
        <div class="but_footer-h">
          <div class="but_footer-but">
            <el-button :loading="confirmLoading" type="primary" @click="handleConfirm">
              确 定
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!--选择模板弹框-->
    <selectSMSTemplate ref="selectSMSTemplate" @call-back="selectSMSTemplateChange" />
  </div>
</template>

<script>
/* 接口*/
import { customSmsSending } from '@api/common/tools'
import { characters1_auto } from '@/assets/js/validate'// 校验输入内容
/* 组件*/
import selectSMSTemplate from './selectSMSTemplate-dialog'
export default {
  name: 'SendSMSAdd',
  components: {
    selectSMSTemplate
  },
  data() {
    return {
      dialogVisible: true, // 弹框是否打开状态
      confirmLoading: false, // 控制按钮重复点击Loding
      // 已选参数模板信息
      selectSmsSendTemplateVo: {
        templateCode: '',
        templateName: '', // 模板名称
        templateContent: '', // 模板内容
        templateParamsData: []
      },
      phoneNumberInfoList: [], // 手机号码集合
      rules: {
        templateName: [{ required: true, validator: characters1_auto, trigger: 'change' }], //  模板名称
        templateContent: [{ required: true, validator: characters1_auto, trigger: 'blur' }] // 模板内容
      }
    }
  },
  methods: {
    // 选择模板
    selectTemplate() {
      this.$refs.selectSMSTemplate.open()
    },
    // 已选模板信息
    selectSMSTemplateChange(temData) {
      this.selectSmsSendTemplateVo.templateParamsData = []
      const templateParamArr = []
      temData.templateParamList.map(item => {
        templateParamArr.push({
          [item]: '',
          labelTitle: item
        })
      })
      this.selectSmsSendTemplateVo = Object.assign(this.selectSmsSendTemplateVo, temData)
      this.selectSmsSendTemplateVo.templateParamsData.push(...templateParamArr)
      this.selectSmsSendTemplateVo.templateCode = temData.templateCode
    },
    // 添加手机号
    addListPhoneNumbers() {
      const data = {
        phoneNumbers: '' // 发送号码
      }
      this.phoneNumberInfoList.push(data)
    },
    // 移除手机号信息
    removePhoneNumberInfo(index) {
      this.$confirm('确定移除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.phoneNumberInfoList.splice(index, 1)
      }).catch(() => {})
    },
    // 保存组装数据
    assemblyData() {
      const customSmsSendingData = {} // 短信变量对应内容
      this.selectSmsSendTemplateVo.templateParamsData.map(item => {
        customSmsSendingData[item.labelTitle] = item[item.labelTitle]
      })
      this.phoneNumberInfoList.map(item => {
        item.templateCode = this.selectSmsSendTemplateVo.templateCode // 模板编号
        item.templateParams = customSmsSendingData // 模板编号
      })
      return this.phoneNumberInfoList
    },
    // 确认
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) { // 校验通过
          this.$confirm('确定发送?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            const params = this.assemblyData()
            customSmsSending(params).then(res => {
              this.$message.success(res.header.msg)
            }).catch(() => {
            })
          }).catch(() => {
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  /deep/.el-form-item--small.el-form-item{
    margin: 0;
  }
</style>
