<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"
              size="small"
              @click="dialogFormVisible = true"
            >
              添加短信
            </el-button>
            <el-dialog v-model="dialogFormVisible" title="添加顶级分类">
              <el-form :model="form">
                <el-form-item label="上级分类" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    size="small"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    size="small"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="分类排序" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    size="small"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-button
                  type="primary"
                  size="small"
                  @click="dialogFormVisible = false"
                >
                  确 定
                </el-button>
                <el-button size="small" @click="dialogFormVisible = false">
                  取 消
                </el-button>
              </div>
            </el-dialog>
          </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="$t('grouping.cjsj')"
            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="$t('defalult.cz')"
            align="center"
          >
            <el-button type="text" @click="dialogFormEdit = true">
              {{ $t('defalult.bj') }}
            </el-button>
            <el-button type="text">{{ $t('defalult.sc') }}</el-button>
            <el-button type="text">群发</el-button>
            <el-dialog v-model="dialogFormEdit" title="添加顶级分类">
              <el-form :model="form">
                <el-form-item label="上级分类" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    size="small"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    size="small"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="分类排序" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    size="small"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div class="dialog-footer">
                <el-button
                  type="primary"
                  size="small"
                  @click="dialogFormEdit = false"
                >
                  确 定
                </el-button>
                <el-button size="small" @click="dialogFormEdit = false">
                  取 消
                </el-button>
              </div>
            </el-dialog>
          </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"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱授权码">
            <el-input
              v-model="input"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱服务器地址">
            <el-input
              v-model="input"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="协议">
            <el-input
              v-model="input"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="端口">
            <el-input
              v-model="input"
              size="small"
              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" size="small">保存</el-button>
        <el-button type="primary" size="small" 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"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="微信appSecret">
            <el-input
              v-model="input"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="公众号唯一标识参数">
            <el-input
              v-model="input"
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" size="small">保存</el-button>
        <el-button type="primary" plain size="small">返回</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'Setting',
  data() {
    return {
      input: '',
      activeName: 'first',
      dialogFormVisible: false,
      dialogFormEdit: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      formLabelWidth: '120px',
      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">
.el-submenu__title:hover {
  background-color: rgba(#1890ff, 0.085) !important;
  color: hsla(208, 100%, 55%, 0.95) !important;
}
.el-dialog {
  .el-dialog__header {
    background-color: #1890ff !important;
    padding: 15px 20px;
    text-align: left !important;
    .el-dialog__title {
      color: #e8f4ff !important;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #e8f4ff !important;
    }
  }
  .el-dialog__body {
    padding: 20px !important;
    .el-form-item {
      margin-bottom: 10px !important;
      .el-input {
        width: 100% !important;
      }
      .el-select {
        width: 100% !important;
      }
      .el-cascader {
        width: 100% !important;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 20px !important;
    }
  }
  .dialog-footer {
    text-align: right;
  }
}
</style>

<style lang="scss" scoped>
.el-input {
  width: 360px !important;
}
.el-select {
  width: 360px !important;
}
.el-cascader {
  width: 360px !important;
}
</style>
