<template>
  <div class="apk-form-page">
    <!-- 自定义头部 -->
    <s-header :name="titleName" :noback="false" class="form-header" />

    <!-- 表单区域 -->
    <van-form @submit="onSubmit" class="apk-form" :show-error-message="true">
      <!-- 基本信息卡片 -->
      <div class="form-card">
        <div class="card-content">
          <!-- 版本号 -->
          <van-field
            v-model="cofficentForm.version"
            type="number"
            clearable
            required
            colon
            :border="false"
            name="version"
            :label="$t('apkManage.add.version')"
            :placeholder="$t('apkManage.add.versionPlace')"
            :rules="[
              { required: true, message: $t('apkManage.add.versionPlace') },
            ]"
          >
            <template #left-icon>
              <van-icon name="label" class="field-icon" />
            </template>
          </van-field>

          <!-- 版本名称 -->
          <van-field
            v-model="cofficentForm.versionName"
            clearable
            required
            colon
            :border="false"
            name="versionName"
            :label="$t('apkManage.add.versionName')"
            :placeholder="$t('apkManage.add.versionNamePlace')"
            :rules="[
              { required: true, message: $t('apkManage.add.versionNamePlace') },
            ]"
          >
            <template #left-icon>
              <van-icon name="edit" class="field-icon" />
            </template>
          </van-field>

          <!-- 设备型号 -->
          <van-field
            colon
            :border="false"
            required
            @click-input="busiInpClk"
            readonly
            clearable
            v-model="cofficentForm.modelName"
            name="modelName"
            :label="$t('apkManage.add.model')"
            :placeholder="$t('apkManage.add.modelPlace')"
            :rules="[
              {
                required: true,
                message: $t('apkManage.add.modelPlace'),
                trigger: ['onChange', 'onSubmit'],
              },
            ]"
          >
            <template #left-icon>
              <van-icon name="star" class="field-icon" />
            </template>

            <template #right-icon>
              <div class="field-actions">
                <van-icon
                  v-if="cofficentForm.modelName"
                  name="clear"
                  class="clear-icon"
                  @click="
                    cofficentForm.modelName = '';
                    cofficentForm.model = '';
                  "
                />
                <van-icon
                  @click="busiInpClk"
                  name="arrow-down"
                  class="arrow-icon"
                />
              </div>
            </template>
          </van-field>
        </div>
      </div>

      <!-- 更新设置卡片 -->
      <div class="form-card">
        <div class="card-content">
          <!-- 强制更新 -->
          <van-field
            colon
            :border="false"
            required
            clearable
            name="isForce"
            :label="$t('apkManage.add.forceUpdate')"
            :placeholder="$t('apkManage.add.forceUpdatePlace')"
            :rules="[
              {
                required: true,
                message: $t('apkManage.add.forceUpdatePlace'),
                trigger: ['onChange', 'onSubmit'],
              },
            ]"
          >
            <template #left-icon>
              <van-icon name="fire" class="field-icon" />
            </template>
            <template #input>
              <van-radio-group
                v-model="cofficentForm.isForce"
                direction="horizontal"
              >
                <van-radio name="true">{{ $t("apkManage.add.yes") }}</van-radio>
                <van-radio name="false">{{ $t("apkManage.add.no") }}</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </div>
      </div>

      <!-- 文件信息卡片 -->
      <div class="form-card">
        <div class="card-content">
          <!-- APK大小 -->
          <van-field
            v-model="cofficentForm.apkSize"
            type="number"
            clearable
            required
            colon
            :border="false"
            name="apkSize"
            :label="$t('apkManage.add.apkSize')"
            :placeholder="$t('apkManage.add.apkSizePlace')"
            :rules="[
              { required: true, message: $t('apkManage.add.apkSizePlace') },
            ]"
          >
            <template #left-icon>
              <van-icon name="diamond" class="field-icon" />
            </template>
            <template #extra>
              <span class="unit">MB</span>
            </template>
          </van-field>

          <!-- 下载链接 -->
          <van-field
            v-model="cofficentForm.downloadUrl"
            clearable
            required
            colon
            :border="false"
            name="downloadUrl"
            type="textarea"
            :label="$t('apkManage.add.downloadLink')"
            :placeholder="$t('apkManage.add.downloadLinkPlace')"
            :rules="[
              {
                required: true,
                message: $t('apkManage.add.downloadLinkPlace'),
              },
            ]"
          >
            <template #left-icon>
              <van-icon name="weapp-nav" class="field-icon" />
            </template>
          </van-field>

          <!-- 版本介绍 -->
          <van-field
            v-model="cofficentForm.versionInfo"
            clearable
            required
            colon
            :border="false"
            name="versionInfo"
            :label="$t('apkManage.add.versionIntroduction')"
            :placeholder="$t('apkManage.add.versionIntroductionPlace')"
            :rules="[
              {
                required: true,
                message: $t('apkManage.add.versionIntroductionPlace'),
              },
            ]"
            type="textarea"
            rows="3"
            autosize
          >
            <template #left-icon>
              <van-icon name="notes" class="field-icon" />
            </template>
          </van-field>
        </div>
      </div>

      <!-- 提交按钮 -->
      <div class="form-actions">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          class="submit-button"
        >
          <van-icon name="success" class="button-icon" />
          {{ titleName }}
        </van-button>
      </div>
    </van-form>

    <!-- 型号选择框 -->
    <van-popup v-model:show="busiPopShow" position="bottom">
      <van-picker
        v-model="busiDefaIdx"
        :title="$t('apkManage.add.model')"
        :columns="busiPopList"
        :columns-field-names="busiPopFieldName"
        @confirm="busiPopConfirm"
        @cancel="busiPopShow = false"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入接口
// 导入接口
import { Api_postAddApk, Api_postUpdateApk } from "@/service/apkManage";
import sHeader from "@/components/SimpleHeader";
import { reactive, onMounted, ref } from "vue";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { styleUrl } from "../../common/js/utils";
export default {
  components: { sHeader },
  setup() {
    const { t } = useI18n();
    const titleName = ref(t("apkManage.add.addTitle"));
    const route = useRoute();
    onMounted(() => {
      // 加载样式
      styleUrl("apkManage");
      const row = route.query.row ? JSON.parse(route.query.row) : {};
      // 看路径有没有id，有就是编辑
      if (row.id) {
        titleName.value = t("apkManage.add.editTitle");
        cofficentForm.value = row;
        // 转换成字符串
        cofficentForm.value.isForce = cofficentForm.value.isForce + "";
        cofficentForm.value.modelName = row.model;
        busiDefaIdx.value = [row.model];
      }
    });
    // 表单参数
    let cofficentForm = ref({
      apkSize: "",
      downloadUrl: "",
      isForce: "",
      version: "",
      versionInfo: "",
      versionName: "",
      model: "",
      modelName: "",
    });
    // 路由
    const router = useRouter();
    // 点击提交
    const onSubmit = async () => {
      // 如果是编辑
      let res;
      if (cofficentForm.value.id) {
        res = await Api_postUpdateApk(cofficentForm.value);
      } else {
        res = await Api_postAddApk(cofficentForm.value);
      }
      const { data } = res;
      if (data.code === "00000") {
        showToast(data.message);
        setTimeout(() => {
          router.back();
        }, 500);
      }
    };
    // 型号选择框框
    const busiDefaIdx = ref(["301ch"]);
    const busiPopShow = ref(false);
    const busiPopList = reactive([
      {
        name: "301ch",
        id: "301ch",
      },
      {
        name: "301en",
        id: "301en",
      },
      {
        name: "301enOffline",
        id: "301enOffline",
      },
      {
        name: "320ch",
        id: "320ch",
      },
      {
        name: "320en",
        id: "320en",
      },
      {
        name: "320enOffline",
        id: "320enOffline",
      },
      {
        name: "280ch",
        id: "280ch",
      },
      {
        name: "280en",
        id: "280en",
      },
      {
        name: "P10ch",
        id: "P10ch",
      },
      {
        name: "P10en",
        id: "P10en",
      },
      {
        name: "P20ch",
        id: "P20ch",
      },
      {
        name: "P20en",
        id: "P20en",
      },
      {
        name: "P30ch",
        id: "P30ch",
      },
      {
        name: "P30en",
        id: "P30en",
      },
      {
        name: "SI320ch",
        id: "SI320ch",
      },
      {
        name: "SI320en",
        id: "SI320en",
      },
      {
        name: "SBC320ch",
        id: "SBC320ch",
      },
      {
        name: "SBC320en",
        id: "SBC320en",
      },
      {
        name: "SBM10ch",
        id: "SBM10ch",
      },
      {
        name: "SBM10en",
        id: "SBM10en",
      },
      {
        name: "EF210ch",
        id: "EF210ch",
      },
      {
        name: "EF210en",
        id: "EF210en",
      },
      {
        name: "lua",
        id: "lua",
      },
    ]);
    const busiPopFieldName = reactive({
      text: "name",
      value: "id",
    });
    // 点击型号
    const busiInpClk = () => {
      busiPopShow.value = true;
    };
    const busiPopConfirm = ({ selectedOptions }) => {
      cofficentForm.value.model = selectedOptions[0].id;
      cofficentForm.value.modelName = selectedOptions[0].name;
      busiPopShow.value = false;
    };
    return {
      onSubmit,
      cofficentForm,
      titleName,
      busiPopShow,
      busiPopList,
      busiPopFieldName,
      busiInpClk,
      busiPopConfirm,
      busiDefaIdx,
    };
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4d6add;
@card-bg: #ffffff;
@text-dark: #333;
@text-light: #666;
@border-color: #e4e7ec;
@shadow-color: rgba(77, 106, 221, 0.1);

.apk-form-page {
  min-height: 100vh;
  background-color: #f5f8ff;
  padding-bottom: 20px;
}

.form-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.apk-form {
  padding: 16px;
}

.form-card {
  background-color: @card-bg;
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px @shadow-color;
  overflow: hidden;

  .card-header {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #f9fbfe;
    border-bottom: 1px solid @border-color;

    .header-icon {
      font-size: 20px;
      color: @primary-color;
      margin-right: 10px;
    }

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: @text-dark;
    }
  }

  .card-content {
    padding: 0 16px;
  }
}

.van-field {
  padding: 16px 0;
  border-bottom: 1px solid @border-color;

  &:last-child {
    border-bottom: none;
  }

  :deep(.van-field__label) {
    font-weight: 500;
    color: @text-dark;
  }

  :deep(.van-field__control) {
    font-size: 15px;
    color: @text-dark;
  }

  .field-icon {
    font-size: 20px;
    color: @primary-color;
    margin-right: 10px;
  }

  .field-actions {
    display: flex;
    align-items: center;

    .clear-icon {
      color: #999;
      font-size: 18px;
      margin-right: 8px;
      padding: 4px;

      &:active {
        color: @primary-color;
      }
    }

    .arrow-icon {
      color: #999;
      font-size: 18px;
    }
  }

  .unit {
    color: @text-light;
    font-size: 14px;
    margin-left: 4px;
  }
}

.radio-group {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .van-radio {
    flex: 1;
    margin-right: 15px;

    &:last-child {
      margin-right: 0;
    }
  }

  .radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 8px;
    background-color: #f5f7fa;
    font-size: 14px;
    padding: 0 15px;

    .van-icon {
      margin-right: 5px;
      color: @primary-color;
    }
  }

  .van-radio__icon--checked + .radio-label {
    background-color: #e8ecff;
    color: @primary-color;
    font-weight: 500;
  }
}

.copy-btn {
  background: linear-gradient(to right, #4d6add, #6a89ff);
  color: white;
  border: none;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;

  .van-icon {
    margin-right: 4px;
  }
}

.form-actions {
  padding: 0 16px;
  margin-top: 20px;

  .submit-button {
    height: 50px;
    background: linear-gradient(to right, #4d6add, #6a89ff);
    border: none;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 6px 16px rgba(77, 106, 221, 0.3);

    .button-icon {
      margin-right: 8px;
    }
  }
}

.model-popup {
  border-radius: 16px 16px 0 0;
  overflow: hidden;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: @card-bg;
    border-bottom: 1px solid @border-color;

    .popup-title {
      font-size: 16px;
      font-weight: 600;
      color: @text-dark;
    }

    .close-icon {
      font-size: 20px;
      color: @text-light;
      padding: 4px;
    }
  }

  .picker-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    background-color: @card-bg;
    border-bottom: 1px solid @border-color;

    .cancel-btn {
      background-color: #f5f7fa;
      color: @text-dark;
      border: none;
    }

    .confirm-btn {
      background: linear-gradient(to right, #4d6add, #6a89ff);
      border: none;
    }
  }
}

.van-toast {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.7);

  .van-icon {
    margin-right: 8px;
    color: #07c160;
  }

  .toast-text {
    color: white;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .apk-form {
    padding: 12px;
  }

  .form-card {
    margin-bottom: 12px;

    .card-header {
      padding: 12px;
    }

    .card-content {
      padding: 0 12px;
    }
  }

  .van-field {
    padding: 12px 0;
  }

  .submit-button {
    height: 46px !important;
    font-size: 15px !important;
  }
}
</style>
