<template>
  <div>
    <el-dialog title='图片上传' :visible.sync="isShow" style="margin:0 auto" @open="beforeDialogOpen" class="image-upload-dialog">
      <el-form :model="tmpImage" :rules="imgRules" ref="imgInfoForm" label-width="100px" v-loading="dialogLoading">
          <el-form-item label="图片：">
            <logo-path
              :path.sync="tmpImage.path"
              :resource-dialog-props="resourceDialogProps"
              @callback="getResourceId"
            ></logo-path>
          </el-form-item>
          <el-form-item label="名称：" prop="oldName">
            <el-input v-model="tmpImage.oldName" class="input-form-item"></el-input>
          </el-form-item>
          <el-form-item label="描述：">
            <el-input type="textarea" :rows="4" v-model="tmpImage.info" class="input-form-item"></el-input>
          </el-form-item>
          <el-form-item label="链接地址：" prop="cName">
              <el-popover placement="bottom-start" :disabled="!tmpImage.contentID" title="" trigger="hover" @show="loadArticleData">
                <div v-loading="popoverLoading">
                  <div class="content-tip">
                    <span>ID: </span>{{chooseContentData.ID}}
                  </div>
                  <div class="content-tip">
                    <span>文章标题: </span>{{chooseContentData.title}}
                  </div>
                  <div class="content-tip">
                    <span>内容类型: </span>{{chooseContentData.contentTypeName}}
                  </div>
                  <div class="content-tip">
                    <span>所属栏目: </span>{{chooseContentData.catalogName}}
                  </div>
                </div>
                <el-input slot="reference" :disabled="!isInputURL" v-model="tmpImage.cName" class="input-form-item" @change="inputURL"></el-input>
              </el-popover>
              <el-button v-if="tmpImage.contentID" type="primary" icon="edit" title="编辑文章" @click="editArticle"></el-button>
              <div>
                <el-button type="primary" @click="selectContent">链接到内容</el-button>
                <el-button type="primary" @click="selectCatalog">链接到栏目</el-button>
                <el-button type="primary" @click="linkAddress">外部地址</el-button>
              </div>
          </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="confirmLoading">确 定</el-button>
      </div>
    </el-dialog>
    <content-selector title="浏览内容" :show.sync="contentSelectorDialogModal" @callback="contentSelectorCallback"></content-selector>
    <catalog-selector-dialog :show.sync="catalogSelectorDialogModal" inputType="radio" title="选择栏目" @callback="catalogSelectorCallback"></catalog-selector-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import CatalogSelector from '../contentcore/components/CatalogSelector.vue'
import ContentSelector from '@src/components/contentComponent/ContentSelector.vue'
import LogoPath from '../contentcore/components/LogoPath.vue'

export default {
  data() {
    return {
      popoverLoading: false,
      confirmLoading: false,
      dialogLoading: false,
      tmpImage: {},
      imgeditMode: 2,
      isInputURL: false,
      contentSelectorDialogModal: false,
      catalogSelectorDialogModal: false,
      resourceDialogProps: {},
      chooseContentData: {},
      imgRules: {
        oldName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        cName: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    linkAddress() {
      this.isInputURL = true
      this.tmpImage.contentID = 0
      this.tmpImage.cName = 'http://'
    },
    async loadArticleData() {
      if (!this.tmpImage.contentID || !!this.chooseContentData.ID) {
        return
      }

      this.popoverLoading = true
      let params = {
        ID: this.chooseContentData.ID || this.tmpImage.contentID,
        contentType: this.chooseContentData.contentTypeID || this.tmpImage.contentType
      }
      let res = await axios.get('/ui/article/datas', { params })
      res = res.data
      if (res.status === 1) {
        Object.assign(this.chooseContentData, res.data)
        this.popoverLoading = false
      }
    },
    async editArticle() {
      if (
        this.tmpImage.contentID !== this.chooseContentData.ID ||
        !this.chooseContentData.contentTypeID ||
        !this.chooseContentData.catalogID
      ) {
        await this.loadArticleData()
      }

      let path = ''
      if (this.chooseContentData.contentTypeID === 'Special') {
        path = `/special/${this.chooseContentData.catalogID}/${this.chooseContentData.ID}`
        this.$router.push(path)
      } else {
        path = `/contentEditor/${this.chooseContentData.ID}?type=${this.chooseContentData.contentTypeID}&cid=${
          this.chooseContentData.catalogID
        }`
        window.open('contentEditor.html#' + path)
      }
    },
    async init() {
      let initEditImagePlayerReal = await axios.get('/ui/imageplayer/editimageplayerreal', {
        params: {
          PID: this.ID
        }
      })
      this.tmpImage = initEditImagePlayerReal.data.data
      // console.log(this.tmpImage)
      this.resourceDialogProps = {
        dataType: 'ImagePlayer',
        dataID: this.ID,
        resourceType: 'image',
        catalogID: this.catalogID,
        imageWidth: 120,
        imageHeight: 120,
        resourceID: this.tmpImage.resourceID,
        inputType: 'radio',
        supportNetSource: this.imgPlayerType === 'titleanddigitalswf'
      }

      this.loadArticleData()
    },
    async beforeDialogOpen() {
      this.confirmLoading = false
      this.dialogLoading = true
      await this.init()
      this.dialogLoading = false
    },
    selectContent() {
      this.isInputURL = false
      this.contentSelectorDialogModal = true
    },
    selectCatalog() {
      this.isInputURL = false
      this.catalogSelectorDialogModal = true
    },
    inputURL() {
      if (this.isInputURL) {
        this.tmpImage.linkURL = this.tmpImage.cName
      }
    },
    async confirm() {
      try {
        await util.validateForm(this.$refs['imgInfoForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      if (!this.tmpImage.path || this.tmpImage.path.length < 1) {
        this.$alert('请先选择一张图片', '提示', {
          type: 'warning'
        })
        return
      }
      this.confirmLoading = true
      let res
      if (this.ID) {
        res = await axios.put(`/ui/imageplayer/${this.imagePlayerID}/editimage`, this.tmpImage)
      } else {
        res = await axios.post(`/ui/imageplayer/${this.imagePlayerID}/upload`, this.tmpImage)
      }
      if (res.data.status === 1) {
        this.$emit('callback', true)
        this.isShow = false
      }
      this.confirmLoading = false
      util.showResponseMessage(res.data)
    },
    contentSelectorCallback(row) {
      if (!row.ID) {
        return
      }
      this.tmpImage.oldName = row.title
      this.tmpImage.cName = row.contentTypeID + '：' + row.title
      this.tmpImage.linkURL = row.link
      this.tmpImage.contentID = row.ID
      this.tmpImage.catalogID = row.catalogID
      Object.assign(this.chooseContentData, row)
      this.$refs.imgInfoForm.clearValidate()
    },
    catalogSelectorCallback(row) {
      this.tmpImage.oldName = row.name
      this.tmpImage.cName = '栏目：' + row.name
      this.tmpImage.linkURL = row.link
      this.tmpImage.contentID = 0
      this.tmpImage.catalogID = row.ID
      this.$refs.imgInfoForm.clearValidate()
    },
    getResourceId(resourceId) {
      this.tmpImage.resourceID = resourceId
    }
  },
  props: {
    imagePlayerID: {
      required: true
    },
    catalogID: {
      default: 0
    },
    ID: {
      required: true
    },
    imgPlayerType: {
      default: ''
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  components: {
    'catalog-selector-dialog': CatalogSelector,
    'logo-path': LogoPath,
    'content-selector': ContentSelector
  }
}
</script>

<style>
/* 在一般情况下dialog宽为680像素，在逻辑分辨率480像素以下dialog宽为96% */

.image-upload-dialog .el-dialog {
  width: 680px;
}

@media (max-width: 480px) {
  .image-upload-dialog .el-dialog {
    width: 96%;
  }
}
</style>
<style scoped>
.input-form-item {
  width: 95%;
  max-width: 95%;
}
</style>
