<template>
  <el-button  :disabled="!content.ID||content.status!=30" @click="clickHandler" :type="buttonType">
        <i class="fa fa-clock-o"></i>推荐到区块

<el-dialog v-if="open" title="推荐到区块" :visible.sync="open" :append-to-body="true"  size="large">
    <el-row>
      <el-col class="recommend-left">
        <div class="select-wrap" style="float: right">
           站点选择：<tree-select :value.sync="currentSiteID" :items="sites" width="35%" @click-change="changeSite"></tree-select>
        <el-input placeholder="请输入关键字" style="width:180px;" @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="visibleDetail">
        <el-form :model="currentBlock" ref="recommendToBlockForm" :rules="recommendToBlockRules" class="blcok-form">
          <el-form-item prop="blockName" label="所在区块：">
            {{currentBlock.blockName}}
          </el-form-item>
          <el-form-item prop="title" label="标题：">
            <el-input type="text" v-model="currentBlock.title" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item prop="url" label="地址：">
          <el-input type="text" v-model="currentBlock.url" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item prop="summary" label="摘要：">
          <el-input type="textarea" v-model="currentBlock.summary" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item prop="logoFile" label="图片：">
          <div style="display:inline-block;">
            <logo-path
              :path.sync="currentBlock.logoFile"
              upload-title="上传Logo图片"
              :resource-dialog-props="resourceDialogProps"
            ></logo-path>
          </div>
        </el-form-item>
        <el-form-item prop="publishDate" label="日期：">
          <el-date-picker v-model="currentBlock.publishDate" type="datetime" placeholder="请选择日期时间" style="width:300px">
        </el-date-picker>
        </el-form-item>
        <span hidden="true">{{currentBlock.ID}}</span>
        </el-form>
        </div>
    </el-col>
    </el-row>
    <div slot="footer">
      <el-button @click="open = false">取 消</el-button>
      <el-button type="primary" @click="confirm" :loading="handlerLoading">确 定</el-button>
    </div>

  </el-dialog>
</el-button>
</template>
<script>
import util from '@src/common/util.js'
import logoPath from './LogoPath.vue'
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  components: {
    'logo-path': logoPath,
    'tree-select': TreeSelect
  },
  props: {
    content: {
      type: Object
    },
    buttonType: {
      type: String,
      default: ''
    },
    hiddenDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      open: false,
      currentBlock: {
        blockName: '',
        title: '',
        URL: '',
        summary: '',
        logoFile: '',
        publishDate: '',
        blockId: '',
        siteId: '',
        catalogId: ''
      },
      recommendToBlockRules: {},
      recommendToBlock: [],
      blockIDs: '',
      handlerLoading: false,
      visibleDetail: false,
      blockname: '',
      contentBlock: {},
      show: false,
      resourceDialogProps: {},
      currentSiteID: 0,
      sites: []
    }
  },
  watch: {
    recommendBlockDialogFlag() {
      if (this.recommendBlockDialogFlag && this.$refs['blockList']) {
        this.$refs.blockList.getData()
      }
    }
  },
  async created() {
    this.currentSiteID = this.$root.siteID
  },
  methods: {
    async clickHandler () {
      let res = await axios.get('/ui/sites')
      if (res.data.status === 1) {
        this.sites = res.data.data
      }
      if (this.content.ID) {
        this.initContentExtendInfo()
      }
      this.open = true
    },
    getList() {
      return [ `/ui/contentcore/contents/${this.content.ID}/recblock`, {
        params: {
          searchWord: encodeURI(this.blockname),
          siteId: this.currentSiteID
        }}]
    },
    changeSite() {
      this.$refs.blockList.getData()
    },
    change(val) {
      // 清空
      this.recommendToBlock = []
      this.currentBlock = this.contentBlock
      if (val.length) {
        let IDs = val.map((item) => {
          return item.ID
        })
        this.blockIDs = IDs.join(',')
        for (let i = 0; i < val.length; i++) {
          if (this.currentBlock.blockId && (this.currentBlock.blockId === val[i].ID)) {
          } else {
            this.recommendToBlock.push({ blockId: val[i].ID, blockName: val[i].name })
          }
        }
        if (this.currentBlock.blockId) {
          this.recommendToBlock.push(this.currentBlock)
        }
      }
      this.resourceDialogProps = {
        resourceType: 'image',
        dataID: this.currentBlock.blockId,
        manualAllowType: '.jpg,.png,.gif,.jpeg'
      }
      if (this.hiddenDetail){
        return
      }
      this.visibleDetail = !!val.length
    },
    async confirm() {
      let resp = await axios.put(`/ui/contentcore/contents/${this.content.ID}/recblock/${this.content.ID}`,
        {
          data: this.recommendToBlock,
          blockIDs: this.blockIDs
        })
      util.showResponseMessage(resp.data)
      if (resp.data.status === 1) {
        this.open = false
      }
    },
    copyData() {
      this.currentBlock = this.contentBlock
      // this.currentBlock={
      //    title:this.contentBlock.title ? this.contentBlock.title : ''
      //    URL:this.contentBlock.URL ? this.contentBlock.URL : ''
      //    summary:this.contentBlock.summary ? this.contentBlock.summary : ''
      //    logoFile:this.contentBlock.logoFile ? this.contentBlock.logoFile : ''
      //    publishDate:this.contentBlock.publishDate? util.formatDate(this.contentBlock.publishDate 'yyyy-MM-dd HH:mm:ss') : '',
      //    siteId:this.contentBlock.siteId ? this.contentBlock.siteId : ''
      //   catalogId:this.contentBlock.catalogId ? this.contentBlock.catalogId : ''
      // }
    },
    searchBlock() {
      this.$refs.blockList.getData()
    },
    async initContentExtendInfo() {
      let resp = await axios.get(`/ui/contentcore/contents/${this.content.ID}/recblock/${this.content.ID}`)
      if (resp.data.status === 1) {
        this.contentBlock = resp.data.data
      }
    }
  }
}
</script>
<style scoped>
.dialog_width {
  width: 80%;
}
.el-button-extends {
  padding: 0px;
  border: none;
}
</style>
