<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
      <!-- 查询表单 -->
      <div class="grid-content bg-purple">
        <!-- 合同名称/编号、承兑人名称或出票 -->
        <!-- item.contractNo === this.search ||
      // //       item.acceptorName === this.search ||
      // //       item.drawersName === this.search -->
        <el-input
          v-model="formData.name"
          placeholder="合同名称/编号、承兑人名称或出票..."
          clearable
          style="width: 100%"
          @change="Search"
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </div>
      <!-- 合同状态 -->
      <div class="grid-content bg-purple">
        <el-dropdown @command="handleCommand">
          <div class="pulldown">
            <span v-if="!status" class="el-dropdown-link"> 合同状态 </span>
            <span v-if="status" class="el-dropdown-link">
              {{ status }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="合同状态">合同状态</el-dropdown-item>
            <el-dropdown-item command="全部">全部</el-dropdown-item>
            <el-dropdown-item command="正常">正常</el-dropdown-item>
            <el-dropdown-item command="删除">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <!-- 汇票状态 -->
      <div class="grid-content bg-purple">
        <el-dropdown @command="handlehpCommand">
          <div class="pulldown">
            <span v-if="!hpstatus" class="el-dropdown-link"> 汇票状态 </span>
            <span v-if="hpstatus" class="el-dropdown-link">
              {{ hpstatus }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="汇票状态">汇票状态</el-dropdown-item>
            <el-dropdown-item command="全部">全部</el-dropdown-item>
            <el-dropdown-item command="待审核">待审核</el-dropdown-item>
            <el-dropdown-item command="成功">成功</el-dropdown-item>
            <el-dropdown-item command="失败">失败</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <!-- 审核状态 -->
      <div class="grid-content bg-purple">
        <el-dropdown @command="handleCommandAuditstatus">
          <div class="pulldown">
            <span v-if="!Auditstatus" class="el-dropdown-link"> 审核状态 </span>
            <span v-if="Auditstatus" class="el-dropdown-link">
              {{ Auditstatus }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="审核状态">审核状态</el-dropdown-item>
            <el-dropdown-item command="全部">全部</el-dropdown-item>
            <el-dropdown-item command="待审核">待审核</el-dropdown-item>
            <el-dropdown-item command="成功">成功</el-dropdown-item>
            <el-dropdown-item command="失败">失败</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <!-- 日期查询 -->
      <div class="grid-content bg-purple">
        <div class="block">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="startEndTime"
          />
        </div>
      </div>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="temporaryList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @select="handleSelectionChange"
      @select-all="handleAll"
    >
      <el-table-column align="center" label="" width="55" type="selection" />
      <el-table-column label="合同名称" align="center" prop="name" />
      <el-table-column
        label="合同编号"
        align="center"
        prop="contractNo"
        width="155"
      />
      <el-table-column label="供应商" align="center" prop="supplierName" />

      <el-table-column label="承兑人" align="center" prop="acceptorName" />
      <el-table-column label="出票人" align="center" prop="drawersName" />
      <el-table-column label="汇票状态" align="center" prop="draftStatusText" />
      <el-table-column
        label="合同状态"
        align="center"
        prop="contractStatusText"
      />
      <el-table-column
        class-name="status-col"
        label="审核状态"
        align="center"
        prop="statusText"
      />
      <el-table-column
        align="center"
        label="时间"
        prop="createdAt"
        width="155"
      />
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <el-tag
            type="primary"
            style="cursor: pointer"
            @click="tapDetail(scope.row.id)"
          >查看详情</el-tag>
          <el-tag
           v-permission="['salesman','admin']"
            type="success"
            style="cursor: pointer"
            @click="Ssuccessed(scope.row.id)"
          >
            审核成功</el-tag>
          <el-tag
           v-permission="['salesman','admin']"
            type="danger"
            style="cursor: pointer"
            @click="Sfailed(scope.row.id)"
          >审核失败
          </el-tag>
         <!-- <el-tag
            v-permission="['salesman','admin']"
            style="cursor: pointer"
          >恢复
          </el-tag>
          <el-tag
            v-permission="['salesman','admin']"
            type="danger"
            style="cursor: pointer"
          >删除</el-tag> -->
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; justify-content: space-between">
      <el-row type="flex" justify="space-between">
        <div class="btn" style="display: flex; justify-content: flex-end">
          <el-button
            v-permission="['supplier']"
            type="primary"
            @click="addNewContract"
          >上传合同</el-button>
		  <el-button
		    v-permission="['salesman','admin']"
		    type="primary"
		    @click="successed"
		  >审核成功</el-button>
          <el-button
            v-permission="['salesman','admin']"
            type="primary"
            @click="failed"
          >审核失败</el-button>
         
          <el-button type="primary" @click="Exports">批量导出</el-button>
          <el-button type="success" @click="recover">恢复</el-button>
          <el-button type="danger" @click="deleted">删除</el-button>
        </div>
      </el-row>
      <div class="pagesip">
        <el-button
          type="primary"
          size="small"
          style="
            background-color: #d8ab5a;
            border-color: #d8ab5a;
            margin: 0 20px;
          "
          @click="jumpFirstPage"
        >首页
        </el-button>
        <el-pagination
          ref="pagination"
          background
          layout="total,prev, pager, next"
          :total="total"
          :page-size="pagesize"
          :current-page="currentPage"
          prev-text="上一页"
          next-text="下一页"
          @current-change="handleCurrentChange"
        />
        <el-button
          type="primary"
          size="small"
          style="
            background-color: #d8ab5a;
            border-color: #d8ab5a;
            margin: 0 20px;
          "
          @click="jumpLastPage"
        >尾页
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { dataConversionUtil } from '../../utils/Excel.js'
import { contractsPageApi } from '@/api/contracts'
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      // 表单数据
      formData: {
        startTime: '',
        endTime: '',
        name: '', // 合同名称
        contractNo: '', // 合同编码
        supplierName: '', // 供应商
        acceptorName: '', // 承兑人
        contractStatusText: '', // 合同状态
        contractStatus: '',
        draftStatus: ''
      },
      srcList: [],
      list: [],
      /* 表格数据 */
      temporaryList: [],
      /* 总条数 */
      total: 20,
      listLoading: false,
      status: '',
      hpstatus: '',
      Auditstatus: '',
      search: '',
      /* 当前页数 */
      currentPage: 1,
      /* 每页显示个数 */
      pagesize: 10,
      checked: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      value2: ''
    }
  },
  mounted() {
    this.checked = this.$store.state.user.checked
    this.getData()
  },
  methods: {
    /* ajax发请求获取列表数据 */
    getData(searchForm = {}) {
      const params = {
        pageIndex: this.currentPage,
        pageSize: this.pagesize
      }
      contractsPageApi({ ...params, ...searchForm }).then((res) => {
        const { data } = res
        this.filter = params
        this.temporaryList = data.result
        this.srcList = data.result
        this.total = res.data.total
        console.log(this.temporaryList)
      })
    },

    addNewContract() {
      this.$router.push({
        path: 'contracts/addcontract'
      })
    },
    tapDetail(id) {
      console.log(id)
      this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
    },
    successed() {
      // let successed = this.list.filter(item => item.id === id)
      const ids = Array.from(this.multipleSelection, ({ id }) => id)
      this.$request({
        url: '/api/Contract/manage',
        method: 'post',
        data: {
          ids: ids,
          operateType: 3
        }
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: res.msg
          })
		  this.getData()
        }
      })
    },
    Ssuccessed(id) {
      this.$request({
        url: '/api/Contract/manage',
        method: 'post',
        data: {
          ids: [id],
          operateType: 3
        }
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: res.msg
          })
		  this.getData()
        }
      })
    },
    failed() {
      // let failed = this.list.filter(item => item.id === id)
      const ids = Array.from(this.multipleSelection, ({ id }) => id)
      this.$request({
        url: '/api/Contract/manage',
        method: 'post',
        data: {
          ids: ids,
          operateType: 4
        }
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: res.msg
          })
		  this.getData()
        }
      })
    },
    Sfailed(id) {
      this.$request({
        url: '/api/Contract/manage',
        method: 'post',
        data: {
          ids: [id],
          operateType: 4
        }
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: res.msg
          })
		  this.getData()
        }
      })
    },
    recover(id) {
      const ids = Array.from(this.multipleSelection, ({ id }) => id)
      this.$request({
        url: '/api/Contract/manage',
        method: 'post',
        data: {
          ids: ids,
          operateType: 2
        }
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: res.msg
          })
		  this.getData()
        }
      })
    },
    deleted() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id)
      this.$request({
        url: '/api/Contract/manage',
        method: 'post',
        data: {
          ids: ids,
          operateType: 1
        }
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.msg
          })
		  this.getData()
        } else {
          this.$message({
            type: 'danger',
            message: res.msg
          })
		  this.getData()
        }
      })
    },
    // 合同状态查询
    handleCommand(command) {
      this.status = command
      if (command === '正常') {
        this.formData.contractStatus = 2
      }
      if (command === '删除') {
        this.formData.contractStatus = 1
      }
      if (command === '全部') {
        this.formData.contractStatus = 0
      }
      this.currentPage = 1
      this.searchForm = { ...this.formData }
      this.getData(this.searchForm)
    },

    // 汇票状态查询
    handlehpCommand(command) {
      this.hpstatus = command
      if (command === '全部') {
        this.formData.draftStatus = 0
      }
      if (command === '待审核') {
        this.formData.draftStatus = 1
      }
      if (command === '成功') {
        this.formData.draftStatus = 2
      }
      if (command === '失败') {
        this.formData.draftStatus = 3
      }
      if (command === '删除') {
        this.formData.draftStatus = 4
      }
      this.currentPage = 1
      this.searchForm = { ...this.formData }
      this.getData(this.searchForm)
    },

    // 合同审核状态查询
    handleCommandAuditstatus(command) {
      this.Auditstatus = command
      if (command === '全部') {
        this.formData.approveStatus = 0
      }
      if (command === '待审核') {
        this.formData.approveStatus = 1
      }
      if (command === '成功') {
        this.formData.approveStatus = 2
      }
      if (command === '失败') {
        this.formData.approveStatus = 3
      }
      this.currentPage = 1
      this.searchForm = { ...this.formData }
      this.getData(this.searchForm)
    },

    // 日期审核状态查询
    startEndTime() {
      this.formData.startTime = this.value2[0]
      this.formData.endTime = this.value2[1]
      this.currentPage = 1
      this.searchForm = { ...this.formData }
      this.getData(this.searchForm)
    },
    // 合同名称/编号/承兑人名称/出票查询
    Search() {
      this.currentPage = 1
      this.searchForm = { ...this.formData }
      this.getData(this.searchForm)
    },

    handleSelectionChange(data) {
      this.multipleSelection = data
      console.log(this.multipleSelection)
    },
    handleAll(data) {
      this.multipleSelection = data
      console.log(this.multipleSelection)
    },

    /* 分页功能，改变当前页 */
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData(this.searchForm)
    },

    /* 分页功能：去首页 */
    jumpFirstPage() {
      this.$refs.pagination.handleCurrentChange(1)
      this.$emit('handleCurrentChange', 1)
    },

    /* 分页功能：去尾页 */
    jumpLastPage() {
      const font = this.$refs.pagination
      const cpage = Math.ceil(font.total / font.pageSize)
      font.handleCurrentChange(cpage)
    },

    Exports() {
      var tableHeader = [
        [
          '序号',
          '合同名称',
          '合同编号',
          '承兑人',
          '出票人',
          '汇票状态',
          '合同状态',
          '审核状态',
          '时间'
        ]
      ]
      var dataList = []
      this.multipleSelection.forEach((item, index) => {
        dataList.push([
          index + 1,
          item.name,
          item.contractNo,
          item.acceptorName,
          item.drawersName,
          item.draftStatusText,
          item.contractStatusText,
          item.statusText,
          item.createdAt
        ])
      })
      dataConversionUtil.dataToExcel('合同列表', tableHeader, dataList)
      this.$message.success('导出成功!')
    }
  }
}

</script>
<style lang="scss">
.pulldown {
  width: 185px;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #999999;
}

.pagesip {
  width: 100%;
  margin: 20px auto;
  padding-right: 50px;
  display: flex;
  // align-items: center;
  justify-content: flex-end;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #d8ab5a;
}

.el-col {
  margin-bottom: 20px;
}
.btn {
  padding: 20px;
}
</style>

