<template>
  <div class="right-list-toolbar">
    <div v-show="!formModal">
      <!-- 二级导航栏 start-->
      <el-row>
        <el-col :span="7">
          <el-toolbar>
            <el-button @click="addTemplate" priv="Weixin.Manage.Template_Add">
              <i class="fa fa-plus" aria-hidden="true"></i>新建</el-button>
          </el-toolbar>
        </el-col>
        <el-col :span="17">
        </el-col>
      </el-row>

      <!-- 二级导航栏 end-->
        <el-list-view ref="templateDataList" :data-read-url="getData" :pageSize="10" @selection-change="selectionChange">
          <template slot-scope="row">
            <div class="panel-card">
              <el-row>
                <el-col :span="12" >
                  <span class="gray">ID：<a class="list-card-title" href="javascript:void(0)" @click.stop="editTemplate(row.ID)">{{row.ID}}</a></span>
                </el-col>
                <el-col :span="12">
                  <span>模板类型：</span>
                  <em>{{row.type}}</em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <span>模板名称：</span>
                  <em>{{row.title}}</em>
                </el-col>
                <el-col :span="12">
                  <span>模板内容：</span>
                  <em>{{row.template}}</em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" :offset="18" class="tar">
                  <el-button @click.stop="editTemplate(row.ID)" type="text" title="编辑" priv="Weixin.Manage.Template_Edit">
                    <i class="fa fa-edit"></i>编辑
                  </el-button>
                  <el-button @click.stop="removeMessage([row])" type="text" title="删除" priv="Weixin.Manage.Template_Delete">
                    <i class="fa fa-times"></i>删除
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-list-view>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  data() {
    return {
      formModal: false,
      autoReplyData: [], // 微信自动回复内容
      selectedRows: [] // 自动回复内容点击选择的元素
    }
  },
  methods: {
    // 微信自动回复
    // 回复内容列表被选中
    selectionChange(selection) {
      this.selectedRows = selection
    },
    // 新建模板消息
    addTemplate() {
      this.$router.push(`${this.$route.path}/new`)
    },
    // 编辑模板消息
    editTemplate(ID) {
      this.$router.push(`${this.$route.path}/${ID}`)
    },
    // 删除消息
    async removeMessage(rows) {
      if (rows.length === 0) {
        this.$alert('请先选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      let ids = []
      rows.forEach(function (row) {
        ids.push(row.ID)
      })
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/wechat/templatemessage/${ids}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.$refs.templateDataList.getData()
        }
      } catch (e) {

      }
    },
    getData() {
      return [
        '/ui/wechat/templatemessage',
        {
          params: {
            weiXinID: this.$route.params.weiXinID
          }
        }
      ]
    }
  }
}
</script>

<style scoped>
  .page {
    float: right;
  }

  .auto-width {
    width: auto;
  }
</style>
