<!-- 供应商维护 -->
<template>
	<div class="container">
		<div style="display: flex; justify-content: space-between">
			<h3>供应商采购概况</h3>
			<Form ref="formInline" inline :label-width="80" style="float: left">
				<Form-item label="按产品查看">
					<Select
						v-model="params.PurposeIndex"
						style="width: 150px"
						@on-change="selectPurposeFn"
						filterable
					>
						<div slot="empty">无匹配数据</div>
						<Option :value="999">全部</Option>
						<Option
							v-for="(i, index) in selectPurposeList"
							:value="index"
							:key="index"
							>{{ i.purpose }}</Option
						>
					</Select>
				</Form-item>
				<FormItem label="按账期查看">
					<Select v-model="params.accountDate" style="width: 150px">
						<div slot="empty">无匹配数据</div>
						<Option value="">全部</Option>
						<Option
							v-for="(i, index) in accountDateList"
							:value="i.accountDate"
							:key="index"
						>
							{{ i.accountDate + '天（'
							}}{{ i.count }})
						</Option>
					</Select>
				</FormItem>
				<FormItem label="按采购周期">
					<Select v-model="params.type" style="width: 150px">
						<div slot="empty">无匹配数据</div>
						<Option value="">全部</Option>
						<Option
							v-for="(i, index) in safetyWarnDayList"
							:value="i.type"
							:key="index"
						>
							{{ i.name + '（'}}{{ i.count }})
						</Option>
					</Select>
				</FormItem>
				<FormItem label="关键词">
					<Poptip trigger="focus" width="250" placement="bottom">
						<div slot="content">
							<ul style="" class="commons-select-search">
								<li
									:key="i.id"
									v-for="i in supplierList"
									@click="params.search = i.name"
								>
									{{ i.name }}
								</li>
							</ul>
						</div>
						<Input
							v-model="params.search"
							@on-change="getSupplierSelectList"
							placeholder="请输入用途关键词"
						></Input>
					</Poptip>
				</FormItem>
				<Button
					type="primary"
					style="margin-right: 10px"
					@click="
						changePage(1)
						getStatisticsClassify()
					"
					>查询</Button
				>
				<Button type="primary" @click="$router.push('/pay_history')"
					>供应商历史付款记录</Button
				>
			</Form>
		</div>
		<div class="tabs-warp">
			<div
				@click="
					params.TechnologyType = i.technologyType
					changePage(1)
				"
				:class="
					params.TechnologyType == i.technologyType ? 'active' : ''
				"
				v-for="i in statisticsClassifyData"
				:key="i.technologyType"
			>
				{{
					i.technologyType == 99
						? '全部'
						: technologyTypeList[i.technologyType]
				}}
				（<span>{{
					i.technologyType == 99 ? total : i.categoryCount
				}}</span
				>）
			</div>
		</div>
		<my-table
			:calcHeight="110"
			:data="data"
			:columns="columns"
			:table-page="params"
			@on-change="changePage"
		>
		</my-table>
		<my-modal-form
			v-model="show"
			title="供应商详情"
			:isMaterial="true"
			width="800px"
			:config="showFormConfig"
			:data="formData"
			:type="'form'"
			@confirm="cfm"
		>
		</my-modal-form>
		<Modal v-model="accountDateRemarkModal" title="采购周期">
			<Table
				:data="accountDateRemarkModalData"
				:columns="accountDateRemarkModalcolumns"
			></Table>
		</Modal>
	</div>
</template>

<script>
import MyTable from '_c/my-table/my-table2'
import MyModalForm from '_c/my-modal-form/my-modal-form'
import ProviderAccountForm from './provider-account-form'
import renderListimgs from '_c/my-table/renderListimgs'
import axios from 'axios'
export default {
	name: 'provider_maintenance',
	components: {
		MyTable,
		MyModalForm,
		ProviderAccountForm,
		renderListimgs,
	},
	data() {
		const v = this
		return {
			formData: {},
			show: false,
			tableFilter: [
				{
					name: 'Input',
					value: 'key',
					placeholder: '请输入关键字',
				},
				{
					name: 'Button',
					type: 'primary',
					text: '查询',
					e: 'search',
				},

				{
					name: 'Button',
					type: 'primary',
					text: '供应商历史付款记录',
					align: 'right',
					width: '300',
					e: 'account',
				},
			],
			data: [],
			showFormConfig: [
				{
					type: 'input',
					label: '供应商代码',
					disabled: true,
					key: 'code',
					placeholder: '请输入供应商代码',
					span: 12,
				},
				// {
				//   type: 'selectSearch',
				//   label: '绑定用户',
				//   disabled: true,
				//   key: 'bingdUserID',
				//   list: [],
				//   placeholder: '请输入绑定用户',
				//   span: 12
				// },
				{
					type: 'input',
					label: '登录账户',
					disabled: true,
					key: 'userAccount',
					placeholder: '请输入登录账户',
					span: 12,
				},
				{
					type: 'selectSearch',
					label: '物料类型',
					key: 'categoryCode',
					disabled: true,
					list: [],
					placeholder: '请选择物料类型',
					span: 12,
				},
				{
					type: 'upload',
					label: '供应商名称',
					disabled: true,
					text: '上传营业执照',
					key: 'name',
				},
				{
					type: 'input',
					label: '账期',
					disabled: true,
					key: 'accountDate',
					placeholder: '请输入账期',
					span: 12,
				},
				{
					type: 'input',
					label: '账期说明',
					disabled: true,
					key: 'accountDateRemark',
					placeholder: '请输入账期说明',
					span: 12,
				},
				{
					type: 'input',
					comType: 'textarea',
					label: '备注',
					disabled: true,
					key: 'remark',
					placeholder: '请输入仓库说明',
				},
				{
					type: 'tabs',
					hiddenLabel: true,
					tabs: [
						{
							title: '工商信息',
							forms: [
								{
									type: 'input',
									label: '法定代表人',
									disabled: true,
									key: 'legalPerson',
									placeholder: '请输入法定代表人',
									span: 12,
								},
								{
									type: 'input',
									label: '社会信用代码',
									disabled: true,
									key: 'societyCreditCode',
									placeholder: '请输入社会信用代码',
									span: 12,
								},
								{
									type: 'input',
									label: '注册地址',
									disabled: true,
									key: 'registeredAddress',
									placeholder: '请输入注册地址',
								},
								{
									type: 'input',
									label: '成立日期',
									disabled: true,
									key: 'establishDate',
									placeholder: '请输入成立日期',
									span: 12,
								},
								{
									type: 'input',
									label: '注册资本',
									disabled: true,
									key: 'registeredCapital',
									placeholder: '请输入注册资本',
									span: 12,
								},
								{
									type: 'input',
									label: '企业类型',
									disabled: true,
									key: 'enterpriseType',
									placeholder: '请输入企业类型',
									span: 12,
								},
								{
									type: 'input',
									label: '营业期限',
									disabled: true,
									key: 'businessTerm',
									placeholder: '请输入营业期限',
									span: 12,
								},
								{
									type: 'input',
									comType: 'textarea',
									label: '营业范围',
									disabled: true,
									key: 'businessScope',
									placeholder: '请输入营业范围',
								},
							],
						},
						{
							title: '联系信息',
							forms: [
								{
									type: 'input',
									label: '联系人',
									disabled: true,
									key: 'linkMen',
									placeholder: '请输入联系人',
									span: 12,
								},
								{
									type: 'input',
									label: '手机号码',
									disabled: true,
									key: 'mobile',
									placeholder: '请输入手机号码',
									span: 12,
								},
								{
									type: 'input',
									label: '固定电话',
									disabled: true,
									key: 'telephone',
									placeholder: '请输入固定电话',
									span: 12,
								},
								{
									type: 'input',
									label: '电子邮箱',
									disabled: true,
									key: 'email',
									placeholder: '请输入电子邮箱',
									span: 12,
								},
								{
									type: 'input',
									label: '传真',
									disabled: true,
									key: 'fax',
									placeholder: '请输入传真',
									span: 12,
								},
							],
						},
						{
							title: '账户信息',
							forms: [
								{
									type: 'input',
									label: '对公户名',
									disabled: true,
									key: 'bankAccoutName',
									placeholder: '请输入对公户名',
									span: 12,
								},
								{
									type: 'input',
									label: '开户银行',
									disabled: true,
									key: 'openBank',
									placeholder: '请输入开户银行',
									span: 12,
								},
								{
									type: 'input',
									label: '对公账号',
									disabled: true,
									key: 'bankAccout',
									placeholder: '请输入对公账号',
									span: 12,
								},
								{
									type: '',
									hiddenLabel: true,
								},
								{
									type: 'input',
									label: '对私户名',
									disabled: true,
									key: 'priOpenBank',
									placeholder: '请输入对私户名',
									span: 12,
								},
								{
									type: 'input',
									label: '开户银行',
									disabled: true,
									key: 'priBankAccout',
									placeholder: '请输入开户银行',
									span: 12,
								},
								{
									type: 'input',
									label: '对私账号',
									disabled: true,
									key: 'priBankAccoutName',
									placeholder: '请输入对私账号',
									span: 12,
								},
							],
						},
						{
							title: '维护记录',
							type: 'picList',
							key: 'facPicList',
						},
						{
							title: '主营价格',
							type: 'material',
						},
						{
							title: '采购分析',
							type: 'charts',
						},
						{
							title: '其他资质',
							type: 'quaList',
							key: 'facquaList',
						},
					],
				},
			],
			technologyTypeList: ['直喷', '热转', '打纸', '墨水', '其他'],
			columns: [
				{
					title: '序号',
					type: 'index',
					width: 60,
					align: 'center',
				},
				{
					title: '供应商',
					key: 'name',
					minWidth: 300,
					render(h, p) {
						return h(renderListimgs, {
							props: {
								row: p.row,
							},
						})
					},
				},
				{
					title: '物料类型',
					key: 'technologyType',
					minWidth: 150,
					render: (h, p) => {
						if (p.row.technologyType < 0) {
							return h('span', {}, '其他')
						} else {
							return h(
								'span',
								{},
								this.technologyTypeList[p.row.technologyType]
							)
						}
					},
				},
				{
					title: '采购周期',
					key: 'accountDateRemark',
					minWidth: 100,
					render: (h, p) => {
						return h(
							'span',
							{
								style: {
									color: '#0077ff',
									cursor: 'pointer',
								},
								on: {
									click: () => {
										axios
											.post(
												'/cloudApi/supplier/getSafetyWarnDayBySupplier',
												{ supplierId: p.row.id }
											)
											.then((res) => {
												this.accountDateRemarkModalData =
													res.data.data
												this.accountDateRemarkModal = true
											})
									},
								},
							},
							'查看'
						)
					},
				},
				{
					title: '采购总额',
					key: 'sumMoney',
					minWidth: 100,
				},
				{
					title: '去年采购额',
					key: 'lastYearMoney',
					minWidth: 100,
				},
				{
					title: '今年采购额',
					key: 'yearMoney',
					minWidth: 100,
				},
				{
					title: '上月采购额',
					key: 'lastMonthMoney',
					minWidth: 150,
				},
				{
					title: '本月采购额',
					key: 'monthMoney',
					minWidth: 150,
				},
				{
					title: '操作',
					key: 'action',
					align: 'center',
					fixed: 'right',
					width: 200,
					render: (h, params) => {
						return h('div', [
							h(
								'span',
								{
									style: {
										marginRight: '20px',
										color: '#1A3AF0',
										cursor: 'pointer',
									},
									on: {
										click: () => {
											this.show = true
											axios
												.get(
													'/cloudApi/supplier/detail?id=' +
														params.row.id,
													{}
												)
												.then((res) => {
													this.formData =
														res.data.data
													this.formType = 'form'
													this.title = '供应商详情'
													this.show = true
												})
										},
									},
								},
								'基础资料'
							),
							h(
								'span',
								{
									style: {
										marginRight: '20px',
										color: '#1A3AF0',
										cursor: 'pointer',
									},
									on: {
										click: () => {
											this.$router.push({
												name: 'purchaseListDtl',
												query: params.row,
											})
										},
									},
								},
								'采购详情'
							),
						])
					},
				},
			],
			params: {
				pageNum: 1,
				pageSize: 10,
				total: 0,
				TechnologyType: null,
				Purpose: null,
				search: null,
				PurposeIndex: null,
			},
			statisticsClassifyData: [],
			supplierList: [],
			selectPurposeList: [],
			total: 0,
			accountDateList: [],
			safetyWarnDayList: [],
			accountDateRemarkModalcolumns: [
				{
					title: '序号',
					type: 'index',
					width: 60,
					align: 'center',
				},
				{
					title: '物料编码',
					key: 'materialCode',
				},
				{
					title: '面料名称',
					key: 'materialName',
				},
				{
					title: '采购周期',
					key: 'safetyWarnDay',
				},
			],
			accountDateRemarkModalData: [],
			accountDateRemarkModal:false
		}
	},
	methods: {
		getSafetyWarnDayList() {
			const v = this
			axios
				.post('/cloudApi/supplier/getSafetyWarnDayList', {})
				.then((res) => {
					console.log(res)
					v.safetyWarnDayList = res.data.data
				})
		},
		getAccountDateList() {
			const v = this
			axios
				.post('/cloudApi/supplier/getAccountDateList', {})
				.then((res) => {
					console.log(res)
					v.accountDateList = res.data.data
				})
		},
		getSupplierSelectList(req) {
			const v = this
			v.loading = true
			axios
				.post('/cloudApi/supplier/selectList', {
					search: this.params.search,
				})
				.then((res) => {
					v.supplierList = res.data.data
					v.loading = false
					console.log(v.supplierList)
				})
		},
		selectPurposeFn(e) {
			console.log(e)
			if (e == 999) {
				this.params.Purpose = ''
			} else {
				this.params.Purpose = this.selectPurposeList[e].purpose
			}
		},
		getMaterialSelectPurposeList() {
			const v = this
			v.loading = true
			axios
				.get('/cloudApi/material/selectPurposeList?purpose=' + '', {})
				.then((res) => {
					v.selectPurposeList = res.data.data
					v.loading = false
				})
		},
		cfm() {},
		// 检索条件事件处理
		eventHandle(option) {
			switch (option._evnet) {
				case 'search':
					this.params.pageNum = 1
					this.params.key = option.key
					this.getList()
					break
				case 'add':
					this.formType = 'add'
					this.title = '添加供应商'
					this.show = true
					break
				case 'priceHandle':
					this.$router.push({
						name: 'provider_price_maintenance',
					})
					break
				case 'account':
					this.$router.push('/pay_history')
					break
			}
		},
		getStatisticsClassify() {
			
			axios
				.post(
					'/cloudApi/supplier/statisticsClassify',this.params)
				.then((res) => {
					res.data.data.unshift({
						technologyType: 99,
						categoryCount: 0,
					})
					axios
						.post('/cloudApi/supplier/list/count', {
							...this.params,
						})
						.then((res) => {
							this.total = res.data.data
						})
					this.statisticsClassifyData = res.data.data
				})
			axios
				.post('/cloudApi/supplier/list/count', {
					...this.params,
				})
				.then((res) => {
					this.total = res.data.data
				})
		},
		changePage(pageNum) {
			this.params.pageNum = pageNum
			this.getList()
		},
		getList() {
			this.$Spin.show()
			axios
				.post('/cloudApi/supplier/purchase/list', {
					...this.params,
				})
				.then((res) => {
					this.$Spin.hide()
					this.data = res.data.data
				})
			axios
				.post('/cloudApi/supplier/list/count', {
					...this.params,
				})
				.then((res) => {
					this.params.total = res.data.data
				})
		},
	},
	mounted() {
		this.getList()
		this.getStatisticsClassify()
		this.getMaterialSelectPurposeList()
		this.getSupplierSelectList()
		this.getSafetyWarnDayList()
		this.getAccountDateList()
	},
}
</script>

<style lang="less" scoped>
.container {
	.tabs-warp {
		height: 60px;
		line-height: 60px;
		border-bottom: 1px solid #979797;
		margin-bottom: 10px;
		display: flex;

		div {
			width: 20%;
			font-size: 16px;
			text-align: center;
			position: relative;
			cursor: pointer;
			span {
				color: #ef0000;
			}
		}
		div.active::before {
			position: absolute;
			content: ' ';
			left: 0;
			right: 0;
			bottom: 0;
			height: 4px;
			background: #1a3af0;
		}
	}
}
</style>
