<template>
  <div class="list-container">
    <van-list
        v-model:loading="loading"
        v-model:error="error"
        error-text="请求失败，点击重新加载"
        :finished="finished"
        finished-text="没有更多了"
        @load="getList">

      <div class="task-list">
        <div class="task-item" v-for="item in taskList" :key="item.id">
          <div class="task-title-box">
            <div class="task-title">{{ item.unit_name }}</div>
          </div>
          <div class="task-header">{{ item.processing_status }}</div>
          <div class="task-item-content">
            <van-text-ellipsis :content="item.task_description" rows="3" expand-text="展开" collapse-text="收起"/>
          </div>
          <div class="task-item-bottom">
            <div class="task-item-time">{{ item.creation_time }}</div>
            <van-button v-if="item.processing_status !== '已完成'" type="primary" class="update-btn" @click="showUpdate(item)">更新</van-button>
          </div>
        </div>
      </div>
    </van-list>
    <van-dialog v-model:show="show" title="任务进度更新" show-cancel-button @confirm="handleUpdate">
      <div class="box-item">
        <div class="item-header">
          <i class="icon" />
          <div class="label">任务描述：</div>
        </div>
        <div class="item-data">{{ updateData.task_description }}</div>
      </div>
      <div class="box-item" style="padding-bottom: 0">
        <div class="item-header" style="padding-bottom: 0">
          <i class="icon" />
          <div class="label">完成进度：</div>
          <el-select v-model="updateData.processing_status">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ElSelect, ElOption } from 'element-plus';
import {ref, reactive, watch} from 'vue';
import {selectTask, updateTaskRegistration} from "@/api/command/JointDuty";
import {parseTime} from "@/utils/ruoyi";
import {showSuccessToast} from "vant";

const props = defineProps({
  eventId: String
});

const queryParams = reactive({
  page: 1,
  page_size: 10,
  event_code: ''
});
const taskList = ref([]);
const total = ref(0);
const loading = ref(false);
const error = ref(false);
const finished = ref(false);
const show = ref(false)
const options = reactive([
  { label: '处理中', value: '处理中' },
  { label: '已完成', value: '已完成' },
]);
let updateData = ref({
  task_id: '',
  task_description: '',
  processing_status: ''
});

const getList = () => {
  queryParams.page++;
  selectTask(queryParams).then((res) => {
    const items = res.data || [];
    items.forEach(item => {
      item.creation_time = parseTime(item.creation_time);
    })
    total.value = res.total;
    if (queryParams.page == 1) {
      taskList.value = [];
    }
    items.forEach(val => {
      taskList.value.push(val)
    });
    if (queryParams.page_size * queryParams.page >= total.value) {
      finished.value = true;
    }
  }).catch(() => {
    error.value = true;
    finished.value = false;
  }).finally(() => {
    loading.value = false;
  });
}
watch(() => props.eventId, () => {
  queryParams.event_code = props.eventId;
  getList()
}, {
  immediate: true
})
const showUpdate = (item) => {
  updateData.value = item;
  show.value = true
}
const handleUpdate = () => {
  updateTaskRegistration({
    task_id: updateData.value.task_id,
    processing_status: updateData.value.processing_status,
    event_code: props.eventId
  }).then(() => {
    showSuccessToast('更新成功');
    queryParams.page = 0;
    getList();
  })
}
</script>

<style lang="scss" scoped>
.list-container {
  overflow-y: auto;
  height: 260px;
  background-color: #f4f8fa;
}
.task-list {
  position: relative;
  margin: 0;
  .task-item {
    margin-top: 21px;
    border-bottom: 1px solid #EEEEEE;
    position: relative;
    background-color: #ffffff;
    box-shadow: 0 0 4px 0 rgba(69, 84, 102, 0.1);
    border-radius: 4px;
    padding-bottom: 16px;
    .task-title-box {
      position: absolute;
      top: -5px;
      left: 19px;
      height: 30px;
      background-color: #ffffff; /* 背景颜色 */
      transform: skewX(-20deg); /* 斜切变形 */
      box-shadow:0 2px 4px 0 rgba(44, 129, 255, 0.18);
      padding: 0 20px;
      display: flex;
      align-items: center;
      border-radius: 2px;
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: -6px;
        transform: skewX(20deg);
        width: 11px;
        height: 27px;
        background: url('@/assets/images/command/shadow.png') no-repeat;
        background-size: 100% 100%;
      }
      .task-title {
        font-size: 12px;
        color: #2C81FF;
        transform: skewX(20deg);
      }
    }
    .task-header {
      width: 100%;
      height: 30px;
      background-image: linear-gradient(180deg, #F3F7FD 0%, #FFFFFF 100%);
      border-radius: 2px 2px 0 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 12px;
      color: #A2A2A2;
      padding: 0 19px;
    }
    .task-item-content {
      color: #414F64;
      font-size: 14px;
      margin: 12px 19px;
    }

    .task-item-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 19px;
      .task-item-time {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
      }
      .update-btn {
        width: 86px;
        height: 32px;
        line-height: 32px;
        background: #2C81FF;
        border-radius: 2px;
      }
    }
  }
}
.success-bg,
.processing-bg,
.btn {
  width: 64px;
  height: 24px;
  line-height: 24px;
  border-radius: 2px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  margin-left: 10px;
}
.success-bg {
  background-color: #38c95a;
}
.processing-bg {
  background-color: #ffaf00;
}
.box-item {
  padding: 8px 16px;
  .item-header {
    display: flex;
    align-items: center;
    padding: 8px 0;
    .icon {
      flex-shrink: 0;
      display: inline-block;
      width: 17px;
      height: 16px;
      background: url('@/assets/images/event/icon1.png') no-repeat;
      background-size: 100% 100%;
      margin-right: 8px;
    }
    .label {
      flex-shrink: 0;
      font-size: 14px;
      color: #445267;
      font-weight: bold;
    }
  }
  .item-data {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.65);
    max-height: 200px;
    overflow-y: auto;
  }
}
</style>
