<script>
import _ from 'lodash'
import util from '@src/common/util.js'
import CatalogTree from '@src/pages/contentcore/components/CatalogSelector.vue'
import ConditionFilter from '@src/components/ConditionFilter.vue'
export default {
  components: {
    CatalogTree,
    ConditionFilter
  },
  props: {
    blockId: {
      type: [Number, String]
    }
  },
  data() {
    return {
      fromCatalog: {
        show: false,
        checkedIds: []
      },
      dataLoaded: false,
      conditionLoaded: false,
      contentTypeOptions: [],
      dataModel: {
        contentType: '',
        fromCatalogID: null,
        fromCatalogName: '',
        isCascade: 'Y',
        count: 15,
        conditions: null,
        sortFields: null
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      // 获取内容类型
      await this.bindContentTypeOption()
      // 初始化数据
      await this.initBlockData()
      if (this.dataModel.contentType === '') {
        this.dataModel.contentType = this.contentTypeOptions[0].key
      }
      this.dataLoaded = true
    },
    async initBlockData() {
      if (_.isEmpty(this.blockId + '') === false) {
        const ajaxData = await axios.get(`/ui/special/blockcontent/${this.blockId}`)
        const blockData = ajaxData.data.data
        _.extend(this.dataModel, JSON.parse(blockData.content))
      }
    },
    async bindContentTypeOption() {
      let data = await axios.get(`/ui/blocklist/contenttype`)
      this.contentTypeOptions = data.data.data
    },
    contentTypeChange() {
      this.dataModel.fromCatalogID = null
      this.dataModel.fromCatalogName = ''
    },
    choiceCatalog() {
      if (this.dataModel.fromCatalogID) {
        this.fromCatalog.checkedIds = this.dataModel.fromCatalogID.split(',')
        this.fromCatalog.checkedIds.forEach(function (value, index) {
          this.fromCatalog.checkedIds[index] = parseInt(value)
        }, this)
      }
      this.fromCatalog.show = true
    },
    getCheckedNodes(value) {
      this.dataModel.fromCatalogName = value.names
      this.dataModel.fromCatalogID = value.ids
    },
    conditionFilterLoaded() {
      this.conditionLoaded = true
    },
    async confirm() {
      this.$refs.autoBlockForm.validate(async valid => {
        if (valid) {
          let res = null
          if (_.isEmpty(this.blockId + '')) {
            res = await axios.post('/ui/special/blockcontent', {
              catalogID: window.initdata.catalogID,
              specialID: window.initdata.ID,
              siteID: window.initdata.siteID,
              type: 'Auto',
              content: this.dataModel
            })
          } else {
            res = await axios.put(`/ui/special/blockcontent/${this.blockId}`, {
              ID: this.blockId,
              type: 'Auto',
              content: this.dataModel
            })
          }
          util.showResponseMessage(res.data)
          if (res.data.status === 1) {
            window.eventHub.$emit('blockPicked', res.data.ID)
          }
        } else {
          window.eventHub.$emit('articleConfirmInvalid')
        }
      })
    }
  }
}

</script>
<template>
  <div v-loading="!conditionLoaded">
    <el-form ref="autoBlockForm" label-position="left" :model="dataModel" label-width="100px" class="blocklist-form">
      <el-form-item prop="contentType" label="内容类型：" class="contentType mt20">
        <el-select placeholder="" v-model="dataModel.contentType" @change="contentTypeChange" style="width:50%">
          <el-option v-for="item in contentTypeOptions" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="来源栏目：" prop="fromCatalogName" class="fromCatalogName" :verify="['NotNull']">
        <el-input disabled type="text" v-model="dataModel.fromCatalogName" style="width:50%">
          <el-button @click="choiceCatalog" slot="append">选择栏目</el-button>
        </el-input>

      </el-form-item>
      <el-form-item label="是否级联：" prop="isCascade" class="isCascade">
        <el-radio-group v-model="dataModel.isCascade">
          <el-radio label="Y">是</el-radio>
          <el-radio label="N">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="显示条数：" prop="count" class="count" :verify="['NotNull','Number']">
        <el-input-number v-model="dataModel.count" :min="1" :max="100" style="width:50%"></el-input-number>
      </el-form-item>
    </el-form>
    <condition-filter v-if="dataLoaded" :conditions.sync="dataModel.conditions" :sort-fields.sync="dataModel.sortFields" @data-loaded="conditionFilterLoaded"></condition-filter>
    <!-- 来源栏目选择弹窗 -->
    <catalog-tree :title="'来源栏目'" :show.sync="fromCatalog.show" :inputType="'checkbox'" @callback="getCheckedNodes" :checkedIds="fromCatalog.checkedIds"
      :contentType="dataModel.contentType">
    </catalog-tree>
  </div>
</template>
<style></style>
