<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>
  </div>
</template>

<script>
import dataTable from '@components/dataTable.vue'
export default {
  name: 'messageList',
  components: {
    dataTable
  },
  data() {
    return {
      title: '短信群发',
      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/createShortmessage')
    }
  }

}
</script>

<style scoped>
.absolute{
	position: absolute;
	right:5%;
	top:18%
}
</style>
