<template>
  <div class="manage-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="短信配置" name="first">
        <vab-query-form>
          <vab-query-form-left-panel></vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="primary" @click="handleAdd">添加短信</el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
        <el-table :data="tableData" border stripe style="width: 100%">
          <el-table-column
            prop="name"
            label="模板名称"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="code"
            label="模板编码"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="date"
            label="创建时间"
            width="160"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="模板内容"
            width="500"
            align="center"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <el-button type="text" size="small" @click="handleClick(scope.row)">
              编辑
            </el-button>
            <el-button type="text" size="small">删除</el-button>
            <el-button type="text" size="small">群发</el-button>
          </el-table-column>
        </el-table>
        <vab-query-form>
          <vab-query-form-left-panel></vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-pagination
              :current-page="currentPage4"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </vab-query-form-right-panel>
        </vab-query-form>
      </el-tab-pane>
      <el-tab-pane label="邮箱配置" name="second">
        <el-form
          ref="form"
          :model="form"
          label-position="left"
          label-width="120px"
        >
          <el-form-item label="邮箱地址">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="邮箱授权码">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="邮箱服务器地址">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="协议">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="端口">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div>
          <span>
            QQ邮箱：http://jingyan.baidu.com/article/fedf032148ajkas8978ea.html
          </span>
          <el-link
            href="https://element.eleme.io"
            target="_blank"
            type="primary"
          >
            复制链接
          </el-link>
        </div>
        <div>
          <span>
            163邮箱：http://jingyan.baidu.com/article/fedf032148ajkas8978ea.html
          </span>
          <el-link
            href="https://element.eleme.io"
            target="_blank"
            type="primary"
          >
            复制链接
          </el-link>
        </div>
        <div>
          <span>
            腾讯企业邮箱：http://jingyan.baidu.com/article/fedf032148ajkas8978ea.html
          </span>
          <el-link
            href="https://element.eleme.io"
            target="_blank"
            type="primary"
          >
            复制链接
          </el-link>
        </div>
        <el-button type="primary">保存</el-button>
        <el-button type="primary" plain>返回</el-button>
      </el-tab-pane>
      <el-tab-pane label="微信平台配置" name="third">
        <el-form
          ref="form"
          :model="form"
          label-position="left"
          label-width="140px"
        >
          <el-form-item label="微信appid">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="微信appSecret">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="公众号唯一标识参数">
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary">保存</el-button>
        <el-button type="primary" plain>返回</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Setting',
  data() {
    return {
      input: '',
      activeName: 'first',
      tableData: [
        {
          name: '设备报警通知模板1',
          code: 'SMS_210085123',
          date: '2022-02-15 10:12:31',
          content:
            '设备${dname}报警：变量：${vdesc}当前值：${svalue}设定值：${lvalue}',
        },
        {
          name: '设备报警通知模板2',
          code: 'SMS_210085123',
          date: '2022-02-15 10:12:31',
          content:
            '设备${dname}报警：变量：${vdesc}当前值：${svalue}设定值：${lvalue}',
        },
        {
          name: '设备报警通知模板3',
          code: 'SMS_210085123',
          date: '2022-02-15 10:12:31',
          content:
            '设备${dname}报警：变量：${vdesc}当前值：${svalue}设定值：${lvalue}',
        },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleAdd() {
      this.$refs['edit'].showEdit();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;

  .el-form-item {
    width: 360px;
  }
}
</style>
