<template>
    <div class="policy">
        <div class="search-wrapper">
            <el-form :inline="true" :model="searchForm" class="search_form" style="text-align: left">
                <el-form-item label="姓名">
                    <el-input v-model="searchForm.name" placeholder="请输入姓名" @keyup.enter.native="onSubmit"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="searchForm.phone" placeholder="请输入手机号码" @keyup.enter.native="onSubmit">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <br />
                <el-form-item label="状态" style="margin-top: 10px">
                    <el-radio-group v-model="searchForm.state" @change="onSubmit">
                        <el-radio :label="item.state" v-for="item in stateList" :key="item.state">{{ item.stateName }}
                        </el-radio>
                    </el-radio-group>
                </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 width="120" key="stateName" prop="stateName" label="状态" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.type">{{ scope.row.stateName }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="380" align="left">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" round @click="view(scope.row)">查看</el-button>
                        <el-button type="primary" size="mini" round @click="record(scope.row)">记录</el-button>
                        <!-- 申请的单子有通过拒绝-->
                        <el-button v-if="scope.row.state === 0 && $route.query.areaCode" type="success" size="mini"
                            round @click="pass(scope.row)">
                            初审</el-button>
                        <el-button v-else-if="scope.row.state === 1 && $route.query.areaCode" type="success" size="mini"
                            round @click="pass(scope.row)">
                            复审</el-button>
                        <el-button v-else-if="scope.row.state === 2 && $route.query.areaCode" type="success" size="mini"
                            round @click="pass(scope.row)">
                            办结</el-button>
                        <el-button v-if="
                          (scope.row.state === 0 && $route.query.areaCode) ||
                          (scope.row.state === 1 && $route.query.areaCode) ||
                          (scope.row.state === 2 && $route.query.areaCode)
                        " type="danger" size="mini" round @click="deny(scope.row)">拒绝</el-button>
                        <el-button v-if="
                          (scope.row.state === 1 && $route.query.areaCode) || 
                          (scope.row.state === 2 && $route.query.areaCode)
                        " type="info" size="mini" round @click="print(scope.row.talentCode, scope.row)">打印</el-button>
                    </template>
                </el-table-column>
            </table-template>
        </div>
        <el-dialog title="申报详情" :visible.sync="viewShow" width="800px" :close-on-press-escape="false">
            <div class="content">
                <div class="cell">
                    <p class="label">事项名称</p>
                    <p class="value">{{ viewDetail.guideName }}</p>
                </div>
                <div class="cell">
                    <p class="label">实施主体</p>
                    <p class="value">{{ viewDetail.departmentName }}</p>
                </div>
                <div class="cell">
                    <p class="label">姓名</p>
                    <p class="value">{{ viewDetail.name }}</p>
                </div>
                <div class="cell">
                    <p class="label">手机号</p>
                    <p class="value">{{ viewDetail.phone }}</p>
                </div>
                <div class="cell">
                    <p class="label">工作单位税务登记所在地</p>
                    <p class="value">{{ viewDetail.streetName }}</p>
                </div>
                <div class="cell">
                    <p class="label">父母惠老关怀申请表</p>
                    <p class="value">
                        <el-image style="width: 100px; height: 100px" :src="viewDetail.registration" :z-index="7777777"
                            :preview-src-list="[viewDetail.registration]">
                        </el-image>
                    </p>
                </div>
                <!-- 新增start -->
                <div class="cell">
                    <p class="label">工作单位</p>
                    <p class="value">{{ viewDetail.unitName }}</p>
                </div>
                <div class="cell">
                    <p class="label">人才类别</p>
                    <p class="value">{{ viewDetail.category }}</p>
                </div>
                <div class="cell">
                    <p class="label">认定内容</p>
                    <p class="value">{{ viewDetail.contentName }}</p>
                </div>
                <!-- 新增end -->
                <div v-if="viewDetail.matterType === 1">
                    <div class="cell">
                        <p class="label">地址</p>
                        <p class="value">{{ viewDetail.address }}</p>
                    </div>
                    <div class="cell">
                        <p class="label">备注</p>
                        <p class="value">{{ viewDetail.remarks }}</p>
                    </div>
                </div>
                <div v-if="viewDetail.matterType === 2">
                    <div class="cell">
                        <p class="label">预约医院</p>
                        <p class="value">{{ viewDetail.hospitalName }}</p>
                    </div>
                    <div class="cell">
                        <p class="label">预约时间</p>
                        <p class="value">{{ viewDetail.appointmentTime }}</p>
                    </div>
                    <div class="cell">
                        <p class="label">备注</p>
                        <p class="value">{{ viewDetail.remarks }}</p>
                    </div>
                </div>
                <div v-if="viewDetail.matterType === 3">
                    <div class="cell">
                        <p class="label">预约医院</p>
                        <p class="value">{{ viewDetail.hospitalName }}</p>
                    </div>
                    <div class="cell">
                        <p class="label">就医时间</p>
                        <p class="value">{{ viewDetail.seeDoctorTime }}</p>
                    </div>
                    <div class="cell">
                        <p class="label">疾病描述</p>
                        <p class="value">{{ viewDetail.diseaseDescription }}</p>
                    </div>
                    <div class="cell">
                        <p class="label">预约科室门诊</p>
                        <p class="value">{{ viewDetail.outpatientDepartment }}</p>
                    </div>
                    <div class="cell">
                        <p class="label">备注</p>
                        <p class="value">{{ viewDetail.remarks }}</p>
                    </div>
                </div>
                <div v-if="viewDetail.matterType === 4">
                    <div class="my-2 border border-t-2 border-black" v-for="(el, index) in viewDetail.parentList"
                        :key="index">
                        <div class="cell1">
                            <p class="label">父母姓名</p>
                            <p class="value">{{ el.parentName }}</p>
                        </div>
                        <div class="cell" v-if="el.parentType">
                            <p class="label">与申请人关系</p>
                            <p class="value">
                                {{
                                ["父亲", "母亲", "配偶父亲", "配偶母亲"][
                                el.parentType * 1 - 1
                                ]
                                }}
                            </p>
                        </div>
                        <div class="cell">
                            <p class="label">父母年龄</p>
                            <p class="value">{{ el.parentAge }}</p>
                        </div>
                        <div class="cell">
                            <p class="label">申请类型</p>
                            <p class="value">
                                {{ el.discount == 1 ? "居住养老上门服务" : "入住养老机构服务" }}
                            </p>
                        </div>
                        <div class="cell" v-if="el.serviceAddress">
                            <p class="label">上门服务地址</p>
                            <p class="value">{{ el.serviceAddress }}</p>
                        </div>
                        <div class="cell" v-if="el.openBank">
                            <p class="label">开户银行</p>
                            <p class="value">{{ el.openBank }}</p>
                        </div>
                        <div class="cell" v-if="el.bankAccount">
                            <p class="label">银行账号</p>
                            <p class="value">{{ el.bankAccount }}</p>
                        </div>
                        <div class="cell" v-if="el.subsidyAmount">
                            <p class="label">补贴额度</p>
                            <p class="value">{{ el.subsidyAmount }}</p>
                        </div>
                        <div class="cell" v-if="el.institution">
                            <p class="label">现在养老机构</p>
                            <p class="value">{{ el.institution }}</p>
                        </div>
                        <div class="cell">
                            <p class="label">身份证号码</p>
                            <p class="value">{{ el.idCard }}</p>
                        </div>
                        <div class="cell">
                            <p class="label">身份证照片正面</p>
                            <p class="value">
                                <el-image style="width: 100px; height: 100px" :src="el.idCardPicture" :z-index="7777777"
                                    :preview-src-list="[el.idCardPicture]">
                                </el-image>
                            </p>
                        </div>
                        <div class="cell2">
                            <p class="label">身份证照片反面</p>
                            <p class="value">
                                <el-image style="width: 100px; height: 100px" :src="el.idCardThePicture"
                                    :z-index="7777777" :preview-src-list="[el.idCardThePicture]">
                                </el-image>
                            </p>
                        </div>
                        <div class="cell" v-if="el.agreement">
                            <p class="label">养老机构签订入驻协议</p>
                            <!-- <p class="value">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="el.agreement"
                    :z-index="7777777"
                    :preview-src-list="[el.agreement]"
                  >
                  </el-image>
                </p> -->
                            <el-button size="mini" type="primary" @click="
                              download(
                                'http://81.69.44.115:9000/img/sportImg/5981d5fd-91dd-43d9-9ec4-6c59206142f7.docx'
                              )
                            " class="down-text">下载养老机构签订入驻协议</el-button>
                        </div>
                    </div>
                    <!-- TODO -->
                </div>
            </div>
        </el-dialog>
        <el-dialog title="操作记录" :visible.sync="recordShow" width="800px" :close-on-press-escape="false">
            <div class="content">
                <div class="cell" v-for="item in recordList" :key="item.createTime">
                    <p class="label" style="margin-right: 20px">
                        {{ item.stateName }}
                        <span v-if="item.reason">({{ item.reason }})</span>
                    </p>
                    <div class="info">
                        <p class="item">操作人：{{ item.reasonName }}</p>
                        <p class="item">操作时间：{{ item.createTime }}</p>
                    </div>
                </div>
                <p v-if="record.length === 0">暂无记录~</p>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import TableTemplate from "@/components/Table";
import { changeList, setName, setTel, setCertNo } from "@/utils";
import { get } from "@/api/talents";
import {
    // mattersList,
    mattersUpdateState,
    mattersGet,
    mattersGetReason,
    mattersParentList
} from "@/api/policy";
import docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import JSZipUtils from "jszip-utils";
import { saveAs } from "file-saver";

export default {
    components: { TableTemplate },
    data() {
        return {
            userName: "",
            searchForm: {
                name: "",
                phone: "",
                state: "",
                departmentCode: ""
            },
            stateList: [
                {
                    state: "",
                    stateName: "全部",
                    type: ""
                },
                {
                    state: 0,
                    stateName: "待审核",
                    type: "warning"
                },
                {
                    state: 1,
                    stateName: "待复审",
                    type: "warning"
                },
                {
                    state: 2,
                    stateName: "待终审",
                    type: "warning"
                },
                {
                    state: 3,
                    stateName: "已完结",
                    type: "success"
                },
                {
                    state: 4,
                    stateName: "审核拒绝",
                    type: "danger"
                },
                {
                    state: 5,
                    stateName: "已撤销",
                    type: "info"
                }
            ],
            loading: false,
            tableData: [],
            tableColumns: [
                {
                    key: "code",
                    label: "申请编号",
                    width: 200
                },
                {
                    key: "name",
                    label: "姓名",
                    width: 150
                },
                {
                    key: "phone",
                    label: "手机号",
                    width: 150
                },
                {
                    key: "guideName",
                    label: "事项名称",
                    width: 200
                },
                {
                    key: "departmentName",
                    label: "实施主体",
                    width: 200
                },
                {
                    key: "createTime",
                    label: "更新时间",
                    width: 180
                }
            ],
            pagination: {
                total: 0,
                pageSize: 10,
                currentPage: 1
            },
            viewShow: false,
            viewDetail: {},
            recordShow: false,
            recordList: [],
            gzdw: "",
            rclb: "",
            sfzh: "",
            dwmc: ""
        };
    },
    watch: {
        $route() {
            if (this.$route) {
                this.userName = localStorage.getItem('userName');
                // this.searchForm.departmentCode = getQueryString("departmentCode") || "";
                // 1114
                this.searchForm.departmentCode = this.$route.query.departmentCode;
                this.searchForm.areaCode = this.$route.query.areaCode;
                this.init();
            }
        }
    },
    methods: {
        init() {
            this.tableData = [];
            this.loading = true;
            let parmas = {
                name: this.searchForm.name,
                phone: this.searchForm.phone,
                state: this.searchForm.state,
                departmentCode: this.searchForm.departmentCode,
                pageNum: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                areaCode: this.searchForm.areaCode
            };
            mattersParentList(parmas).then(res => {
                this.loading = false;
                if (res.success) {
                    this.pagination.total = res.data.total;
                    if (res.data.total) {
                        this.tableData = res.data.list.map(item => {
                            // console.log("item----", item);
                            item.stateName = this.getSatusArr(item.state).stateName;
                            item.type = this.getSatusArr(item.state).type;
                            return item;
                        });
                        if (localStorage.getItem('userName') == 'admin') {
                            this.tableData = changeList(this.tableData)
                        }
                    } else {
                        this.tableData = []
                    }
                }
            });
        },
        onSubmit() {
            this.pagination.currentPage = 1;
            this.init();
        },
        jumpPage() {
            this.init();
        },
        view(row) {
            let params = {
                code: row.code,
                matterType: row.matterType
            };
            mattersGet(params).then(res => {
                get({ appId: 1234, talentCode: res.data.talentCode }).then(res => {
                    this.$set(this.viewDetail, "unitName", res.data.unitName);
                    this.$set(this.viewDetail, "category", res.data.category);
                    this.$set(this.viewDetail, "contentName", res.data.contentName);
                });
                this.viewDetail = res.data;
                if (localStorage.getItem('userName') == 'admin') {
                    this.viewDetail.name = setName(this.viewDetail.name)
                    this.viewDetail.phone = setTel(this.viewDetail.phone)
                    this.viewDetail.idCard = setCertNo(this.viewDetail.idCard)
                }
                this.viewShow = true;
            });
        },
        record(row) {
            mattersGetReason({ code: row.code }).then(res => {
                // console.log(res);
                this.recordList = res.data.map(item => {
                    item.stateName = this.getSatusArr(item.state)
                        ? this.getSatusArr(item.state).stateName
                        : "未知状态";
                    return item;
                });
                this.recordShow = true;
            });
        },
        // 打印
        print(talentCode, row) {
            let params = {
                code: row.code,
                matterType: row.matterType
            };
            mattersGet(params).then(ret => {
                get({ appId: 1234, talentCode: ret.data.talentCode }).then(res => {
                    this.$set(this.viewDetail, "unitName", res.data.unitName);
                    this.$set(this.viewDetail, "category", res.data.category);
                    this.$set(this.viewDetail, "contentName", res.data.contentName);
                    this.gzdw = res.data.unitName;
                    this.rclb = res.data.category;
                    this.sfzh = res.data.idCard;
                    this.dwmc = res.data.unitName;
                    this.sex = res.data.sex == 0 ? "男" : "女";
                    this.viewDetail = ret.data;
                    let arr = {};
                    // console.log("数据总表this.viewDetail---", this.viewDetail);
                    delete this.viewDetail.unitName;
                    arr.myName = this.viewDetail.name; // 人才姓名
                    arr.phone = this.viewDetail.phone; // 人才电话
                    arr.streetName = this.viewDetail.streetName; // 税务登记地
                    arr.unitName = this.viewDetail.unitName
                        ? this.viewDetail.unitName
                        : ""; // 人才工作单位
                    // arr.streetName =
                    //  this.viewDetail.areaName + "/" + this.viewDetail.streetName; // 人才工作单位
                    // 第一个居家养老上门服务申请
                    if (this.viewDetail.parentList[0].discount == 1) {
                        arr.hMN = this.viewDetail.parentList[0].parentName
                            ? this.viewDetail.parentList[0].parentName
                            : ""; //姓名
                        // console.log("1111", arr.hMN);
                        // 与人才关系
                        arr.hPT =
                            this.viewDetail.parentList[0].parentType == 1
                                ? "父亲"
                                : this.viewDetail.parentList[0].parentType == 2
                                    ? "母亲"
                                    : this.viewDetail.parentList[0].parentType == 3
                                        ? "配偶父亲"
                                        : this.viewDetail.parentList[0].parentType == 4
                                            ? "配偶母亲"
                                            : "";
                        arr.hIC = this.viewDetail.parentList[0].idCard
                            ? this.viewDetail.parentList[0].idCard
                            : ""; // 身份证号码
                        arr.hSA = this.viewDetail.parentList[0].serviceAddress
                            ? this.viewDetail.parentList[0].serviceAddress
                            : ""; // 上门服务地址
                    }
                    // 第一个为 入住养老
                    if (this.viewDetail.parentList[0].discount == 2) {
                        arr.iMN = this.viewDetail.parentList[0].parentName
                            ? this.viewDetail.parentList[0].parentName
                            : ""; //姓名
                        // 与人才关系
                        arr.iPT =
                            this.viewDetail.parentList[0].parentType == 1
                                ? "父亲"
                                : this.viewDetail.parentList[0].parentType == 2
                                    ? "母亲"
                                    : this.viewDetail.parentList[0].parentType == 3
                                        ? "配偶父亲"
                                        : this.viewDetail.parentList[0].parentType == 4
                                            ? "配偶母亲"
                                            : "";
                        arr.iIC = this.viewDetail.parentList[0].idCard
                            ? this.viewDetail.parentList[0].idCard
                            : ""; // 身份证号码
                        arr.iSA = this.viewDetail.parentList[0].institution
                            ? this.viewDetail.parentList[0].institution
                            : ""; // 现入住养老机构
                    }
                    if (this.viewDetail.parentList.length >= 2) {
                        // console.log(1);
                        // 第一个居家养老上门服务申请
                        if (this.viewDetail.parentList[1].discount == 1) {
                            // console.log(2);
                            arr.hMNT = this.viewDetail.parentList[1].parentName
                                ? this.viewDetail.parentList[1].parentName
                                : ""; //姓名
                            // console.log("1111", arr.hMNT);

                            // 与人才关系
                            arr.hPTT =
                                this.viewDetail.parentList[1].parentType == 1
                                    ? "父亲"
                                    : this.viewDetail.parentList[1].parentType == 2
                                        ? "母亲"
                                        : this.viewDetail.parentList[1].parentType == 3
                                            ? "配偶父亲"
                                            : this.viewDetail.parentList[1].parentType == 4
                                                ? "配偶母亲"
                                                : "";
                            arr.hICT = this.viewDetail.parentList[1].idCard
                                ? this.viewDetail.parentList[1].idCard
                                : ""; // 身份证号码
                            arr.hSAT = this.viewDetail.parentList[1].serviceAddress
                                ? this.viewDetail.parentList[1].serviceAddress
                                : ""; // 上门服务地址
                        }
                        // 第一个为 入住养老
                        if (this.viewDetail.parentList[1].discount == 2) {
                            // console.log(3);
                            arr.iMNT = this.viewDetail.parentList[1].parentName
                                ? this.viewDetail.parentList[1].parentName
                                : ""; //姓名
                            // 与人才关系
                            arr.iPTT =
                                this.viewDetail.parentList[1].parentType == 1
                                    ? "父亲"
                                    : this.viewDetail.parentList[1].parentType == 2
                                        ? "母亲"
                                        : this.viewDetail.parentList[1].parentType == 3
                                            ? "配偶父亲"
                                            : this.viewDetail.parentList[1].parentType == 4
                                                ? "配偶母亲"
                                                : "";
                            arr.iICT = this.viewDetail.parentList[1].idCard
                                ? this.viewDetail.parentList[1].idCard
                                : ""; // 身份证号码
                            arr.iSAT = this.viewDetail.parentList[1].institution
                                ? this.viewDetail.parentList[1].institution
                                : ""; // 现入住养老机构
                        }
                    }

                    arr.hMN = arr.hMN ? arr.hMN : ""; // 上门 姓名
                    arr.hMNT = arr.hMNT ? arr.hMNT : "";
                    arr.hPT = arr.hPT ? arr.hPT : ""; // 与人才关系
                    arr.hPTT = arr.hPTT ? arr.hPTT : "";
                    arr.hIC = arr.hIC ? arr.hIC : ""; // 身份证号码
                    arr.hICT = arr.hICT ? arr.hICT : "";
                    arr.hSA = arr.hSA ? arr.hSA : ""; // 上门服务地址
                    arr.hSAT = arr.hSAT ? arr.hSAT : "";
                    arr.iMN = arr.iMN ? arr.iMN : ""; // 入住 姓名
                    arr.iMNT = arr.iMNT ? arr.iMNT : "";
                    arr.iPT = arr.iPT ? arr.iPT : ""; // 与人才关系
                    arr.iPTT = arr.iPTT ? arr.iPTT : "";
                    arr.iSA = arr.iSA ? arr.iSA : ""; // 现在入住养老机构
                    arr.iSAT = arr.iSAT ? arr.iSAT : "";
                    arr.iIC = arr.iIC ? arr.iIC : ""; // 身份证号
                    arr.iICT = arr.iICT ? arr.iICT : "";
                    arr.gzdw = this.gzdw;
                    arr.rclb = this.rclb;
                    arr.sfzh = this.sfzh;
                    arr.dwmc = this.dwmc;
                    arr.sex = this.sex;

                    let docxsrc = "./static/elderly.docx"; //模板文件的位置
                    let docxname = "镇江市区人才父母惠老关怀服务审批表"; //导出文件的名字
                    // 读取并获得模板文件的二进制内容
                    JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
                        // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
                        // 抛出异常
                        if (error) {
                            throw error;
                        }
                        // 创建一个PizZip实例，内容为模板的内容
                        // console.log(content);
                        // console.log(error);

                        let zip = new PizZip(content);
                        // 创建并加载docx templater实例对象
                        let doc = new docxtemplater().loadZip(zip);
                        // 设置模板变量的值
                        // console.log("模板变量值arr---", arr);
                        doc.setData({
                            ...arr // e中的数据可以再模板中直接使用
                        });
                        try {
                            // 用模板变量的值替换所有模板变量
                            doc.render();
                        } catch (error) {
                            // 抛出异常
                            let e = {
                                message: error.message,
                                name: error.name,
                                stack: error.stack,
                                properties: error.properties
                            };
                            console.log(
                                JSON.stringify({
                                    error: e
                                })
                            );
                            throw error;
                        }
                        // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
                        let out = doc.getZip().generate({
                            type: "blob",
                            mimeType:
                                "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                        });
                        // 将目标文件对象保存为目标类型的文件，并命名
                        saveAs(out, docxname);
                    });
                });
            });
        },
        pass(row) {
            let str = row.state === 0 ? "初审" : row.state === 1 ? "复审" : "终审";
            this.$confirm(`确定通过该申请的${str}吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPlaceholder: "请输入原因",
                type: "warning"
            })
                .then(() => {
                    let params = {
                        code: row.code,
                        name: this.userName,
                        state: row.state + 1
                    };
                    mattersUpdateState(params).then(() => {
                        this.$message.success(`${str}通过`);
                        this.init();
                    });
                })
                .catch(() => {
                    // console.log("取消审核");
                });
        },
        deny(row) {
            // console.log(row);
            let str = row.state === 0 ? "初审" : row.state === 1 ? "复审" : "终审";
            this.$prompt(`确定驳回该申请的${str}吗?`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPlaceholder: "请输入原因",
                inputType: "textarea"
            })
                .then(({ value }) => {
                    let params = {
                        code: row.code,
                        name: this.userName,
                        state: 4,
                        reason: value
                    };
                    mattersUpdateState(params).then(res => {
                        console.log(res);
                        this.$message.success(`${str}驳回成功`);
                        this.init();
                    });
                })
                .catch(() => {
                    // console.log("取消审核");
                });
        },
        getSatusArr(state) {
            return this.stateList.filter(item => {
                return item.state === state;
            })[0];
        },
        //下载养老机构签订入驻协议
        download(url) {
            // console.log("url--", url);
            window.location.href = url
        },
    },
    created() {
        this.userName = localStorage.getItem('userName');
        // this.searchForm.departmentCode = getQueryString("departmentCode") || "";
        // 1114
        this.searchForm.departmentCode = this.$route.query.departmentCode;
        this.searchForm.areaCode = this.$route.query.areaCode;
        this.init();
    }
};
</script>
  
<style lang="stylus" scoped>
  @import '~@/stylus/common';
  
  .content {
    max-height: 60vh;
    overflow-y: auto;
  
    .cell:first-child{
      border: 0px;
    }
    .cell:last-child{
      border-bottom: 1px solid #eee;
    }
    .cell {
      display: flex;
      align-items: center;
      padding: 10px;
      border-top: 1px solid #eee;
  
      .label {
        width: 150px;
        color: #999;
        text-align: left;
  
        span {
          color: red;
          font-size: 12px;
        }
      }
  
      .value {
        color: #000;
        text-align: left;
      }
  
      .info {
        .item {
          width: 100%;
          text-align: left;
          color: #000;
          margin-bottom: 10px;
        }
  
        .item:last-child {
          margin-bottom: 0;
        }
      }
    }
    .cell1{
      display: flex;
      align-items: center;
      padding: 10px;
      border-top: 10px solid #eee;
      
      .label {
        width: 150px;
        color: #999;
        text-align: left;
      }
      .value {
        color: #000;
        text-align: left;
      }
    }
    .cell2{
      display: flex;
      align-items: center;
      padding: 10px;
      border-top: 1px solid #eee;
      
      .label {
        width: 150px;
        color: #999;
        text-align: left;
      }
    }
  }
</style>  