<template>
    <div class="send-sms-page">
        <Card v-if="loading" class="loading-card">
        <Spin fix size="large" />
      </Card>
        <Card v-else>
            <div class="head">
          <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
          <label>发送SMS</label>
        </div>
         <div class="item">
          <label class="label">收信人：</label>
          <RadioGroup v-model="form.sendType">
            <Radio :label="1" class="ivu-radio">所有用户</Radio>
            <Radio :label="2" class="ivu-radio">所有商户</Radio>
            <Radio :label="3" class="ivu-radio">自定义</Radio>
          </RadioGroup>

        </div>
        <div class="item"  v-if="form.sendType == 3">
          <label class="label"></label>
           <Input
            placeholder="请填写收信人，多个收信人以逗号间隔"
            v-model="form.addressee"
            :maxlength="50"
            clearable
            style="width: 400px"
          />
        </div>
       <div class="item">
          <label class="label">消息：</label>
          <Select
            placeholder="请选择模板"
            v-model="form.templateId"
            style="width: 400px"
          >
            <Option
              v-for="(item, index) of templateList"
              :value="item.templateName"
              :key="'series-option-' + index"

            >{{ item.templateName }}</Option
            >
          </Select>
        </div>
        <!-- <div class="item" v-if="form.msgType == 2">
          <label class="label"></label>
           <Input
            placeholder="请输入待发送的信息，100字以内"
            v-model="form.addressee"
            :maxlength="100"
            style="width: 400px"
            type="textarea"
            clearable>
            </Input>
        </div> -->
         <!-- <div class="item">
        <label class="label"></label>
        <Button
            type="primary"
            @click="handleSave"
            style="margin-right: 30px"
            size="large"
          >保存为模板</Button
          >
      </div> -->

         <div class="item">
          <label class="label">发送时间：</label>
          <RadioGroup v-model="form.timeType">
          <Radio :label="1" class="ivu-radio">立即发送</Radio>
          <Radio :label="2" class="ivu-radio">定时发送</Radio>
        </RadioGroup>
        </div>
        <div class="item" v-if="form.timeType ==2">
          <label class="label">发送时间：</label>
          <DatePicker type="datetime" format="yyyy-MM-dd HH:mm"  v-model="form.sendTime" placeholder="请选择发送时间" style="width: 400px"></DatePicker>
        </div>
         <div class="footer-con">
          <Button
            type="default"
            @click="handleReset"
            style="margin-right: 30px"
            size="large"
          >重 置</Button
          >
          <Button
            type="primary"
            @click="handleSubmit"
            size="large"
          >确 定</Button
          >
        </div>
        </Card>
    </div>
</template>
<script>
export default {
  data () {
    return {
      loading: false,
      form: {
        addressee: '',
        sendType: '',
        msgType: 1,
        templateId: '',
        timeType: 1,
        sendTime: ''
      },
      templateList: []
    }
  },
  methods: {
    handleSave () {

    },
    handleReset () {

    },
    handleSubmit () {

    }
  }
}
</script>
<style lang="less" scoped>
.loading-card {
    height: 100%;
  }
  .head {
    color: #17233d;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  i {
    margin-right: 10px;
  }
  }
  .item {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .label{
      width: 100px;
      text-align: right;
      flex-shrink: 0;
    }
    .ivu-radio{
      width: 150px;
    }
  }
  .footer-con {
    // text-align: center;
    margin-left: 150px;

  }
</style>
