<template>
  <div>
    <el-card class="!border-none" shadow="never">
      <el-page-header content="用户详情" @back="$router.back()" />
    </el-card>
    <el-card class="mt-4 !border-none" shadow="never">
      <el-form ref="formRef" :model="formData" label-width="84px">
        <div style="font-size: 1.2rem; margin: 10px 0">基本信息创建</div>
        <div class="headimg">
          <el-upload
            v-model="formData.avatar"
            class="avatar-uploader-head"
            :disabled="flag"
            :data="{ cid: 1 }"
            :headers="{ Token: userStore.token }"
            :action="base_url + '/upload/image'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessAvatar"
          >
            <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </div>
        <el-col class="pt-6 !border-none">
          <el-row>
            <el-col :span="11">
              <el-form-item label="姓名" prop="nickname">
                <el-input
                  v-model="formData.nickname"
                  :disabled="flag"
                  placeholder="请输入姓名"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="formData.sex"
                  :disabled="flag"
                  placeholder="请选择性别"
                  :style="{ width: '100%' }"
                >
                  <el-option label="男" :value="1" />
                  <el-option label="女" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="身份证号" prop="id_card">
                <el-input
                  v-model="formData.id_card"
                  :disabled="flag"
                  placeholder="请输入身份证号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13">
              <el-form-item label="联系电话" prop="account">
                <el-input
                  v-model="formData.account"
                  placeholder="请输入联系电话"
                  :disabled="flag"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="省" prop="province" style="flex: 1">
              <el-select
                v-model="formData.province"
                placeholder="请选择省"
                :disabled="flag"
                clearable
                @change="province_change"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.provinceOptions"
                  :key="index"
                  :label="item.province_name"
                  :value="item.province_code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市" prop="city" style="flex: 1">
              <el-select
                v-model="formData.city"
                placeholder="请选择市"
                clearable
                :disabled="flag"
                @change="city_change"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.cityOptions"
                  :key="index"
                  :label="item.city_name"
                  :value="item.city_code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="区" prop="area" style="flex: 1">
              <el-select
                v-model="formData.area"
                placeholder="请选择区"
                :disabled="flag"
                clearable
                @change="area_change"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.areaOptions"
                  :key="index"
                  :label="item.area_name"
                  :value="item.area_code"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="镇" prop="street" style="flex: 1">
              <el-select
                v-model="formData.street"
                placeholder="请选择镇"
                :disabled="flag"
                clearable
                @change="street_change"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.streetOptions"
                  :key="index"
                  :label="item.street_name"
                  :value="item.street_code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="村社小队" prop="address" style="flex: 1.5">
              <el-input
                v-model="formData.address"
                :disabled="flag"
                placeholder="请输入村社小队"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-row>
        </el-col>

        <el-col :span="24" style="margin-top: 1vh">
          <!-- <el-row>
            <el-col :span="12" v-if="mode == 'initiate' || formData.party_b">
              <el-form-item label="签约方" prop="field130">
                <el-input
                  v-model="formData.party_b_name"
                  placeholder="请选择签约方"
                  clearable
                  :style="{ width: '100%' }"
                  @click="isCompany = true"
                  @clear="clearPartyA"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-col>
        <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div>
        <div style="display: flex; justify-content: space-between">
          <div>
            <el-form-item label="身份证" prop="id_card">
              <el-upload
                v-model="formData.qualification.id_card"
                :disabled="flag"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessIdA"
              >
                <img
                  v-if="formData.qualification.id_card"
                  :src="formData.qualification.id_card"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
              <el-upload
                v-model="formData.qualification.id_card_b"
                :disabled="flag"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessIdB"
              >
                <img
                  v-if="formData.qualification.id_card_b"
                  :src="formData.qualification.id_card_b"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="行驶证" prop="car_card">
              <el-upload
                v-model="formData.qualification.car_card"
                :disabled="flag"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessCarA"
              >
                <img
                  v-if="formData.qualification.car_card"
                  :src="formData.qualification.car_card"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
              <el-upload
                v-model="formData.qualification.car_card_b"
                :disabled="flag"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessCarB"
                :before-upload="beforeAvatarUpload_two"
              >
                <img
                  v-if="formData.qualification.car_card_b"
                  :src="formData.qualification.car_card_b"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="银行卡号" prop="bank_account">
              <el-upload
                v-model="formData.qualification.bank_account"
                :disabled="flag"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessBankA"
                :before-upload="beforeAvatarUpload_three"
              >
                <img
                  v-if="formData.qualification.bank_account"
                  :src="formData.qualification.bank_account"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
              <el-upload
                v-model="formData.qualification.bank_account_b"
                :disabled="flag"
                class="avatar-uploader pl-3"
                :data="{ cid: 1 }"
                :headers="{ Token: userStore.token }"
                :action="base_url + '/upload/image'"
                :show-file-list="false"
                :on-success="handleAvatarSuccessBankB"
                :before-upload="beforeAvatarUpload_three"
              >
                <img
                  v-if="formData.qualification.bank_account_b"
                  :src="formData.qualification.bank_account_b"
                  class="avatar"
                />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
          </div>
        </div>
        <template v-if="disabledPartyA">
          <el-col :span="24">
            <el-row>
              <el-col :span="12">
                <el-form-item label="签约姓名" prop="name">
                  <el-input
                    v-model="formData.nickname"
                    placeholder="请输入签约姓名"
                    :disabled="true"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="sex">
                  <el-input
                    placeholder="请输入性别"
                    :disabled="true"
                    clearable
                    :style="{ width: '100%' }"
                    :value="formData.sex == '1' ? '男' : '女'"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号" prop="id_card">
                  <el-input
                    v-model="formData.id_card"
                    placeholder="请输入身份证号"
                    :disabled="true"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话" prop="account">
                  <el-input
                    v-model="formData.account"
                    placeholder="请输入联系电话"
                    :disabled="true"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formData.name">
                <el-form-item label="账号">
                  <el-input
                    v-model="formData.account"
                    :disabled="true"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="formData.name">
                <el-form-item label="初始密码" prop="password">
                  <el-input
                    :model-value="'m' + formData.account"
                    :disabled="true"
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
        </template>
        <el-col :span="24" v-if="mode == 'uplode'">
          <el-form-item label="合同上传" prop="field127">
            <el-upload
              :headers="{ Token: userStore.token }"
              v-model:file-list="fileList"
              class="upload-demo"
              :action="base_url + '/upload/file'"
              :on-success="handleAvatarSuccess_four"
              multiple
              :limit="1"
            >
              <el-button type="primary">上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24" v-if="formData.contract">
          <el-form-item label="合同地址">
            <el-link
              type="success"
              :href="formData.contract.file"
              target="_blank"
              >在线查看</el-link
            >
          </el-form-item>
        </el-col> -->

        <el-col :span="24" v-if="mode == 'initiate'" class="pt-6">
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同类型" prop="contract_type">
                <el-col :span="24">
                  <el-select
                    v-model="formData.contract_type"
                    placeholder="请选择合同类型"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in datas.contract_type"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="field139">
                <el-button
                  type="primary"
                  v-if="mode == 'initiate'"
                  @click="initiateContactFn"
                  >发起合同</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-card>

    <account-adjust
      v-model:show="adjustState.show"
      :value="adjustState.value"
      @confirm="handleConfirmAdjust"
    />
    <!-- <el-dialog v-model="isCompany" title="选择签约方" width="60%">
      <DialogIndex @customEvent="customEvent" />
    </el-dialog> -->
  </div>
</template>

<script lang="ts" setup name="consumerDetail">
import type {
  FormInstance,
  UploadProps,
  ElMessage,
  UploadUserFile,
} from "element-plus";
import {
  adjustMoney,
  getUserDetail,
  userEdit,
  creatContact,
  initiateContact,
  upContact,
} from "@/api/consumer";
import {
  apiCityList,
  apiAreaList,
  apiStreetList,
  apiProvinceList,
} from "@/api/common";
import { dictDataLists } from "@/api/setting/dict";
import DialogIndex from "@/components/dialog_index.vue";
import { isEmpty } from "@/utils/util";
import AccountAdjust from "../components/account-adjust.vue";
import useMultipleTabs from "@/hooks/useMultipleTabs";
import useUserStore from "@/stores/modules/user";
import feedback from "@/utils/feedback";
import { inject } from "vue";
const base_url: any = inject("base_url");
const { removeTab } = useMultipleTabs();
const router = useRouter();
const route = useRoute();
const flag = ref(true);
const formData = reactive({
  id: "",
  sex: "",
  id_card: "",
  nickname: "",
  province: "",
  city: "",
  area: "",
  street: "",
  address: "",
  account: "",
  is_contract: 0,
  // 签约方
  party_b_name: "",
  party_b: "",
  qualification: {
    id_card: "",
    id_card_b: "",
    car_card: "",
    car_card_b: "",
    bank_account: "",
    bank_account_b: "",
  },
  // 合同类型
  contract_type: "",
  file: "",
  avatar: "",
  multipoint_login: 1,
  contract: {
    url: "",
  },
});
const disabledPartyA = ref(false);

const adjustState = reactive({
  show: false,
  value: "",
});
// 字典信息
const datas: any = reactive({
  provinceOptions: [],
  cityOptions: [],
  areaOptions: [],
  streetOptions: [],
  dictTypeLists: [],
  contract_type: [],
  contract: [],
});

const formRef = shallowRef<FormInstance>();
const isEdit = ref(false);

const isCompany = ref(false);
const userStore = useUserStore();

function customEvent(data: any) {
  isCompany.value = false;
  formData.party_b = data.id;
  formData.party_b_name = data.company_name;
  disabledPartyA.value = true;
}
function clearPartyA() {
  formData.party_b = "";
  formData.party_b_name = "";
}
const getcontract_type = async () => {
  const data = await dictDataLists({ type_id: 7 });
  datas["contract_type"] = data["lists"];
};
const mode = ref(null);
getcontract_type();
const getDetails = async () => {
  const data = await getUserDetail({
    id: route.query.id,
  });
  Object.keys(formData).forEach((key) => {
    //@ts-ignore
    formData[key] = data[key];
  });
  mode.value = route.query.mode;

  formData.contract_type = data.contract?.contract_type;
  formData.party_b_name = data.contract?.party_b_name;
  formData.party_b = data.contract?.party_b;
  formData.file = data.contract?.file;
  data.contract
    ? (fileList.value[0] = {
        url: data.contract?.file,
        name: data.contract ?? "合同文件",
      })
    : "";
  await getCityList();
  await getAreaList();
  await getStreetList();
};

const handleEdit = async (value: string, field: string) => {
  if (isEmpty(value)) return;
  await userEdit({
    id: route.query.id,
    field,
    value,
  });
  getDetails();
};
const fileList = ref<UploadUserFile[]>([]);
// 图片上传成功返回的url
const handleAvatarSuccessIdA: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.id_card = response.data.uri;
};
const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.avatar = response.data.uri;
};
const handleAvatarSuccessIdB: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.id_card_b = response.data.uri;
};
const handleAvatarSuccessCarA: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.car_card = response.data.uri;
};
const handleAvatarSuccessCarB: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.car_card_b = response.data.uri;
};
const beforeAvatarUpload_two: UploadProps["beforeUpload"] = (rawFile) => {
  return true;
};
const handleAvatarSuccessBankA: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.bank_account = response.data.uri;
};
const handleAvatarSuccessBankB: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.qualification.bank_account_b = response.data.uri;
};
const handleAvatarSuccess_four: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  if (response.code == 0) {
    ElMessage.error(response.msg);
    return;
  }
  formData.file = response.data.uri;
  upContact({ file: formData.file, id: route.query.mdoeid }).then((res) => [
    (mode.value = false),
  ]);
};
const beforeAvatarUpload_three: UploadProps["beforeUpload"] = (rawFile) => {
  return true;
};

//获取省份
function province_change(value: string) {
  getCityList();
}
function city_change(value: string) {
  getAreaList();
}
function area_change(value: string) {
  getStreetList();
}
function street_change(value: string) {
  formData.street = value;
}
const getProvinceList = async () => {
  const data = await apiProvinceList({});
  datas["provinceOptions"] = data;
};
const getCityList = async () => {
  const data = await apiCityList({ city: formData.province });
  datas["cityOptions"] = data;
};
const getAreaList = async () => {
  const data = await apiAreaList({ area: formData.city });
  datas["areaOptions"] = data;
};
const getStreetList = async () => {
  const data = await apiStreetList({ street: formData.area });
  datas["streetOptions"] = data;
};
const handleAdjust = (value: string) => {
  adjustState.show = true;
  adjustState.value = value;
};
const handleConfirmAdjust = async (value: any) => {
  await adjustMoney({ user_id: route.query.id, ...value });
  adjustState.show = false;
  getDetails();
};
// 发起合同
const initiateContactFn = () => {
  const { contract_type } = formData;
  //   console.log(party_b, contract_type);
  initiateContact({ party_b: route.query.id, contract_type, type: 2 }).then(
    (res) => {
      feedback.msgSuccess("发起成功，等待平台风控部上传合同");
    }
  );
};
getDetails();
getProvinceList();
console.log(formData);
</script>

<style lang="scss">
.headimg {
  margin-top: 24px;
  width: 6.2vw;
  height: 7.2vw;
  float: left;
  overflow: hidden;
}

.avatar-uploader-head .el-upload {
  width: 6.2vw;
  height: 7.2vw;
  background-color: #fff;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload {
  width: 9.9vw;
  height: 6.3vw;
  background-color: #fff;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
