<template>
  <div class="app-container">
    <el-page-header :content="isEdit ? '编辑回复配置' : '添加回复配置'" @back="goBack" />
    <el-card class="form-container" shadow="never">
      <el-form ref="weChatReplyFrom" :model="reply" label-width="150px">
        <el-form-item label="回复类型:" prop="msgType">
          <el-select v-model="reply.msgType" placeholder="请选择">
            <el-option value="" label="请选择" />
            <el-option label="请选择回复类型" value="" />
            <el-option label="文本输入" value="input" />
            <el-option label="点击事件" value="click" />
            <el-option label="关注" value="subscribe" />
            <el-option label="扫码" value="scan" />
          </el-select>
        </el-form-item>
        <el-form-item label="事件类型:" prop="responseType">
          <el-select v-model="reply.responseType" placeholder="请选择">
            <el-option label="请选择" value="" />
            <el-option label="文本素材" value="text" />
            <el-option label="图文素材" value="news" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字:" prop="keyword">
          <el-input v-model="reply.keyword" />
        </el-form-item>
        <el-form-item label="回复素材标题:" prop="title">
          <el-input v-model="reply.title" readonly disabled />
          <el-button @click="dialogTableVisible = true">选择</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('weChatReplyFrom')">提交</el-button>
          <el-button v-if="!isEdit" type="info" @click="resetForm('weChatReplyFrom')">重置</el-button>
          <el-button @click="goBack">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog title="素材选择" :visible.sync="dialogTableVisible">
      <el-table row-key="id" :data="textData">
        <el-table-column prop="title" label="标题">
          <template slot-scope="{ row }">
            <el-radio v-model="reply.relateId" :label="row.id" @change="setReplyTitle(row.title)">{{
              limitString(row.title, 8)
            }}</el-radio> </template>>
        </el-table-column>
        <el-table-column prop="content" label="内容">
          <template slot-scope="{ row }">
            <el-tooltip :content="row.content" placement="top">
              <span v-text="limitString(row.content, 15)"></span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="最后更新时间" width="100" />
      </el-table>
      <pagination
        v-show="textTotal > 0"
        :total="textTotal"
        :page.sync="textQuery.pageNum"
        :limit.sync="textQuery.pageSize"
        @pagination="getTextData"
      />
      <div class="dialog-footer">
        <el-button @click="resetReplyTitle">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getReply, updateReply, createReply } from '@/api/wechat/reply'
import { fetchList as fetchTextList } from '@/api/wechat/text'
import Pagination from '@/components/Pagination'
const defaultReply = {
  // 类型： 1采美，2呵呵商城
  type: '',
  id: 0,
  keyword: '',
  responseType: '',
  msgType: '',
  title: '',
  relateId: 0
}
export default {
  name: 'WeChatReplyForm',
  components: { Pagination },
  props: {
    // type 类型： 1采美，2呵呵商城
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      reply: Object.assign({}, defaultReply),
      isEdit: false,
      dialogTableVisible: false,
      textTotal: 0,
      textData: [],
      textQuery: {
        // type 类型： 1采美，2呵呵商城
        type: '0',
        title: '',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    $route(route) {
      this.getFormData()
    }
  },
  created() {
    this.textQuery.type = this.type
    this.getFormData()
    this.getTextData()
  },
  methods: {
    goBack() {
      // 调用全局挂载的方法,关闭当前标签页
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一步路由，返回上一个标签页
      this.$router.go(-1)
    },
    getFormData() {
      if (this.$route.query.id) {
        this.reply.id = this.$route.query.id
        this.isEdit = true
        getReply(this.reply.id).then((response) => {
          this.reply.keyword = response.data.keyword
          this.reply.responseType = response.data.responseType
          this.reply.msgType = response.data.msgType
          this.reply.title = response.data.title
          this.reply.relateId = response.data.relateId
        })
      } else {
        this.reply.id = ''
        this.isEdit = false
        this.reply = Object.assign({}, defaultReply)
      }
      this.reply.type = this.type
    },
    getTextData() {
      fetchTextList(this.textQuery).then((response) => {
        this.textData = response.data.results
        this.textTotal = response.data.totalRecord
      })
    },
    limitString(str, size) {
      if (String(str).length > size) {
        return String(str).substring(0, size) + '...'
      }
      return str
    },
    setReplyTitle(title) {
      this.reply.title = title
    },
    resetReplyTitle() {
      if (this.$route.query.id) {
        this.reply.id = this.$route.query.id
        getReply(this.reply.id).then((response) => {
          this.reply.title = response.data.title
          this.reply.relateId = response.data.relateId
        })
      } else {
        this.reply.title = ''
        this.reply.relateId = 0
      }
      this.dialogTableVisible = false
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.reply = Object.assign({}, defaultReply)
      this.getFormData()
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.reply)
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const self = this
            if (this.isEdit) {
              updateReply(this.$route.query.id, this.reply).then((response) => {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration: 1000
                })
                self.goBack()
              })
            } else {
              createReply(this.reply).then((response) => {
                this.$refs[formName].resetFields()
                this.resetForm(formName)
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                })
                self.goBack()
              })
            }
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    }
  }
}
</script>

<style scoped></style>
