<template>
  <div v-loading="loading" class="editTopic">
    <div class="head-title">
      <span @click="CommonJump('topicList')" class="blue point">话题列表</span> / 编辑话题
    </div>
    <div class="content">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="150px" style="width:50%">
        <el-form-item label="话题名称" prop="Content" class="is-required" size="small">
          <el-input v-model="addMsg.Content" placeholder="请输入话题名称" class="w400" />
        </el-form-item>
        <el-form-item label="图片" prop="CoverPhoto">
          <el-button @click="openChangeDig()" size="small">选择文件</el-button>
          <div class="app-gallery-item" style="position: relative;width: 100px;margin-top: 10px;border:none;">
            <img v-if="!addMsg.CoverPhoto || addMsg.CoverPhoto==''" src="../../assets/img/default.png"
              style="width:80px;height:80px" alt="">
            <img v-else style="width:80px;height:80px" :src="addMsg.CoverPhoto" alt="">
          </div>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio v-model="addMsg.IsOpen" :label="1">是</el-radio>
          <el-radio v-model="addMsg.IsOpen" :label="2">否</el-radio>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top:20px">
      <el-button size="small" type="primary" @click="Save('addMsg')">保存</el-button>
    </div>
    <!-- 选择文件 -->
    <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>

</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    components: {
      ChooseImg
    },
    data() {
      return {
        addMsg: {
          Id: 0,
          IsOpen: 1, //是否显示1-是，2-否
          Content: '',
          CoverPhoto: '',
        },
        rules: {
          Content: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }]
        },
        loading: false,
        changeState: false,
      };
    },
    created() {
      if (this.$route.query.Id) {
        // this.addMsg.Id = this.$route.query.Id;
        this.getData(this.$route.query.Id);
      }
    },
    methods: {
      Save(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost("/api/Education/GetSetEducationTalk", this.addMsg, res => {
              if (res.data.resultCode == 1) {
                this.CommonJump('topicList');
                this.Success(res.data.message);
              } else {
                this.Error(res.data.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      getData(Id) {
        this.loading = true;
        this.apipost("/api/Education/GetEducationTalkDetails", {
          Id: Id
        }, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            var temp = res.data.data;
            this.addMsg.Id = temp.Id;
            this.addMsg.IsOpen = temp.IsOpen;
            this.addMsg.Content = temp.Content;
            this.addMsg.CoverPhoto = temp.CoverPhoto;
          }
        })
      },
      openChangeDig(num) {
        this.changeState = true;
      },
      SelectId(msg) {
        let url = this.getIconLink(msg.url)
        this.addMsg.CoverPhoto = url
        this.changeState = false;
      },

    },
    mounted() {}
  };

</script>
<style>
  .editTopic .content {
    background: #fff;
    margin-top: 10px;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
