<template>
	<view class="dynamicModel-list-v">
		<view class="head-warp com-dropdown">
			<u-dropdown class="u-dropdown" ref="uDropdown">
				<u-dropdown-item title="排序">
					<view class="dropdown-slot-content">
						<view class="dropdown-slot-content-main">
							<u-cell-group>
								<u-cell-item @click="cellClick(item)" :arrow="false" :title="item.label"
									v-for="(item, index) in sortOptions" :key="index"
									:title-style="{ color: sortValue == item.value ? '#2979ff' : '#606266' }">
									<u-icon v-if="sortValue == item.value" name="checkbox-mark" color="#2979ff"
										size="32"></u-icon>
								</u-cell-item>
							</u-cell-group>
						</view>
						<view class="dropdown-slot-bg" @click="$refs.uDropdown.close()"></view>
					</view>
				</u-dropdown-item>
				<u-dropdown-item title="筛选">
					<view class="dropdown-slot-content">
						<view class="dropdown-slot-content-main search-main">
							<view class="u-p-l-32 u-p-r-32 search-form">
								<u-form :model="searchForm" ref="searchForm" :errorType="['toast']"
									label-position="left" label-width="150">
									<u-form-item label="患者姓名" prop="name">
										<u-input v-model="searchForm.name" placeholder="请输入患者姓名" />
									</u-form-item>
									<u-form-item label="代表" prop="daibiao">
										<u-input v-model="searchForm.daibiao" placeholder="请输入代表" />
									</u-form-item>
									<u-form-item label="赠药商品" prop="zysp">
										<ncc-select v-model="searchForm.zysp" placeholder="请选择赠药商品"
											:options=" zyspOptions" :props="zyspProps" />
									</u-form-item>
									<u-form-item label="发放门店" prop="ffmd">
										<ncc-select v-model="searchForm.ffmd" placeholder="请选择发放门店"
											:options=" ffmdOptions" :props="ffmdProps" />
									</u-form-item>
									<u-form-item label="市区/县域" prop="sqxy1">
										<ncc-select v-model="searchForm.sqxy1" placeholder="请选择市区/县域"
											:options=" sqxy1Options" :props="sqxy1Props" />
									</u-form-item>
									<u-form-item label="新患/老患" prop="xlhz1">
										<ncc-select v-model="searchForm.xlhz1" placeholder="请选择新患/老患"
											:options=" xlhz1Options" :props="xlhz1Props" />
									</u-form-item>
									<u-form-item label="邮寄/现场" prop="yjxc7">
										<ncc-select v-model="searchForm.yjxc7" placeholder="请选择邮寄/现场"
											:options=" yjxc7Options" :props="yjxc7Props" />
									</u-form-item>
									<u-form-item label="一赠/二赠" prop="yzez12">
										<ncc-select v-model="searchForm.yzez12" placeholder="请选择一赠/二赠"
											:options=" yzez12Options" :props="yzez12Props" />
									</u-form-item>
									<u-form-item label="领药时间" prop="lysj1">
										<ncc-date-range v-model="searchForm.lysj1" />
									</u-form-item>
									<u-form-item label="规格" prop="gg1">
										<u-input v-model="searchForm.gg1" placeholder="请输入规格" />
									</u-form-item>
								</u-form>
							</view>
							<view class="buttom-actions">
								<u-button class="buttom-btn" @click="reset">重置</u-button>
								<u-button class="buttom-btn" type="primary" @click="closeDropdown">检索</u-button>
							</view>
						</view>
						<view class="dropdown-slot-bg" @click="$refs.uDropdown.close()"></view>
					</view>
				</u-dropdown-item>
			</u-dropdown>
			<view class="search-box">
				<u-search placeholder="请输入关键词搜索" v-model="listQuery.keyword" height="72" :show-action="false"
					@change="search" bg-color="#f0f2f6" shape="square">
				</u-search>
			</view>
		</view>
		<view class="list-warp">
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false"
				:down="downOption" :up="upOption">
				<view class="list">
					<view class="list-box" v-for="(item, index) in list" :key="item.id">
						<u-swipe-action :index="index" :show="item.show" @click="handleClick" @open="open"
							:options="options" @content-click="goDetail(item.id)">
							<view class="item">
								<view class="item-cell u-line-1">
									<text>赠药商品：</text>
									<text>{{item.zysp}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>患者姓名：</text>
									<text>{{item.name}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>地址：</text>
									<text>{{item.dz || ''}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>代表：</text>
									<text>{{item.daibiao}}</text>
								</view>

								<view class="item-cell u-line-1">
									<text>发放门店：</text>
									<text>{{item.ffmd | dynamicText(ffmdOptions) }}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>规格：</text>
									<text>{{item.gg1}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>数量：</text>
									<text>{{item.sl1}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>市区/县域：</text>
									<text>{{item.sqxy1}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>新患/老患：</text>
									<text>{{item.xlhz1}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>邮寄/现场：</text>
									<text>{{item.yjxc7}}</text>
								</view>
								<!-- <view class="item-cell u-line-1">
									<text>输注：</text>
									<text>{{item.sz7}}</text>
								</view> -->
								<view class="item-cell u-line-1">
									<text>一赠/二赠：</text>
									<text>{{item.yzez12}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>领药时间：</text>
									<text>{{item.lysj1 | toDate}}</text>
								</view>
								<view class="item-cell u-line-1">
									<text>艾瑞妥/A+T：</text>
									<text>{{item.arthajt8}}</text>
								</view>
							</view>
						</u-swipe-action>
					</view>
				</view>
			</mescroll-uni>
		</view>
		<view class="com-addBtn" @click="ShowBtnList()">
			<u-icon name="plus" size="60" color="#fff" />
			<view class="btnListBox" v-show="showBtnList">
				<view class="btnListBox_item" @click="GoNext(1)">添加表单</view>
				<view class="btnListBox_item" @click="GoNext(2)">添加药品</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDictionaryDataSelector,
		previewDataInterface
	} from '@/api/common'
	import resources from '@/libs/resources.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import request from '@/utils/request'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				showBtnList: false, //是或否显示按钮列表
				sortValue: '',
				searchForm: {
					name: undefined,
					daibiao: undefined,
					zysp: undefined,
					ffmd: undefined,
					sqxy1: undefined,
					xlhz1: undefined,
					yjxc7: undefined,
					yzez12: undefined,
					lysj1: undefined,
					gg1: undefined,
				},
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: "暂无数据",
						fixed: true,
						top: "300rpx",
						zIndex: 5
					},
					textNoMore: '没有更多数据',
					toTop: {
						bottom: 250
					}
				},
				list: [],
				listQuery: {
					sort: 'desc',
					sidx: 'lysj1',
					keyword: '',
					json: ''
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				sortOptions: [{
						label: '患者姓名降序',
						sidx: 'name',
						value: 'namedesc',
						sort: 'desc'
					},
					{
						label: '代表降序',
						sidx: 'daibiao',
						value: 'daibiaodesc',
						sort: 'desc'
					},
					{
						label: '赠药商品降序',
						sidx: 'zysp',
						value: 'zyspdesc',
						sort: 'desc'
					},
					{
						label: '发放门店降序',
						sidx: 'ffmd',
						value: 'ffmddesc',
						sort: 'desc'
					},
					{
						label: '市区/县域降序',
						sidx: 'sqxy1',
						value: 'sqxy1desc',
						sort: 'desc'
					},
					{
						label: '新患/老患降序',
						sidx: 'xlhz1',
						value: 'xlhz1desc',
						sort: 'desc'
					},
					{
						label: '邮寄/现场降序',
						sidx: 'yjxc7',
						value: 'yjxc7desc',
						sort: 'desc'
					},
					{
						label: '一赠/二赠降序',
						sidx: 'yzez12',
						value: 'yzez12desc',
						sort: 'desc'
					},
					{
						label: '领药时间降序',
						sidx: 'lysj1',
						value: 'lysj1desc',
						sort: 'desc'
					},
					{
						label: '规格降序',
						sidx: 'gg1',
						value: 'gg1desc',
						sort: 'desc'
					},
				],
				zyspOptions: [],
				zyspProps: {
					"label": "name",
					"value": "name"
				},
				ffmdOptions: [],
				ffmdProps: {
					"label": "fullName",
					"value": "id"
				},
				sqxy1Options: [{
					"fullName": "市区",
					"id": "市区"
				}, {
					"fullName": "县域",
					"id": "县域"
				}],
				sqxy1Props: {
					"label": "fullName",
					"value": "id"
				},
				xlhz1Options: [{
					"fullName": "新患",
					"id": "新患"
				}, {
					"fullName": "老患",
					"id": "老患"
				}],
				xlhz1Props: {
					"label": "fullName",
					"value": "id"
				},
				yjxc7Options: [{
					"fullName": "邮寄",
					"id": "邮寄"
				}, {
					"fullName": "现场",
					"id": "现场"
				}],
				yjxc7Props: {
					"label": "fullName",
					"value": "id"
				},
				yzez12Options: [{
					"fullName": "一赠",
					"id": "一赠"
				}, {
					"fullName": "二赠",
					"id": "二赠"
				}],
				yzez12Props: {
					"label": "fullName",
					"value": "id"
				},
				arthajt8Options: [{
					"fullName": "艾瑞妥",
					"id": "艾瑞妥"
				}, {
					"fullName": "A+T",
					"id": "A+T"
				}],
				arthajt8Props: {
					"label": "fullName",
					"value": "id"
				},
			}
		},
		onLoad() {
			this.$store.dispatch('user/getCurrentUser')
		},
		created() {
			uni.$on('refresh', () => {
				this.list = [];
				this.mescroll.resetUpScroll();
			})
			this.getzyspOptions();
			this.getffmdOptions();
		},
		beforeDestroy() {
			uni.$off('refresh')
		},
		methods: {
			//跳转下一步
			GoNext(index) {
				// console.log(index);
				var url = index == 1 ? './form' : '../drugPut/index'
				uni.navigateTo({
					url: url
				})
			},

			getzyspOptions() {
				previewDataInterface('508633651819316485').then(res => {
					this.zyspOptions = res.data
				});
			},
			getffmdOptions() {
				getDictionaryDataSelector('508628742709445893').then(res => {
					this.ffmdOptions = res.data.list
				});
			},
			upCallback(page) {
				const query = {
					currentPage: page.num,
					pageSize: page.size,
					...this.listQuery,
					...this.searchForm
				}
				request({
					url: '/api/Extend/TbDrugIftForm/list',
					method: 'get',
					data: query,
				}).then(res => {
					if (page.num == 1) this.list = [];
					const list = res.data.list.map(o => ({
						show: false,
						...o
					}));

					this.mescroll.endSuccess(res.data.list.length);
					this.list = this.list.concat(list);
				}).catch(() => {
					this.mescroll.endErr();
				})
			},
			handleClick(index) {
				const item = this.list[index]
				request({
					url: '/api/Extend/TbDrugIftForm/' + item.id,
					method: 'delete'
				}).then(res => {
					uni.showToast({
						title: res.msg,
						complete: () => {
							this.$u.toast(res.msg)
							this.list.splice(index, 1)
						}
					})
				})
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			search() {
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300)
			},
			ShowBtnList() {
				this.showBtnList = !this.showBtnList
				// if(id){
				// 	this.goDetail(id)
				// }

			},
			goDetail(id) {
				let query = id ? '?id=' + id : ''
				uni.navigateTo({
					url: './form' + query
				})
			},
			cellClick(item) {
				if (this.sortValue === item.value) return
				this.listQuery.sort = item.sort
				this.listQuery.sidx = item.sidx
				this.sortValue = item.value
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			reset() {
				this.$refs.searchForm.resetFields()
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
		height: 100%;
		/* #ifdef MP-ALIPAY */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* #endif */
	}

	.btnListBox {
		position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;

		background-color: white;
		z-index: 999;
		width: 80px;
		// left: -50px;
		bottom: 60px;
		text-align: center;
		box-shadow: 1px 1px 10px;
	}

	.btnListBox_item {
		// width: 100px;
		padding: 10px;
		border-bottom: 1px solid lightgray;

	}
</style>