<template>
	<Modal
		v-model="showEdit"
		width="600"
		class="edit-box"
		footer-hide
		title="修改信息"
		:z-index="1005"
		:mask-closable="false"
	>
		<Form class="set-form-box" :model="editItem" :label-width="80">
			<FormItem label="名称" prop="name" class="per-edit-sel">
				<Input v-model="editItem.name" placeholder="请输入" />
			</FormItem>
			<FormItem label="关键词" prop="keyword" class="per-edit-sel">
				<!-- <Input v-model="editItem.keyword" placeholder="请输入" /> -->
				<tags-input
					element-id="tags"
					v-model="editItem.keyword"
					:add-tags-on-blur="add_tags_on_blur"
					@tag-added="handleNewKey"
					placeholder="请输入关键词"
				></tags-input>
			</FormItem>
			<FormItem label="描述" prop="profile" class="per-edit-sel">
				<Input
					v-model="editItem.profile"
					class="rem-input"
					:maxlength="200"
					:rows="5"
					show-word-limit
					type="textarea"
					placeholder="请输入..."
				/>
			</FormItem>
			<FormItem v-if="showSubjectNode" label="专题" prop="subject_id" class="per-edit-sel">
				<!-- <Select v-model="editItem.subject_id">
					<Option v-for="{ id, name } in subjectList" :value="id" :key="id">{{ name }}</Option>
				</Select> -->
				<vue-tree-select
					v-model="editItem.subject_id"
					style="width: 100%"
					placeholder="请选择专题"
					noChildrenText="暂无数据"
					noOptionsText="暂无可选项"
					loadingText="加载中..."
					:default-expand-level="1"
					:maxHeight="400"
					:flat="true"
					:multiple="false"
					:options="subjectOption"
				>
				</vue-tree-select>
			</FormItem>
			<FormItem v-if="showSubjectNode" label="节点信息" prop="node" class="per-edit-sel">
				<Select v-model="editItem.node" clearable>
					<Option v-for="item in nodeList" :value="item" :key="item">{{ item }}</Option>
				</Select>
			</FormItem>
		</Form>
		<!-- slot="footer" -->
		<div class="opr-save-col">
			<Button @click="handleCancel">取消</Button>
			<Button class="opr-btn" type="primary" :loading="saveLoading" @click="handleSave"
				>保存</Button
			>
		</div>
	</Modal>
</template>

<script>
import { fetchSubjectOption, editFileInfo } from '@/api/audit'

import VoerroTagsInput from '@voerro/vue-tagsinput'
import VueTreeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { Modal, Message, Form, FormItem, Button, Input, Select, Option } from 'view-design'

export default {
	data() {
		return {
			showEdit: false,
			editId: null,
			editItem: {
				name: '',
				keyword: [],
				profile: '',
				subject_id: '',
				node: '',
			},
			saveLoading: false,
			subjectList: [],
			nodeList: ['新闻片段', '素材', '新闻正片'],
			add_tags_on_blur: true,
			subjectOption: [],
			showSubjectNode: false,
		}
	},
	components: {
		'tags-input': VoerroTagsInput,
		'vue-tree-select': VueTreeselect,
		Modal,
		Form,
		FormItem,
		Button,
		Input,
		Select,
		Option,
	},
	mounted() {
		this.getCommonOption()
	},
	methods: {
		openEdit(id, row, showSubjectNode) {
			this.showSubjectNode = showSubjectNode

			this.showEdit = true
			const { file_name, file_keyword, file_profile, subject_id, node } = row
			this.editId = id
			this.editItem = {
				name: file_name,
				keyword: file_keyword ? file_keyword.split(',').map((ele) => ({ value: ele })) : [],
				profile: file_profile,
				subject_id: subject_id == 0 ? null : subject_id,
				node,
			}
		},
		getCommonOption() {
			fetchSubjectOption()
				.then((res) => {
					if (res.status === 200 && res.data.data) {
						let list = res.data.data
						this.subjectOption = this.dealTreeList(list)
					}
				})
				.catch(() => {
					this.subjectOption = []
				})
		},
		dealTreeList(arr) {
			return arr.map(({ pid, id, title, children }) => {
				let obj = { pid, id, label: title }
				if (children && children.length > 0) {
					obj.children = this.dealTreeList(children)
				}

				return obj
			})
		},
		handleNewKey(newTag) {
			if (newTag.value.length > 10) {
				this.$Message.warning('关键词长度不能超过10个字符！')
				setTimeout(() => {
					try {
						let keyArr = this.editItem.keyword
						keyArr = keyArr.filter(({ value }) => value && value.length <= 10)
						this.$set(this.editItem, 'keyword', keyArr)
					} catch (err) {}
				}, 0)
			}
		},
		handleCancel() {
			this.showEdit = false
		},
		handleSave() {
			if (!this.editItem.name) {
				Message.error('请填写名称')
				return
			}

			this.saveLoading = true

			let keyStr = this.editItem.keyword.map((item) => item.value).join(',')
			let params = { ...this.editItem, keyword: keyStr }
			if (!params.subject_id) {
				params.subject_id = ''
			}
			if (!params.node) {
				params.node = ''
			}
			editFileInfo(this.editId, params)
				.then((res) => {
					if (res.status === 200) {
						this.$emit('on-complete')
						this.showEdit = false

						if (res.data.msg) {
							Message.success(res.data.msg)
						}
					}
				})
				.catch((err) => {
					console.log('err', err)
				})
				.finally(() => {
					this.saveLoading = false
				})
		},
	},
}
</script>
