<template>
  <div>
    <!--编辑article标签弹窗  -->
    <el-dialog title="编辑标签<cms:artical>" class="dialog" :visible="isShowModal" @update:visible="closeHandler">
      <el-form :model="form" :label-position="labelPosition" label-width="120px">
        <el-form-item label="来源栏目id：">
          <el-input v-model="form.originColumnId"></el-input>
        </el-form-item>

        <el-form-item label="来源栏目名称：">
          <el-input v-model="form.originColumnName"></el-input>
        </el-form-item>

        <el-form-item label="来源栏目别名：">
          <el-input v-model="form.originColumnAlias"></el-input>
        </el-form-item>

        <el-form-item label="加载条数：">
          <el-input-number v-model="form.loadingNum" :min="1" :max="100"></el-input-number>
        </el-form-item>

        <el-form-item label="展示类型：">
          <el-select v-model="form.displayType">
            <el-option label="发布时间降序" value="releaseTimeDesc"></el-option>
            <el-option label="点击量降序" value="clickDesc"></el-option>
            <el-option label="相关文章" value="relatedArticales"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="显示层级：">
          <el-select v-model="form.displayHierarchy">
            <el-option label="所有栏目" value="allSub"></el-option>
            <el-option label="子栏目" value="sub"></el-option>
            <el-option label="平级栏目" value="curSub"></el-option>
            <el-option label="当前目录及子栏目" value="curCatalogSub"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="包含属性：">
          <el-checkbox-group v-model="form.property">
            <el-checkbox label="视频" name="property"></el-checkbox>
            <el-checkbox label="附件" name="property"></el-checkbox>
            <el-checkbox label="热点" name="property"></el-checkbox>
            <el-checkbox label="推荐" name="property"></el-checkbox>
            <el-checkbox label="图片" name="property"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="不包含属性：">
          <el-checkbox-group v-model="form.disproperty">
            <el-checkbox label="视频" name="disproperty"></el-checkbox>
            <el-checkbox label="附件" name="disproperty"></el-checkbox>
            <el-checkbox label="热点" name="disproperty"></el-checkbox>
            <el-checkbox label="推荐" name="disproperty"></el-checkbox>
            <el-checkbox label="图片" name="disproperty"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmClickHandler">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataLoading: true, // 数据加载
      labelPosition: 'right', // 表单标签右对齐
      form: {
        // <cms:artical>
        originColumnId: '9204', // 来源栏目id
        originColumnName: '', // 来源栏目名称
        originColumnAlias: '', // 来源栏目别名
        loadingNum: 9, // 加载条数
        displayType: 'releaseTimeDesc', // 展示类型
        displayHierarchy: '', // 显示层级
        property: [], // 包含属性
        disproperty: [] // 不包含属性
      }
    }
  },
  props: {
    'isShowModal': {
      type: Boolean,
      required: true
    }
  },
  methods: {
    // 关闭弹窗
    closeHandler(val) {
      this.$emit('close', val)
    },

    // 编辑article标签确认按钮
    confirmClickHandler() {
      this.isShowModal = false // 隐藏弹窗
      this.update()
    },

    // 初始化批量添加include标签弹出框数据
    async includeTableData() {
      //  let res = await axios.get('/ui/templates' {params: {condition}})
      // this.templatesData = data.data
      // this.dataLoading = false
    },

    // 数据更新
    async update() {
      let ids = []
      this.selectedRows.forEach(function (row) {
        ids.push(row.id)
      })
      // let res = await axios.put(`/ui/templates/${ids.join()}`)
      // console.log(res)
      this.$notify({
        title: '成功',
        message: `操作成功`,
        type: 'success',
        duration: 2000
      })
    }
  },
  created() {
    this.includeTableData()
  }
}
</script>

<style>

</style>
