<script setup lang="ts">
import {
  type FieldValues,
  type PlusColumn,
  PlusDescriptions,
  PlusDialog,
  PlusDialogForm
} from "plus-pro-components";
import { useRoute } from "vue-router";
import { onMounted, reactive, ref, toRefs } from "vue";
import {
  merchantFollowInfoDetail,
  merchantFollowInfoList,
  updateStartLevel
} from "@/api/order";
import { getDictionary } from "@/utils/dictionary";
import { ElMessage, FormRules } from "element-plus";

defineOptions({
  name: "OrderLoanDetail"
});

interface State {
  dialogVisible: boolean;
  detailsVisible: boolean;
  confirmLoading: boolean;
  form: {};
  detailForm: {
    list: any;
  };
  rules: FormRules;
}

const state = reactive<State>({
  dialogVisible: false,
  detailsVisible: false,
  confirmLoading: false,
  form: {},
  detailForm: {
    list: []
  },
  rules: {
    starLevel: [
      { required: true, message: "请选择客户星级", trigger: "change" }
    ]
  }
});

const {
  form,
  detailForm,
  confirmLoading,
  rules,
  dialogVisible,
  detailsVisible
} = toRefs(state);

const route = useRoute();
console.log(route.query.id);

onMounted(() => {
  getDetail(route.query.id as string);
});

const getDetail = async (id: string) => {
  let res = await merchantFollowInfoDetail({ id });
  data.value = Object.assign(
    {},
    res.data.custAssertInfoVO,
    res.data.orderInfoVO
  );
  console.log(data.value);
};

const handleOpenFormDialog = () => {
  form.value = {};
  form.value.orderId = route.query.orderNo;
  dialogVisible.value = true;
};

const handleOpenDetailDialog = () => {
  detailForm.value = data.value;
  detailForm.value.list = [];
  merchantFollowInfoList({ orderNo: route.query.orderNo }).then(res => {
    detailForm.value.list = res.data;
  });
  detailsVisible.value = true;
};

const handleClose = () => {};

const handleSubmit = async (values: FieldValues) => {
  confirmLoading.value = true;
  try {
    let params = form.value;
    console.log(params);
    let res = await updateStartLevel(params);
    if (res.code === 0) {
      ElMessage.success("修改成功");
      confirmLoading.value = false;
      dialogVisible.value = false;
    } else {
      ElMessage.error(res.msg);
    }
  } finally {
    confirmLoading.value = false;
  }
};

const data = ref();

const columns: PlusColumn[] = [
  { label: "姓名:", prop: "userName" },
  { label: "年龄:", prop: "age" },
  { label: "性别:", prop: "userSex" },
  { label: "客户星级:", prop: "star", formatter: val => `${val ? val : ""}星` },
  { label: "需求资金:", prop: "loanAmount" },
  { label: "需求周期:", prop: "loanTerm", formatter: val => `${val}个月` }
];

const columns2: PlusColumn[] = [
  { label: "电话:", prop: "phone" },
  { label: "微信:", prop: "wxCode" }
];

const columns3: PlusColumn[] = [
  { label: "工作所在地:", prop: "city" },
  {
    label: "文化程度:",
    prop: "education",
    formatter: val => getDictionary("CultureLevel", val)
  },
  {
    label: "社保情况:",
    prop: "socialSecurity",
    formatter: val => getDictionary("SociaSecurity", val)
  },
  {
    label: "公积金情况:",
    prop: "fund",
    formatter: val => getDictionary("PublicFund", val)
  },
  {
    label: "芝麻分区间:",
    prop: "zhima",
    formatter: val => getDictionary("ZhiMa", val)
  }
];

const columns4: PlusColumn[] = [
  {
    label: "职业:",
    prop: "career",
    formatter: val => getDictionary("ProfessionList", val)
  },
  {
    label: "月收入:",
    prop: "monthIncome",
    formatter: val => getDictionary("MouthIncome", val)
  },
  {
    label: "工资支付方式:",
    prop: "salaryType",
    formatter: val => getDictionary("WorkPayment", val)
  }
];

const columns5: PlusColumn[] = [
  {
    label: "车产:",
    prop: "carSituation",
    formatter: val => getDictionary("CarSituation", val)
  },
  {
    label: "房产:",
    prop: "houseSituation",
    formatter: val => getDictionary("HouseSituation", val)
  },
  {
    label: "寿险保单:",
    prop: "insurance",
    formatter: val => getDictionary("Insurance", val)
  },
  { label: "车牌号:", prop: "carNo" },
  { label: "房产所在城市:", prop: "houseCity" },
  {
    label: "购车方式:",
    prop: "buyCarWay",
    formatter: val => getDictionary("CarBuyType", val)
  },
  {
    label: "购房方式:",
    prop: "housePurchaseMethod",
    formatter: val => getDictionary("HouseBuyType", val)
  }
];

const formColumns: PlusColumn[] = [
  {
    label: "客户星级",
    prop: "starLevel",
    valueType: "select",
    tooltip: {
      content:
        "<span>客户星级说明</span></br>" +
        "<span>0星：未接通</span></br>" +
        "<span>1星：接通但无办理意向</span></br>" +
        "<span>2星：有意向但无可贷点</span></br>" +
        "<span>3星：有可贷点但资质一般</span></br>" +
        "<span>4星：有可贷点且条件较好</span></br>" +
        "<span>5星：马上需要或条件优质</span></br>",
      rawContent: true
    },
    options: [
      { label: "1星", value: 1 },
      { label: "2星", value: 2 },
      { label: "3星", value: 3 },
      { label: "4星", value: 4 },
      { label: "5星", value: 5 }
    ]
  },
  {
    label: "备注",
    prop: "remark",
    valueType: "input",
    fieldProps: {
      type: "textarea",
      rows: 4,
      maxlength: 200,
      showWordLimit: true
    }
  }
];

const detailsColumns: PlusColumn[] = [
  {
    label: "姓名：",
    prop: "userName"
  },
  {
    label: "需求资金：",
    prop: "loanAmount"
  },
  {
    label: "年龄：",
    prop: "age"
  },
  {
    label: "需求周期：",
    prop: "loanTerm"
  }
];
</script>

<template>
  <div>
    <el-card header-class="h-10 p-2!" shadow="always" header="本地贷款订单详情">
      <el-card
        header-class="h-10 p-2!"
        body-class="p-4!"
        shadow="never"
        header="订单信息"
      >
        <PlusDescriptions :columns="columns" :data="data" :border="false" />
      </el-card>
      <el-card
        header-class="h-10 p-2!"
        body-class="p-4!"
        shadow="never"
        class="mt-5"
        header="联系方式"
      >
        <PlusDescriptions :columns="columns2" :data="data" :border="false" />
      </el-card>
      <el-card
        header-class="h-10 p-2!"
        body-class="p-4!"
        shadow="never"
        class="mt-5"
        header="基础信息"
      >
        <PlusDescriptions :columns="columns3" :data="data" :border="false" />
      </el-card>
      <el-card
        header-class="h-10 p-2!"
        body-class="p-4!"
        shadow="never"
        class="mt-5"
        header="职业信息"
      >
        <PlusDescriptions :columns="columns4" :data="data" :border="false" />
      </el-card>
      <el-card
        header-class="h-10 p-2!"
        body-class="p-4!"
        shadow="never"
        class="mt-5"
        header="职业信息"
      >
        <PlusDescriptions :columns="columns5" :data="data" :border="false" />
      </el-card>
      <el-row class="mt-5">
        <el-col :span="4">
          <el-button type="primary" class="w-full" @click="$router.back()"
            >返回</el-button
          >
        </el-col>
        <el-col :span="4" :offset="1">
          <el-button type="success" class="w-full" @click="handleOpenFormDialog"
            >跟进</el-button
          >
        </el-col>
        <el-col :span="4" :offset="1">
          <el-button
            type="warning"
            class="w-full"
            @click="handleOpenDetailDialog"
            >跟进记录</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <!-- 跟进弹窗编辑 -->
    <PlusDialogForm
      ref="dialogForm"
      v-model="form"
      v-model:visible="dialogVisible"
      :form="{
        columns: formColumns,
        labelPosition: 'left',
        labelWidth: 100,
        rules
      }"
      :dialog="{ title: '跟进', width: 600, confirmLoading }"
      @confirm="handleSubmit"
      @close="handleClose"
    />
    <!-- 跟进状态弹窗 -->
    <plusDialog
      v-model="detailsVisible"
      :hasFooter="false"
      title="跟进状态"
      width="600"
    >
      <plus-descriptions
        :column="4"
        :data="detailForm"
        :columns="detailsColumns"
        :border="false"
      />
      <el-card>
        <el-timeline v-if="detailForm.list.length !== 0">
          <el-timeline-item
            v-for="item in detailForm.list"
            :key="item.id"
            :timestamp="item.createTime"
          >
            <el-card>
              <el-row>
                <el-col :span="8">
                  <el-rate v-model="item.starLevel" disabled />
                </el-col>
                <el-col :span="16">
                  <el-tag>{{ item.remark }}</el-tag>
                </el-col>
              </el-row>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <span v-else class="text-center flex justify-center">暂无数据</span>
      </el-card>
    </plusDialog>
  </div>
</template>

<style scoped lang="scss"></style>
