<template>
  <div class="right-list-toolbar right-list-panel-card">
    <div v-show="!formModal">
      <!-- 二级导航栏 start-->
      <el-row>
        <el-toolbar>
        <el-col :span="7">
            <el-button @click="addReplyCon" priv="Weixin.Manage.AutoReply_Add">
              <i class="fa fa-plus" aria-hidden="true"></i>新建</el-button>
            <!-- <el-button @click="removeReplyCon(selectedRows)" :disabled="selectedRows.length === 0">
            <i class="fa fa-remove" aria-hidden="true"></i>删除</el-button> -->
        </el-col>
        <el-col :span="17" align="right">
          <el-select class="search-bar-algin-toolbar auto-width" v-model="formInline.eventType" placeholder="事件类型" clearable>
            <el-option v-for="item in eventTypes " :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-input class="search-bar-algin-toolbar auto-width" v-model="formInline.keyword" @keyup.enter.native="searchReplyCon" placeholder="请输入关键字"></el-input>
          <el-input class="search-bar-algin-toolbar auto-width" v-model="formInline.replayText" @keyup.enter.native="searchReplyCon" placeholder="请输入回复内容">
            <el-button slot="append" icon="search" title="查询" @click="searchReplyCon"></el-button>
          </el-input>
        </el-col>
        </el-toolbar>
      </el-row>

      <!-- 二级导航栏 end-->
        <el-list-view ref="autoReplyList" :data-read-url="getData" :pageSize="10" @selection-change="selectionChange">
          <template slot-scope="row">
            <div class="panel-card">
              <el-row>
                <a class="list-card-title" href="javascript:void(0)" @click.stop="editReplyCon(row.ID)">{{row.keyword}}</a>
                <span class="gray">ID：{{row.ID}}</span>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <span>事件类型：</span>
                  <em>{{row.eventTypeName || '无'}}</em>
                </el-col>
                <el-col :span="6">
                  <span>匹配类型：</span>
                  <em>{{row.matchTypeName || '无'}}</em>
                </el-col>
                <el-col :span="6">
                  <span>回复消息类型：</span>
                  <em>{{row.replayMsgTypeName || '无'}}</em>
                </el-col>
                <el-col :span="6">
                  <span>回复素材ID：</span>
                  <em>{{row.replayMediaID || '无'}} </em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <span>回复内容：</span>
                  <em>{{row.replayText || '无'}}</em>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6" :offset="18" class="tar">
                  <el-button @click.stop="editReplyCon(row.ID)" type="text" title="编辑" priv="Weixin.Manage.AutoReply_Edit">
                    <i class="fa fa-edit"></i>编辑
                  </el-button>
                  <el-button @click.stop="removeReplyCon([row])" type="text" title="删除" priv="Weixin.Manage.AutoReply_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: [], // 自动回复内容点击选择的元素
      // 微信自动回复内容 搜索表单
      formInline: {
        eventType: '',
        keyword: '',
        replayText: ''
      },
      eventTypes: [] // 搜索时的事件类型
    }
  },
  methods: {
    // 微信自动回复
    // 回复内容列表被选中
    selectionChange(selection) {
      this.selectedRows = selection
    },
    // 新建回复内容
    addReplyCon() {
      this.$router.push(`${this.$route.path}/new`)
    },
    // 编辑自动回复
    editReplyCon(ID) {
      this.$router.push(`${this.$route.path}/${ID}`)
    },
    // 删除回复内容
    async removeReplyCon(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/autoreplys/${ids}`)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.getAutoReplyData()
        }
      } catch (e) {

      }
    },
    // 自动回复 查询内容
    searchReplyCon() {
      this.getAutoReplyData()
    },
    getData() {
      return [
        '/ui/wechat/autoreplys',
        {
          params: {
            keyword: encodeURIComponent(this.formInline.keyword),
            replayText: encodeURIComponent(this.formInline.replayText),
            eventType: this.formInline.eventType,
            weiXinID: this.$route.params.weiXinID
          }
        }
      ]
    },
    // 加载微信自动回复数据
    async getAutoReplyData() {
      this.$refs.autoReplyList && this.$refs.autoReplyList.getData()
      let event = await axios.get('/ui/platform/codes/EventType')
      this.eventTypes = event.data.data
    }
  }
}
</script>

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

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