<template>
  <div class="content-box">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">交通卡配置</span>
    </div>
    <div class="middle">
      <div class="filter">
        <div class="condition">
          <div style="display: flex; align-items: center">
            <h3>交通卡规则配置</h3>
          </div>
          <div style="margin-bottom: 8px; display: flex; flex-wrap: wrap">
            <div class="cardRules">
              <span>优行卡规则内容 : </span>
              <div class="upload">
                <div class="img" v-viewer>
                  <img
                    style="
                      object-fit: cover;
                      width: 130px;
                      height: 130px;
                      border: 0.5px solid #ddd;
                    "
                    :src="ruleForm.img"
                    alt=""
                  />
                </div>
                <el-upload
                  action="#"
                  :auto-upload="false"
                  :on-remove="pictureRemove"
                  :on-change="pictureImportChange"
                  :before-upload="beforeAvatarPicture"
                >
                  <el-button type="primary" color="rgba(61, 81, 232, 1)"
                    >上传</el-button
                  >
                </el-upload>
              </div>
            </div>
            <div class="cardRules">
              <span>教师卡规则内容 : </span>
              <div class="upload">
                <div class="img" v-viewer>
                  <img
                    style="
                      object-fit: cover;
                      width: 130px;
                      height: 130px;
                      border: 0.5px solid #ddd;
                    "
                    :src="ruleForm.img2"
                    alt=""
                  />
                </div>
                <el-upload
                  action="#"
                  :auto-upload="false"
                  :on-remove="pictureRemove"
                  :on-change="pictureImportChange2"
                  :before-upload="beforeAvatarPicture"
                >
                  <el-button type="primary" color="rgba(61, 81, 232, 1)"
                    >上传</el-button
                  >
                </el-upload>
              </div>
            </div>
            <div class="cardRules">
              <span>暖心卡规则内容 : </span>
              <div class="upload">
                <div class="img" v-viewer>
                  <img
                    style="
                      object-fit: cover;
                      width: 130px;
                      height: 130px;
                      border: 0.5px solid #ddd;
                    "
                    :src="ruleForm.img3"
                    alt=""
                  />
                </div>
                <el-upload
                  action="#"
                  :auto-upload="false"
                  :on-remove="pictureRemove"
                  :on-change="pictureImportChange3"
                  :before-upload="beforeAvatarPicture"
                >
                  <el-button type="primary" color="rgba(61, 81, 232, 1)"
                    >上传</el-button
                  >
                </el-upload>
              </div>
            </div>

            <!-- <el-dialog v-model="dialogVisible">
              <img w-f
              ull :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog> -->
          </div>
        </div>
        <!-- <div class="condition">
          <h3>补贴余额释放配置</h3>
          <div>
            <span>用户使用电子交通卡支付金额</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.toPay"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;元，</span>
            <span>从补贴余额中释放</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.toRelease"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;元到可用余额中，直至释放完 </span>
          </div>
        </div>
        <div class="condition">
          <h3>支付优惠配置</h3>
          <div>
            <span>教师使用电子交通卡需支付</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.teacherPrice"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;元票价 【注：正常票价</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.commonPrice"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;元】</span>
          </div>
          <div style="margin-top: 15px">
            <span>贫困生使用电子交通卡每次下单立减</span>
            <el-input
              :clearable="false"
              v-model="ruleForm.poorReduce"
              class="w-50 m-2"
              style="width: 100px"
              @change="timeVerify"
            />
            <span>&nbsp;&nbsp;元票价 【注：从补贴余额中扣除，减完为止】</span>
          </div>
        </div> -->
        <div class="condition">
          <div style="display: flex; align-items: center">
            <h3>充值套餐配置</h3>
            <el-button
              type="primary"
              color="rgba(61, 81, 232, 1)"
              @click="addRecharge"
              style="margin-left: 20px"
            >
              <span style="color: #fff; font-size: 16px; margin: 0">新增</span>
            </el-button>
          </div>
          <div class="footer">
            <el-table
              :data="tableData.list"
              border
              style="width: 800px"
              :header-cell-style="{
                background: 'rgba(240, 243, 247, 1)',
                height: '40px',
                border: 0,
              }"
            >
              <el-table-column align="center" prop="name" label="套餐名" />

              <el-table-column
                align="center"
                prop="account3"
                label="充值金额"
              />
              <!-- <el-table-column
                align="center"
                prop="account4"
                label="补贴金额"
              /> -->
              <el-table-column
                align="center"
                show-overflow-tooltip
                prop="remark"
                label="套餐描述"
              />
              <el-table-column align="center" label="操作" width="160">
                <template #default="scope">
                  <el-button
                    link
                    type="primary"
                    @click="editRecharge(scope.row)"
                    ><div class="look">编辑</div></el-button
                  >
                  <el-button link type="danger" @click="delRecharge(scope.row)"
                    ><div class="del">删除</div></el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!-- <div class="filters">
        
      </div> -->
      <el-dialog
        class="addStaff"
        v-model="addDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="dialongTitle"
        align-center
        width="580"
        :before-close="cancelAdd"
      >
        <el-form
          ref="rechargeRef"
          :model="rechargeForm"
          :rules="rechargeRules"
          label-width="90px"
          class="demo-ruleForm"
          :size="formSize"
          label-position="right"
          status-icon
        >
          <el-form-item label="套餐名称 :" prop="name">
            <el-input
              clearable
              v-model="rechargeForm.name"
              placeholder="请输入套餐名称"
            />
          </el-form-item>
          <el-form-item label="充值金额 :" prop="account3">
            <el-input
              clearable
              v-model="rechargeForm.account3"
              placeholder="请输入充值金额"
            />
          </el-form-item>
          <!-- <el-form-item label="补贴金额 :" prop="account4">
            <el-input
              clearable
              v-model="rechargeForm.account4"
              placeholder="请输入补贴金额"
            />
          </el-form-item> -->
          <el-form-item label="套餐描述 :" prop="remark">
            <el-input
              clearable
              v-model="rechargeForm.remark"
              placeholder="请输入套餐描述"
              style="width: 370px"
              :rows="4"
              type="textarea"
            />
          </el-form-item>
          <el-form-item class="options">
            <el-button class="congzhi" @click="cancelAdd(rechargeRef)"
              >取消</el-button
            >
            <el-button
              color="rgba(61, 81, 232, 1)"
              class="queding"
              type="primary"
              @click="submitAdd(rechargeRef)"
            >
              确定
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  nextTick,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { dayjs } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const api = ref("");
const router = useRouter();

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = reactive({ list: [] });

// 表格数据
const ruleForm = reactive({
  img: "",
  img2: "",
  img3: "",
  toPay: "", // 支付满多少金额
  toRelease: "", // 补贴释放多少金额
  teacherPrice: "", // 教师支付金额
  commonPrice: "", // 正常金额
  poorReduce: "", // 贫困生立减金额
  refundRule: "",
  id: "",
});
const dataList = reactive({
  list: [],
});

const getTimeList = async () => {
  let res = await axios({
    method: "post",
    url: api.value + "/carBook/cnqueryHb.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
  });
  console.log(res, "查看配置");
  if (res.data.code == 200) {
    let resData = res.data.data;
    dataList.list = resData;
    // ruleForm.img=resData.img
    ruleForm.toPay = resData.toPay;
    ruleForm.toRelease = resData.toRelease;
    ruleForm.teacherPrice = resData.teacherPrice;
    ruleForm.commonPrice = resData.commonPrice;
    ruleForm.poorReduce = resData.poorReduce;
    ruleForm.refundRule = resData.refundRule;
    ruleForm.id = resData.id;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.message == "token错误") {
      router.push({
        path: `/login`,
      });
    }
  }
};
const getImg = async () => {
  let res = await axios({
    method: "post",
    url: api.value + "/fileslist.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
  });
  console.log(res, "查看图片");
  if (res.data.code == 200) {
    let resData = res.data.data;
    resData.forEach((i) => {
      if (i.name == "优行卡规则内容") {
        ruleForm.img = i.url;
      } else if (i.name == "教师卡规则内容") {
        ruleForm.img2 = i.url;
      } else if (i.name == "暖心卡规则内容") {
        ruleForm.img3 = i.url;
      }
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.message == "token错误") {
      router.push({
        path: `/login`,
      });
    }
  }
};

// 照片上传
const pictureRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  ruleForm.picture = "";
};
// 限制上传图片的大小
const beforeAvatarPicture = (rawFile) => {
  console.log(rawFile, 33333);
  if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
    ElMessage.error("图片格式必须为JPG/PNG格式!");
    return false;
  } else if (rawFile.size / 1024 > 500) {
    ElMessage.error("图片的大小不能超过500kb!");
    return false;
  }
  return true;
};

const pictureImportChange = async (file, fileLists) => {
  console.log(file, "1111");
  if (!beforeAvatarPicture(file.raw)) {
    // 如果 beforeAvatarPicture 返回了 false，直接退出
    return;
  }
  let data = new FormData();
  data.append("myFile", file.raw);
  data.append("name", "优行卡规则内容");
  let res = await axios({
    method: "post",
    url: api.value + "/filesload.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
    data: data,
  });
  console.log(res, "导入照片");
  if (res.data.code == 200) {
    ruleForm.img = res.data.data.url;
    getImg();
    ElMessage({
      type: "success",
      showClose: true,
      message: "上传成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "上传失败",
      center: true,
    });
  }
};
const pictureImportChange2 = async (file, fileLists) => {
  console.log(file, "1111");
  if (!beforeAvatarPicture(file.raw)) {
    // 如果 beforeAvatarPicture 返回了 false，直接退出
    return;
  }
  let data = new FormData();
  data.append("myFile", file.raw);
  data.append("name", "教师卡规则内容");
  let res = await axios({
    method: "post",
    url: api.value + "/filesload.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
    data: data,
  });
  console.log(res, "导入照片");
  if (res.data.code == 200) {
    ruleForm.img2 = res.data.data.url;
    getImg();
    ElMessage({
      type: "success",
      showClose: true,
      message: "上传成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "上传失败",
      center: true,
    });
  }
};
const pictureImportChange3 = async (file, fileLists) => {
  console.log(file, "1111");
  if (!beforeAvatarPicture(file.raw)) {
    // 如果 beforeAvatarPicture 返回了 false，直接退出
    return;
  }
  let data = new FormData();
  data.append("myFile", file.raw);
  data.append("name", "暖心卡规则内容");
  let res = await axios({
    method: "post",
    url: api.value + "/filesload.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
    data: data,
  });
  console.log(res, "导入照片");
  if (res.data.code == 200) {
    ruleForm.img3 = res.data.data.url;
    getImg();
    ElMessage({
      type: "success",
      showClose: true,
      message: "上传成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "上传失败",
      center: true,
    });
  }
};

// 表单数据
const addDialogVisible = ref(false);
const dialongTitle = ref("新增");
const formSize = ref("default");
const rechargeRef = ref();
const rechargeForm = reactive({
  name: "",
  account3: "",
  account4: "",
  remark: "",
  id: "",
});
// 表单验证
const rechargeRules = reactive({
  name: [
    {
      required: true,
      message: "套餐名称不能为空",
      trigger: "change",
    },
  ],
  account3: [
    {
      required: true,
      message: "充值金额不能为空",
      trigger: "blur",
    },
    {
      pattern: /^(0|([1-9]\d*)(\.\d{1,2})?)$|^(0\.\d{1,2})$/,
      message: "金额输入有误，请重新输入",
      trigger: "blur",
    },
  ],
  account4: [
    {
      required: true,
      message: "补贴金额不能为空",
      trigger: "blur",
    },
    {
      pattern: /^(0|([1-9]\d*)(\.\d{1,2})?)$|^(0\.\d{1,2})$/,
      message: "金额输入有误，请重新输入",
      trigger: "blur",
    },
  ],
  remark: [
    {
      required: true,
      message: "套餐描述不能为空",
      trigger: "blur",
    },
  ],
});
// 充值套餐配置
const getList = async () => {
  let data = {
    page: currentPage.value,
    rows: pageSize.value,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/reBenefitlist.action",
    headers: {
      token: sessionStorage.getItem("token"),
    },
    params: data,
  });
  console.log(res, "套餐配置");
  if (res.status == 200) {
    tableData.list = res.data.rows;
    // currentPage.value = res.data.currentPage;
    total.value = res.data.total;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

const addRecharge = () => {
  dialongTitle.value = "新增套餐配置";
  addDialogVisible.value = true;
  rechargeForm.name = "";
  rechargeForm.account3 = "";
  rechargeForm.account4 = "";
  rechargeForm.remark = "";
  rechargeForm.id = "";
};
const editRecharge = (row) => {
  dialongTitle.value = "编辑套餐配置";
  addDialogVisible.value = true;
  rechargeForm.id = row.id;
  rechargeForm.name = row.name;
  rechargeForm.account3 = row.account3;
  rechargeForm.account4 = row.account4;
  rechargeForm.remark = row.remark;
};
const submitAdd = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (dialongTitle.value == "新增套餐配置") {
        let data = {
          name: rechargeForm.name,
          account3: rechargeForm.account3, // 充值金额
          account4: 0, // 补贴金额
          remark: rechargeForm.remark,
        };
        // let res = await admin.adminAdd(data);
        let res = await axios({
          method: "post",
          url: api.value + "/reBenefitinsert.action",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            token: sessionStorage.getItem("token"),
          },
          data: data,
        });
        // console.log(res, "添加账号");
        if (res.data.code == 200) {
          getList();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addDialogVisible.value = false;
          rechargeRef.value.resetFields();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        let data = {
          name: rechargeForm.name,
          account3: rechargeForm.account3, // 充值金额
          account4: 0, // 补贴金额
          remark: rechargeForm.remark,
          id: rechargeForm.id,
        };
        // let res = await admin.adminAdd(data);
        let res = await axios({
          method: "post",
          url: api.value + "/reBenefitupdate.action",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            token: sessionStorage.getItem("token"),
          },
          data: data,
        });
        // console.log(res, "修改账号");
        if (res.data.code == 200) {
          getList();

          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addDialogVisible.value = false;
          rechargeRef.value.resetFields();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
const delRecharge = (row) => {
  ElMessageBox.confirm("此操作将永久删除该配置, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let data = new FormData();
      data.set("id", row.id);
      let res = await axios({
        method: "post",
        url: api.value + "/reBenefitdel.action",
        headers: {
          token: sessionStorage.getItem("token"),
        },
        data: data,
      });
      if (res.data.code == 200) {
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
const cancelAdd = () => {
  addDialogVisible.value = false;
};

// 页面数据一修改就调用函数
const timeVerify = (val) => {
  const regex = /^(0|([1-9]\d*)(\.\d{1,2})?)$|^(0\.\d{1,2})$/;
  if (regex.test(val)) {
    timeUpdata();
  } else {
    getTimeList();
    ElMessage({
      type: "warning",
      showClose: true,
      message: "请输入正确金额",
      center: true,
    });
  }
};

const timeUpdata = async () => {
  dataList.list.toPay = Number(ruleForm.toPay); // 支付满多少金额
  dataList.list.toRelease = Number(ruleForm.toRelease); // 补贴释放多少金额
  dataList.list.teacherPrice = Number(ruleForm.teacherPrice); // 教师支付金额
  dataList.list.commonPrice = Number(ruleForm.commonPrice); // 正常金额
  dataList.list.poorReduce = Number(ruleForm.poorReduce); // 贫困生立减金额, // 贫困生立减金额
  dataList.list.refundRule = JSON.stringify(ruleForm.refundRule);
  // let data = {
  //   toPay: Number(ruleForm.toPay), // 支付满多少金额
  //   toRelease: Number(ruleForm.toRelease), // 补贴释放多少金额
  //   teacherPrice: Number(ruleForm.teacherPrice), // 教师支付金额
  //   commonPrice: Number(ruleForm.commonPrice), // 正常金额
  //   poorReduce: Number(ruleForm.poorReduce), // 贫困生立减金额, // 贫困生立减金额
  //   id: ruleForm.id,
  // };
  // console.log(data);

  let res = await axios({
    method: "post",
    url: api.value + "/carBook/cnupdate.action",
    headers: {
      // "Content-Type": "application/json;charset=utf-8",
      token: sessionStorage.getItem("token"),
    },
    data: dataList.list,
    // data: data,
  });
  console.log(res, "修改候补");
  if (res.data.code == 200) {
    getTimeList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    getTimeList();
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

onBeforeMount(() => {
  api.value = store.state.user.api;
  getList();
  // getTimeList();
  getImg();
});
onUnmounted(() => {});
</script>

<style scoped lang="scss">
.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 105px);
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;
    .camera {
      margin-right: 15px;
      color: #4392f7;
    }
  }
  .middle {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    // overflow: auto;
    margin: 0 auto;
    color: #000;
    display: flex;
    overflow: auto;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      width: 100%;
      height: 100%;
      display: flex;
      // flex-wrap: wrap;
      flex-direction: column;

      .condition {
        display: flex;
        flex-direction: column;
        margin: 10px 30px 0 0;
        h3 {
          margin: 12px 12px 12px 0;
        }
        span {
          margin: 0 10px 0 0;
          font-size: 18px;
          color: #000;
        }
        .addTime {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .el-checkbox-group {
            .el-checkbox {
              margin: 0 15px 0 0;
            }
          }
          :deep(.timePicker) {
            width: 200px;
          }
        }
      }
    }
    // .filters {
    //   width: 50%;
    //   height: 100%;
    // }
    .gongneng {
      margin: 10px 0;
    }
    :deep(.cont) {
      width: 60%;
      margin: 20px auto;
    }
    :deep(.download) {
      display: flex;
      align-items: center;
      margin: 10px;
    }
    :deep(.download span) {
      font-size: 16px;
      margin-left: 20px;
    }
    :deep(.cont .el-button) {
      margin-left: 60px;
      margin-bottom: 30px;
    }

    :deep(.cont .accomplish) {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    :deep(.cont .accomplish .el-button) {
      width: 50%;
      margin: 0;
    }
  }
  .el-table--fit {
    height: 100%;
    :deep(.el-table__header-wrapper) {
      background-color: #000;
    }
    :deep(.el-table__row) {
      height: 40px;
    }
    :deep(.el-table__row td) {
      padding: 0;
    }
    :deep(.look) {
      padding: 4px 10px;
      border-radius: 45px;
      border: 0.74px solid rgba(30, 125, 251, 1);
    }
    :deep(.del) {
      padding: 4px 10px;
      border-radius: 45px;
      border: 0.74px solid #f56c6c;
    }
  }
  :deep(.addStaff) {
    //   height: 420px;
    border-radius: 11px;
    .el-dialog__header {
      border-radius: 11px 11px 0 0;
      background: rgba(237, 241, 245, 1);
      font-weight: 600;
      margin: 0;
      .el-dialog__headerbtn {
        outline: none;
      }
    }
    .el-dialog__body {
      padding: 30px 20px 10px 20px;
      .el-form-item {
        label {
          width: 120px !important;
        }
        .el-form-item__label {
          width: 100px !important;
        }
        .informTime {
          display: flex;
          align-items: center;
          .el-input {
            width: 120px;
            margin-right: 10px;
            .el-input__inner {
              text-align: center;
            }
          }
        }
      }
      .el-form-item__content {
        flex: none;
        .el-input {
          width: 370px;
        }
      }
      .el-input {
        width: 200px;
      }
      .options {
        margin-left: 320px;
      }
    }
  }
  .cardRules {
    display: flex;
    margin-right: 25px;
    .upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .img {
        width: 132px;
        height: 132px;
        border: 1px dotted #ccc;
      }
      .el-button {
        margin: 10px 0;
      }
    }
    :deep(.el-upload-list) {
      display: none;
    }
    .el-upload__tip {
      text-align: center;
    }
  }
}
.el-input {
  width: 192px;
}
</style>
