<!-- 2列选择器，最后选择的是最后一列的值-->
<template>
  <view
    class="flex fpy--center"
    :class="{
      'u-border-bottom': border == 'bottom',
      'u-border': border == 'surround',
      'fpx--right': itemAlign == 'right',
    }"
  >
    <view>
      <u-picker
        ref="pickerRef"
        v-if="columns.length === 2"
        v-model="valueNameValue"
        :show="show"
        :columns="columns"
        :title="title"
        :closeOnClickOverlay="closeOnClickOverlay"
        :keyName="keyName"
        :defaultIndex="defaultIndex"
        @close="close"
        @cancel="cancel"
        @confirm="confirm"
        @change="change"
        :loading="loading"
      ></u-picker>
    </view>
    <view style="padding: 6px 9px">
      <u-text
        @click="show = true"
        :text="KeyNameValue || rightText || '请选择'"
        :align="itemAlign"
        :lineHeight="lineHeight"
        suffixIcon="arrow-right"
      >
      </u-text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch, watchEffect } from "vue";
/**
 * v-model不能绑定值，官方的一个bug
 */
interface Props {
  columns: any[]; // 数据源 二维数组
  keyName?: string; //第一列显示的属性名
  valueName?: string; //第一列存储的属性名

  key2Name?:string; //第二列属性名
  value2Name?: string; //第二列存储的属性名

  itemAlign?: string; //对齐方式 left\center\right
  rightText?: string; //未选择时,右侧提示文字
  lineHeight?: number | string; //行高 默认30
  title?: string; // 顶部标题
  border?: string; // surround四周有边框,bottom底部有边框,none没有边框
  closeOnClickOverlay?: boolean; //是否允许点击遮罩关闭选择器  ( 默认 false )
}
const props = withDefaults(defineProps<Props>(), {
  lineHeight: 30,
  title: "",
  border: "bottom",
  keyName: "name",
  valueName: "code",
  key2Name: "name",
  value2Name: "code",
});

const pickerRef = ref();
//默认不弹出
const show = ref(false);
//加载状态
const loading = ref(false);

//默认选中的行列[1,1]
const defaultIndex = reactive([1,1]);

//选中后需要的值
const valueNameValue = ref("");

//选中后显示的值
const KeyNameValue = ref("");
//事件抛出
const emit = defineEmits(["close", "cancel", "confirm", "change","update:modelValue"]);
//确认
const confirm = (d: any) => {
  show.value = false;
  if(props.columns[1].length) {
    valueNameValue.value = d.value[1][props.value2Name];
    KeyNameValue.value = d.value[1][props.key2Name];
  }else{
    valueNameValue.value = ''
    KeyNameValue.value = ''
  }
  emit("update:modelValue", valueNameValue.value);
  emit("confirm", valueNameValue.value);
};
//取消
const cancel = () => {
  show.value = false;
  emit("cancel");
};
//关闭
const close = () => {
  show.value = false;
  emit("close");
};
//改变
const change = (e: any) => {
  const { columnIndex, value } = e;
  if (columnIndex === 0) {
    loading.value = true
    emit("change", value[0][props.valueName], setValue);
  }
};
//设置第二列值
function setValue(list: []) {
  if(list && list.length){
    pickerRef.value.setColumnValues(1, list);
  }else{
    pickerRef.value.setColumnValues(1, []);
  }
  loading.value = false
}

//将key2Name转成keyName显示
const tranKey2NameToKeyName = () => {
  if(props.key2Name != props.keyName && props.columns.length===2) {
    props.columns[1].forEach((item)=>{
      item[props.keyName] = item[props.key2Name]
    });
  }
}
watchEffect(()=>{
 tranKey2NameToKeyName()
});
</script>


