<template>
  <div class="app-container">
    <!-- 详情视图 -->
    <div v-if="!editing" v-loading="loading" class="detail-view">
      <el-card>
        <div slot="header" class="clearfix">
          <span>概况详情</span>
          <el-button type="primary" size="mini" @click="enterEdit" v-hasPermi="['homepage:overview:edit']">编辑</el-button>
        </div>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="标题">
            {{ form.title || '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="简介">
            {{ form.summary || '未设置' }}
          </el-descriptions-item>
          <el-descriptions-item label="图片">
            <img v-if="form.image" :src="form.image" style="max-width: 300px; max-height: 200px;" />
            <span v-else>未设置</span>
          </el-descriptions-item>
          <el-descriptions-item label="视频">
            <a v-if="form.video" :href="form.video" target="_blank">查看视频</a>
            <span v-else>未设置</span>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="form.status === '0' ? 'success' : 'danger'">
              {{ form.status ? dict.type.sys_normal_disable.find(item => item.value === form.status).label : '未知' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <!-- 编辑视图 -->
    <el-form v-else ref="form" :model="form" :rules="rules" label-width="80px" v-loading="loading">
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="请输入标题" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="简介" prop="summary">
            <el-input v-model="form.summary" type="textarea" placeholder="请输入简介" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图片" prop="image">
            <image-upload v-model="form.image"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="视频" prop="video">
            <file-upload
              v-model="form.video"
              :limit="1"
              :file-size="100"
              :file-type="['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv']"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="状态">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.value"
              >{{dict.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm" v-hasPermi="['homepage:overview:edit']">保 存</el-button>
        <el-button @click="cancelEdit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOverview, addOverview, updateOverview } from "@/api/homepage/overview"
import FileUpload from "@/components/FileUpload"

export default {
  name: "Overview",
  components: {
    FileUpload
  },
  dicts: ['sys_normal_disable'],
  data() {
    return {
      loading: true,
      editing: false,
      form: {
        overviewId: undefined,
        title: undefined,
        summary: undefined,
        image: undefined,
        video: undefined,
        status: "0"
      },
      rules: {
        title: [
          { required: true, message: "标题不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.getOverviewData()
  },
  methods: {
    getOverviewData() {
      this.loading = true
      getOverview().then(response => {
        if (response.data) {
          this.form = response.data
        } else {
          this.form = {
            overviewId: undefined,
            title: undefined,
            summary: undefined,
            image: undefined,
            video: undefined,
            status: "0"
          }
        }
        this.loading = false
      }).catch(() => {
        this.form = {
          overviewId: undefined,
          title: undefined,
          summary: undefined,
          image: undefined,
          video: undefined,
          status: "0"
        }
        this.loading = false
      })
    },
    enterEdit() {
      this.editing = true
    },
    cancelEdit() {
      this.editing = false
    },
    submitForm: function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.overviewId != undefined) {
            updateOverview(this.form).then(() => {
              this.$modal.msgSuccess("保存成功")
              this.getOverviewData()
              this.editing = false
            })
          } else {
            addOverview(this.form).then(() => {
              this.$modal.msgSuccess("保存成功")
              this.getOverviewData()
              this.editing = false
            })
          }
        }
      })
    }
  }
}
</script>
