<template>
  <div class="container" style="padding-top: 13vw">
    <TopNav navTitle="涉疫登记" />
    <div class="card">
      <van-image class="img_van" :class="_getBase64(ryxx)" :src="ryxx.baseUrl"></van-image>
      <div class="card_main">
        <div>
          <span class="main_one">姓名：{{ ryxx.xm }}</span>
          <span>性别：{{ setDict(ryxx.sex, D_BZ_XB) }}</span>
        </div>
        <div>
          <span class="main_one">出生年月：{{ ryxx.bird }}</span>
          <span>民族：{{ setDict(ryxx.mz, D_BZ_MZ) }}</span>
        </div>
        <div>
          <span>证件号码：{{ ryxx.sfzh }}</span>
        </div>
        <div>
          <span>家庭住址：{{ ryxx.jtzz }}</span>
        </div>
      </div>
    </div>
    <div class="title_tag">天府健康码核验</div>
    <div class="fydj_main">
      <van-radio-group direction="horizontal" v-model="form.jkmzt">
        <van-radio name="1" shape="square">
          <template #default>
            <span style="color: #4cdf58">绿码</span>
          </template>
        </van-radio>
        <van-radio name="2" shape="square">
          <template #default>
            <span style="color: #e69529">黄码</span>
          </template>
        </van-radio>
        <van-radio name="3" shape="square">
          <template #default>
            <span style="color: #ff0000">红码</span>
          </template>
        </van-radio>
      </van-radio-group>
    </div>
    <div class="title_tag">疫苗接种情况</div>
    <div class="fydj_main">
      <van-radio-group v-model="form.ymjzqk" direction="horizontal">
        <van-radio v-for="item in D_BZ_YMJZQK" :key="item.value" shape="square" :name="item.value" class="m_radio">{{
          item.text }}</van-radio>
      </van-radio-group>
    </div>
    <div class="title_tag">来源地与目的地</div>
    <div class="fydj_main_n">
      <div>
        <div style="color: #1565eb; text-align: center">来源地</div>
        <van-field readonly @click="show = true" class="bg" v-model="form.lz" placeholder="请输入来源地" type="textarea"
          rows="2"></van-field>
      </div>
      <van-icon class="fy_icon" name="arrow"></van-icon>
      <div>
        <div style="color: #1565eb; text-align: center">目的地</div>
        <van-field readonly class="bg" @click="showEnd = true" placeholder="请输入目的地" v-model="form.qw" type="textarea"
          rows="2"></van-field>
      </div>
    </div>
    <div class="title_tag">通行大数据行程卡是否带*</div>
    <div class="fydj_main">
      <van-radio-group v-model="form.txxck" direction="horizontal">
        <van-radio v-for="item in D_BZ_SF" :key="item.value" shape="square" :name="item.value" class="m_radio">{{
          item.text }}</van-radio>
      </van-radio-group>
    </div>
    <div class="title_tag_s">14天内到达或途径城市</div>
    <div class="fydj_main">
      <van-field class="bg" v-model="form.ddhtjcs"></van-field>
    </div>
    <div class="title_tag">上传照片</div>
    <div class="fydj_main">
      <van-uploader v-model="imgList" multiple :max-count="3" :after-read="upLoadImg" />
    </div>
    <div style="margin: 16px">
      <van-button round block type="primary" @click="onSubmit">提交</van-button>
    </div>
    <van-popup v-model:show="show" round position="bottom">
      <van-cascader close-icon="success" v-model="cascaderVakue.city" title="请选择来源地" :options="city" @close="close"
        @finish="onFinish"></van-cascader>
      <van-field v-model="cascaderVakue.text" label="详细地址" placeholder="请输入详细地址"></van-field>
    </van-popup>
    <van-popup v-model:show="showEnd" round position="bottom">
      <van-cascader close-icon="success" v-model="cascaderVakueEnd.city" title="请选择目的地" :options="city"
        @close="closeEnd" @finish="onFinishEnd"></van-cascader>
      <van-field v-model="cascaderVakueEnd.text" label="详细地址" placeholder="请输入详细地址"></van-field>
    </van-popup>
  </div>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import { useRouter } from "vue-router";
import { upImage, getRySydjInfo, saveSydj } from "../../../api/common";
import { ref, onMounted } from "vue";
// import city from "../../../assets/jsonData/city.json";
import { getBase64, hintToast } from "../../../utils/tools.js";
import { getDictList, setDict } from "../../../utils/dict";
import { baseUrl2 } from "../../../utils/request.js";
const { D_BZ_YMJZQK, D_BZ_SF, D_BZ_XB, D_BZ_MZ } = getDictList(
  "D_BZ_YMJZQK",
  "D_BZ_SF",
  "D_BZ_XB",
  "D_BZ_MZ"
);
const router = useRouter();
const url = baseUrl2 + "/mosty-api/mosty-base/minio/image/download/";
const show = ref(false);
const showEnd = ref(false);
const cascaderVakue = ref({
  city: "",
  text: "",
});
const cascaderVakueEnd = ref({
  city: "",
  text: "",
});
const form = ref({
  ddhtjcs: "", //14天内到达或途径城市
  jkmzt: "", //天府健康码状态
  lz: "", //来自哪里
  pcid: "", //盘查id
  qw: "", //去往哪里
  ryxm: "", //人员姓名
  sfzh: "", //身份证号
  tpid: "", //图片Id
  txxck: "", //通讯行程卡是否带*
  ymjzqk: "",
});
100;
const imgList = ref([]);
const ryxx = ref({
  imgUrl: "",
  xm: router.currentRoute.value.query.ryxm,
  sfzh: router.currentRoute.value.query.sfzh,
  sex: router.currentRoute.value.query.xbdm,
  bird: router.currentRoute.value.query.csrq,
  mz: router.currentRoute.value.query.mzdm,
  jtzz: router.currentRoute.value.query.zzxz,
});
//获取base64地址
function _getBase64(item) {
  getBase64((res) => {
    item.baseUrl = res;
  }, `http://10.64.201.128:2366/xlpcAdminNew/requestservice/czrk/ryxp.jpg?sfzh=${item.sfzh}`);
}
function close() {
  show.value = false;
  form.value.lz += cascaderVakue.value.text;
}
function onFinish({ selectedOptions }) {
  form.value.lz = selectedOptions.map((item) => item.text).join("/");
}
function closeEnd() {
  showEnd.value = false;
  form.value.qw += cascaderVakueEnd.value.text;
}
function onFinishEnd({ selectedOptions }) {
  form.value.qw = selectedOptions.map((item) => item.text).join("/");
}
function upLoadImg(file) {
  const data = new FormData();
  data.append("file", file.file);
  file.status = "uploading";
  file.message = "上传中...";
  upImage(data)
    .then((res) => {
      file.status = "done";
      file.message = "上传成功";
      file.id = res;
    })
    .catch(() => {
      file.status = "failed";
      file.message = "上传失败";
    });
}
function onSubmit() {
  form.value.pcid = router.currentRoute.value.query.pcid;
  form.value.ryxm = router.currentRoute.value.query.ryxm;
  form.value.sfzh = router.currentRoute.value.query.sfzh;
  form.value.tpid = imgList.value.map((item) => item.id).join(",");
  saveSydj(form.value).then(() => {
    hintToast("保存成功")
    router.go(-1);
  });
}
function getSydjInfo() {
  const data = {
    pcid: router.currentRoute.value.query.pcid,
    sfzh: router.currentRoute.value.query.sfzh,
  };
  getRySydjInfo(data).then((res) => {
    form.value = res;
    if (res.tpid) {
      imgList.value = res.tpid.split(",").map((item) => {
        return {
          url: url + item,
          id: item,
          isImage: true,
        };
      });
    }
  });
}
onMounted(() => {
  getSydjInfo();
});
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.card {
  margin: 5vw;
  width: 90vw;
  @include font_color($font-color-theme);
  border-radius: 2.5vw;
  @include bg_color($background-color-theme);
  @include border_outer_color($border-outer-color-theme);
  display: flex;
  font-size: 12px;
  padding: 3vw;
  box-sizing: border-box;

  .img_van {
    width: 65px;
    height: 76px;
    margin-right: 12px;
  }

  .card_main {
    flex: 1;

    >div {
      display: flex;
      line-height: 1.5em;

      .main_one {
        width: 65%;
      }
    }
  }
}

.title_tag_s {
  @include font_color($font-color-theme);
  position: relative;
  padding-left: 12px;
  margin: 12px 5vw;
}

.title_tag {
  position: relative;
  padding-left: 12px;
  margin: 12px 5vw;
  @include font_color($font-color-theme);
}

.title_tag::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: #1666eb;
  border-radius: 2px;
}

.fydj_main {
  box-sizing: border-box;
  padding: 0 6vw;

  .m_radio {
    width: 50%;
    margin: 6px 0;
  }
}

.fydj_main_n {
  box-sizing: border-box;
  padding: 0 6vw;
  display: flex;
  align-items: center;

  .bg {
    background: #f0f0f0;
    border-radius: 4px;
    margin-top: 8px;
  }

  .fy_icon {
    margin: 24px 5vw 0;
    color: #1666eb;
  }
}

.bg {
  background: #f0f0f0;
  border-radius: 4px;
}

::v-deep .van-radio__label {
  @include font_color($font-color-theme);
  color: #333;
}
</style>
