<template>
  <div>
    <div class="content">
      <el-breadcrumb separator="/" style="margin-bottom:30px">
        <el-breadcrumb-item>系统管理 </el-breadcrumb-item>
        <el-breadcrumb-item>邮件配置 </el-breadcrumb-item>
        <el-breadcrumb-item>邮件群发</el-breadcrumb-item>
      </el-breadcrumb>
      <ul class="navs flex">
        <li v-for="(item,index) in navs" :key="index" :class="navIndex==index?'active':''" @click="changeNav(index)">{{ item }}</li>
      </ul>
      <!-- 发送列表 -->
      <div v-show="navIndex==0" class="send">
        <div class="absolute">
          <el-button type="primary" @click="create">新建短信发送</el-button>
        </div>
        <dataTable :table-data="tableData" :columns="columns" :page-obj="pageObj" :breads="breads" :checklist="checklist">
          <el-table-column slot="operate" label="是否发送短信" align="center" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleSee(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </dataTable>
      </div>
      <!-- 短信发送配置 -->
      <div v-show="navIndex==1" style="width:450px">
        <dataTable :table-data="tableData1" :columns="columns1" :breads="breads" :checklist="[]" :page-obj="false">
          <el-table-column slot="operate" label="操作" align="center" fixed="right" width="150">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isSend" active-color="#13ce66" inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
        </datatable>
      </div>
      <!-- 邮件服务器配置 -->
      <div v-show="navIndex==2">
        <div class="parameter flex">
          <div>参数说明</div>
          <div>参数值</div>
        </div>
        <el-form ref="form" :model="form" :rules="rules" label-width="180px" class="demo-ruleForm">
          <el-form-item label="邮件发送方式：" prop="type" style="width:500px">
            <el-radio v-model="form.type" label="1">SMTP服务器发送邮件</el-radio>
            <el-radio v-model="form.type" label="2">阿里云DirectMail</el-radio>
          </el-form-item>
          <el-form-item label="Access Key ID：" prop="id" style="width:500px">
            <el-input v-model="form.id" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="Access Key Secret：：" prop="secret" style="width:500px">
            <el-input v-model="form.secret" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="发信地址：" prop="address" style="width:500px">
            <el-input v-model="form.address" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="标签：" prop="label" style="width:500px">
            <el-input v-model="form.label" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="发件人昵称：" prop="name" style="width:500px">
            <el-input v-model="form.name" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="button">
          <el-button type="primary">保存</el-button>
          <el-button @click="dialogFormVisible = true">测试</el-button>
        </div>
        <el-dialog :visible.sync="dialogFormVisible" title="邮件测试">
          <el-form :model="testform">
            <el-form-item :label-width="formLabelWidth" label="发送地址">
              <el-input v-model="testform.address" ></el-input>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth" label="测试内容">
              <el-input v-model="testform.content" ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">发送</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
export default {
  name: 'emailList',
  components: {
    dataTable
  },
  data() {
    return {
      dialogFormVisible: false,
      testform: {
        address: '',
        content: ''
      },
      formLabelWidth: '100px',
      form: {
        type: '',
        id: '',
        secret: '',
        address: '',
        label: '',
        name: ''
      },
      rules: {
        type: [{
          required: true,
          message: '请选择发送法师',
          trigger: 'change'
        }],
        id: [{
          required: true,
          message: '请输入Access Key ID',
          trigger: 'blur'
        }],
        secret: [{
          required: true,
          message: '请输入Access Key Secret',
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入发信地址',
          trigger: 'blur'
        }],
        label: [{
          required: true,
          message: '请输入标签',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请输入发件人昵称',
          trigger: 'blur'
        }]
      },
      navIndex: '0',
      navs: ['发送列表', '邮件服务器配置', '邮件发送配置'],
      checklist: [{
        title: '姓名',
        type: 'input',
        model: 'name'
      },
      {
        title: '单位名称',
        type: 'input',
        model: 'company'
      },
      {
        title: '发送日期',
        type: 'timeRange',
        model: 'time'
      }
      ],
      breads: [],
      tableData: [{
        company: '腾讯',
        name: '胡彦斌',
        role: '管理员',
        title: '标题',
        person: '胡彦斌',
        date: '2017-10-01 12：00',
        state: '成功'
      }, {
        company: '腾讯',
        name: '胡彦斌',
        role: '管理员',
        title: '标题',
        person: '胡彦斌',
        date: '2017-10-01 12：00',
        state: '失败'
      }, {
        company: '腾讯',
        name: '胡彦斌',
        role: '管理员',
        title: '标题',
        person: '胡彦斌',
        date: '2017-10-01 12：00',
        state: '成功'
      }],
      columns: [{
        label: '单位名称',
        prop: 'company'
      },
      {
        label: '接收人',
        prop: 'name'
      },
      {
        label: '用户角色',
        prop: 'role'
      },
      {
        label: '短信标题',
        prop: 'title'
      },
      {
        label: '操作员',
        prop: 'person'
      },
      {
        label: '发送时间',
        prop: 'date',
        sortable: true
      }, {
        label: '发送状态',
        prop: 'state'
      }, {
        slot: 'operate'
      }
      ],
      columns1: [{
        label: '配置名称',
        prop: 'configure',
        width: 250
      },
      {
        slot: 'operate'
      }
      ],
      tableData1: [{
        configure: '采购商&供应商审核通过',
        isSend: true
      },
      {
        configure: '采购商&供应商审核拒绝',
        isSend: true
      },
      {
        configure: '招标项目审核通过&拒绝',
        isSend: true
      },
      {
        configure: '询价公告审核通过&拒绝',
        isSend: true
      },
      {
        configure: '招标公告审核通过&拒绝',
        isSend: true
      },
      {
        configure: '中标候选人公示审核通过&拒绝',
        isSend: true
      },
      {
        configure: '中标公告审核通过&拒绝',
        isSend: true
      },
      {
        configure: '变更公告审核通过&拒绝',
        isSend: true
      },
      {
        configure: '流标公告审核通过&拒绝',
        isSend: true
      },
      {
        configure: '投标邀请书审核通过&拒绝',
        isSend: true
      },
      {
        configure: '标书费缴纳审核通过&拒绝',
        isSend: true
      },
      {
        configure: '投标保证金缴纳审核通过&拒绝',
        isSend: true
      }
      ],
      pageObj: {
        size: 10,
        total: 1,
        currentPage: 1,
        sizes: [100, 200, 300],
        func: (currentPage) => {
          this.pageTurning(currentPage)
        }
      }
    }
  },
  methods: {
    changeNav(index) {
      this.navIndex = index
    },
    handleSee() {},
    create() {
      this.$router.push('/admin/system/createEmail')
    }
  }

}
</script>

<style scoped>
	.absolute {
		position: absolute;
		right: 5%;
		top: 18%
	}
	.parameter{
		height:50px;
		width:100%;
		background-color: #F0F2F5;
	}
	.parameter>div{
		height: 50px;
		line-height: 50px;
		font-weight: bold;
			margin-left: 80px;
			font-size: 20px;
	}
	.button{
		margin-left:250px;
		margin-top: 50px;
	}
	
</style>
