<template>
  <div>
        <el-form ref="optionalContentForm" :model="autoModel.content" label-width="150px" class="blocklist-form">
          <el-form-item prop="contentType" label="内容类型：" class="contentType mt20">
            <el-select placeholder="" v-model="autoModel.content.contentType" @change="contentTypeChange">
              <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="autoModel.content.fromCatalogName" class="w300"></el-input>
            <el-button @click="choiceCatalog">选择栏目</el-button>
          </el-form-item>
          <el-form-item label="是否级联：" prop="isCascade" class="isCascade">
            <el-radio-group v-model="autoModel.content.isCascade">
              <el-radio value="Y" label="是"></el-radio>
              <el-radio value="N" label="否"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="显示条数：" prop="count" class="count" :verify="['Number']">
            <el-input type="text" v-model="autoModel.content.count" class="w300"></el-input>
          </el-form-item>
        </el-form>
        <conditional-filter :dataInitURL="conditionInitURL" :tmpCondition="tmpCondition" :orderParams="conditionOrderParams">
        </conditional-filter>

    <!-- 来源栏目选择弹窗 -->
    <catalog-tree :title="'来源栏目'" :show.sync="fromCatalog.show" :inputType="'checkbox'" @callback="getCheckedNodes" :checkedIds="fromCatalog.checkedIds"
      :contentType="autoModel.content.contentType">
    </catalog-tree>

  </div>
</template>

<script>
import conditionalFilter from '@src/components/contentComponent/conditionItem.vue'
import util from '@src/common/util.js'
import catalogTree from '../../contentcore/components/CatalogSelector.vue'
export default {
  components: {
    'conditional-filter': conditionalFilter,
    'catalog-tree': catalogTree
  },
  props: { changeFlag: Boolean, autoModel: Object, saveFlag: Boolean, tmpCondition: Object },
  data() {
    return {
      submitLoading: false,

      /* 自选内容 */
      contentTypeOptions: [], // 内容类型选项
      fromCatalog: {
        show: false,
        submitLoading: false,
        checkedIds: []
      },

      conditionInitURL: [],
      conditionOrderParams: {}
    }
  },
  methods: {
    contentTypeChange(value) {
      this.contentTypeOptions.forEach(item => {
        if (item.key === value) {
          this.autoModel.content.contentTypeName = item.value
        }
      }, this)
    },
    async bindContentTypeOption() {
      let data = await axios.get(`/ui/blocklist/contenttype`)
      this.contentTypeOptions = data.data.data
    },

    getCheckedNodes(value) {
      this.autoModel.content.fromCatalogName = value.names
      this.autoModel.content.fromCatalogID = value.ids
    },

    choiceCatalog() {
      if (this.autoModel.content.fromCatalogID) {
        this.fromCatalog.checkedIds = this.autoModel.content.fromCatalogID.split(',')
        this.fromCatalog.checkedIds.forEach(function (value, index) {
          this.fromCatalog.checkedIds.splice(index, 1, parseInt(value))
        }, this)
      }
      this.fromCatalog.show = true
    }
  },
  mounted() {
    this.bindContentTypeOption()
  },
  watch: {
    async saveFlag(value) {
      if (value && this.autoModel.type === 'Auto') {
        try {
          if (this.autoModel.ID) {
            await util.validateForm(this.$refs['optionalContentForm'])
            this.$emit('validate', true)
          }
        } catch (e) {
          this.$emit('validate', false)
        }
      }
    },
    changeFlag(val) {
      if (val) {
        this.conditionInitURL = [
          '/ui/blocklist/autoblockcondition',
          {
            params: { ID: this.autoModel.ID, contentType: this.autoModel.content.contentType }
          }
        ]
        this.conditionOrderParams = { needOrder: true, ID: this.autoModel.ID, contentType: this.autoModel.content.contentType }
      }
    }
  }
}
</script>

<style scoped>
  .el-tabs {
    background: #fff;
  }

  .w300 {
    width: 300px;
  }

  .mt20 {
    margin-top: 20px;
  }

  .toolbar {
    margin: 15px;
  }
</style>
