<!--热点推荐与新闻配置新增弹窗-->
<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) => {
      const str = res[26].detail
      const str2 = res[27].detail
      this.typeList = this.dealAry(str2)
      this.modelList = this.dealAry(str)
    })
  },
  methods: {
    save() {
      if (this.title == '新增') {
        add(this.hotInfo).then((res) => {
          if (res != '') {
            this.$message.success('新增成功')
            this.close()
            this.hotInfo = {
              recommendModule: '',
              recommendType: '',
              recommendTitle: '',
              recommendPicture: '',
              recommendContent: '',
              recommendPublisher: '',
              publishTime: '',
              recommendSort: 1
            }
          }
        })
      } else {
        hotupdata(this.hotInfo).then(res => {
          if (res != '') {
            this.$message.success('更新成功')
            this.close()
            this.hotInfo = {
              recommendModule: '',
              recommendType: '',
              recommendTitle: '',
              recommendPicture: '',
              recommendContent: '',
              recommendPublisher: '',
              publishTime: '',
              recommendSort: 1
            }
          }
        })
      }
    },
    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) {
            window.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>