<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.actorName"
        placeholder="参与方名称"
        class="filter-item"
        clearable
      />

      <el-input
        v-model="listQuery.housingTicketNumbering"
        placeholder="房票编号"
        class="filter-item"
        clearable
      />

      <!-- <el-input
        v-model="listQuery.username"
        placeholder="请输入用户名"
        class="filter-item"
        clearable
      /> -->

      <el-select
        v-model="listQuery.signStatus"
        class="filter-item"
        placeholder="参与方签署状态"
        clearable
      >
        <el-option
          v-for="(item, index) in statusOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-select
        v-model="listQuery.signTaskStatus"
        class="filter-item"
        placeholder="签署任务状态"
        clearable
      >
        <el-option
          v-for="(item, index) in taskStatusOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-select
        v-model="listQuery.taskType"
        class="filter-item"
        placeholder="请选择类型"
        clearable
      >
        <el-option
          v-for="(item, index) in taskTypeOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
        >搜索</el-button
      >
      <!-- <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreate"
        >新建员工帐号</el-button
      > -->
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
    >
      <el-table-column label="参与方名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.actorName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="房票编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.numbering }}</span>
        </template>
      </el-table-column>

      <el-table-column label="签署链接" align="center">
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.actorSignTaskUrl }}</span> -->
          <a
            target="_blank"
            style="color: blue"
            :href="scope.row.actorSignTaskUrl"
            >{{ scope.row.actorSignTaskUrl }}</a
          >
        </template>
      </el-table-column>

      <el-table-column label="参与方签署状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.signStatus | statusFilter }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="法大大平台合同任务id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.signTaskId }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="签署任务状态" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.signTaskStatus | taskStatusFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="合同名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.taskName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="协议类型" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.taskType | typeFilter }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="180"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.type !== 0"
            type="primary"
            size="mini"
            @click="handleDownLoad(scope.row.signTaskId)"
            >下载合同</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { list, getDownloadUrl } from "@/api/contract";
import Pagination from "@/components/Pagination/index";
import { staffOptions } from "@/utils";
export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        wait_sign: "待签署",
        signed: "已签署",
        sign_rejected: "已拒签",
      };
      return statusMap[status];
    },
    taskStatusFilter(status) {
      const statusMap = {
        sign_progress: "签署中",
        sign_completed: "签署已完成",
        task_finished: "任务已完成",
        expired: "已逾期",
      };
      return statusMap[status];
    },
    // 1 申请书，2 房票协议， 3 自愿放弃协议， 4 四方协议
    typeFilter(type) {
      const typesMap = {
        1: "申请书",
        2: "房票协议",
        3: "自愿放弃协议",
        4: "四方协议",
      };
      return typesMap[type];
    },
  },
  data() {
    return {
      total: 0,
      list: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      listLoading: false,
      staffOptions,
      statusOptions: [
        {
          label: "待签署",
          value: "wait_sign",
        },
        {
          label: "已签署",
          value: "signed",
        },
        {
          label: "已拒签",
          value: "sign_rejected",
        },
      ],
      taskStatusOptions: [
        {
          label: "签署中",
          value: "sign_progress",
        },
        {
          label: "签署已完成",
          value: "sign_completed",
        },
        {
          label: "任务已完成",
          value: "task_finished",
        },
        {
          label: "已逾期",
          value: "expired",
        },
      ],
      taskTypeOptions: [
        // 1: "申请书",
        // 2: "房票协议",
        // 3: "自愿放弃协议",
        // 4: "四方协议",
        {
          label: "申请书",
          value: "1",
        },
        {
          label: "房票协议",
          value: "2",
        },
        {
          label: "自愿放弃协议",
          value: "3",
        },
        {
          label: "四方协议",
          value: "4",
        },
      ],
    };
  },
  created() {
    // this.getBusinessList()
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      list(this.listQuery).then((res) => {
        // console.log(111333);
        this.list = res.d.records;
        this.total = res.d.total;
        this.listLoading = false;
      });
    },
    handleSearch() {
      this.listQuery.current = 1;
      this.getList();
    },
    handleDownLoad(id) {
      getDownloadUrl({ signTaskId: id }).then((res) => {
        const link = document.createElement("a");
        link.href = res.d;
        link.setAttribute("downLoad", "合同");
        window.open(link.href);
        // link.click();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}
.el-select {
  margin-right: 10px;
}
</style>
