<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="border border-black border-t-2 my-2" 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, } 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.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>
