<template>
  <!-- 交付物 -->
  <view class="mt-3">
    <view v-if="lists && lists.length">
      <view :key="list.id" v-for="list in lists">
        <view class="text-gray-400 u-font-12 font-thin leading-none">
          <span class="mr-2">{{ list.name }}</span>
          <span>{{ $moment(+list.time).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </view>
        <view class="mt-2 py-1 px-2.5 border border-gray-200 rounded flex flex-wrap overflow-hidden break-all" v-if="list.content">
          <a :href="list.content" class="text-blue-500 u-font-12 font-thin" target="_blank" v-if="CheckUrl(list.content)">{{
            list.content
          }}</a>
          <span v-else>{{ list.content }}</span>
        </view>
        <view :class="index === 0 ? 'mt-4' : 'mt-3'" v-for="(checker, index) in list.checkerList" :key="index">
          <view class="flex justify-between leading-none">
            <view>
              {{ checker.checkerName }}
              <span v-if="checker.isMine">(我)</span>
            </view>
            <view>
              <span class="text-blue-500" v-if="checker.status === 1">通过</span>
              <span class="text-red-500" v-if="checker.status === 2">驳回</span>
              <span class="ml-4" v-if="checker.status !== 0">{{ checker.score }}分</span>
              <span class="text-gray-400" v-if="checker.status === 0 && !checker.isMine">未审核</span>
              <view v-if="checker.status === 0 && checker.isMine">
                <u-button class="action-btn mr-2" @click="showScore(checker.checkId, 1)" size="mini" shape="circle" type="primary">
                  通过
                </u-button>
                <u-button class="action-btn" @click="showScore(checker.checkId, 2)" size="mini" shape="circle" type="error">驳回</u-button>
              </view>
            </view>
          </view>
          <view class="text-gray-400 text-xs mt-1">{{ checker.remark }}</view>
        </view>
      </view>
    </view>
    <u-empty icon-size="90" mode="history" text="暂未上传交付物" v-else></u-empty>

    <!-- 评分 -->
    <uni-popup :maskClick="false" background-color="#fff" ref="popup" type="bottom">
      <PDeliverCheck @closeScore="closeScore" @submit="submit"></PDeliverCheck>
    </uni-popup>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import UniPopup from '../../components/uni-popup/uni-popup.vue';
import PDeliverCheck from '../p-deliver-check/p-deliver-check.vue';

export default {
  name: 'p-delivery-history',
  props: { task: { type: Object, default: null } },
  components: { PDeliverCheck, UniPopup },
  data() {
    return {
      lists: [],
      show: false,
      options: null,
      loading: true, // 是否显示骨架屏组件
    };
  },

  computed: mapGetters('project', ['projectId']),

  mounted() {
    this.getDeliverOfTask();
  },

  methods: {
    async getDeliverOfTask() {
      try {
        const { projectId, task } = this;
        const params = { projectId, taskSubId: task.id };
        const data = await this.$u.api.queryDeliverOfTask(params);
        this.lists = data;
      } catch (error) {
        console.error('p-delivery-history.vue getDeliverOfTask error: ', error);
        this.$t.ui.showToast(error.msg || '提交失败');
      }
    },

    showScore(checkId, status) {
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open('bottom');
      this.options = { checkId, status };
    },

    closeScore() {
      this.$refs.popup.close('bottom');
    },

    async submit(remark, score) {
      try {
        await this.checkDeliver(remark, score);
        this.closeScore();
      } catch (error) {
        console.error('error: ', error);
      }
    },

    /**
     * 检查交付物
     * @param {string} checkId 检查记录id
     * @param {string} projectId 项目id
     * @param {string} remark 评论
     * @param {number} score 分数
     * @param {number} status 检查状态(1-通过,2-驳回)
     */
    async checkDeliver(remark, score) {
      try {
        this.show = true;
        const { projectId, options } = this;
        const { checkId, status } = options;
        const params = { checkId, projectId, status, remark, score };
        await this.$u.api.checkDeliver(params);
        this.$t.ui.showToast('交付物检查成功');
        this.options = null;
        this.getDeliverOfTask();
      } catch (error) {
        console.error('p-delivery-history.vue checkDeliver error: ', error);
        this.$t.ui.showToast('交付物检查失败，请稍后重试');
        this.options = null;
      }
    },

    // 判断内容是不是链接
    CheckUrl(url) {
      var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(.)+$/;
      if (!reg.test(url)) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped>
.action-btn {
  padding: 0;
  width: 80rpx;
  height: 40rpx;
  line-height: 40rpx;
}
</style>
