<template>
  <div class="index-container height-100"
       id="index-container">
    <a-layout>
      <a-layout-header>
        <div class="time-box">
          <span class="today">今日</span>
          <span class="day">{{ moment().format("YYYY年M月DD日") }}</span>
          <span class="week">{{ weekDay }}</span>
        </div>
      </a-layout-header>
      <div style="margin-bottom: 10px; text-align: right">
        <a-input-search v-model:value="state.ArtistName"
                        :bordered="false"
                        placeholder="请输入画家名称"
                        style="width: 200px"
                        @search="onSearch" />
        <a-input-search v-model:value="state.ArtworkName"
                        :bordered="false"
                        placeholder="请输入作品名称"
                        style="width: 200px"
                        @search="onSearch" />
        <a-input-search v-model:value="state.JoinName"
                        :bordered="false"
                        placeholder="请输入参与人员"
                        style="width: 200px"
                        @search="onSearch" />
      </div>
      <a-layout>
        <a-layout-content>
          <div class="main-box">
            <a-tabs v-model:activeKey="activeKey"
                    @change="changTab">
              <a-tab-pane key="0"
                          tab="全部任务"><a-table :loading="loading"
                         bordered
                         :columns="state.columns"
                         :data-source="state.tableData"
                         :pagination="pagination"
                         @change="handleTableChange"
                         :scroll="{ y: 350 }">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'Status'">
                      <span v-if="record.Status === 1"
                            style="color: #764cf6">
                        未完成
                      </span>
                      <span v-else-if="record.Status === 2"
                            style="color: #764cf6">
                        已完成
                      </span>
                      <span v-else-if="record.Status === 3"
                            style="color: red">已超时</span>
                    </template>
                    <template v-if="column.key === 'actions'">
                      <span @click="del(record)"
                            style="color: #ef136e; cursor: pointer">
                        删除
                      </span>
                    </template>
                  </template>
                </a-table></a-tab-pane>
              <a-tab-pane key="2"
                          tab="已完成"><a-table :loading="loading"
                         bordered
                         :columns="state.columns"
                         :data-source="state.tableData"
                         :pagination="pagination"
                         @change="handleTableChange"
                         :scroll="{ y: 350 }">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'Status'">
                      <span v-if="record.Status === 1"
                            style="color: #764cf6">
                        未完成
                      </span>
                      <span v-else-if="record.Status === 2"
                            style="color: #764cf6">
                        已完成
                      </span>
                      <span v-else-if="record.Status === 3"
                            style="color: red">已超时</span>
                    </template>
                  </template>
                </a-table></a-tab-pane>
              <a-tab-pane key="1"
                          tab="未完成"><a-table :loading="loading"
                         bordered
                         :columns="state.columns"
                         :data-source="state.tableData"
                         :pagination="pagination"
                         @change="handleTableChange"
                         :scroll="{ y: 350 }">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'Status'">
                      <span v-if="record.Status === 1"
                            style="color: #764cf6">
                        未完成
                      </span>
                      <span v-else-if="record.Status === 2"
                            style="color: #764cf6">
                        已完成
                      </span>
                      <span v-else-if="record.Status === 3"
                            style="color: red">已超时</span>
                    </template>
                  </template>
                </a-table></a-tab-pane>
              <a-tab-pane key="3"
                          tab="已超时"><a-table :loading="loading"
                         bordered
                         :columns="state.columns"
                         :data-source="state.tableData"
                         :pagination="pagination"
                         @change="handleTableChange"
                         :scroll="{ y: 350 }">
                  <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'Status'">
                      <span v-if="record.Status === 1"
                            style="color: #764cf6">
                        未完成
                      </span>
                      <span v-else-if="record.Status === 2"
                            style="color: #764cf6">
                        已完成
                      </span>
                      <span v-else-if="record.Status === 3"
                            style="color: red">已超时</span>
                    </template>
                  </template>
                </a-table></a-tab-pane>
            </a-tabs>
          </div>
          <div class="foot-box">
            <div class="task">
              <div class="task-box">
                <div class="one">
                  有<span style="padding: 0 10px 0 10px; color: #764cf6; font-size: 22px">{{ state.DoingCount }}</span>个任务
                </div>
                <div class="two">正在进行</div>
              </div>
              <span class="fenge"></span>
              <div class="task-box">
                <div class="one">
                  有<span style="padding: 0 10px 0 10px; font-size: 22px">{{
                    state.DoneCount
                  }}</span>个任务
                </div>
                <div class="two"
                     style="color: black">已经完成</div>
              </div>
            </div>
            <div class="wyf">
              <img src="../../../assets/image/workBench/wyf.png" />
            </div>
          </div>
        </a-layout-content>
        <a-layout-sider><a-form ref="addForm"
                  style="display: block"
                  :model="formState"
                  class="form"
                  :label-col="{ span: 5 }"
                  :wrapper-col="{ span: 18 }"
                  labelAlign="right">
            <a-form-item label="发起人">{{ Local.get("userInfo").NickName }}
            </a-form-item>
            <a-form-item label="画作列表">
              <div class="user-tags">
                <p v-for="item in state.artWorkList"
                   :key="item.ArtworkUuid">
                  {{ item.ArtworkName }}
                </p>
              </div>
              <a-button @click="addArtwork"
                        class="save-btn">增加画作</a-button>
              <!-- <div class="tags">
                <span
                  style="margin-left: 15px"
                  v-for="item in state.selectedRows"
                  ><close-circle-outlined @click="closeTag(item)" />{{
                    item.ArtworkName
                  }}</span
                >
              </div>
              <a-table
                class="artwork-table"
                :rowKey="(record) => record.Id"
                :columns="state.workColumns"
                :showHeader="false"
                :row-selection="{
                  onChange: onSelectChange,
                  selectedRowKeys: state.selectedRowKeys,
                  checkStrictly: false,

                  // getCheckboxProps: (record) => ({
                  //   disabled: props.type === 'detail' && state.type !== 'edit',
                  // }),
                }"
                :data-source="state.workTableData"
                :scroll="{ y: 125 }"
                :pagination="false"
              >
                <template #bodyCell="{ column, record }">
                  <template v-if="column.key === 'HdPic'">
                    <img
                      style="height: 40px; width: 40px"
                      :src="
                        record.HdPic + '?x-oss-process=image/resize,w_40,h_40'
                      "
                    />
                  </template>
                </template> </a-table
            >-->
            </a-form-item>
            <a-form-item label="参与人">
              <div class="user-tags">
                <p v-for="item in state.JoinUsers"
                   :key="item.UserID">
                  {{ item.Name }}
                </p>
              </div>
              <a-button @click="addJoinUsers"
                        class="save-btn">增加人员</a-button>
              <!-- <div class="tags">
                <span style="margin-left: 15px" v-for="item in state.JoinUsers"
                  ><close-circle-outlined @click="closeUserTag(item)" />{{
                    item.Name
                  }}</span
                >
              </div>
              <a-checkbox-group
                class="user-tags"
                v-model:value="state.selectUserIDList"
                name="checkboxgroup"
                @change="selectUser"
                :options="state.userList"
              /> -->
            </a-form-item>
            <a-form-item :colon="false"
                         label="预计时间"
                         name="StartAt"
                         :rules="[{ required: true, trigger: 'blur', message: '请填写日期' }]">
              <a-date-picker v-model:value="formState.StartAt"
                             valueFormat="YYYY-MM-DD" />
            </a-form-item>
            <a-form-item :colon="false"
                         label="备注"
                         name="Content">
              <a-textarea class="textarea"
                          v-model:value="formState.Content"
                          placeholder="驳回请说明填写理由"
                          :rows="4" /> </a-form-item></a-form>
          <div class="button-group">
            <a-button @click="cancel"
                      class="cancel-btn">取消 </a-button>
            <a-button @click="goCreate"
                      class="save-btn">增加任务</a-button>
          </div>
        </a-layout-sider>
      </a-layout>
    </a-layout>
    <artWorkDialig :artWorkVisible="artWorkVisible"
                   @checkHandleOk="checkHandleOk"></artWorkDialig>
    <joinUsers :joinUserVisible="joinUserVisible"
               @joinHandleOk="joinHandleOk"></joinUsers>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  computed,
  getCurrentInstance,
  nextTick,
} from "vue";
import { Modal } from "ant-design-vue";
import { Session, Local } from "@/utils/storage.js";
import flTable from "@/components/layout/table/commonTable.vue";
import artWorkDialig from "./artWorkDialog.vue";
import joinUsers from "./joinUsers.vue";
import { processError, processSuccess, processWarning } from "@/utils/helper/message";
import moment from "moment";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
const weekDay = computed(() => {
  switch (moment().day()) {
    case 1:
      return "周一";
    case 2:
      return "周二";
    case 3:
      return "周三";
    case 4:
      return "周四";
    case 5:
      return "周五";
    case 6:
      return "周六";
    case 0:
      return "周日";
  }
});
// 表单数据
const formState = reactive({
  Content: "",
  StartAt: "",
});

const PageSize = ref(10);
const Page = ref(1);
const pagination = reactive({
  total: 0, // 总数
  current: Page.value, // 当前页数
  pageSize: PageSize.value, // 每页条数
  showTotal: (total) => `共 ${total} 条`, // 展示总数
  showSizeChanger: true, // 是否可以改变pageSize
  showQuickJumper: false, // 跳转
});

const addForm = ref();
const activeKey = ref("0");
const loading = ref(false);
const artWorkVisible = ref(false);
const joinUserVisible = ref(false);
const state = reactive({
  ArtistName: "",
  ArtworkName: "",
  JoinName: "",
  columns: [
    {
      title: "发起人",
      dataIndex: "SubmitterName",
      align: "center",
      key: "SubmitterName",
      width: 150,
    },
    {
      title: "任务画作名称",
      dataIndex: "taskName",
      align: "center",
      width: 200,
      key: "taskName",
    },
    {
      title: "画家姓名",
      dataIndex: "artistShowCount",
      align: "center",
      key: "artistShowCount",
      width: 150,
    },
    {
      title: "参与人员",
      dataIndex: "JoinPer",
      align: "center",
      key: "JoinPer",
      width: 150,
    },
    {
      title: "备注",
      dataIndex: "Content",
      align: "center",
      key: "Content",
      width: 150,
    },
    {
      title: "状态",
      align: "center",
      width: 150,
      key: "Status",
    },
    {
      title: "分配日期",
      dataIndex: "CreatedAt",
      align: "center",
      key: "CreatedAt",
      width: 150,
    },
    {
      title: "完成时间",
      dataIndex: "OperateTime",
      align: "center",
      key: "OperateTime",
      width: 150,
    },
    {
      title: "预计完成时间",
      dataIndex: "StartAt",
      align: "center",
      width: 150,
      key: "StartAt",
    },
    {
      title: "操作",
      align: "center",
      width: 100,
      fixed: "right",
      key: "actions",
    },
  ],
  workColumns: [
    {
      title: "小图",
      dataIndex: "HdPic",
      align: "center",
      key: "HdPic",
    },
    {
      title: "画作名称",
      dataIndex: "ArtworkName",
      align: "center",
    },
    {
      title: "画家名称",
      dataIndex: "artistShowCount",
      align: "center",
    },
  ],
  userList: [],
  selectUserIDList: [],
  apiUserList: [],
  JoinUsers: [],
  // 表格内容
  tableData: [],
  workTableData: [],
  selectedRowKeys: [],
  selectedRows: [],
  DoingCount: 0,
  DoneCount: 0,
  artWorkList: [],
});
const checkHandleOk = (selectedRows) => {
  artWorkVisible.value = false;
  state.artWorkList = selectedRows;
  console.log(state.artWorkList);
};
const joinHandleOk = (JoinUsers) => {
  state.JoinUsers = JoinUsers;
  joinUserVisible.value = false;
};
const getUserList = () => {
  $request.HTTP.common
    .getUserList()
    .then((res) => {
      if (res.status == 0) {
        res.data.Data.forEach((v) => {
          state.userList.push({ label: v.NickName, value: v.ID });
        });
        state.apiUserList = res.data.Data;
      } else {
        message.error(res.msg);
      }
    })
    .catch((e) => {
      message.error(e.response.data.msg || "操作失败，请稍后再试");
    });
};
const del = (val) => {
  Modal.confirm({
    title: "删除",
    content: "确定要进行删除操作吗",
    onOk () {
      let id = val.ID;
      $request.HTTP.workbench
        .goRemove({ ID: id })
        .then((res) => {
          if (res.status === 0) {
            processSuccess("删除成功");
            cancel();
            getBenchList();
            getTaskCount();
          } else {
            processError(res.msg || "删除失败");
          }
        })
        .catch((e) => {
          processError(e.msg || "删除失败");
        });
    },
    onCancel () { },
  });
};
// 切换选项
const changTab = (key) => {
  activeKey.value = key;
  pagination.current = 1;
  getBenchList(getStatusByActiveKey(key));
};
// 打开画作列表
const addArtwork = () => {
  artWorkVisible.value = true;
};
// 打开参与人列表
const addJoinUsers = () => {
  joinUserVisible.value = true;
};

// 选中
const onSelectChange = (selectedRowKeys, rows) => {
  state.selectedRows = rows;
  state.selectedRowKeys = selectedRowKeys;
};
// 关闭
const closeTag = (tag) => {
  const id = JSON.parse(JSON.stringify(tag.Id));
  const tags = state.selectedRowKeys.filter((item) => item != id);
  const rows = state.selectedRows.filter((item) => item.Id != id);
  nextTick(() => {
    state.selectedRows = rows;
    state.selectedRowKeys = tags;
  });
};
// 搜索
const onSearch = () => {
  getBenchList(parseInt(activeKey.value));
};
// 获取工作台列表
const getBenchList = (status = 0) => {
  $request.HTTP.workbench
    .getList({
      SubmitterID: Local.get("userInfo").ID,
      Status: status,
      ArtistName: state.ArtistName,
      ArtworkName: state.ArtworkName,
      JoinName: state.JoinName,
      page:pagination.current,
      pageSize: pagination.pageSize,
    })
    .then((res) => {
      if (res.status === 0) {
        let temp = [];
        let JoinPer = [];
        state.tableData = res.data.Data;
        pagination.total = res.data.Count
        state.tableData.forEach((v) => {
          temp = [];
          JoinPer = [];
          if (v.Artworks) {
            v.Artworks.forEach((v2) => {
              temp.push(v2.Name);
              v.ArtistName = v2.ArtistName;
              v.artistShowCount = v2.artistShowCount;
            });
          }
          if (v.JoinUsers) {
            v.JoinUsers.forEach((v3) => {
              JoinPer.push(v3.Name);
            });
          }
          v.JoinPer = JoinPer.join(",");
          v.taskName = temp.join(",");
        });
      } else {
        processError(res.msg);
      }
    })
    .catch((e) => { });
};
const handleTableChange = (event) => {
  pagination.current = event.current;
  pagination.pageSize = event.pageSize;
  getBenchList(getStatusByActiveKey(activeKey.value));
};


const getStatusByActiveKey = (key) => {
  switch (key) {
    case '0':
      return 0; // 全部任务
    case '1':
      return 1; // 未完成
    case '2':
      return 2; // 已完成
    case '3':
      return 3; // 已超时
    default:
      return 0;
  }
};
// 创建
const goCreate = () => {
  addForm.value
    .validate()
    .then(() => {
      let Artworks = [];
      if (state.artWorkList.length < 1 || state.JoinUsers.length < 1) {
        processError("请选择画作和参与人");
        return;
      }
      console.log('state.artWorkList', state.artWorkList);
      state.artWorkList.forEach((v) => {
        Artworks.push({
          ArtworkID: v.Id,
          Name: v.ArtworkName,
          ArtistName: v.ArtistName,
          ArtistID: v.ArtistUuid,
        });
      });
      let data = {
        StartAt: formState.StartAt,
        Type: "art",
        SubmitterId: Local.get("userInfo").ID,
        SubmitterName: Local.get("userInfo").NickName,
        Content: formState.Content,
        JoinUsers: state.JoinUsers,
        Artworks: Artworks,
      };
      $request.HTTP.workbench
        .goCreate(data)
        .then((res) => {
          if (res.status === 0) {
            processSuccess("添加成功");
            cancel();
            getBenchList();
            getTaskCount();
          } else {
            processError(res.msg || "添加失败");
          }
        })
        .catch((e) => {
          processError(e.msg || "添加失败");
        });
    })
    .catch((error) => { });
};
// 获取任务数量
const getTaskCount = () => {
  $request.HTTP.workbench
    .getTaskCount({ SubmitterId: Local.get("userInfo").ID })
    .then((res) => {
      if (res.status === 0) {
        state.DoingCount = res.data.MySubmitInfo.DoingCount || 0;
        state.DoneCount = res.data.MySubmitInfo.DoneCount || 0;
      } else {
        processError(res.msg);
      }
    })
    .catch((e) => { });
};
const cancel = () => {
  addForm.value.resetFields();
  state.selectUserIDList = [];
  state.artWorkList = [];
  state.JoinUsers = [];
};

onBeforeMount(() => { });
onMounted(() => {
  getBenchList();
  getTaskCount();
  getUserList();
});
</script>
<style scoped lang="scss">
.index-container {
  background: rgba(239, 237, 245, 0.33);
  :deep(.ant-layout-header) {
    height: 64px;
    line-height: normal;
    background: rgba(239, 237, 245, 0.33);
    padding: 0;
    color: #fff;

    .time-box {
      font-size: 40px;
      .today {
        font-size: 20px;
        background: $theme-primary;
        color: #fff;
        width: 10px;
        height: 30px;
      }
      .day {
        color: $theme-primary;
      }
      .week {
        color: #c1b2e5;
        margin-left: 5px;
      }
      .today {
        text-align: center;
        margin: 0 auto;
        font-size: 15px;
        background: #764cf6;
        color: #fff;
        display: inline-block;
        width: 20px;
        height: 45px;
        margin-right: 10px;
        border-radius: 20px;
      }
    }
  }
  .main-box {
    padding: 20px;
    height: auto;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: rgba(223, 215, 242, 1);
    :deep(.ant-tabs-tab-btn) {
      color: #7f71a5;
    }
    :deep(.ant-table-tbody) {
      max-height: 430px;
    }
    :deep(
      .ant-table.ant-table-bordered
      > .ant-table-container
      > .ant-table-header
      > table ) {
      border-top: 0;
    }
    :deep(
      .ant-table.ant-table-bordered
      > .ant-table-container
      > .ant-table-body
      > table
      > tbody
      > tr
      > td ) {
      border: 0;
      color: #5f5f5f;
    }
    :deep(.ant-tabs-ink-bar) {
      height: 4px !important;
      background: #764cf6;
    }
    :deep(.ant-table-container) {
      border: 0;
    }
    :deep(.ant-table-thead > tr > th) {
      border: 0 !important;
      background: none;
      color: #764cf6;
    }
  }
  .foot-box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    height: 200px;
    width: 100%;
    .task {
      display: inline-flex;
      height: 100%;
      width: 980px;
      background-image: url("../../../assets/image/workBench/paopao.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .task-box {
        height: 100%;
        width: 50%;
        display: block;
        text-align: center;
        margin-top: 60px;
        .one {
          font-size: 16px;
          margin-bottom: 20px;
        }
        .two {
          color: #978bf2;
          font-size: 22px;
        }
      }
      .fenge {
        padding: 12px 6px 0px 6px;
        margin-left: 6px;
        margin: 15px 0 15px 0;
        border-left: 1px solid #707070;
        font-size: 0;
      }
    }
    .wyf {
      display: inline-flex;
    }
  }
  :deep(.ant-form-item-label > label) {
    color: #6d5c9c;
    font-weight: bold;
  }
  :deep(.ant-form-item-control) {
    color: #6d5c9c;
  }
  .artwork-table {
    :deep(.ant-table) {
      border-radius: 1px;
      overflow: hidden;
      color: $basic-black;
    }

    :deep(.ant-table-thead > tr > th) {
      padding: 4px 4px;
    }
    :deep(.ant-table-tbody > tr > td) {
      padding: 4px 16px;
      background: #cbc4d9;
    }
    :deep(.ant-table-thead > tr > th) {
      background: #cfcad8 !important;

      font-weight: bolder !important;
      color: #7161a5 !important;
    }

  }
  .user-tags {
    margin-top: 5px;
    margin-right: 20px;
    height: 165px;
    width: 150px;
    max-height: 165px;
    overflow: scroll;
    overflow-x: hidden;
  }
  .button-group {
    text-align: center;

    .cancel-btn {
      width: 123px;
      border-radius: 20px;
      background: #eeeaf7;
      margin-right: 10px;
      color: $theme-primary;
    }
  }
  .save-btn {
    width: 123px;
    border-radius: 20px;
    background: $theme-primary;
    color: #ffff;
  }
  :deep(.ant-layout-sider) {
    flex: 0 0 450px !important;
    max-width: 450px !important;
    min-width: 450px !important;
    width: 450px !important;
    margin-left: 57px;
    background-color: #cbc4d9;
    border-radius: 20px;
    padding: 20px;
  }
  :deep(.ant-form-item-control-input-content) {
    display: flex;
  }
  :deep(.ant-layout-content) {
    min-width: 600px !important;
    overflow: hidden;
  }
  :deep(.ant-layout) {
    background: none;
  }
}
:deep(.ant-input-search) {
  border-radius: 10px;
  background-color: rgb(229, 229, 229);
  color: rgb(136, 136, 136);
  margin-right: 20px;
}
:deep(
  .ant-input-search
  > .ant-input-group
  > .ant-input-group-addon:last-child
  .ant-input-search-button:not(.ant-btn-primary) ) {
  border: 0;
  color: rgba(0, 0, 0, 0.45);
  background-color: rgb(229, 229, 229);
  border-radius: 0px 10px 10px 0;
}
:deep(.ant-input-group-addon) {
  background-color: rgb(229, 229, 229);
  border-radius: 0px 10px 10px 0;
}
:deep(.ant-table-thead > tr > th) {
  background-color: #fff !important;
}
</style>
