<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="goBack" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" @click="save" v-loading="saveLoading" priv="Weixin.Manage.AutoReply_Add">
        <span><i class="fa fa-save"></i>保存</span>
      </el-button>
    </el-toolbar>
    <!-- start -->
    <el-form :model="tmpReply" ref="tmpReply" label-width="130px" v-loading="dialogLoading" style="margin:auto;width:550px;">
      <!--单选框-->
      <el-form-item label="回复类型：" prop="replayType" :verify="['NotNull']">
        <el-radio-group v-model="tmpReply.replayType">
          <el-radio label="key">关键字</el-radio>
          <el-radio label="event">事件</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--搜索框-->
      <el-form-item label="关键字：" prop="keyword" :verify="['NotNull']" v-if="tmpReply.replayType === 'key'">
        <el-input v-model="tmpReply.keyword" style="width:80%"></el-input>
      </el-form-item>
      <!--下拉框 匹配类型-->
      <el-form-item label="匹配类型：" prop="matchType" :verify="['NotNull']" v-if="tmpReply.replayType === 'key'">
        <el-select v-model="tmpReply.matchType" placeholder="请选择匹配类型">
          <el-option v-for="item in matchTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <!--下拉框 事件类型-->
      <el-form-item label="事件类型：" :verify="['NotNull']" prop="eventType" v-else>
        <el-select v-model="tmpReply.eventType" placeholder="请选择事件类型">
          <el-option v-for="item in eventTypes " :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <!-- 回复内容 -->
      <!--图文需要拿第一个栏目的数据,暂时未完成-->
      <el-form-item label="回复内容：" prop="replayText">
        <div style="width:80%">
          <el-tabs v-model="tmpReply.replayMsgType" type="border-card">
            <el-tab-pane name="mpnews">
              <span slot="label">
                <i class="fa fa-file-image-o" aria-hidden="true"></i>图文消息</span>
              <div class="media-item" v-if="tmpReply.replayMediaID">
                <el-card class="table-card">
                  <div v-for="val in mediaData.articles" :key="val.ID">
                    <div v-if="val.index === 0" class="appmsg-title">
                      <a href="javascript:void(0);" onclick="return false;" target="_blank">
                        <h4 class="appmsg_title">{{val.title}}</h4>
                      </a>
                      <img :src="mediaData.prefix + val.logoFile" onerror="this.src='@static/assets/images/picture.png'" width="208" height="165px"
                      />
                    </div>
                    <div v-else class="appmsg-div">
                      <el-row>
                        <el-col :span="16">
                          <a onclick="return false;" href="javascript:void(0);" target="_blank">{{val.title}}</a>
                        </el-col>
                        <el-col :span="8">
                          <img :src="mediaData.prefix + val.logoFile" onerror="this.src='@static/assets/images/picture.png'" width="78" height="78px"
                          />
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-card>
                <div style="text-align:right; font-size:12px;">
                  <a href="javascript:void(0);" @click="deleteMedia">删除</a>
                </div>
              </div>
              <div v-else class="select-div">
                <a href="javascript:void(0);" @click="mediaSelectModal = true">从素材库中选择</a>
              </div>
            </el-tab-pane>
            <el-tab-pane name="text">
              <span slot="label">
                <i class="fa fa-pencil" aria-hidden="true"></i>文字</span>
              <el-input type="textarea" :rows="8" :maxlength="600" placeholder="请输入内容" v-model="tmpReply.replayText"></el-input>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form-item>
    </el-form>
    <!-- end     -->
    <media-select-dialog :show.sync="mediaSelectModal" @callback="mediaSelectCallback"></media-select-dialog>
  </div>
</template>
<script>
import mediaSelectDialog from './mediaSelectDialog.vue'
import util from '@src/common/util.js'
export default {
  components: {
    'media-select-dialog': mediaSelectDialog
  },
  props: {
    ID: {
      default: 0
    }
  },
  data() {
    return {
      isEdit: false,
      dialogLoading: false,
      saveLoading: false,
      tmpReply: {
        keyword: null
      },
      matchTypes: [],
      eventTypes: [],
      mediaData: [],
      mediaSelectModal: false
    }
  },
  mounted() {
    this.isEdit = this.ID !== 'new'
    this.loadData()
  },
  watch: {
    'tmpReply.replayMediaID': {
      handler: async function(val) {
        if (!val) {
          this.mediaData = []
          return
        }
        let res = await axios.get('/ui/wechat/medias/init', {
          params: {
            ID: this.tmpReply.replayMediaID
          }
        })
        this.mediaData = res.data.data
      },
      deep: true
    }
  },
  methods: {
    goBack() {
      this.$router.back()
    },
    async loadData() {
      this.dialogLoading = true
      this.saveLoading = false
      try {
        let event = await axios.get('/ui/platform/codes/EventType')
        this.eventTypes = event.data.data
        let match = await axios.get('/ui/platform/codes/KeywordMatchType')
        this.matchTypes = match.data.data
        let init = await axios.get('/ui/wechat/autoreplys/init', {
          params: {
            ID: this.isEdit ? this.ID : null
          }
        })
        this.tmpReply = init.data.data
        if (!this.isEdit) {
          this.tmpReply.replayType = 'key'
          this.tmpReply.replayMsgType = 'mpnews'
          this.tmpReply.matchType = 1
        }
        this.tmpReply.matchType = this.tmpReply.matchType + ''
        this.dialogLoading = false
      } catch (e) {
        util.showErrorMessageBox(e)
        this.dialogLoading = false
      }
    },
    mediaSelectCallback(ID) {
      Vue.delete(this.tmpReply, 'replayMediaID')
      Vue.set(this.tmpReply, 'replayMediaID', ID)
    },
    deleteMedia() {
      Vue.delete(this.tmpReply, 'replayMediaID')
      Vue.set(this.tmpReply, null)
    },
    async save() {
      this.saveLoading = true
      try {
        await util.validateForm(this.$refs['tmpReply'])
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveLoading = false
        return
      }

      let res
      try {
        this.tmpReply.weiXinID = this.$route.params.weiXinID
        if (this.isEdit) {
          res = await axios.put(`/ui/wechat/autoreplys/${this.ID}`, this.tmpReply)
        } else {
          res = await axios.post('/ui/wechat/autoreplys', this.tmpReply)
        }
      } catch (e) {
        util.showErrorMessageBox(e)
        this.saveLoading = false
        return
      }
      this.saveLoading = false
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.$emit('callback')
        this.goBack()
      }
    }
  }
}
</script>

<style>
/* 在一般情况下dialog宽为600像素，在逻辑分辨率480像素以下dialog宽为96% */

.auto-reply-dialog .el-dialog {
  width: 600px;
}

@media (max-width: 480px) {
  .auto-reply-dialog .el-dialog {
    width: 96%;
  }
}
</style>
<style scoped>
.select-div {
  width: 100%;
  height: 180px;
  border: 2px dashed #ccc;
  text-align: center;
  padding-top: 80px;
}

.select-div a {
  color: #ccc;
  font-weight: 400;
}

.select-div a:hover {
  color: #777;
  text-decoration: underline;
}

.media-item {
  max-width: 278px;
  margin: 10px 0 0 10px;
  float: left;
}

.appmsg-title {
  position: relative;
  margin: 0 15px 15px 15px;
}

.appmsg-title a {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #fff;
  width: 100%;
}

.appmsg_title {
  background: rgba(0, 0, 0, 0.6) !important;
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 15px 8px 10px 8px;
}

.appmsg-div {
  padding: 15px;
  border-top: 1px solid #ccc;
}

.appmsg-div a {
  font-size: 16px;
  padding: 0px 10px 0 0;
  display: block;
  color: #8d8d8d;
  line-height: 24px;
}

.appmsg-div a:hover {
  color: black;
  text-decoration: none;
}

.appmsg-div img {
  float: right;
}
</style>
