<template>
    <div class="antigen">
        <div class="search-wrapper">
            <el-form :inline="true" :model="searchForm" class="search_form" style="text-align: left">
                <el-form-item label="姓名">
                    <el-input size="medium" v-model="searchForm.name" placeholder="请输入姓名"
                        @keyup.enter.native="onSubmit"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input size="medium" v-model="searchForm.idCard" placeholder="请输入身份证号"
                        @keyup.enter.native="onSubmit"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input size="medium" v-model="searchForm.phone" placeholder="请输入手机号码"
                        @keyup.enter.native="onSubmit"></el-input>
                </el-form-item>
                <el-form-item label="辖市区">
                    <el-select v-model="searchForm.areaCode" placeholder="请选择辖市区" @change="onSubmit" size="medium">
                        <el-option v-for="item in areaList" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间范围">
                    <el-date-picker v-model="searchForm.timeRange" type="daterange" align="right" unlink-panels
                        size="medium" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-wrapper">
            <table-template :tableData="tableData" :tableColumns="tableColumns" :loading="loading"
                :pagination="pagination" @Jump="jumpPage">
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" round @click="formUser(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </table-template>
        </div>
        <el-dialog title="查看详情" :visible.sync="dialogFormVisible" destroy-on-close width="45%" @close="closeFn">
            <el-form :model="form" label-width="150px" ref="form">
                <el-form-item label="姓名">
                    <el-input v-model="form.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="申报类型">
                    <div>
                        <el-radio v-model="form.declareType" :label="0" :disabled="true">本人申报</el-radio>
                        <el-radio v-model="form.declareType" :label="1" :disabled="true">代他人申报</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="证件类型">
                    <div>
                        <el-radio v-model="form.idType" :label="0" :disabled="true">身份证号</el-radio>
                        <el-radio v-model="form.idType" :label="1" :disabled="true">护照</el-radio>
                        <el-radio v-model="form.idType" :label="2" :disabled="true">台胞证</el-radio>
                        <el-radio v-model="form.idType" :label="3" :disabled="true">其他</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="身份证号码">
                    <el-input v-model="form.idCard" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="电话号码">
                    <el-input v-model="form.phone" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="辖市区">
                    <el-input v-model="form.area" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input v-model="form.address" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="检测结果">
                    <el-input v-model="form.checkResult" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="采样时间">
                    <el-input v-model="form.collectTime" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="采样方式">
                    <div>
                        <el-radio v-model="form.collectType" :label="'0'" :disabled="true">鼻腔拭子</el-radio>
                        <el-radio v-model="form.collectType" :label="'1'" :disabled="true">鼻咽拭子</el-radio>
                        <el-radio v-model="form.collectType" :label="'2'" :disabled="true">口腔拭子</el-radio>
                    </div>
                </el-form-item>
                <el-form-item label="检测照片" v-if="form.pictures">
                    <el-image style="height: 100px; max-width: 150px" :src="form.pictures[0].picture"
                        :preview-src-list="[form.pictures[0].picture]" :z-index="7777777">
                    </el-image>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import TableTemplate from "@/components/Table";
import { queryCity, antigenList, queryDetail } from "@/api/antigen.js";
import { changeList } from "@/utils/index";

export default {
    components: { TableTemplate },
    data() {
        return {
            searchForm: {
                name: '',
                idCard: '',
                phone: '',
                areaCode: '',
                timeRange: '',
            },
            areaList: [],
            pagination: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
            },
            loading: false,
            tableData: [],
            tableColumns: [
                {
                    key: "code",
                    label: "编号",
                    width: 280,
                },
                {
                    key: "name",
                    label: "姓名",
                    width: 180,
                },
                {
                    key: "idCard",
                    label: "身份证号码",
                    width: 200,
                },
                {
                    key: "phone",
                    label: "联系方式",
                    width: 180,
                },
                {
                    key: "area",
                    label: "辖市区",
                    width: 180,
                },
                {
                    key: "checkResult",
                    label: "检测结果",
                    width: 200,
                },
                {
                    key: "collectTime",
                    label: "检测时间",
                    width: 200,
                },
            ],
            dialogFormVisible: false,
            form: {

            }
        }
    },
    methods: {
        initArea() {
            queryCity({}).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.areaList = res.data
                    this.areaList.unshift({
                        name: '全部',
                        code: ''
                    })
                }
            })
        },
        // 获取前n天年月日
        getDay(day) {
            var today = new Date();
            var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
            today.setTime(targetday_milliseconds); //注意，这行是关键代码
            var tYear = today.getFullYear();
            var tMonth = today.getMonth();
            var tDate = today.getDate();
            tMonth = this.doHandleMonth(tMonth + 1);
            tDate = this.doHandleMonth(tDate);
            return tYear + "-" + tMonth + "-" + tDate;
        },
        doHandleMonth(month) {
            var m = month;
            if (month.toString().length == 1) {
                m = "0" + month;
            }
            return m;
        },
        initData() {
            this.loading = true;
            let params = {
                name: this.searchForm.name,
                idCard: this.searchForm.idCard,
                phone: this.searchForm.phone,
                areaCode: this.searchForm.areaCode,
                beginTime: this.searchForm.timeRange ? this.searchForm.timeRange[0] : this.getDay(-30),
                endTime: this.searchForm.timeRange ? this.searchForm.timeRange[1] : this.getDay(0),
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
            };
            antigenList(params).then((res) => {
                console.log(res)
                this.loading = false;
                if (res.success) {
                    this.pagination.total = res.data.total;
                    if (res.data.total) {
                        this.tableData = res.data.list
                    } else {
                        this.tableData = [];
                    }
                    if (localStorage.getItem("userName") == "admin") {
                        this.tableData = changeList(this.tableData);
                    }
                } else {
                    this.tableData = [];
                    this.$message.error(res.msg || "系统错误");
                }
            })
        },
        onSubmit() {
            this.pagination.currentPage = 1;
            this.initData();
        },
        jumpPage() {
            this.initData();
        },
        formUser(value) {
            queryDetail({ code: value.code }).then((res) => {
                console.log(res);
                if (res.success) {
                    this.dialogFormVisible = true;
                    this.form = {
                        ...res.data,
                        name: value.name,
                        idCard: value.idCard,
                        phone: value.phone,
                    };
                }
            })
        },
        closeFn() {
            this.dialogFormVisible = false;
        }
    },
    created() {
        this.initArea()
        this.initData()
    },
}
</script>

<style lang="stylus" scoped>
@import '~@/stylus/common';

</style>