<template>
  <div class="formcon">
    <div class="formtop">
      <div class="left">
        <el-form-item label="场景名称：" prop="name">
          <el-input placeholder="请输入场景名称" :maxlength="INPUTLENGTH" show-word-limit
            v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="场景类型：" prop="type">
          <el-input v-model="form.type" class="fadeDom"></el-input>
          <el-select v-model="form.type" placeholder="请选择" style="width:100%">
            <el-option v-for="item in sceneTypes" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item v-if="form.type=='temp'" label="展览时间：" prop="opening">
          <el-input v-model="form.type" class="fadeDom"></el-input>
          <el-date-picker type="datetimerange" 
            style="width:100%;"
            size="large"
            format="yyyy 年 MM 月 dd 日 HH:mm:ss"
           :picker-options="pickerOptions" range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期" v-model="form.opening" align="center">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="所属博物馆：" prop="museumId">
          <el-input v-model="form.museumId" class="fadeDom"></el-input>
          <el-select v-model="form.museumId" placeholder="请选择" style="width:100%">
            <el-option v-for="item in museumList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="封面图片：" prop="thumb">
          <uploadThumb :data="{type:'thumb'}" :url="thumbUrl" @update="data=>{form.thumb = data}" :thumb="form.thumb" />
        </el-form-item>

        <el-form-item label="描述：">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.description"></el-input>
        </el-form-item>
      </div>

    </div>


  </div>
</template>

<script>

import uploadThumb from "@/components/uploadThumb";

import {getMuseumAllList} from "@/configue/api";


export default {
  props: ["data", "rule", "roleList"],
  components: { uploadThumb },
  data() {
    return {
      id: this.$route.params.id,
      form: this.data,
      radio: "选中且禁用",
      thumbUrl: this.$serverName + "cms/exhibition/upload",
      sceneTypes: [{
        id: 'long',
        name: '常设展览'
      }, {
        id: 'temp',
        name: '临时展览'
      }],
      museumList:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    };
  },
  methods: {

  },
  mounted() {
    getMuseumAllList((res)=>{
      this.museumList = res.data
    })
  },
};
</script>

<style lang="less" scoped>
.formcon {
  width: 100%;

  .formtop,
  .formbom {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    position: relative;

    >div {
      width: 40%;

      &:first-of-type {
        margin-right: 5%;
      }
    }
  }

  .formbom {
    align-items: center;
  }
}
</style>

<style lang="less">
.el-date-editor .el-range-input{
  width: 49%;
}
</style>