<template>
  <div v-loading="tableLoading">
    <el-card class="query-container" shadow="never">
      <!-- 表格查询条件 -->
      <div>
        <div :span="24">
          <el-form ref="seachForm" :inline="true" class="demo-form-inline">
            <el-form-item label="任务名称">
              <el-input
                v-model="query.taskTitle"
                placeholder="请输入"
                maxlength="32"
                clearable
              />
            </el-form-item>
            <el-form-item label="任务类型">
              <el-select
                v-model="query.taskType"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="dict in dict.type.task_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="任务内容">
              <el-input
                v-model="query.taskContent"
                placeholder="请输入"
                maxlength="32"
                clearable
              />
            </el-form-item>
<!--            <el-form-item label="任务状态">-->
<!--              <el-input-->
<!--                v-model="query.status"-->
<!--                placeholder="请输入"-->
<!--                maxlength="32"-->
<!--                clearable-->
<!--              />-->
<!--            </el-form-item>-->
            <el-form-item label="任务状态">
              <el-select
                v-model="query.taskStatus"
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option
                  v-for="dict in dict.type.task_status"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="任务期限">
              <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" placeholder="选择日期"
                              @change="dateRangeChange" style="width: 220px;" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="queryTable"
              >
                查询
              </el-button>
              <el-button
                type="reset"
                icon="el-icon-refresh"
                @click="resetQueryTable"
              >
                重置
              </el-button>
              <el-button
                type="reset"
                icon="el-icon-download"
                @click="handleExport"
              >导出
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>

    <el-card class="el-row-main-container box-card box-card--table">
      <div class="table-top-opretar">
        <el-button
          type="primary"
          :disabled="selectrows.length < 1"
          icon="el-icon-upload"
          @click="openAssignTaskDialog"
        >
          指派任务
        </el-button>
        <el-button
          type="primary"
          :disabled="selectrows.length < 1"
          icon="el-icon-back"
          @click="withdrawTask"
        >
          撤回任务
        </el-button>
      </div>
      <!-- 表格主体 -->
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        class="w100p"
        @selection-change="handleSelectionChange"
        border
        @sort-change="sortChange"
        :default-sort="tableSort"
        header-cell-class-name="duojibiaotou"
      >
        <el-table-column type="selection" width="50" fixed /> <!-- 添加选择列 -->
        <el-table-column
          align="center"
          label="任务名称"
          show-overflow-tooltip
          min-width="160"
          prop="taskTitle"
        />
        <el-table-column label="任务类型" align="center" prop="taskType" sortable='custom' min-width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.task_type" :value="scope.row.taskType"/>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="任务内容"
          show-overflow-tooltip
          min-width="160"
          prop="taskContent"
        />
<!--        <el-table-column-->
<!--          align="center"-->
<!--          label="发布单位"-->
<!--          show-overflow-tooltip-->
<!--          min-width="160"-->
<!--          prop="branchName"-->
<!--        >-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--          align="center"-->
<!--          label="发布部门"-->
<!--          show-overflow-tooltip-->
<!--          min-width="160"-->
<!--          prop="deptName"-->
<!--        >-->
<!--        </el-table-column>-->
        <el-table-column
          align="center"
          label="发布单位"
          show-overflow-tooltip
          min-width="160"
          prop="branchNameParent"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="发布部门"
          show-overflow-tooltip
          min-width="160"
          prop="branchName"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="发布人"
          show-overflow-tooltip
          min-width="160"
          prop="taskInitiator"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="任务期限"
          show-overflow-tooltip
          min-width="200"
          prop="startToEndDate"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="办理单位"
          show-overflow-tooltip
          min-width="120"
          prop="transactBranchName"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="办理部门"
          show-overflow-tooltip
          min-width="120"
          prop="transactDeptName"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="办理人"
          show-overflow-tooltip
          min-width="120"
          prop="transactInitiator"
        >
        </el-table-column>
        <el-table-column label="任务状态" align="center" prop="taskStatus" sortable='custom'   min-width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          show-overflow-tooltip
          min-width="90"
        >
          <template v-slot="{ row }">
            <template v-if="row.sdTaskOther && row.sdTaskOther.status === '2'">
              <el-tag
                type="success">已办结</el-tag>
            </template>
            <template v-else-if="row.sdTaskOtherFeedbackByCreate">
              <el-tag v-if="row.sdTaskOtherFeedbackByCreate.status === '1'"
              >已反馈</el-tag
              >
              <el-tag
                v-else-if="row.sdTaskOtherFeedbackByCreate.status === '2'"
                type="success"
              >已通过</el-tag
              >
              <el-tag
                v-else-if="row.sdTaskOtherFeedbackByCreate.status === '-1'"
                type="danger"
              >驳回</el-tag
              >
              <el-tag v-else type="info">未反馈</el-tag>
            </template>
            <el-tag v-else type="info">未反馈</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="80px" align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-link
              class="table-opretar"
              type="primary"
              @click="toEdit(scope.row)"
            >{{ getRowEditTitle(scope.row) }}</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格页脚 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getTableList"
      />
    </el-card>
    <AuditDialog ref="editDialog" :isAudit="!isPublish" @refresh="getTableList"></AuditDialog>
    <AssignTaskDialog ref="assignTaskDialog" @reload-data="reloadData"/>
  </div>
</template>

<script>
import AuditDialog from "@/views/task-distribut/send/other-task/components/AuditDialog";
import TableMixin from "@/mixins/table-mixin";
import { pageListByBranch } from "@/api/task/branch";
import AssignTaskDialog from "./components/AssignTaskDialog";
import { addByUser, deleteByUser } from "@/api/task/branch";
import { listUser } from "@/api/system/user";

export default {
  name: "BranchOtherTask",
  components: {
    AuditDialog,
    AssignTaskDialog,
  },
  dicts: ['task_type','task_status'],
  mixins: [TableMixin],
  pageInfo: {
    title: "机构任务",
    pageListApi: pageListByBranch,
    defaultQuery: {
      isPublish: "1",
      taskId: "",
    },
  },
  props: {
    customLoad: {
      type: Boolean,
      default: false,
    },
    isPublish: {
      type: Boolean,
      default: true,
    },
    taskId: {
      type: [Number, String],
      default: "",
    },
    isComponentCall: {
      type: Boolean,
      default: false,
    }
  },
  watch: {
    taskId(val) {
      this.$options.pageInfo.defaultQuery.taskId = val;
      this.tableData = [];
      if (!val) {
        return;
      }
      this.resetQueryTable();
    },
  },
  data() {
    return {
      dateRange: [],
      selectrows: [],
    };
  },
  methods: {
    dateRangeChange(val) {
      this.query.startDate = val?.[0];
      this.query.endDate = val?.[1];
    },
    MXCreated() {
      this.$options.pageInfo.defaultQuery.taskId = null;
      this.query.taskId = null;
      this.$options.pageInfo.customLoad = this.customLoad;
      this.$options.pageInfo.defaultQuery.isPublish = this.isPublish ? "1" : "";
      this.query.isPublish = this.$options.pageInfo.defaultQuery.isPublish;

      // 根据是否是组件调用设置 isTask 参数
      this.$options.pageInfo.defaultQuery.isTask = this.isComponentCall ? "0" : "1";
      this.query.isTask = this.$options.pageInfo.defaultQuery.isTask;
    },
    getRowEditTitle(row) {
      if (row.sdTaskOther && row.sdTaskOther.status === '2') {
        return "查看";
      }
      if (this.isPublish) {
        if (
          !row.sdTaskOtherFeedbackByCreate?.status ||
          row.sdTaskOtherFeedbackByCreate?.status === "0" ||
          row.sdTaskOtherFeedbackByCreate?.status === "-1"
        ) {
          return "反馈";
        }
        return "查看";
      }
      if (row.sdTaskOtherFeedbackByCreate?.status === "1") {
        return "审核";
      }
      return "查看";
    },
    handleExport() {
      this.download('/task/branch/exportByAssigned', {
        ...this.queryParams
      }, `任务交办_${new Date().getTime()}.xlsx`)
    },
    handleSelectionChange(selection) {
      this.selectrows = selection;
    },
    openAssignTaskDialog() {
      const taskIds = this.selectrows.map(row => row.id);
      this.$refs.assignTaskDialog.open(taskIds);
    },
    reloadData() {
      this.queryTable();
    },
    async withdrawTask() {
      if (this.selectrows.length === 0) {
        this.$message.warning('请选择要撤回的任务');
        return;
      }
      const taskIds = this.selectrows.map(row => row.id);
      try {
        await deleteByUser({ taskIds });
        this.$message.success('任务撤回成功');
        this.reloadData();
      } catch (error) {
        this.$message.error('任务撤回失败：' + error.message);
      }
    }
  },
  created() {
    this.MXCreated();
  }
};
</script>
