<template>
  <div>
    <el-form ref="form" :model="form">
      <el-form-item label="发送主题:">
        <el-input v-model="form.subject" placeholder="请输入发送主题"></el-input>
      </el-form-item>

      <el-card header="发送号码:">
        <el-form-item>
          <el-table :data="form.phoneNumbers">
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="number" label="号码"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="text" @click="removePhoneNumber(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="width: 50%">
            <el-col :span="18">
              <el-input v-model="newPhoneNumber" placeholder="请输入手机号"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" @click="addPhoneNumber">添 加</el-button>
            </el-col>
          </el-row>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            style="width: 100%"
          >
            <el-button type="primary">导入文件</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
          <el-button type="primary" @click="submitForm">批量输入</el-button>
        </el-form-item>
      </el-card>

      <el-card header="发送内容:">
        <el-form-item>
          <el-input v-model="form.content" type="textarea" placeholder="请输入短信内容"></el-input>
        </el-form-item>
      </el-card>

      <el-form-item label="发送时间:">
        <el-radio-group v-model="form.sendTime">
          <el-radio label="immediate">立即发送</el-radio>
          <el-radio label="scheduled">定时发送</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-card header="高级设置:">
        <el-form-item label="业务类型:" prop="businessType">
          <el-select v-model="form.businessType" placeholder="请选择业务类型">
            <el-option value="M00000" label="默认业务(M00000)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发送级别:" prop="sendLevel">
          <el-select v-model="form.sendLevel" placeholder="请选择发送级别">
            <el-option value="systemControl" label="系统智能控制"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="SP账号:" prop="spAccount">
          <el-select v-model="form.spAccount" placeholder="请选择SP账号">
            <el-option value="YDRSSC" label="YDRSSC(页面生产信息发送)"></el-option>
          </el-select>
        </el-form-item>
        <el-radio-group v-model="form.replySetting">
          <el-radio label="noReply">不用回复</el-radio>
          <el-radio label="thisTask">本次任务</el-radio>
          <el-radio label="myNumber">我的号码</el-radio>
        </el-radio-group>
      </el-card>

      <el-form-item>
        <el-button type="primary" @click="submitForm">暂存草稿</el-button>
        <el-button type="primary" @click="submitForm">提 交</el-button>
        <el-button @click="resetForm">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        subject: '',
        phoneNumbers: [],
        content: '',
        sendTime: 'immediate',
        businessType: 'M00000',
        sendLevel: 'systemControl',
        spAccount: 'YDRSSC',
        replySetting: 'noReply'
      },
      newPhoneNumber: ''
    };
  },
  methods: {
    addPhoneNumber() {
      if (this.newPhoneNumber.trim() !== '') {
        this.form.phoneNumbers.push({ type: '', number: this.newPhoneNumber });
        this.newPhoneNumber = '';
      }
    },
    removePhoneNumber(index) {
      this.form.phoneNumbers.splice(index, 1);
    },
    submitForm() {
      // 处理表单提交逻辑
    },
    resetForm() {
      this.form = {
        subject: '',
        phoneNumbers: [],
        content: '',
        sendTime: 'immediate',
        businessType: 'M00000',
        sendLevel: 'systemControl',
        spAccount: 'YDRSSC',
        replySetting: 'noReply'
      };
    }
  }
};
</script>

<style scoped>
.el-form {
  max-width: 800px;
  margin: 0 auto;
}
</style>
