<template>
<div>
<el-dialog title="推荐到区块" :visible.sync=" myRecommendBlockDialogFlag"  size="large">
    <el-row>
      <el-col class="recommend-left">
        <div class="search-bar" style="float: right;">
    <el-input placeholder="请输入关键字" style="width:200px;" @keyup.enter.native="search" v-model="blockname"></el-input>
    <el-button type="primary" @click="searchBlock"><i class="fa fa-search"></i>搜索</el-button>
    </div>

    <el-table :data-read-url="getList" ref="blockList" tooltip-effect="dark" @selection-change="change">
      <el-table-column width="20" align="center">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column type="selection" width="40" align="center"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="code" label="代码"></el-table-column>
      <el-table-column prop="catalogName" label="所属栏目"></el-table-column>
    </el-table>
    </el-col>
    <el-col class="recommend-right">
      <div style="padding:20px;" v-show="blockShow">
    <el-form :model="tmpRecommendToBlock" ref="recommendToBlockForm" :rules="recommendToBlockRules" label-width="100px" class="blcok-form">
      <el-form-item prop="blockName" label="所在区块：">
        {{tmpRecommendToBlock.blockName}}
      </el-form-item>
      <el-form-item prop="title" label="标题：">
        <el-input type="text" v-model="tmpRecommendToBlock.title" style="width:300px"></el-input>
    </el-form-item>
    <el-form-item prop="URL" label="地址：">
      <el-input type="text" v-model="tmpRecommendToBlock.URL" style="width:300px"></el-input>
    </el-form-item>
    <el-form-item prop="summary" label="摘要：">
      <el-input type="textarea" v-model="tmpRecommendToBlock.summary" style="width:300px"></el-input>
    </el-form-item>
    <el-form-item prop="logoFile" label="图片：">
      <logo-path
        :path.sync="tmpRecommendToBlock.logoFile"
        upload-title="上传Logo图片"
        :resource-dialog-props="resourceDialogProps"
      ></logo-path>
    </el-form-item>
    <el-form-item prop="publishDate" label="日期：">
      <el-date-picker v-model="tmpRecommendToBlock.publishDate" type="datetime" placeholder="请选择日期时间" style="width:300px">
    </el-date-picker>
    </el-form-item>
    <span hidden="true">{{tmpRecommendToBlock.ID}}</span>
    </el-form>
    </div>
    </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="myRecommendBlockDialogFlag = false">取 消</el-button>
      <el-button type="primary" @click="confirmBlock" :loading="handlerLoading">确 定</el-button>
    </div>

  </el-dialog>
</div>
</template>
<script>
import util from '@src/common/util.js'
import LogoPath from './LogoPath.vue'
export default {
  props: ['recommendBlockDialogFlag', 'contentId', 'blockContent'],
  data() {
    return {
      tmpRecommendToBlock: {
        blockName: '',
        title: '',
        URL: '',
        summary: '',
        logoFile: '',
        publishDate: '',
        blockId: '',
        siteId: '',
        catalogId: ''
      },
      recommendToBlockRules: {},
      recommendToBlock: [],
      blockIDs: '',
      handlerLoading: false,
      blockShow: false,
      blockname: '',
      contentBlock: {},
      defaultImg: '/assets/images/addpicture.png',
      show: false,
      resourceDialogProps: {}
    }
  },
  computed: {
    myRecommendBlockDialogFlag: {
      set(val) {
        this.$emit('update:recommendBlockDialogFlag', val)
      },
      get() {
        return this.recommendBlockDialogFlag
      }
    }
  },
  methods: {
    getList() {
      return ['/ui/contentcore/contents/' + this.contentId + '/recblock', {params: {searchWord: this.blockname}}]
    },
    change(val) {
      if (val.length) {
        this.blockIDs = val[0].ID
        this.copyData()
        //  this.tmpRecommendToBlock=Object.assign({}this.tmpRecommendToBlock,this.contentBlock)
        this.tmpRecommendToBlock = Object.assign({}, this.tmpRecommendToBlock, { blockId: val[0].ID, blockName: val[0].name })
      } else {
        this.tmpRecommendToBlock = this.contentBlock
      }
      this.resourceDialogProps = {
        resourceType: 'image',
        dataID: this.tmpRecommendToBlock.blockId,
        manualAllowType: '.jpg,.png,.gif,.jpeg'
      }
      this.blockShow = !!val.length
    },
    async confirmBlock() {
      this.recommendToBlock.push(this.tmpRecommendToBlock)
      let resp = await axios.put(`/ui/contentcore/contents/${this.contentId }/recblock/${this.contentId}`, {
        data: this.recommendToBlock,
        blockIDs: this.blockIDs
      })
      util.showResponseMessage(resp.data)
    },
    copyData() {
      this.tmpRecommendToBlock.title = this.contentBlock.title ? this.contentBlock.title : ''
      this.tmpRecommendToBlock.URL = this.contentBlock.URL ? this.contentBlock.URL : ''
      this.tmpRecommendToBlock.summary = this.contentBlock.summary ? this.contentBlock.summary : ''
      this.tmpRecommendToBlock.logoFile = this.contentBlock.logoFile ? this.contentBlock.logoFile : ''
      this.tmpRecommendToBlock.publishDate = this.contentBlock.publishDate
        ? util.formatDate(this.contentBlock.publishDate, 'yyyy-MM-dd HH:mm:ss')
        : ''
      this.tmpRecommendToBlock.siteId = this.contentBlock.siteId ? this.contentBlock.siteId : ''
      this.tmpRecommendToBlock.catalogId = this.contentBlock.catalogId ? this.contentBlock.catalogId : ''
    },
    searchBlock() {
      this.$refs.blockList.getData()
    },
    async initContentExtendInfo() {
      let resp = await axios.get(`/ui/contentcore/contents/${this.contentId }/recblock/${this.contentId}`)
      if (resp.data.status === 1) {
        this.contentBlock = resp.data.data
      }
    }
  },
  watch: {
    contentId() {
    // console.log(this.contentId)
      if (this.contentId) {
        this.initContentExtendInfo()
      }
    },
    recommendBlockDialogFlag() {
      if (this.recommendBlockDialogFlag && this.$refs['blockList']) {
        this.$refs.blockList.getData()
      }
    }
  },
  components: {
    'logo-path': LogoPath
  }
}
</script>
<style scoped>
.dialog_width {
  width: 80%;
}
.el-button-extends {
  padding: 0px;
  border: none;
}
</style>
