<template>
	<zj-tab-page ref="tabPage" :defaultActives="[{ key: 'list', label: $route.meta.title+'-列表', essential: true }]">
		<template slot-scope="{activeKey, data}">
			<div :style="{
				width: '100%',
				height: activeKey == 'list' ? '100%' : '0px',
				overflow: 'hidden'
			}">
				<template-page ref="pageRef" :get-list="getList" :table-attributes="tableAttributes" :table-events="tableEvents"
					:operationColumnWidth="200" :options-evens-group="optionsEvensGroup" :moreParameters="moreParameters"
					:column-parsing="columnParsing" :operation="operation" :exportList="exportList">
				</template-page>
			</div>
			<div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box;padding: 16px;">
				<zj-form-container ref="formRef" :form-data="formData" :styleSwitch="false">
					<zj-form-module :title="data.label" label-width="100px" :showPackUp="false" :form-data="formData"
						:form-items="formItems2">
					</zj-form-module>
				</zj-form-container>
				<div slot="footer" class="dialog-footer">
					<el-button size="mini" @click="data.removeTab()">取 消</el-button>
				</div>
			</div>
		</template>
	</zj-tab-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import ImageUpload from '@/components/file-upload'
import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
import { noticeReadList, noticeReadListExport, getNoticeDetail, zfapiNoticeDetail, noticeAdd, noticeUpdate, noticeDel } from "@/api/announcement";
import { memberListPageV2 } from "@/api/masterManagement";
import { getList as getListaa } from "@/api/merchant";
export default {
	components: { TemplatePage, ImageUpload },
	mixins: [import_mixin],
	data() {
		return {
			// 事件组合
			optionsEvensGroup: [],
			// 表格属性
			tableAttributes: {
				// 启用勾选列
				selectColumn: false
			},
			// 表格事件
			tableEvents: {
				'selection-change': this.selectionChange
			},
			// 勾选选中行
			recordSelected: [],
			/** 表单变量 */
			formDialogType: 0,
			formData: {
				type: "A",
				title: "",
				files: [],
				adminWebsitIds: [],
				workerIds: [],
				content: "",
			},
			status: '',
			websitList: [],
			workerList: []
		}
	},
	computed: {
		// 更多参数
		moreParameters() {
			return []
		},
		formItems2() {
			return [{
				md: 24,
				isShow: true,
				name: 'slot-component',
				formItemAttributes: {
					prop: 'type',
					label: '',
					'label-width': "0px"
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return <div>类型：{({ A: "活动", B: "公告" })[value]}</div>
				}
			},
			{
				md: 24,
				isShow: true,
				name: 'slot-component',
				attributes: { placeholder: '请输入', disabled: true },
				formItemAttributes: {
					prop: 'title',
					label: '',
					'label-width': "0px"
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return <div>标题：{value}</div>
				}
			},
			{
				md: 24,
				isShow: true,
				name: 'slot-component',
				formItemAttributes: {
					prop: 'content',
					label: '',
					'label-width': "0px"
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return <div domPropsInnerHTML={value}></div>
				}
			},
			{
				md: 24,
				isShow: true,
				name: 'slot-component',
				formItemAttributes: {
					prop: 'files',
					label: '',
					'label-width': "0px"
				},
				render: (h, { props, onInput }) => {
					var { value } = props
					return (
						<ImageUpload fileList={this.formData.files} uid="idcardUpUrl_drawing_aiuh888" limit={100} isEdit={false} />
					)
				}
			}]
		}
	},
	methods: {
		// 列表请求函数
		getList: noticeReadList,
		// 列表导出函数
		exportList: noticeReadListExport,
		// 表格列解析渲染数据更改
		columnParsing(item, defaultData) {
			return defaultData
		},
		// 监听勾选变化
		selectionChange(data) {
			this.recordSelected = data
		},
		// 表格操作列
		operation(h, { row, index, column }) {
			return (<div class='operation-btns'>
				<el-button type="text" onClick={() => {
					this.$refs.tabPage.addTab({
						activeKey: "detail",
						key: "detail",
						label: "查看",
						triggerEvent: () => {
							this.formCancel()
							this.$nextTick(() => {
								zfapiNoticeDetail({
									id: row.id
								}).then(res => {
									console.log(res)
									Object.assign(this.formData, res.data, {
										files: res.data.files ? res.data.files.map(item => ({
											...item,
											size: item.fileSize,
											type: item.fileType,
										})) : []
									})
									this.formDialogType = 2
									this.openForm()
								})
							})
						},
						closeEvent: () => {
						}
					})
				}}>查看</el-button>
			</div>)
		},
		openForm() {
			if (JSON.parse(localStorage.getItem("greemall_user")).type == 2) {
				getListaa({ pageNum: 1, pageSize: -1, type: 1 }).then((res) => {
					this.websitList = res.data.records
				})
			} else {
				memberListPageV2({ "pageNum": 1, "pageSize": -1, "params": [] }).then(res => {
					this.workerList = res.data.records
				})
			}
		},
		formCancel() {
			this.$refs?.formRef?.$refs?.inlineForm?.clearValidate()
			this.$data.formData = this.$options.data().formData
			this.websitList = []
		},
	}
}
</script>

<style lang="scss" scoped></style>