<template>
  <view class="px-3 pb-10">
    <view :key="index" v-for="(item, index) in list">
      <view class="flex items-center">
        <TimeStatus :content="JSON.stringify(item.state)" :status="item.state" />
        <view class="flex-1 ml-2 flex justify-between">
          <view>任务时间栏</view>
          <view>
            <view class="flex justify-between" style="min-width: 180rpx">
              <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="34"></u-icon>
              <u-icon custom-prefix="custom-icon" name="attachment" size="42"></u-icon>
              <u-icon custom-prefix="custom-icon" name="moneycollect" size="40"></u-icon>
            </view>
          </view>
        </view>
      </view>
      <view class="border-l-2 border-gray-300 ml-3.5 my-2">
        <view class="ml-4 shadow-lg task-box overflow-hidden">
          <u-card :show-foot="false" :show-head="false" :style="{ height: item.TaskPanel.height + 'px' }" class="h-16" margin="0">
            <view slot="body">
              <view :key="pluginIndex" class="u-col-between p-0 u-skeleton" v-for="(plugin, pluginIndex) in item.plugins">
                <!-- <view class="u-skeleton-rect">瓶身描绘的牡丹一如你初妆</view> -->
                <view :key="p.pluginId" v-for="p in plugin"
                  >9
                  <text v-if="p.pluginId === '444'">这是个基准线</text>
                  <!-- 默认插件：任务名 -->
                  <task-title v-if="p.pluginId === '111'" />
                  <!-- 默认插件：任务描述 -->
                  <task-desc v-if="p.pluginId === '222'" />
                  <!-- 默认插件：任务时差 -->
                  <task-time-difference v-if="p.pluginId === '333'" />
                </view>
              </view>
            </view>
          </u-card>
        </view>
      </view>
    </view>
    <Tips />
  </view>
</template>

<script>
import TaskDesc from '@/plugins/TaskDesc/TaskDesc.vue';
import TaskTitle from '@/plugins/TaskTitle/TaskTitle.vue';
import TimeStatus from './TimeStatus.vue';
import TaskTimeDifference from '@/plugins/TaskTimeDifference/TaskTimeDifference.vue';

export default {
  name: 'TimeBox',
  components: { TimeStatus, TaskTitle, TaskDesc, TaskTimeDifference },
  data() {
    return {
      list: [
        {
          state: 0,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '222' }]],
          TaskPanel: { height: '100' },
        },
        {
          state: 1,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '222' }]],
          TaskPanel: { height: '100' },
        },
        {
          state: 2,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '333' }]],
          TaskPanel: { height: '100' },
        },
        {
          state: 3,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '444' }]],
          TaskPanel: { height: '100' },
        },
        {
          state: 0,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '555' }]],
          TaskPanel: { height: '100' },
        },
        {
          state: 1,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '666' }]],
          TaskPanel: { height: '100' },
        },
      ],
    };
  },

  methods: {
    addTopList() {
      const item = [
        {
          state: 0,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '222' }]],
        },
        {
          state: 0,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '222' }]],
        },
        {
          state: 0,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '333' }]],
        },
      ];
      this.list = item.concat(this.list);
      console.log('this.list: ', this.list);
    },

    addBottomList() {
      const item = [
        {
          state: 0,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '333' }]],
        },
        {
          state: 0,
          plugins: [[{ pluginId: '111' }], [{ pluginId: '333' }]],
        },
        {
          state: 0,
          plugins: [[{ pluginId: '111' }]],
        },
      ];
      this.list = this.list.concat(item);
      console.log('this.list: ', this.list);
    },
  },
};
</script>

<style scoped lang="scss">
.task-box {
  border-radius: 24rpx;
}
</style>
