<!--
  @description:采购项目弹框
  @Modifier：qk
  @routerPath: /shopmall/mailingaddressproject
  @date：  2019/11/28-13:48
-->
<template>
  <div>
    <el-dialog
      :visible.sync="childensData.dialog"
      :close-on-click-modal="false"
      title="采购项目"
      modal-append-to-body
      append-to-body
      width="810px"
      custom-class="shop_mall_dialog"
    >
      <div class="shopmall-page-reconciliation">
        <div class="shopmall-page-left">
          <p>
            <table>项目名称</table>
            <el-input v-model="tenderName" placeholder="请输入项目名称" style="width:60%;" />
          </p>
        </div>
        <div class="shopmall-page-right">
          <el-button class="btn" @click="searchList">
            搜索
          </el-button>
          <el-button class="defalutBtn" @click="resetList">
            重置
          </el-button>
        </div>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :row-key="getRowKey"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          :reserve-selection="true"
          type="selection"
          width="50"
          align="center"
        />
        <el-table-column
          prop="tenderName"
          label="项目名称"
          min-width="120"
        />
        <el-table-column
          prop="tenderNo"
          label="项目编号"
          min-width="150"
        />
        <el-table-column
          prop="tenderType"
          label="项目类型"
          min-width="100"
          align="center"
        />
        <el-table-column
          label="发布日期"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ $Moment(scope.row.createTime).format(momentDate) }}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination shopmall-pagination">
        <div class="page-number fl">
          共{{ pages }}页 {{ total }}条
        </div>
        <el-pagination
          :current-page="currentPage1"
          :page-size="size"
          :total="total"
          class="fr"
          layout="prev, pager, next, sizes"
          @current-change="pickHandle"
          @size-change="handleSizeChange"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="defalutBtn" @click="childensData.dialog = false">取 消</el-button>
        <el-button class="btn" @click="doneAddClickBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTenderProjectList } from '@/api/shoppingmall/order'
export default {
  name: 'ConstrastAdds',
  props: {
    childensData: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      currentPage1: 1,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      size: 10,
      pages: 1,
      listData: [],
      tenderName: ''
    }
  },
  watch: {
    'childensData.dialog'(val) {
      this.getTenderProjectListInit()
    }
  },
  created() {
    this.getTenderProjectListInit()
  },
  methods: {
    // 搜索
    searchList() {
      this.getTenderProjectListInit()
    },
    // 重置
    resetList() {
      this.tenderName = ''
      this.getTenderProjectListInit()
    },
    // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
    doneAddClickBtn() {
      this.childensData.dialog = false
      this.$emit('wathData', this.listData)
    },
    handleSelectionChange(val) {
      // if (val.length > 1) {
      //   this.$refs.multipleTable.clearSelection()
      //   this.$refs.multipleTable.toggleRowSelection(val.pop())
      //   this.listData = val
      // } else {
      // this.multipleSelection = val.pop()
      // this.listData = val.pop()

      // }
      // console.log(val)
      // this.multipleSelection = val
      this.listData = val
    },
    pickHandle(val) {
      // this.listData = []
      this.pageNo = val
      this.getTenderProjectListInit()
    },
    handleSizeChange(val) {
      // this.listData = []
      this.pageSize = val
      this.getTenderProjectListInit()
    },
    getTenderProjectListInit() {
      const param = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        tenderName: this.tenderName
      }
      getTenderProjectList(param).then(res => {
        this.tableData = res.data.records
        this.currentPage1 = res.data.current
        this.total = res.data.total
        this.size = res.data.size
        this.pages = res.data.pages
      })
    }
  }
}
</script>

<style scoped lang="less">
.pagination{
    width:100%;
    height:60px;
    display: flex;
    justify-content: flex-end;
    align-items: center
}
.shopmall-page-reconciliation{
   width: 100%;
   height: 60px;
   padding:0 15px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom:1px solid rgba(238, 238, 238, 1);
}
.shopmall-page-left {
    display: flex;
    align-items: center;
    width: 90%;
    p{
        display: flex;
        align-items: center;
        table{
            margin-right:10px;
        }
    }
}
.shopmall-page-right{
    width: 10%;
    display: flex;
    justify-content: flex-end;
}
/deep/.el-dialog__footer {
  background-color: #FFF;
}
/deep/.shop_mall_dialog .el-dialog__header {
  background: #fd6b2b !important;
}
.shop_mall_dialog  .btn {
  background-color: #fd6b2b;
  color: #FFF;
  border-color: #fd6b2b;
  &:hover {
    background: #fd6b2b;
    border-color:#fd6b2b;
  }
}
/deep/.shop_mall_dialog .defalutBtn {
  color:#fd6b2b;
  border-color:#fd6b2b;
}
/deep/.shop_mall_dialog .defalutBtn:hover {
  background: none;
  border-color:#fd6b2b;
}
</style>

