<template>
  <div class="index-container height-100">
    <fl-table
      :config="state.tableConfig"
      :refreshCount="state.tableConfig.refreshCount"
      @triggerRowActions="handleRowActions"
      @triggerTableBatchActions="handleTableBatchActions"
      @selectChidren="handleSelectChidren"
      @selectAllChidren="handleSelectAllChidren"
      @triggerExpandRow="handleExpandRow"
      @triggerTableData="handleTableData"
    >
    </fl-table>
  </div>
  <a-modal
    v-model:visible="state.dialogVisible"
    :title="state.dialogData.title"
    :confirm-loading="state.btnLoading"
    centered
    @ok="handleDialogConfirm"
  >
    <div class="row" style="font-size: 18px">
      {{ state.dialogData.content }}
    </div>
  </a-modal>
</template>
<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  watch,
  nextTick,
} from "vue";
import flTable from "@/components/layout/table/commonTable.vue";
import { getParamsByObj } from "@/utils/helper/form";
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
import { processError, processSuccess } from "@/utils/helper/message";

const state = reactive({
  tableConfig: {
    rowKey: "artistUid",
    refreshCount: 0,
    listUrl: {
      url: "api/contract/contractArtistStatList",
      params: [],
    },
    // 画家姓名
    searchConfig: [
      {
        type: "text",
        label: "画家姓名",
        field: "artistName",
      },
    ],
    columns: [
      {
        type: "select",
        label: "状态",
        field: "generateStatus",
        options: [
          {
            label: "未发起",
            value: 1,
          },
          {
            label: "已发起",
            value: 2,
          },
          {
            label: "已签署",
            value: 3,
          },
        ],
      },
      {
        width: 120,
        label: "画家姓名",
        field: "artistShowCount",
      },
      {
        label: "笔名",
        field: "penName",
      },
      { type: "tooltip", label: "联系地址", field: "address" },
      {
        label: "手机号",
        field: "telNum",
      },
      {
        label: "身份证号",
        field: "idNum",
      },
      {
        type: "actions",
        label: "操作",
        actions: [
          {
            actionType: "batch_one",
            show: "[%=generateStatus%]===1",
            type: "primary",
            shape: "round",
            label: "一键发起",
            permission: "r_ps_contract_btn_contract1",
            url: "api/contract/batchCreate",
            params: [],
          },
          {
            actionType: "batch_one_again",
            show: "[%=generateStatus%]===2||[%=generateStatus%]===3",
            type: "primary",
            shape: "round",
            label: "再次发起",
            permission: "r_ps_contract_btn_contract1",
            url: "api/contract/reBatchCreate",
            params: [],
          },
        ],
      },
    ],
    expandConfig: {
      rowKey: "artworkUid",
      refreshCount: 0,
      slotLeft: true,
      hasSelection: true,
      listUrl: {
        url: "api/contract/artworkList",
        params: [
          {
            label: "artistUid",
            field: "artistUid",
          },
          {
            label: "status",
            value: 2,
          },
        ],
      },
      columns: [
        {
          type: "select",
          label: "发起状态",
          field: "hasContract",
          options: [
            {
              label: "未发起",
              value: 1,
            },
            {
              label: "已发起",
              value: 2,
            },
          ],
        },
        {
          label: "画作名称",
          field: "artworkName",
        },
        {
          sorter: true,
          width: 100,
          label: "画作编号",
          field: "tfnum",
        },
        {
          type: "image",
          label: "画作小图",
          field: "hdPic",
        },
        {
          type: "image",
          label: "画作合影",
          field: "artistPhoto",
        },
        {
          label: "宽度(cm)",
          field: "width",
        },
        {
          label: "长度(cm)",
          field: "length",
        },
        {
          label: "平尺数",
          field: "ruler",
        },
        {
          label: "落款时间",
          field: "inscribeDate",
        },
        {
          label: "起始创作时间",
          field: "createdDate",
        },
      ],
      topSelectCountShow: true,
      topSelectCountStyle: "margin-right:20px",
      topSelectCountLeftTitle: "已勾选",
      topSelectCountRightTitle: "幅画作",
    },
  },
  btnLoading: false,
  dialogVisible: false,
  dialogData: {},
  selectData: [],
  expandFirstData: null,
  tableData: [],
});
onBeforeMount(() => {});

onMounted(() => {});

const handleRowActions = (btnConfig, rowData) => {
  if (["batch_one", "batch_one_again"].includes(btnConfig.actionType)) {
    console.log(state.expandFirstData);
    console.log(state.tableData);
    if (state.selectData.length === 0) {
      return processError("尚未选择画作！");
    }
    if (state.expandFirstData === null || state.tableData.length === 0) {
      return processError("请先选择画作！");
    }
    if (state.expandFirstData?.artistUid !== rowData.artistUid) {
      return processError("请先选择画家下的画作！");
    }
    state.dialogData.title = "提示";
    let artworksName = state.selectData
      .map((item) => {
        return "《" + item.artworkName + "》";
      })
      .join("、");
    let artworksCount = state.selectData.length;
    let contractName = btnConfig.label;
    state.dialogData.content = `您已选择${artworksName} （共计${artworksCount} 幅画作）生成“${contractName} ”，是否继续操作？`;
    state.dialogData.selectData = state.selectData;
    state.dialogData.btnConfig = btnConfig;
    state.dialogVisible = true;
  }
};

const handleTableBatchActions = (tableSelectData, btnConfig) => {};
const handleSelectChidren = (selectKeys, selectRows) => {
  state.selectData = selectRows;
};
const handleSelectAllChidren = (selectKeys, selectRows) => {
  state.selectData = selectRows;
};
const handleDialogConfirm = () => {
  let selectData = state.dialogData.selectData;
  let btnConfig = state.dialogData.btnConfig;
  let url = btnConfig.url;
  let params = {
    artistUid: selectData[0].artistUid,
    artworkUids: selectData.map((item) => item.artworkUid),
    contractType: [1, 2, 3, 5, 8, 9],
  };
  state.btnLoading = true;
  $request.HTTP.components.postDataByParams(url, params).then(
    (res) => {
      if (res.status === 0) {
        state.tableConfig.expandConfig.refreshCount++;
        processSuccess("操作成功");
      } else {
        processError(res.msg);
      }
      state.btnLoading = false;
      state.dialogVisible = false;
    },
    (err) => {
      state.btnLoading = false;
      state.dialogVisible = false;
      processError(err.response.data.msg);
    }
  );
};
const handleExpandRow = (expanded, record) => {
  if (expanded) {
    state.expandFirstData = record;
  } else {
    state.expandFirstData = null;
  }
};
const handleTableData = (data) => {
  state.tableData = data;
};
</script>
<style scoped></style>
