<template>
  <div id="infoAdmin">
    <el-row>
      <el-col :span="24" class="style">
        <span v-if="display == 'list'">
          <el-col :span="24" class="top">
            <el-button type="primary" size="mini" @click="add">添加</el-button>
          </el-col>
          <el-col :span="24" class="list">
            <el-table :data="list" stripe style="width: 100%" border>
              <el-table-column prop="title" label="标题" align="center"> </el-table-column>
              <el-table-column prop="publish_time" label="发布时间" align="center"> </el-table-column>
              <el-table-column prop="publish_unit" label="发布单位" align="center"> </el-table-column>
              <el-table-column prop="publisher" label="发布人" align="center"> </el-table-column>
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.status == '0' ? '草稿' : scope.row.status == '1' ? '审核中' : scope.row.status == '2' ? '审核通过' : '未识别' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="">
                  <el-button size="mini" type="primary">编辑</el-button>
                  <el-button size="mini" type="success">发布</el-button>
                  <el-button size="mini" type="danger">删除</el-button>
                  <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </span>
        <span v-else>
          <el-col :span="24" class="top">
            <el-button type="primary" size="mini" @click="back">返回</el-button>
          </el-col>
          <el-col :span="24" class="form">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
              <el-form-item label="选择栏目" filterable prop="col_name">
                <el-select v-model="form.col_name" filterable placeholder="请选择栏目">
                  <el-option v-for="item in column_list" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="信息标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入信息标题"></el-input>
              </el-form-item>
              <el-form-item label="简介" prop="introduction">
                <el-input v-model="form.introduction" type="textarea" placeholder="请输入信息简介"></el-input>
              </el-form-item>
              <el-form-item label="发布时间" prop="publish_time">
                <el-date-picker v-model="form.publish_time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
              </el-form-item>
              <el-form-item label="信息类型" prop="type">
                <el-radio-group v-model="form.type">
                  <el-radio label="0">自有</el-radio>
                  <el-radio label="1">外链</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="链接地址" prop="url" v-if="form.type == '1'">
                <el-input v-model="form.url" placeholder="请输入链接地址"></el-input>
              </el-form-item>
              <el-form-item label="发布单位" prop="publish_unit" v-if="form.type == '0'">
                <el-input v-model="form.publish_unit" placeholder="请输入发布单位"></el-input>
              </el-form-item>
              <el-form-item label="图片" prop="img_url" v-if="form.type == '0'">
                <upload :limit="1" :data="form.img_url" type="img_url" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
              </el-form-item>
              <el-form-item label="内容" prop="content" v-if="form.type == '0'">
                <el-input v-model="form.content" type="textarea" placeholder="请输入信息内容"></el-input>
              </el-form-item>
              <el-form-item label="是否推荐" prop="is_top">
                <el-radio-group v-model="form.is_top">
                  <el-radio label="0">不推荐</el-radio>
                  <el-radio label="1">推荐</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio label="0">草稿</el-radio>
                  <el-radio label="1">审核中</el-radio>
                  <el-radio label="2">审核通过</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-col :span="24" style="text-align:center;">
                <el-button type="primary" @click="submitDraft('form')">保存草稿</el-button>
                <el-button type="success" @click="submitForm('form')">发布信息</el-button>
                <el-button type="danger" @click="resetForm('form')">取消</el-button>
              </el-col>
            </el-form>
          </el-col>
        </span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/uploadone.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'infoAdmin',
  props: {},
  components: {
    upload,
  },
  data: function() {
    return {
      display: 'list',
      // 列表
      list: [],
      // 选择栏目
      column_list: [
        { value: '科技资讯', label: '科技资讯' },
        { value: '技术前沿', label: '技术前沿' },
        { value: '工作动态', label: '工作动态' },
        { value: '通知通告', label: '通知通告' },
        { value: '平台建设', label: '平台建设' },
        { value: '项目成果', label: '项目成果' },
        { value: '知识产权', label: '知识产权' },
        { value: '科技支撑', label: '科技支撑' },
        { value: '超算联盟', label: '超算联盟' },
        { value: '国家网格', label: '国家网格' },
        { value: '教学中心', label: '教学中心' },
        { value: '创业基地', label: '创业基地' },
        { value: '软件中心', label: '软件中心' },
        { value: '专题研讨', label: '专题研讨' },
        { value: '技术问答', label: '技术问答' },
        { value: '行业研究', label: '行业研究' },
        { value: '科技培训', label: '科技培训' },
        { value: '图片新闻', label: '图片新闻' },
        { value: '党建工作', label: '党建工作' },
        { value: '学习园地', label: '学习园地' },
        { value: '党风廉政', label: '党风廉政' },
      ],
      // 发布
      form: {
        type: '0',
      },
      // 规则
      rules: {
        col_name: [{ required: true, message: '请选择栏目', trigger: 'blur' }],
        title: [{ required: true, message: '请输入信息标题', trigger: 'blur' }],
        introduction: [{ required: true, message: '请输入简介', trigger: 'blur' }],
        publish_time: [{ required: false, message: '请选择发布时间', trigger: 'blur' }],
        publish_unit: [{ required: false, message: '请输入发布单位', trigger: 'blur' }],
        type: [{ required: false, message: '请输入信息类型', trigger: 'blur' }],
        img_url: [{ required: false, message: '请上传图片', trigger: 'blur' }],
        is_top: [{ required: false, message: '请选择', trigger: 'blur' }],
      },
    };
  },
  created() {},
  methods: {
    // 添加
    add() {
      this.display = 'detail';
    },
    // 返回
    back() {
      this.display = 'list';
    },
    // 保存草稿
    submitDraft(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.form);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 图片
    uploadSuccess({ type, data }) {
      this.$set(this.form, `${type}`, data.uri);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.style {
  padding: 0 20px 20px 20px;
  .top {
    text-align: right;
    padding: 10px 0;
  }
}
</style>
