<!-- 其他任务 -->
<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.branchName"
                placeholder="请输入"
                maxlength="32"
                clearable
              />
            </el-form-item>
            <el-form-item label="发布部门">
              <el-input
                v-model="query.deptName"
                placeholder="请输入"
                maxlength="32"
                clearable
              />
            </el-form-item>
            <el-form-item label="发布人">
              <el-input
                v-model="query.taskInitiator"
                placeholder="请输入"
                maxlength="32"
                clearable
              />
            </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="exportData"
              >导出
              </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"
          icon="el-icon-plus"
          @click="toAdd"
        >新增
        </el-button>
        <el-button
          type="reset"
          :disabled="selectrows.length === 0"
          icon="el-icon-delete"
          @click="toMultDelete"
        >删除
        </el-button>
        <el-button
          type="reset"
          :disabled="selectrows.length === 0"
          icon="el-icon-upload"
          @click="toPublish"
        >发布
        </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"
        highlight-current-row
        @row-click="rowClick"
      >
        <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="90"-->
        <!--            prop="branchCode"-->
        <!--          >-->
        <!--          </el-table-column>-->
        <el-table-column
          align="center"
          label="发布单位"
          show-overflow-tooltip
          min-width="180"
          prop="branchName"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="发布部门"
          show-overflow-tooltip
          min-width="180"
          prop="deptName"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="发布人"
          show-overflow-tooltip
          min-width="180"
          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="90"
          prop="taskStatus"
        >
          <template v-slot="{ row }">
            <el-tag v-if="row.taskStatus === '已逾期'" type="danger">已逾期</el-tag>
            <el-tag v-else-if="row.taskStatus === '已完成'" type="success">已完成</el-tag>
            <el-tag v-else type="info">未完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          show-overflow-tooltip
          min-width="90"
          prop="status"
        >
          <template v-slot="{ row }">
            <el-tag v-if="row.status === '1'">已发布</el-tag>
            <el-tag v-else-if="row.status === '2'">已办结</el-tag>
            <el-tag v-else type="info">未发布</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          width="130px"
          align="center"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="link-container">
              <el-link class="table-opretar" type="primary" @click="toEdit(scope.row)">
                {{ scope.row.status === '0' && isMe(scope.row) ? '编辑' : '查看' }}
              </el-link>
              <el-link v-if="scope.row.status === '1' && isMe(scope.row)" class="table-opretar" type="primary"
                       @click="toWithdraw(scope.row)">
                撤回
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格页脚 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :pageSizes="[5, 10, 20, 50]"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getTableList"
      />
    </el-card>
    <BranchOtherTask customLoad :isPublish="false" :taskId="selectTask.id"  :isComponentCall="true" :isTask="0"></BranchOtherTask>
    <EditDialog ref="editDialog" @refresh="getTableList"></EditDialog>
    <RemarkDialog ref="remarkDialog" @refresh="getTableList"></RemarkDialog>
  </div>

</template>

<script>
import EditDialog from "./components/EditDialog";
import RemarkDialog from "./components/RemarkDialog";
import TableMixin from "@/mixins/table-mixin";
import {pageListInfo, delInfo, withdrawOther, publishOther} from "@/api/task/info";
import BranchOtherTask from '@/views/task-distribut/feedback/other-task';
import {
  getAllTree,
} from "@/api/system/dept";

export default {
  components: {
    EditDialog,
    BranchOtherTask,
    RemarkDialog
  },
  dicts: ['task_type'], // 添加字典声明
  mixins: [TableMixin],
  pageInfo: {
    title: '其他任务',
    exportUrl: '/task/other/export',
    pageListApi: pageListInfo,
    deleteApi: delInfo,
  },
  data() {
    return {
      selectTask: {},
      dateRange: [],
    };
  },
  methods: {
    toPublish() {
      const ids = this.selectrows.map((item) => item.id);
      publishOther(ids).then(() => {
        this.$message.success('发布成功');
        this.getTableList();
      });
    },
    dateRangeChange(val) {
      this.query.startDate = val?.[0];
      this.query.endDate = val?.[1];
    },
    isMe(row) {
      return !row.publisher || row.publisher == this.$store.getters?.userInfo?.userId;
    },
    toWithdraw(row) {
      this.$confirm('确定撤回到未发布状态吗？', '温馨提示', {
        type: 'warning'
      }).then(res => {
        withdrawOther(row.id).then(() => {
          this.$message.success('撤回成功');
          this.getTableList();
        });
      });
    },
    rowClick(row) {
      this.selectTask = row;
    },
    didGetTableList(success) {
      // if (this.tableData.length > 0) {
      //   this.$refs.multipleTable.setCurrentRow(this.tableData[0]);
      //   this.selectTask = this.tableData[0];
      // } else {
      //   this.$refs.multipleTable.setCurrentRow();
      //   this.selectTask = {};
      // }
    },
    MXDefaultPage() {
      return {
        pageNum: 1,
        pageSize: 5,
      };
    },
    toRemark(row) {
      this.$refs.remarkDialog.open(row);
    },
    // 设为私有
    // toPrivate(row) {
    //   this.$confirm(`确定设置为${row.affiliation ? '公开':'私有'}吗？`, '温馨提示', {
    //     type: 'warning'
    //   }).then(res => {
    //     editByAffiliation(row.id).then(() => {
    //       this.$message.success('设置成功');
    //       this.getTableList();
    //     });
    //   });
    // }
  }
};
</script>

<style scoped>
.link-container {
  display: flex;
  gap: 10px; /* 设置元素之间的间距 */
}
</style>
