<template>
  <div v-loading="dialogLoading"  :element-loading-text="loadingText">
    <el-row :gutter="15" >
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="24">
            <el-form-item label="关键字" prop="keyWords" >
              <el-input v-model="formData.keyWords" placeholder="请输入关键字" clearable
                        :style="{width: '80%'}" size="medium"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="关键字类型" prop="keyWordsType" >
              <el-radio-group v-model="formData.keyWordsType">
              <el-radio-button  label="10510" >包含匹配</el-radio-button>
              <el-radio-button  label="10520" >完全匹配</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        <el-col :span="24">
          <el-form-item label="标题" prop="title" >
          <el-select v-model="formData.relationReplyIdList" multiple placeholder="请选择" @change="updateData">
                <el-option
                  v-for="item in picTextReplyList"
                  :key="item.replyId"
                  :label="item.title"
                  :value="item.replyId">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item style="width: 600px;margin-left: 3%;margin-top: 20px">
            <template>
              <el-carousel :interval="6000" type="card" height="300px" >
                <el-carousel-item v-for="item in formData.relationReplyIdList" :key="item">
                  <img :src="getUrl(item).pictureUrl">
                  <h3 >{{ getUrl(item).title }}</h3>
              </el-carousel-item>
            </el-carousel>
          </template>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="horizontal-view box-shadow"
         style="width: 100%;position: absolute;bottom: 0;height: 80px;background: white;align-items: center">
      <el-button type="primary" @click="submitForm" style="margin-left: 5%">提交</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </div>
  </div>
</template>
<script>
  import {
    getReply,
    addReply,
    updateReply,
    getPicTextReplyList
  } from "@/api/wxManage/wxreply";
export default {
  created() {
  },
  data() {
    return {
      formDataUpLoad: {} ,
      picTextReplyList: {},
      flag:false,
      dialogLoading: true,
      loadingText: '查询中',
      formData: {
        replyId: null,
        keyWords: null,
        keyWordsType: null,
        isUseKeyWords: '0',
        title: null,
        author: null,
        synopsis: null,
        pictureUrl: null,
        picTextDetailContent: null,
        picTextUrl: null,
        replyType: '10740',
        contentType: '10630',
        lookNumber: null,
        mediaId: null,
        createById: null,
        remark: null,
        relationReplyId: null,
        relationReplyIdList: null
      },
      rules: {
        keyWords: [
          { required: true, message: "关键字不能为空", trigger: "blur" },
          { min: 1, max: 10, message: '用户名称长度必须介于 1 和 10 之间', trigger: 'blur' }
        ],
        keyWordsType: [
          { required: true, message: "关键字类型不能为空", trigger: "change" },
        ],
        title: [
          { required: true, message: "标题不能为空", trigger: "blur"},
        ]
      }
    }
  },
  methods:{
    getUrl(id){
      if (this.picTextReplyList && this.picTextReplyList.length > 0){
        return this.picTextReplyList.find(item => item.replyId === id)
      }
      return {}
    },
    getRelyList(){
      getPicTextReplyList().then(res =>{
        if(res.data){
          this.picTextReplyList = res.data;
        }
      })
    },
    // 进入页面调的方法
    setInitData(replyId) {
      this.getRelyList();
      this.id = replyId
      if (replyId !== undefined && replyId !== '') {
        this.dialogLoading = true
        this.loadingText = '查询中'
        getReply(this.id).then(res => {
          this.formData = res.data
          this.formData.relationReplyIdList = [].concat(this.formData.relationReplyId.split(','));
          this.dialogLoading = false
          this.resetForm('elForm')
        }).catch(e => {
          this.dialogLoading = false
          this.$message.error(e.data.msg)
        })
      } else {
        this.dialogLoading = false
      }
    },
    //提交
    submitForm(){
      if(this.formData.relationReplyIdList !== null){
        this.formData.title = "标题";
        this.formData.relationReplyId = this.formData.relationReplyIdList.join(',')
      }
      this.$refs['elForm'].validate(valid => {
      if (!valid) {
        return
      }
      if (this.pictureUrlFileList && this.pictureUrlFileList.length > 0) {
        this.formData.pictureUrl = this.pictureUrlFileList[0].url
      }
      this.dialogLoading = true
      this.loadingText = '保存中'
      if (this.id !== undefined && this.id !== null){
        updateReply(this.formData).then(res => {
          this.$message('保存成功')
          this.dialogLoading = false
          this.$emit('closeDialog')
          this.$emit('refresh')
          this.$root.$emit('refreshList');
        }).catch(e => {
          this.dialogLoading = false
          this.$message.error(e.data.msg)
        })
      }else {
        addReply(this.formData).then(res => {
          this.$message('添加成功')
          this.dialogLoading = false
          this.$emit('closeDialog')
          this.$emit('refresh')
          this.$root.$emit('refreshList');
        }).catch(e => {
          this.dialogLoading = false
          this.$message.error(e.data.msg)
        })
      }
    })
    },
    updateData(){
      this.$forceUpdate();
    },
    checkClose(done){
      this.$confirm('是否关闭表单，关闭后数据将丢失？').then(function() {
        done()
      }).then(() => {
      }).catch(() => {});
    },
    closeDialog() {
      var ctx = this
      this.$confirm('是否关闭表单，关闭后数据将丢失？').then(function() {
        ctx.$emit('closeDialog')
      }).then(() => {
      }).catch(() => {});
    }
  }
}

</script>
<style>
.el-carousel__item img{
  //color: #475669;
  font-size: 14px;
  opacity: 2;
  line-height: 200px;
  margin: 0;
  width: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
