<template>
  <div>
    <el-dialog :title="!!tmpItem.ID ? '编辑文章':'添加文档'" :visible.sync="isShow" @open="dialogOpen" :append-to-body="true" @close="dialogClose" class="block-item-dialog">
      <el-form :model="tmpItem" label-position="right" label-width="80px">
        <el-form-item label="标题：">
          <el-input v-model="tmpItem.title" :style="tmpItem.titleStyle" class="color-title"></el-input>
          <el-color-picker v-model="itemColor" style="vertical-align: middle;" size="small" @active-change="colorChangeHandler"></el-color-picker>
          <el-button type="primary" @click="docSelect">选择文档</el-button>
        </el-form-item>
        <el-form-item label="地址：">
          <el-input v-model="tmpItem.URL"></el-input>
        </el-form-item>
        <el-form-item label="摘要：">
          <el-input type="textarea" v-model="tmpItem.summary"></el-input>
        </el-form-item>
        <el-form-item label="图片：">
          <logo-path
            :path.sync="tmpItem.logoFile"
            :preview-path.sync="previewLogoFile"
            :resource-dialog-props="resourceDialogProps"
            edit-position="right"
          ></logo-path>
        </el-form-item>
        <el-form-item label="日期：">
          <el-col :span="11">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" v-model="tmpItem.date" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow=false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 选择文章弹框 -->
    <content-select-dialog :show.sync="chooseArticle.isShowModal" :blockID="chooseArticle.blockID" :blockShow="chooseArticle.blockShow" :title="chooseArticle.title" :account-id="accountId"
      :selectType="chooseArticle.selectType" @callback="getChooseArticle">
    </content-select-dialog>

  </div>
</template>
<script>
import LogoPath from '../contentcore/components/LogoPath.vue'
import contentSelectDialog from '@src/components/contentComponent/RecommendedContentSelector.vue'
export default {
  data() {
    return {
      tmpItem: {}, //  临时存储对象
      resourceDialogProps: {},
      itemRules: {
        title: [{ required: true, message: '请输入或选择标题', trigger: 'blur' }],
        URL: [{ required: true, message: '请输入的地址', trigger: 'blur' }]
      },
      defaultPic: '/assets/images/addpicture.png', //  默认图片
      chooseArticle: { isShowModal: false, blockID: 0, title: '', selectType: '', blockShow: true },
      itemColor: '#000000',
      previewLogoFile: ''
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    colorChangeHandler(val) {
      this.tmpItem.titleStyle = `color:${val !== 'transparent' ? val : '#000000'};`
    },
    // 选择文档
    docSelect() {
      this.chooseArticle = {
        isShowModal: true,
        title: '选择内容记录',
        blockID: this.blockID,
        selectType: '',
        blockShow: true
      }
    },
    getChooseArticle(row) {
      this.tmpItem.ID = row.ID
      this.tmpItem.title = row.title
      this.tmpItem.URL = row.link
      this.tmpItem.logoFile = row.logoFile
      this.tmpItem.picSrc = row.logoFile || ''
      this.previewLogoFile = this.prefix + row.logoFile || ''
      this.tmpItem.summary = row.summary
      this.tmpItem.date = row.publishDate
      this.tmpItem.publishDate = row.publishDate
    },
    dialogClose() {
      this.tmpItem = {}
      this.isShow = false
    },
    dialogOpen() {
      this.tmpItem = Object.assign({}, this.item)
      if (!this.tmpItem.picSrc.startsWith('http')){
        this.previewLogoFile = this.prefix + this.tmpItem.picSrc || ''
      }
      this.tmpItem.logoFile = this.tmpItem.picSrc
      Vue.set(this.tmpItem, 'date', this.item.date || this.item.publishDate)
      if (this.tmpItem.titleStyle) {
        let color = this.tmpItem.titleStyle.split(':')[1]
        this.itemColor = color.substring(0, this.itemColor.length - 1)
      } else {
        this.itemColor = '#000000'
      }
      this.resourceDialogProps = {
        dataType: 'block',
        dataID: this.blockID,
        resourceType: 'image',
        imageType: 'logo',
        catalogID: 0,
        imageWidth: 120,
        imageHeight: 120,
        inputType: 'radio'
      }
    },
    confirm() {
      if (this.tmpItem.logoFile){
        this.tmpItem.picSrc = this.tmpItem.logoFile
      }
      this.$emit('callback', this.tmpItem)
      this.$emit('update:show', false)
    }
  },
  props: {
    show: Boolean,
    item: Object,
    blockID: [Number, String],
    accountId: {
      default: 0
    },
    prefix: {
      type: String,
      default: function() {
        return window.app ? window.app.prefix : window.opener && window.opener.app ? window.opener.app.prefix : ''
      }
    }
  },
  components: {
    'logo-path': LogoPath,
    'content-select-dialog': contentSelectDialog
  }
}
</script>
<style>
.color-title .el-input__inner {
  color: inherit;
}
.block-item-dialog .el-dialog {
  width: 700px;
}

@media (max-width: 480px) {
  .block-item-dialog .el-dialog {
    width: 96%;
  }
}
.block-item-dialog .el-form .block-item-avatar {
  max-width: 120px;
  max-height: 120px;
}

@media (max-width: 480px) {
  .block-item-dialog .el-dialog {
    width: 96%;
  }
}

.block-item-dialog .el-form .el-input {
  width: 75%;
}

.block-item-dialog .el-form .el-textarea {
  width: 75%;
}
.block-item-dialog .el-form .avatar {
  max-width: 120px;
  max-height: 120px;
}

.block-item-dialog .el-form .image-operate {
  display: inline-block;
}

.block-item-dialog .el-form .image-operate i {
  margin: 0 3px;
}

.block-item-dialog .el-form .icon-edit {
  color: #637283;
}

.block-item-dialog .el-form .icon-remove {
  color: #d6a87b;
}

.block-item-dialog .el-form .icon-minus {
  color: #ff6966;
}
</style>
