<template>
  <div class="div-add">
    <button class="add" @click="addModal">添加</button>
  </div>
  <table class="custom-table table1">
    <thead>
      <tr :style="{ background: 'rgba(35,45,69)' }">
        <th>序号</th>
        <th>执行时间</th>
        <th>计划名称</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in dataSource" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ row.startTime }}</td>
        <td>{{ row.planName }}</td>
        <td v-if="row.planStatus == '2'">
          <button
            style="
              font-size: 12px;
              background: rgba(57, 215, 187, 0.1);
              color: rgb(57, 215, 187);
              border: 1px solid rgb(57, 215, 187);
            ">
            已执行
          </button>
        </td>
        <td v-if="row.planStatus == '1'">
          <button
            style="
              font-size: 12px;
              background: rgba(243, 97, 99, 0.1);
              border: 1px solid rgba(243, 97, 99);
              color: rgba(243, 97, 99);
            ">
            待执行
          </button>
        </td>
        <td>
          <div class="tabReboot" @click="restartPlan(row.id)">重启</div>
          <a-popconfirm
            title="此操作将永久删除该条数据"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deletePlan(row.id)">
            <div class="tabDelete">删除</div>
          </a-popconfirm>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="out-dialog" v-if="addVisible">
    <div class="content" v-if="addVisible">
      <div class="div-operation"></div>
      <span class="text-operation">计划库</span>
    </div>
    <div style="margin-top: 20px">
      <a-transfer
        v-model:target-keys="targetKeys"
        :data-source="transferData"
        show-search
        :filter-option="filterOption"
        :render="(item: any) => item.title"
        @change="handleChange"
        :style="{ color: 'rgba(255,255,255,1)' }"
        @search="handleSearch"
        :listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
    </div>
    <div style="width: 100%; height: 60px"></div>
    <div class="button-box">
      <button class="cancel" @click="addVisible = false">取消</button>
      <button class="execute" @click="sendPlan">确定</button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  // 请求
  import { http } from '/nerv-lib/util/http';
  import { lightingManage } from '/@/api/IlluminationInfo';
  import { message } from 'ant-design-vue';

  // 初始化 ===========================================================

  onMounted(() => {
    // 计划表格
    getTable();
    // 穿梭框原始数据
    getLeftPlan();
  });

  // tab页部分 ========================================================

  // 表格数据
  const dataSource = ref([]);
  // 获得表格数据
  const getTable = () => {
    http.get(lightingManage.getPlanTable, {}).then((res) => {
      dataSource.value = res.data;
    });
  };
  // 删除表格中的计划
  const deletePlan = (id: String) => {
    http.delete(lightingManage.deletePlan, [id]).then(() => {
      message.success('操作成功');
      getTable();
    });
  };
  // 重启表格中的计划
  const restartPlan = (id: String) => {
    http.post(lightingManage.restartPlan, { planId: id }).then(() => {
      message.success('操作成功');
      getTable();
    });
  };

  // tab页弹窗部分 ====================================================

  // 添加弹窗控制变量
  const addVisible = ref(false);
  // 打开弹窗
  const addModal = () => {
    addVisible.value = true;
  };

  // 穿梭框部分 =======================================================

  // 穿梭框数据
  const transferData = ref([]) as any;
  // 获得穿梭框原始数据
  const getLeftPlan = () => {
    http.get(lightingManage.getLeftPlan, {}).then((res) => {
      let arr = [];
      res.data.forEach((item: any) => {
        arr.push({
          key: item.id,
          title: item.planName,
        });
      });
      transferData.value = arr;
    });
  };

  const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
    console.log(keys, direction, moveKeys);
  };
  const handleSearch = (dir: string, value: string) => {
    console.log('search:', dir, value);
  };
  // 穿梭框选中数据
  const targetKeys = ref<string[]>([]);
  // 将穿梭框选中的计划提交
  const sendPlan = () => {
    if (targetKeys.value.length < 1) {
      return message.info('没有选择任何计划');
    }
    http.post(lightingManage.submitLeftPlan, targetKeys.value).then(() => {
      message.success('添加成功');
      // 如果发送成功，则刷新表格
      getTable();
      getLeftPlan();
    });
  };

  const filterOption = (inputValue: string, option: any) => {
    return option.description.indexOf(inputValue) > -1;
  };
</script>
<style lang="less" scoped>
  @import './dialogStyle.less';

  // 右下角添加按钮
  .div-add {
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 20px;
    .add {
      width: 74px;
      height: 40px;
      opacity: 1;
      border-radius: 4px;
      background: rgba(67, 136, 251, 1);
      border: rgba(67, 136, 251, 1);
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }
  }
  // 表格
  .custom-table {
    border-collapse: collapse;
    width: 416px;
    height: 60px;
    color: rgba(255, 255, 255, 1);
  }
  .custom-table th,
  .custom-table td {
    border: 1px solid rgba(163, 192, 243, 1);
    text-align: left;
    padding: 8px;
    text-align: center;
  }
  .table1 {
    margin-top: 20px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    // 表格中的操作按钮
    .tabReboot,
    .tabDelete {
      border: none;
      display: inline-block;
      background-color: rgba(0, 0, 0, 0);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 20px;
      color: rgba(67, 136, 251, 1);
      cursor: pointer;
    }
    .tabReboot {
      margin-right: 8px;
    }
    .tabReboot::active {
      color: white !important;
    }
    .tabDelete::active {
      color: white;
    }
  }
  ::v-deep(.ant-transfer) {
    // 屏蔽自带的hover效果
    .ant-transfer-list-content-item:hover {
      background: black;
    }
  }
</style>
