<template>
  <div class="index-container height-100">
    <div id="artistartworkpro"></div>
    <fl-table v-if="state.pageTableVisible"
              :config="state[state.pageType]"
              :refreshCount="state[state.pageType].refreshCount"
              @triggerRowActions="handleRowActions">
      <template #top-right>
        <div>

          <a-button v-if="state.pageType !== 'historyConfig'&&calcItemVisible('r_artistartworkpro_btn_screen')"
                    type="link"
                    class="fl-mx-xs theme-color"
                    @click="handleOpenArtworkSel">管理系统画作筛选</a-button>

          <a-button v-if="state.pageType === 'historyConfig'"
                    type="primary"
                    shape="round"
                    class="fl-mx-xs"
                    :loading="state.btnLoading"
                    @click="handleExport">导出</a-button>

          <a-button v-if="state.pageType !== 'historyConfig'"
                    type="primary"
                    shape="round"
                    class="fl-mx-xs"
                    @click="state.pageType = 'historyConfig'">查看历史</a-button>
          <a-button v-if="state.pageType === 'historyConfig'"
                    type="primary"
                    shape="round"
                    class="fl-mx-xs"
                    @click="state.pageType = 'homeConfig'">返回主页</a-button>
        </div>
      </template>
      <template v-slot:artworkinfo="action">
        <a-popover placement="top"
                   title="相应平尺数统计"
                   :getPopupContainer="getPopupContainer">
          <template #content>
            {{
              (action.text.rulerTotalPassed || 0) +
              "/" +
              (action.text.rulerTotalNoPassed || 0) +
              "/" +
              (action.text.rulerTotal || 0)
            }}
          </template>

          <div style="padding: 4px">
            <div>
              {{
                (action.text.artworkNumPassed || 0) +
                "/" +
                (action.text.artworkNumNoPassed || 0) +
                "/" +
                (action.text.artworkNumAll || 0)
              }}
            </div>
          </div>
        </a-popover>
      </template>

      <template v-slot:exporttablecolumnfield="scoped">
        <a-popover placement="left"
                   title="审批记录"
                   :getPopupContainer="getPopupContainer"
                   trigger="click">
          <template #content>
            <div class="detail-info">
              <div v-for="(item, index) in state.hisData"
                   :key="index"
                   :class="
                  index == state.hisData.length - 1
                    ? 'no-border items'
                    : 'items'
                ">
                <div class="clirc-div">
                  <div>{{ item.auditResultDesc }}</div>
                </div>
                <p class="fl-mb-xs font-12">操作员：{{ item.approver }}</p>
                <p class="fl-mb-xs font-12">操作时间：{{ item.createdAt }}</p>
                <div v-if="item.auditResultDesc&&item.auditResultDesc.includes('不通过')"
                     class="fl-mb-xs font-12"
                     style="max-width: 200px; word-wrap: break-word;word-break: break-all">
                  理由：{{
                    item.auditMark +
                    (item.auditMark2?(item.auditMark2.replace("[复审不通过]:\n", "")):'')
                  }}
                </div>
              </div>
            </div>
          </template>
          <div style="color: #3b82c9"
               @click="handleLookHis(scoped.scoped.text)">
            审批记录
          </div>
        </a-popover>
      </template>
    </fl-table>
  </div>

  <a-modal v-model:visible="state.modalVisible"
           :title="state.dialogData.title"
           :confirm-loading="state.btnLoading"
           centered
           @ok="handleDialogConfirm">
    <div v-if="['unpass', 'reject'].includes(state.dialogData.type)"
         class="row">
      <div v-if="state.dialogData.type === 'unpass'"
           class="col-3 fl-my-sm">
        可选择项
      </div>
      <div v-if="state.dialogData.type === 'unpass'"
           class="col-9 fl-my-sm">
        <fl-form-item type="select"
                      field="remark"
                      multiple="multiple"
                      :val="state.dialogFormData.remark"
                      :config="{
            options: state.rejectOptions,
          }"
                      @triggerValChange="handleValChange" />
      </div>
      <div class="col-3 fl-my-sm">补充说明</div>
      <div class="col-9 fl-my-sm">
        <fl-form-item type="textarea"
                      field="remark2"
                      :rows="4"
                      :val="state.dialogFormData.remark2"
                      @triggerValChange="handleValChange" />
      </div>
    </div>
    <div v-if="['restart'].includes(state.dialogData.type)"
         class="row">
      <div class="col-3 fl-my-sm">原审批状态</div>
      <div class="col-9 fl-my-sm">
        {{
          getLabelByOptions(
            state.dialogFormData.defaultStatus,
            state.statusOptions
          )
        }}
      </div>
      <div class="col-3 fl-my-sm">新审批状态</div>
      <div class="col-9 fl-my-sm">
        <fl-form-item type="select"
                      field="newStatus"
                      :val="state.dialogFormData.newStatus"
                      :config="{
            options: [
              {
                label: '通过',
                value: 4,
              },
              {
                label: '不通过',
                value: 3,
              },
            ],
          }"
                      @triggerValChange="handleValChange" />
      </div>
      <div v-if="state.dialogFormData.newStatus === 3"
           class="col-3 fl-my-sm">
        理由
      </div>
      <div v-if="state.dialogFormData.newStatus === 3"
           class="col-9 fl-my-sm">
        <fl-form-item type="select"
                      field="remark"
                      multiple="multiple"
                      :val="state.dialogFormData.remark"
                      :config="{
            options: state.rejectOptions,
          }"
                      @triggerValChange="handleValChange" />
      </div>
      <div v-if="state.dialogFormData.newStatus === 3"
           class="col-3 fl-my-sm">
        补充说明
      </div>
      <div v-if="state.dialogFormData.newStatus === 3"
           class="col-9 fl-my-sm">
        <fl-form-item type="textarea"
                      field="remark2"
                      :rows="4"
                      :val="state.dialogFormData.remark2"
                      @triggerValChange="handleValChange" />
      </div>
    </div>
  </a-modal>

  <export-modal v-if="state.exportDialogVisible"
                :openCount="state.openCount"
                @triggerCloseModal="handleCloseExport" />

  <artwork-screen v-if="state.screenDialogVisible"
                  :openCount="state.screenOpenCount"
                  @triggerCloseModal="handleScreenCloseExport" />
</template>
<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  watch,
  nextTick,
} from "vue";
import flTable from "@/components/layout/table/commonTable.vue";
import flFormItem from "@/components/layout/form/formItem.vue";
import { getParamsByObj, getLabelByOptions } from "@/utils/helper/form";
const currentInstance = getCurrentInstance();
const { $request, $hadRule } = currentInstance.appContext.config.globalProperties;
import { processError, processSuccess } from "@/utils/helper/message";

import exportModal from "./reviewworkstation/artistartworkexport.vue";
import artworkScreen from "./reviewworkstation/screeningofpaintings.vue";

const state = reactive({
  screenDialogVisible: false,
  screenOpenCount: 0,

  hisData: [],
  pageTableVisible: true,
  pageType: "homeConfig",
  exportDialogVisible: false,
  openCount: 0,
  clickRowData: {},
  // 弹窗数据
  dialogFormData: {
    defaultStatus: 0,
    newStatus: 0,
    remark: [],
    remark2: "",
  },
  modalVisible: false,
  btnLoading: false,
  dialogData: { title: "", type: "" }, //弹窗配置
  rejectOptions: [
    { label: "画作总平尺数需在240左右", value: "画作总平尺数需在240左右" },
    {
      label:
        "画作内容不可涉及政治因素、历史人物、历史事件、国旗、人民币、抗疫、现有品牌等",
      value:
        "画作内容不可涉及政治因素、历史人物、历史事件、国旗、人民币、抗疫、现有品牌等",
    },
    { label: "画作合影需要露出章款", value: "画作合影需要露出章款" },
    { label: "画作信息不全", value: "画作信息不全" },
  ],
  statusOptions: [
    {
      label: "通过",
      value: 4,
    },
    {
      label: "不通过",
      value: 3,
    },
  ],
  homeConfig: {
    slotRight: true,
    slotRightClass: "col-12 row justify-end",
    rowKey: "artistUid",
    refreshCount: 0,
    tableMaxHeight: 600,
    listUrl: {
      url: "api/backend/artwork/viewReviewArtistStatic/query",
      params: [{ label: "mode", value: 1 }],
    },
    searchConfig: [
      {
        type: "text",
        label: "画家姓名",
        field: "artistName",
      },
      {
        type: "text",
        label: "画家编号",
        field: "tnum",
      },
    ],
    columns: [
      {
        width: 120,
        label: "画家姓名",
        field: "artistShowCount",
      },
      {
        width: 100,
        label: "画家编号",
        field: "tnum",
      },

      {
        label: "画作总平尺数",
        field: "rulerTotal",
      },
      {
        width: 120,
        type: "slot",
        slotName: "artworkinfo",
        label: "画作情况",
      },
      {
        label: "操作",
        actions: [
          {
            actionLoadingField: "btnSubmit",
            type: "primary",
            actionType: "btnSubmit",
            label: "提交",
            shape: "round",
            class: "fl-ma-xs",
          },
        ],
      },
    ],
    expandConfig: {
      rowKey: "artworkUid",
      refreshCount: 0,
      listUrl: {
        url: "api/backend/artwork/auditFlow/baseReviewList",
        params: [
          { label: "artistUid", field: "artistUid" },
          { label: "reviewStatus", value: 2 },
        ],
      },
      tableMaxHeight: 600,
      // 画作名称 流程状态
      columns: [
        {
          type: "select",
          label: "当前流程状态",
          field: "reviewStatus",
          width: 120,
          tipRight: {
            show: "[%=reviewStatus%]===3||[%=reviewStatus%]===6",
            title: "原因",
            style:
              "font-size: 20px;color: rgb(246 76 155);top: 0px;right: 0px;transform: translate(25px, 4px);",
            tipRightField: [
              {
                field: "reviewMark",
                type: "array",
              },
              "reviewMark2",
            ],
          },
          options: [
            {
              label: "待审核",
              value: 2,
              class: "status-draft",
            },
            {
              label: "已通过",
              value: 4,
              class: "status-primary",
            },
            {
              label: "不通过",
              value: 3,
              class: "status-danger",
            },
          ],
        },
        {
          width: 120,
          type: "select",
          label: "导入状态",
          field: "inSource",
          options: [
            {
              label: "画家服务",
              value: 1,
            },
            {
              label: "未导入",
              value: 2,
            },
            {
              label: "已导入",
              value: 3,
            },
          ],
        },
        {
          width: 120,
          label: "画作名称",
          field: "artworkName",
          type: "link",
          linkConfig: {
            type: "dialog",
          },
        },
        {
          width: 120,
          label: "画作编号",
          field: "tfnum",
        },
        {
          width: 120,
          label: "画家姓名",
          field: "artistShowCount",
        },
        {
          width: 120,
          label: "画家编号",
          field: "tnum",
        },
        {
          width: 120,
          type: "select",
          label: "画作类型",
          field: "artworkType",
          options: [
            {
              label: "优秀画作",
              value: 1,
            },
            {
              label: "赠画",
              value: 2,
            },
            {
              label: "卷轴",
              value: 3,
            },
            {
              label: "普通画作",
              value: 4,
            },
          ],
        },
        {
          label: "宽度",
          field: "width",
        },
        {
          label: "长度",
          field: "length",
        },
        {
          label: "平尺数",
          field: "ruler",
        },
        {
          popover: true,
          type: "image",
          label: "画作高清图",
          field: "hdPic",
          width: 120,
        },
        {
          popover: true,
          type: "image",
          label: "画家画作合影",
          field: "artistPhoto",
          width: 120,
        },
        {
          popover: true,
          type: "image",
          label: "画作人名章图",
          field: "sealPic",
          width: 120,
        },
        {
          label: "申请时间",
          field: "createdAt",
          width: 120,
        },
        {
          width: 120,
          type: "select",
          label: "国展",
          field: "nationalExhibition",
          options: [
            {
              label: "无",
              value: 1,
            },
            {
              label: "入围国展",
              value: 2,
            },
            {
              label: "入选国展",
              value: 3,
            },
          ],
        },
        {
          label: "操作时间",
          field: "reviewUpdatedAt",
          width: 120,
        },
        {
          label: "操作",
          minWidth: "100px",
          actions: [
            {
              actionLoadingField: "btnPass",
              type: "primary",
              actionType: "pass",
              label: "通过",
              show: "[%=reviewStatus%]===2",
              notemit: true,
              shape: "round",
              class: "fl-ma-xs",
              permission: "r_ps_wb_artwork_base_btn_pass",
            },
            {
              type: "danger",
              actionType: "unpass",
              label: "不通过",
              show: "[%=reviewStatus%]===2",
              shape: "round",
              class: "fl-ma-xs",
              permission: "r_ps_wb_artwork_base_btn_unpass",
            },
            {
              type: "danger",
              actionType: "restart",
              label: "重新审批",
              show: "[%=reviewStatus%]!==2",
              shape: "round",
              class: "fl-ma-xs",
            },
          ],
        },
      ],
    },
  },
  historyConfig: {
    slotRight: true,
    slotRightClass: "col-12 row justify-end",
    rowKey: "artistUid",
    refreshCount: 0,
    tableMaxHeight: 600,
    listUrl: {
      url: "api/backend/artwork/viewReviewArtistStatic/query",
      params: [{ label: "mode", value: 2 }],
    },
    searchConfig: [
      {
        type: "text",
        label: "画家姓名",
        field: "artistName",
      },
      {
        type: "text",
        label: "画家编号",
        field: "tnum",
      },
    ],
    columns: [
      {
        width: 120,
        label: "画家姓名",
        field: "artistShowCount",
      },
      {
        width: 100,
        label: "画家编号",
        field: "tnum",
      },

      {
        label: "画作总平尺数",
        field: "rulerTotal",
      },
      {
        width: 120,
        type: "slot",
        slotName: "artworkinfo",
        label: "画作情况",
      },
    ],
    expandConfig: {
      rowKey: "artworkUid",
      refreshCount: 0,
      listUrl: {
        url: "api/backend/artwork/auditFlow/baseReviewList",
        params: [
          { label: "history", value: true },
          { label: "artistUid", field: "artistUid" },
        ],
      },
      tableMaxHeight: 600,
      // 画作名称 流程状态
      columns: [
        {
          type: "select",
          label: "当前流程状态",
          field: "reviewStatus",
          width: 120,
          tipRight: {
            show: "[%=reviewStatus%]===3||[%=reviewStatus%]===6",
            title: "原因",
            style:
              "font-size: 20px;color: rgb(246 76 155);top: 0px;right: 0px;transform: translate(25px, 4px);",
            tipRightField: [
              {
                field: "reviewMark",
                type: "array",
              },
              "reviewMark2",
            ],
          },
          options: [
            {
              label: "待审核",
              value: 2,
              class: "status-draft",
            },
            {
              label: "已通过",
              value: 4,
              class: "status-primary",
            },
            {
              label: "不通过",
              value: 3,
              class: "status-danger",
            },
          ],
        },
        {
          width: 120,
          type: "select",
          label: "导入状态",
          field: "inSource",
          options: [
            {
              label: "画家服务",
              value: 1,
            },
            {
              label: "未导入",
              value: 2,
            },
            {
              label: "已导入",
              value: 3,
            },
          ],
        },
        {
          width: 120,
          label: "画作名称",
          field: "artworkName",
          type: "link",
          linkConfig: {
            type: "dialog",
          },
        },
        {
          width: 120,
          label: "画作编号",
          field: "tfnum",
        },
        {
          width: 120,
          label: "画家姓名",
          field: "artistShowCount",
        },
        {
          width: 120,
          label: "画家编号",
          field: "tnum",
        },
        {
          width: 120,
          type: "select",
          label: "画作类型",
          field: "artworkType",
          options: [
            {
              label: "优秀画作",
              value: 1,
            },
            {
              label: "赠画",
              value: 2,
            },
            {
              label: "卷轴",
              value: 3,
            },
            {
              label: "普通画作",
              value: 4,
            },
          ],
        },
        {
          label: "宽度",
          field: "width",
        },
        {
          label: "长度",
          field: "length",
        },
        {
          label: "平尺数",
          field: "ruler",
        },
        {
          popover: true,
          type: "image",
          label: "画作高清图",
          field: "hdPic",
          width: 120,
        },
        {
          popover: true,
          type: "image",
          label: "画家画作合影",
          field: "artistPhoto",
          width: 120,
        },
        {
          popover: true,
          type: "image",
          label: "画作人名章图",
          field: "sealPic",
          width: 120,
        },
        {
          label: "申请时间",
          field: "createdAt",
          width: 120,
        },
        {
          width: 120,
          type: "select",
          label: "国展",
          field: "nationalExhibition",
          options: [
            {
              label: "无",
              value: 1,
            },
            {
              label: "入围国展",
              value: 2,
            },
            {
              label: "入选国展",
              value: 3,
            },
          ],
        },
        {
          label: "提交时间",
          field: "reviewUpdatedAt",
          width: 120,
        },
        {
          width: 120,
          label: "操作",
          type: "exporttablecolumnfield",
        },
      ],
    },
  },
});
onBeforeMount(() => { });

onMounted(() => { });
watch(
  () => state.pageType,
  (val) => {
    state.pageTableVisible = false;
    nextTick(() => {
      state.pageTableVisible = true;
    });
  }
);

const calcItemVisible = (permission) => {
  return $hadRule(permission);
};
const handleOpenArtworkSel = () => {
  state.screenDialogVisible = true;
  state.screenOpenCount++;
}

const handleExport = () => {
  state.exportDialogVisible = true;
  state.openCount++;
};

const handleCloseExport = () => {
  state.exportDialogVisible = false;
};
const handleScreenCloseExport = () => {
  state.screenDialogVisible = false;
}
const handleRowActions = (btnConfig, rowData) => {
  if (btnConfig.actionType === "btnSubmit") {
    let url = "api/backend/artwork/auditFlow/baseReviewAudit";
    let params = getParamsByObj(
      {},
      [{ label: "cacheArtistUid", field: "artistUid" }],
      rowData
    );
    rowData[btnConfig.actionLoadingField] = true;
    $request.HTTP.components.postDataByParams(url, params).then(
      (res) => {
        if (res.status === 0) {
          state[state.pageType].refreshCount++;
        } else {
          processError(res.msg);
        }
        rowData[btnConfig.actionLoadingField] = false;
      },
      (err) => {
        rowData[btnConfig.actionLoadingField] = false;
        processError(err.response.data.msg);
      }
    );
  }
  if (btnConfig.actionType === "pass") {
    handlePass(btnConfig, rowData)
  }
  if (btnConfig.actionType === "unpass") {
    handleUnpass(rowData);
  }
  if (btnConfig.actionType === "reject") {
    handleReject(rowData);
  }
  if (btnConfig.actionType === "restart") {
    handleRestart(rowData);
  }
};
const handlePass = (btnConfig, rowData) => {
  let url = "api/backend/artwork/auditFlow/baseReviewAudit/save";
  let params = getParamsByObj(
    {},
    [
      { label: "artworkUid", field: "artworkUid" },
      { label: "artistUid", field: "artistUid" },
      {
        label: "reviewStatus",
        value: 4,
      },
    ],
    rowData
  );
  rowData[btnConfig.actionLoadingField] = true;
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state[state.pageType].refreshCount++;
        state[state.pageType].expandConfig.refreshCount++;
      } else {
        processError(res.msg);
      }
      rowData[btnConfig.actionLoadingField] = false;
    },
    (err) => {
      rowData[btnConfig.actionLoadingField] = false;
      processError(err.response.data.msg);
    }
  );
}
const handleRestart = (rowData) => {
  state.dialogData.title = "重新审批";
  state.dialogData.type = "restart";
  state.dialogFormData = {
    defaultStatus: rowData.reviewStatus,
    newStatus: 4,
    remark: [],
    remark2: rowData.reviewMark2,
    defaultData: rowData,
  };
  state.clickRowData = JSON.parse(JSON.stringify(rowData));
  state.modalVisible = true;
};
const handleUnpass = (rowData) => {
  state.dialogData.title = "请填写不通过理由";
  state.dialogData.type = "unpass";
  state.dialogFormData = {
    defaultStatus: rowData.reviewStatus,
    newStatus: 3,
    remark: [],
    remark2: "",
  };
  state.clickRowData = JSON.parse(JSON.stringify(rowData));
  state.modalVisible = true;
};
const handleReject = (rowData) => {
  state.dialogData.title = "请填写驳回理由";
  state.dialogData.type = "reject";
  state.dialogFormData = {
    defaultStatus: rowData.reviewStatus,
    newStatus: 6,
    remark: [],
    remark2: "",
  };
  state.clickRowData = JSON.parse(JSON.stringify(rowData));
  state.modalVisible = true;
};
const handleValChange = (val, field) => {
  state.dialogFormData[field] = val;
  if (field === "newStatus") {
    if (state.dialogFormData.newStatus === 3) {
      state.dialogFormData.remark = state.dialogFormData.defaultData.reviewMark
        ? state.dialogFormData.defaultData.reviewMark.split(",")
        : [];
      state.dialogFormData.remark2 =
        state.dialogFormData.defaultData.reviewMark2.replace(
          "[复审不通过]:\n",
          ""
        );
      return;
    }
    state.dialogFormData.remark = [];
    state.dialogFormData.remark2 = "";
  }
};

const handleDialogConfirm = () => {
  let submitData = JSON.parse(JSON.stringify(state.dialogFormData));
  if (
    submitData.newStatus === 3 &&
    submitData.remark.length === 0 &&
    submitData.remark2.length === 0
  ) {
    processError("请选择或填写理由！");
    return;
  }
  let url = "api/backend/artwork/auditFlow/baseReviewAudit/save";
  let params = getParamsByObj(
    {},
    [
      { label: "artworkUid", field: "artworkUid" },
      { label: "artistUid", field: "artistUid" },
      {
        label: "reviewStatus",
        value: submitData.newStatus,
      },
    ],
    state.clickRowData
  );
  params.reviewMark = submitData.remark.join(",");
  params.reviewMark2 = submitData.remark2;
  state.btnLoading = true;
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.modalVisible = false;
        state[state.pageType].refreshCount++;
        state[state.pageType].expandConfig.refreshCount++;
      } else {
        processError(res.msg);
      }
      state.btnLoading = false;
    },
    (err) => {
      state.btnLoading = false;
      processError(err.response.data.msg);
    }
  );
};
const handleLookHis = (rowData) => {
  state.hisData = [];
  let url = "api/artistInfoArtwork/artworkBaseAuditHistory/query";
  let params = getParamsByObj(
    {},
    [{ label: "artworkUid", field: "artworkUid" }],
    rowData
  );
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.hisData = res.data.Data || [];
        nextTick(() => { });
      } else {
        processError(res.msg);
      }
    },
    (err) => {
      processError(err.response.data.msg);
    }
  );
};
const getPopupContainer = () => {
  return document.getElementById("artistartworkpro");
};
</script>
<style lang="scss" scoped>
:deep(.ant-popover-inner) {
  background-color: #817a7a;
  background-clip: padding-box;
  border-radius: 20px;
}
:deep(.ant-popover-title) {
  color: #e2e2e2;
}
:deep(.ant-popover-inner-content) {
  color: #e2e2e2;
}
.detail-info {
  max-height: 360px;
  overflow: auto;
  padding: 0px 0px 0 30px;
  .items {
    padding-left: 20px;
    margin-top: 20px;
    padding-bottom: 5px;
    border-left: 2px solid #aebdce;
    position: relative;
  }
  .clirc-div {
    position: absolute;
    top: -23px;
    left: -50px;
    width: 100px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .no-border {
    border: none;
  }
}
:deep( .ant-btn:active,
.ant-btn:hover,
.ant-btn:focus ) {
  border-color: transparent !important;
}
</style>
