<!--热点推荐与新闻配置新增弹窗-->
<template>
  <el-dialog
    :title="title"
    width="830px"
    :visible.sync="isShowInfo"
    append-to-body
    @close="close"
  >
    <div v-if="isShowInfo" class="hotandNewsDialog">
      <div class="inputContent">
        <div class="left">
          <div class="inputBox">
            <red-star />
            <input-vue title="所属模块">
              <el-select
                v-model="hotInfo.recommendModule"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in modelList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue v-model.trim="hotInfo.recommendTitle" title="标题" />
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue
              v-model.trim="hotInfo.recommendPublisher"
              title="发布人"
            />
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="排序">
              <input-number
                v-model.trim="hotInfo.recommendSort"
                style="width: 217px"
              />
            </input-vue>
          </div>
        </div>
        <div class="right">
          <div class="inputBox">
            <red-star />
            <input-vue title="类型">
              <el-select
                v-model.trim="hotInfo.recommendType"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="图片">
              <el-upload
                class="upload-demo"
                action="#"
                multiple
                :on-change="handleChange"
                :file-list="fileList"
                :http-request="httpRequest"
              >
                <el-button size="small" type="primary" style="width: 218px">
                  点击上传图片
                </el-button>
              </el-upload>
            </input-vue>
          </div>
          <div class="inputBox">
            <red-star />
            <input-vue title="发布时间">
              <el-date-picker
                v-model.trim="hotInfo.publishTime"
                type="date"
                placeholder="选择日期"
                format="yyyy - MM - dd "
                value-format="yyyy-MM-dd"
              />
            </input-vue>
          </div>
        </div>
      </div>
      <div class="middle_text">
        <div class="title"><red-star /> 发布内容</div>
        <richtext v-model.trim="hotInfo.recommendContent" />
      </div>
      <div class="btnBox">
        <el-button type="primary" class="save" @click="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";
import { list } from "../../../../api/move/bannerConfig";
import { add, hotupdata } from "../../../../api/move/hotAndNews";
export default {
  components: { dialogHeader, RedStar, InputVue, Richtext, InputNumber },
  props: {
    isShowInfo: {
      type: Boolean,
      default: true,
    },
    title: "",
    dataInfo: "",
  },
  data() {
    return {
      typeList: [],
      modelList: [],
      fileList: [],
      hotInfo: {
        recommendModule: "",
        recommendType: "",
        recommendTitle: "",
        recommendPicture: "",
        recommendContent: "",
        recommendPublisher: "",
        publishTime: "",
        recommendSort: 1,
      },
    };
  },
  watch: {
    dataInfo: {
      handler(vls) {
        if (!vls.id) return;
        this.hotInfo = {
          id: vls.id,
          recommendModule: vls.recommendModule,
          recommendType: vls.recommendType,
          recommendTitle: vls.recommendTitle,
          recommendPicture: this.getBase64(
            "http://111.198.10.15:21403/static/" + vls.recommendPicture
          ),
          recommendContent: vls.recommendContent,
          recommendPublisher: vls.recommendPublisher,
          publishTime: vls.publishTime,
          recommendSort: vls.recommendSort,
        };
      },
      deep: true,
    },
  },
  mounted() {
    list().then((res) => {
      console.log(res)
      const str = res[25].detail;
      const str2 = res[26].detail;
      this.typeList = this.dealAry(str2);
      this.modelList = this.dealAry(str);
    });
  },
  methods: {
    save() {
      const {
        hotInfo: {
          recommendModule,
          recommendType,
          recommendTitle,
          recommendContent,
          recommendPublisher,
          publishTime,
        },
      } = this;
      if (
        recommendModule &&
        recommendType &&
        recommendTitle &&
        recommendContent &&
        recommendPublisher &&
        publishTime
      ) {
        if (this.title == "新增") {
          add(this.hotInfo).then((res) => {
              this.$message.success("新增成功");
              this.close();
              this.hotInfo = {
                recommendModule: "",
                recommendType: "",
                recommendTitle: "",
                recommendPicture: "",
                recommendContent: "",
                recommendPublisher: "",
                publishTime: "",
                recommendSort: 1,
              };
          });
        } else {
          hotupdata(this.hotInfo).then((res) => {
              this.$message.success("更新成功");
              this.close();
              this.hotInfo = {
                recommendModule: "",
                recommendType: "",
                recommendTitle: "",
                recommendPicture: "",
                recommendContent: "",
                recommendPublisher: "",
                publishTime: "",
                recommendSort: 1,
              };
          });
        }
      } else {
        this.$message.error("请先完整填写信息");
      }
    },
    dealAry(str) {
      const Ary = [];
      const strAry = str.split(";");
      for (let i = 0; i < strAry.length; i++) {
        const temp = strAry[i].split(":");
        Ary.push({
          key: temp[2],
          value: temp[1],
        });
      }
      return Ary;
    },
    close() {
      this.$emit("close");
    },
    httpRequest(file) {
      console.log(file.file, "========================");

      // this.bannerInfo.bannerPicture =  Base64.encode(file.file)
      var reader = new FileReader();

      reader.readAsDataURL(file.file);
      // console.log(reader.readyState,"===========result====",reader,reader.FileReader);
      const timer = setInterval(() => {
        if (reader.result) {
          clearInterval(timer);
          this.hotInfo.recommendPicture = reader.result;
          console.log(this.hotInfo.recommendPicture);
        }
      }, 300);
    },
    handleChange(file, fileList) {
      console.log(fileList, file);
      this.fileList = fileList.slice(-1);
    },
    getBase64(imgUrl) {
      window.URL = window.URL || window.webkitURL;
      var xhr = new XMLHttpRequest();
      xhr.open("get", imgUrl, true);
      // 至关重要
      xhr.responseType = "blob";
      xhr.onload = function () {
        if (this.status == 200) {
          // 得到一个blob对象
          var blob = this.response;
          console.log("blob", blob);
          // 至关重要
          const oFileReader = new FileReader();
          oFileReader.onloadend = function (e) {
            // 此处拿到的已经是 base64的图片了
            const base64 = e.target.result;
            // console.log("方式一》》》》》》》》》", base64);
          };
          oFileReader.readAsDataURL(blob);
          // ====为了在页面显示图片，可以删除====
          var img = document.createElement("img");
          img.onload = function (e) {
            windhotInfoow.URL.revokeObjectURL(img.src); // 清除释放
          };
          const src = window.URL.createObjectURL(blob);
          img.src = src;
          // document.getElementById("container1").appendChild(img);
          // ====为了在页面显示图片，可以删除====
        }
      };
      xhr.send();
    },
  },
};
</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>