<template>
   <el-dialog  title="新增" width='830px' :visible.sync="isShowInfo" append-to-body @close='close'>
  <div class="hotandNewsDialog " v-if="isShowInfo">
  
    <div class="inputContent">
      <div class="left">
        <div class="inputBox">
          <red-star></red-star>
          <input-vue title="所属模块">
            <el-select v-model="value" filterable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </input-vue>
        </div>
        <div class="inputBox">
          <red-star></red-star>
          <input-vue title="标题"></input-vue>
        </div>
        <div class="inputBox">
          <red-star></red-star>
          <input-vue title="发布人"></input-vue>
        </div>
        <div class="inputBox">
          <red-star></red-star>
          <input-vue title="排序">
            <input-number style="width:212px" />
          </input-vue>
        </div>
      </div>
      <div class="right">
        <div class="inputBox">
          <red-star></red-star>
          <input-vue title="类型">
            <el-select v-model="value" filterable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </input-vue>
        </div>
        <div class="inputBox">
          <red-star></red-star>
          <input-vue title="图片">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
              <el-button size="small" type="primary" style="width:215px">点击上传图片</el-button>

            </el-upload>
          </input-vue>
        </div>
        <div class="inputBox">
          <red-star></red-star>
          <input-vue title="发布时间"></input-vue>
        </div>
      </div>
    </div>
    <div class="middle_text">
      <div class="title">
        <red-star /> 发布内容
      </div>
      <richtext />
    </div>
    <div class="btnBox">
      <el-button type="primary" class="save">保存</el-button>
      <el-button type="info" class="close" @click="close">取消</el-button>
    </div>
  </div>
</el-dialog>
</template>

<script>
import InputNumber from "../../input/inputNumber.vue";
import InputVue from "../../input/inputVue.vue";
import Richtext from "../../input/richtext.vue";
import RedStar from "../../redStar.vue";
import dialogHeader from "../dialogHeader.vue";
export default {
  components: { dialogHeader, RedStar, InputVue, Richtext, InputNumber },
  props: {
    isShowInfo: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.hotandNewsDialog {
  width: 800px;
  position: relative;
  //   width: 100%;
  //   min-height: 700px;
  //   height: 823px;
  overflow: auto;

  .inputContent {
    display: flex;
    padding: 10px;

    .left,
    .right {
      flex: 1;
      padding: 10px;

      .inputBox {
        display: flex;
        align-items: center;
      }
    }
  }

  .middle_text {
    .title {
      padding: 20px;
    }
  }

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }
  }
}
</style>