<template>
  <!-- 上传交付物 -->
  <view class="py-2">
    <u-input :auto-height="data.autoHeight" :border="data.border" :height="data.height" :type="data.type" v-model="data.content" width="100" />

    <!-- 选择检查人 -->
    <!-- <ChooseChecker ref="checker" :checkerList="data.checkerList" @setCheckerList="setCheckerList"></ChooseChecker> -->

    <view class="flex justify-between">
      <u-button @click="submit" class="m-0" size="mini" type="primary">提交</u-button>
      <u-icon @click="changeShowHistory" name="arrow-up" v-if="data.showHistory"></u-icon>
      <u-icon @click="changeShowHistory" name="arrow-down" v-else></u-icon>
    </view>

    <p-delivery-history :task="task" v-if="data.showHistory" />
  </view>
</template>

<script setup>
import { defineProps, reactive, ref, computed  } from 'vue';
import { useStore } from 'vuex';
// import ChooseChecker from '@/components/ChooseChecker/ChooseChecker.vue';

const props = defineProps({
  task: { default: () => {}, type: Object },
});

const data = reactive({
  content: '',
  type: 'textarea',
  border: true,
  height: 30,
  autoHeight: true,
  checkerList: [],
  showHistory: false, // 展开历史记录
});

const checker = ref(null);
const store = useStore();
const members = computed(() => store.state.role.members);
const projectId = computed(() => store.getters['project/projectId']);
const checkers = computed(() => {
  let arr = [];
  if (members.value.length) {
    members.value.forEach(member => {
      const item = { value: member.memberId, label: member.name };
      arr.push(item);
    });
  }
  return arr;
});

// 设置检查人
function setCheckerList(checked, item) {
  if (checked) {
    data.checkerList.push(item.memberId);
  } else {
    const index = data.checkerList.findIndex(checker => checker === item.memberId);
    data.checkerList.splice(index, 1);
  }
}

// 展开合上历史记录
function changeShowHistory() {
  data.showHistory = !data.showHistory;
}

// 提交交付物
async function submit() {
  try {
    const { content, checkerList } = data;
    const { task } = props;
    if (!checkerList.length) {
      uni.$ui.showToast('请选择检查人');
      return;
    }
    const params = { content, checkerList, projectId: projectId.value, taskSubId: task.id };
    await uni.$u.api.saveDeliver(params);
    uni.$ui.showToast('交付物提交成功');
    data.content = '';
    data.checkerList = [];
    checker.clearChecked();
  } catch (error) {
    console.error('p-upload-deliverable.vue submit error: ', error);
    uni.$ui.showToast('交付物提交失败，请稍后重试');
  }
}
</script>

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