<template>
  <basic-container>
    <div class="main" v-loading="details.loadingObj.pageLoading">
      <!-- 车辆基本信息 -->
      <div class="pageTitle">
        <div>车辆基本信息</div>
      </div>

      <el-form inline class="mt20 pl20" ref="formRef" :model="details.form">
        <el-form-item
          v-for="item in details.carBasicForm"
          :label="item.label"
          label-width="160px"
          :class="item.type !== 5 ? 'w20' : 'w100'"
          :rules="item.rules"
          :prop="item.prop"
        >
          <!-- 普通输入框 -->
          <template v-if="item.type === 1">
            <el-input
              class="w100"
              :placeholder="`请输入${item.label}`"
              v-model="details.form[item.prop]"
              clearable
            ></el-input>
          </template>

          <!-- 数字输入框 -->
          <template v-else-if="item.type === 2">
            <el-input-number
              :controls="false"
              v-model="details.form[item.prop]"
              :placeholder="`请输入${item.label}`"
              :min="item.min || 0"
              :value-on-clear="0"
              :precision="item.precision || 0"
              class="w100"
              :disabled="item.disabled || false"
            ></el-input-number>
          </template>

          <!-- 下拉框 -->
          <template v-else-if="item.type === 3">
            <el-select
              v-model="details.form[item.prop]"
              :placeholder="`请选择${item.label}`"
              class="w100"
              clearable
              filterable
              @change="value => item.change && item.change(value)"
              :multiple="item.multiple || false"
            >
              <el-option
                v-for="val in item.checkarr"
                :key="val.value"
                :label="val.label"
                :value="val.value"
              />
            </el-select>
          </template>

          <!-- 时间选择 -->
          <template v-else-if="item.type === 4">
            <el-date-picker
              v-model="details.form[item.prop]"
              type="date"
              :placeholder="`请选择${item.label}`"
              class="w100"
              :default-value="new Date()"
              clearable
            />
          </template>

          <!-- 备注 -->
          <template v-else-if="item.type === 5">
            <el-input
              type="textarea"
              v-model="details.form[item.prop]"
              clearable
              :placeholder="`请选择${item.label}`"
              class="w100"
            />
          </template>
        </el-form-item>
      </el-form>

      <!-- 相关图片 -->
      <div class="pageTitle">
        <div>相关图片</div>
      </div>

      <!-- 图片类型 -->
      <div class="mt20 pl20 imgContainer">
        <div v-for="item in details.imgArr" :key="item.label" class="imgItem">
          <!-- 上传组件 -->
          <el-upload
            v-model:file-list="item.imgList"
            list-type="picture"
            :action="doubledCount"
            :before-upload="beforeAvatarUpload"
            :on-success="res => handleAvatarSuccess(res, item)"
            :headers="headers"
            multiple
            :show-file-list="false"
          >
            <template #default>
              <div class="pageTitle title mb20">
                <span class="mr20" @click.stop="() => {}">
                  {{ item.label }}
                </span>

                <el-button type="primary" icon="CirclePlus"> 添 加 </el-button>

                <el-button icon="Delete" @click.stop="() => handleEmpty(item)"> 清 空 </el-button>
              </div>
            </template>
          </el-upload>

          <div class="imgRow">
            <div v-for="(value, index) in item.imgList" :key="value.url">
              <el-image
                class="img"
                :src="value.url"
                v-loading="!value.imgUrl"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="item.imgList.map(val => val.imgUrl)"
                :initial-index="index"
                fit="cover"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 底部控件 -->
      <div class="footer_container">
        <el-button icon="CircleClose"> 关 闭 </el-button>
        <el-button type="primary" icon="Position" @click="handleSubmit"> 提 交 </el-button>
      </div>
    </div>
  </basic-container>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js';
import { getToken } from '@/utils/auth';
import { getDictionaryBiz } from '@/api/system/dict';
import { deepClone, debounce, getObjType, isNumber } from '@/utils/util';
import { add, getDictionary, getDetail, update } from '@/api/basicdata/basicdataVehicle';
import { getList } from '@/api/basicdata/basicdataVehicleInfo';
import { getOwn } from '@/api/basicdata/basicdataDriverArtery';
import { useRoute, uesRouter } from 'vue-router';

const details = reactive({
  carBasicForm: [
    {
      label: '车牌号',
      prop: 'vehicleNub',
      type: 1,
      checkarr: [],
      rules: [
        {
          required: true,
          message: '请输入车牌号',
          trigger: ['blur', 'change'],
        },
      ],
    },
    {
      label: '车辆所属人',
      prop: 'vehicleOwners',
      type: 3,
      multiple: true,
      checkarr: [],
    },
    {
      label: '车辆来源',
      prop: 'vehicleSource',
      type: 1,
      checkarr: [],
    },
    {
      label: '是否车头',
      prop: 'isHead',
      type: 3,
      checkarr: [
        {
          label: '是',
          value: '1',
        },
        {
          label: '否',
          value: '0',
        },
      ],
    },
    {
      label: '挂车类型',
      prop: 'trailerType',
      type: 3,
      checkarr: [],
    },
    {
      label: '车辆类型',
      prop: 'vehicleModel',
      type: 3,
      checkarr: [],
      change(value) {
        console.log('value :>> ', value);
        console.log('this :>> ', this);
        const { vehicleCommander, vehicleHeight, approvedVolume, vehicleQuality, curbWeight } =
          this.checkarr.find(val => val.value === value) || {};

        details.form.vehicleCommander = isNumber(vehicleCommander) ? Number(vehicleCommander) : 0;
        details.form.vehicleHeight = isNumber(vehicleHeight) ? Number(vehicleHeight) : 0;
        details.form.approvedVolume = isNumber(approvedVolume) ? Number(approvedVolume) : 0;
        details.form.vehicleQuality = isNumber(vehicleQuality) ? Number(vehicleQuality) : 0;
        details.form.curbWeight = isNumber(curbWeight) ? Number(curbWeight) : 0;
      },
    },
    {
      label: '车厢类型',
      prop: 'carType',
      type: 3,
      checkarr: [],
    },
    {
      label: '车长(M)',
      prop: 'vehicleCommander',
      type: 2,
      checkarr: [],
      precision: 2,
      disabled: true,
    },
    {
      label: '外廓高(M)',
      prop: 'vehicleHeight',
      type: 2,
      checkarr: [],
      precision: 2,
      disabled: true,
    },
    {
      label: '付款方式',
      prop: 'paymentMethod',
      type: 3,
      checkarr: [],
    },
    {
      label: '核定体积',
      prop: 'approvedVolume',
      type: 2,
      checkarr: [],
      precision: 2,
      disabled: true,
    },
    {
      label: '车牌颜色',
      prop: 'licensePlateColor',
      type: 3,
      checkarr: [],
    },
    {
      label: '车身颜色',
      prop: 'vehicleColor',
      type: 3,
      checkarr: [],
    },
    {
      label: '能源类型',
      prop: 'energyType',
      type: 3,
      checkarr: [],
    },
    {
      label: '车牌类型',
      prop: 'licensePlateType',
      type: 3,
      checkarr: [],
    },
    {
      label: '品牌型号',
      prop: 'vehicleBrand',
      type: 3,
      checkarr: [],
    },
    {
      label: '车辆代号',
      prop: 'vehicleCode',
      type: 1,
      checkarr: [],
    },
    {
      label: '发动机型号',
      prop: 'engineCode',
      type: 1,
      checkarr: [],
    },
    {
      label: '车辆总质量(T)',
      prop: 'vehicleQuality',
      type: 2,
      checkarr: [],
      precision: 2,
      disabled: true,
    },
    {
      label: '整备质量(T)',
      prop: 'curbWeight',
      type: 2,
      checkarr: [],
      precision: 2,
      disabled: true,
    },
    {
      label: '载荷质量(T)',
      prop: 'loadMass',
      type: 2,
      checkarr: [],
      precision: 2,
    },
    {
      label: '外廓宽(M)',
      prop: 'outerWidth',
      type: 2,
      checkarr: [],
      precision: 2,
    },
    {
      label: '到期时间',
      prop: 'expirationTime',
      type: 4,
      checkarr: [],
    },
    {
      label: '道路运输证号',
      prop: 'roadTransport',
      type: 1,
      checkarr: [],
    },
    {
      label: '经营许可证号',
      prop: 'businessLicense',
      type: 1,
      checkarr: [],
    },
    {
      label: '车辆所属单位',
      prop: 'vehicleUnit',
      type: 1,
      checkarr: [],
    },
    {
      label: '车辆所属单位电话',
      prop: 'vehicleUnitPhone',
      type: 1,
      checkarr: [],
    },
    {
      label: '车辆所属人手机号',
      prop: 'vehicleOwnerPhone',
      type: 1,
      checkarr: [],
    },
    {
      label: '车辆所属人身份证号',
      prop: 'vehicleOwnerCard',
      type: 1,
      checkarr: [],
    },
    {
      label: '承运商',
      prop: 'carrierId',
      type: 3,
      checkarr: [],
      rules: [
        {
          required: true,
          message: '请选择承运商',
          trigger: ['blur', 'change'],
        },
      ],
    },
    {
      label: '车辆年审时间',
      prop: 'reviewTime',
      type: 4,
      checkarr: [],
    },
    {
      label: '车辆年审有效期',
      prop: 'reviewValidity',
      type: 4,
      checkarr: [],
    },
    {
      label: '车辆保险开始时间',
      prop: 'insuranceStartTime',
      type: 4,
      checkarr: [],
    },
    {
      label: '车辆保险结束时间',
      prop: 'insuranceEndTime',
      type: 4,
      checkarr: [],
    },
    {
      label: '有无车身广告',
      prop: 'bodyAdvertising',
      type: 3,
      checkarr: [
        {
          label: '是',
          value: '1',
        },
        {
          label: '否',
          value: '0',
        },
      ],
    },
    {
      label: '车身广告更新时间',
      prop: 'advertisementsNewTimes',
      type: 4,
      checkarr: [],
    },
    {
      label: '是否有GPS',
      prop: 'withGps',
      type: 3,
      checkarr: [
        {
          label: '是',
          value: '1',
        },
        {
          label: '否',
          value: '0',
        },
      ],
    },
    {
      label: 'GPS服务商',
      prop: 'gpsServiceProvider',
      type: 1,
      checkarr: [],
    },
    {
      label: 'GPS型号',
      prop: 'gpsModel',
      type: 1,
      checkarr: [],
    },
    {
      label: '备注',
      prop: 'notes',
      type: 5,
      checkarr: [],
    },
  ],
  imgArr: [
    { label: '行驶证正面照片', imgList: [], prop: 'drivingLicensePhoto' },
    { label: '行驶证反面照片', imgList: [], prop: 'drivingLicensePhotoBack' },
    { label: '许可证照片', imgList: [], prop: 'licensePhoto' },
    { label: '车辆照片(最新)', imgList: [], prop: 'vehiclePhoto' },
    { label: '车尾照片', imgList: [], prop: 'vehicleRearPhoto' },
    { label: '道理运输照片', imgList: [], prop: 'roadTransportPhoto' },
    { label: '人车合影照片', imgList: [], prop: 'vehiclePeoplePhoto' },
    { label: '保险卡照片', imgList: [], prop: 'insuranceCardPhoto' },
  ],
  form: {},
  // loading
  loadingObj: {
    /** 页面 */
    pageLoading: false,
  },
  pageInfo: {
    type: 'add' as 'add' | 'edit' | 'view',
    id: '',
  },
});

// 组件实例
const formRef = ref();

// router
const $router = useRouter();
const $route = useRoute();

// 处理数据
const handleData = (key, res) => {
  const { code, data } = res.data;
  if (code !== 200) return;
  for (let i = 0; i < details.carBasicForm.length; i++) {
    const value = details.carBasicForm[i];

    if (value.label === key)
      return (value.checkarr =
        getObjType(data) === 'array'
          ? data.map(val => {
              val.label = val.dictValue;
              val.value = val.dictKey;
              return val;
            })
          : []);
  }
};

// 请求下拉框码值
const initData = async () => {
  // 请求车辆类型
  const handleCarModel = async () => {
    const [res1, res2] = await Promise.all([getList(), getDictionaryBiz('basic_vehicle_model')]);

    const { code: code1, data: data1 } = res1.data;
    const { code: code2, data: data2 } = res2.data;

    if (
      code1 !== 200 ||
      code2 !== 200 ||
      getObjType(data1) !== 'array' ||
      getObjType(data2) !== 'array'
    )
      return;

    // 处理数据
    for (let i = 0; i < data1.length; i++) {
      const value = data1[i];

      for (let j = 0; j < data2.length; j++) {
        const item = data2[j];

        if (value.vehicleModel !== item.dictKey) continue;
        value.label = item.dictValue;
        value.value = item.dictKey;
        break;
      }
    }

    // 赋值
    for (let i = 0; i < details.carBasicForm.length; i++) {
      const value = details.carBasicForm[i];

      if (value.label !== '车辆类型') continue;
      value.checkarr = data1;
      break;
    }
  };

  // 并发请求
  await Promise.all([
    // 车辆来源
    getDictionaryBiz('basic_vehicle_source').then(res => handleData('车辆来源', res)),
    // 是否车头
    getDictionaryBiz('yes_no').then(res => handleData('是否车头', res)),
    // 挂车类型
    getDictionaryBiz('basic_trailer_type').then(res => handleData('挂车类型', res)),
    // 车厢类型
    getDictionaryBiz('basic_car_type').then(res => handleData('车厢类型', res)),
    // 付款方式
    getDictionaryBiz('basicdata_vehicle_paymentmethod').then(res => handleData('付款方式', res)),
    // 车牌颜色
    getDictionaryBiz('basic_plate_color').then(res => handleData('车牌颜色', res)),
    // 车身颜色
    getDictionaryBiz('basic_vehicle_color').then(res => handleData('车身颜色', res)),
    // 能源类型
    getDictionaryBiz('basic_energy_type').then(res => handleData('能源类型', res)),
    // 车牌类型
    getDictionaryBiz('basic_plate_type').then(res => handleData('车牌类型', res)),
    // 车辆类型
    handleCarModel(),
    // 承运商
    getDictionary().then(res => {
      const { code, data } = res.data;
      if (code !== 200) return;
      for (let i = 0; i < details.carBasicForm.length; i++) {
        const value = details.carBasicForm[i];

        if (value.label === '承运商')
          return (value.checkarr =
            getObjType(data) === 'array'
              ? data.map(val => {
                  val.label = val.carrierName;
                  val.value = val.id;
                  return val;
                })
              : []);
      }
    }),
    // 驾驶人
    getOwn().then(res => {
      const { code, data } = res.data;
      if (code !== 200) return;
      for (let i = 0; i < details.carBasicForm.length; i++) {
        const value = details.carBasicForm[i];

        if (value.label === '车辆所属人')
          return (value.checkarr =
            getObjType(data) === 'array'
              ? data.map(val => {
                  val.label = val.name;
                  val.value = val.id;
                  return val;
                })
              : []);
      }
    }),
  ]);
  details.pageInfo = $route.query;

  for (let i = 0; i < details.carBasicForm.length; i++) {
    const value = details.carBasicForm[i];

    details.form[value.prop] = value.type === 2 ? 0 : '';
  }

  if (details.pageInfo.type === 'add') return;

  const res = await getDetail(details.pageInfo.id);
  const { code, data } = res.data;
  if (code !== 200) return;
  // details.form = data;

  for (let i = 0; i < details.carBasicForm.length; i++) {
    const value = details.carBasicForm[i];

    if (value.type === 3 && value.multiple) {
      details.form[value.prop] = details.form[value.prop]
        ? details.form[value.prop].split(',')
        : [];
      continue;
    }

    details.form[value.prop] = data[value.prop] || '';
  }

  for (let i = 0; i < details.imgArr.length; i++) {
    const value = details.imgArr[i];

    let _imgList = [];
    const _value = data[value.prop];

    value.imgList = _value
      ? _value.split(',').map(val => {
          return { url: val, imgUrl: val };
        })
      : [];
  }
};

initData();

// 图片上传接口
const doubledCount = computed(() => {
  return '/api/blade-resource/oss/endpoint/put-file';
});

// 上传图片规则
const beforeAvatarUpload = async rawFile => {
  console.log(rawFile);
  if (rawFile.type !== 'image/png' && rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片格式只能为 png/jpg!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能大于10MB!');
    return false;
  }
  const res = await compressImageBlob(rawFile);
  return res;
};

// 图片上传必须携带TOKEN
const headers = computed(() => {
  return { 'Blade-Auth': 'Bearer ' + getToken() };
});

// 图片上传成功
const handleAvatarSuccess = (response, item) => {
  for (let i = 0; i < item.imgList.length; i++) {
    const value = item.imgList[i];
    console.log('value :>> ', value);
    value.imgUrl =
      value.response && value.response.code === 200 ? value.response.data.link : value.imgUrl || '';
  }
  ElMessage.success('上传成功');
};

/** 确认清空 */
const handleEmpty = item => {
  if (item.imgList.length === 0) return ElMessage.warning('没有图片可以清空');

  ElMessageBox.confirm('确定要清空吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      item.imgList = [];
    })
    .catch(() => {});
};

/** 提交 */
const handleSubmit = async () => {
  try {
    const _flag = await formRef.value.validate();

    if (!_flag) return;
    details.loadingObj.pageLoading = true;

    const submitData = { ...details.form };

    for (let i = 0; i < details.carBasicForm.length; i++) {
      const value = details.carBasicForm[i];

      if (value.type === 3 && value.multiple) {
        submitData[value.prop] = details.form[value.prop].join(',');
      }
    }

    for (let i = 0; i < details.imgArr.length; i++) {
      const value = details.imgArr[i];

      let _imgList = [];

      for (let j = 0; j < value.imgList.length; j++) {
        const item = value.imgList[j];

        if (!item.imgUrl || /'blob'/.test(item.imgUrl))
          return ElMessage.warning('存在异常图片，请等待上传完毕或移除');
        _imgList.push(item.imgUrl);
      }

      submitData[value.prop] = _imgList.join(',');
    }

    details.pageInfo.id && (submitData.id = details.pageInfo.id);

    const res = details.pageInfo.type === 'add' ? await add(submitData) : await update(submitData);
    const { code, data } = res.data;
    if (code !== 200) return;
    console.log('details.form :>> ', details.form);
    console.log('_flag :>> ', _flag);
  } catch (error) {
    console.log('error :>> ', error);
  } finally {
    details.loadingObj.pageLoading = false;
  }
};
</script>

<style lang="scss" scoped>
.main {
  padding: 20px;
}

.pl20 {
  padding-left: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.pageTitle {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;

  &::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 4px;
    background: #d3832a;
    height: 18px;
    margin-right: 10px;
  }
}

:deep(.el-form) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

// 相关图片
.imgContainer {
  display: flex;
  flex-wrap: wrap;

  .imgItem {
    min-width: 380px;
    margin-bottom: 20px;
    margin-right: 20px;

    .title {
      font-weight: bold;
      // margin-bottom: 20px;
    }

    .imgRow {
      display: flex;
      flex-wrap: wrap;
    }

    .img {
      margin: 10px;
      border-radius: 5px;
      width: 100px;
      height: 100px;
    }
  }
}

.footer_container {
  text-align: center;
}

.w20 {
  width: 22%;
}

.w100 {
  width: 100% !important;
}

.mr20 {
  margin-right: 20px;
}

:deep(.el-input__inner) {
  text-align: left;
}

:deep(.el-upload-list) {
  display: block;
  & > div {
    display: flex;
  }

  & > li {
    display: flex;
  }
}

:deep(.el-upload--picture-card) {
  position: absolute;
  top: 0;
  left: 0;
}

:deep(.el-upload-list) {
  &::before {
    content: '';
    display: block;
    width: var(--el-upload-list-picture-card-size);
    height: var(--el-upload-list-picture-card-size);
    margin-bottom: 10px;
  }
}

// 清空按钮
.errBtn {
  background: #ff3e3e;
  border-color: #fff;
  color: #fff;

  &:hover {
    background: #ff5c5c;
  }
}

.addBtn {
  background: #1cd66c;
  border-color: #fff;
  color: #fff;

  &:hover {
    background: #ff5c5c;
  }
}
</style>
